static_site

• Static Site Generator

  • Docusaurus - React

• for Wiki

  • Sphinx - Python

    • Themes

    • Static Files

    • Table

    • Diagrams

  • MkDocs - Python

    • mkdocs.yml

• for Blogs

  • Pelican - Python

• Cloudflare Pages

• Github pages

  • Github Actions - SSR

  • Issue Blog

• Free Hosting

• Demos

Static Site Generator

• ISR (incremental static regeneration)

• CSR(client-side rendering)

• SSG (Static Site Generation)

• SSR (server-side rendering)

https://github.com/myles/awesome-static-generators

• Vite powered/Unused JavaScript: https://astro.build/

• Vite & Vue powered: https://github.com/vuejs/vitepress

• Jekyll theme with search : https://github.com/just-the-docs/just-the-docs

• Antora: multi repo into 1: https://docs.antora.org/antora/latest/

• Jupyter: https://curvenote.com/docs/web/notebooks

• RMarkdown: https://rmarkdown.rstudio.com/docs/reference/publish_site.html

Docusaurus - React

• https://opensource.fb.com/projects/docusaurus/

• https://docusaurus.io/docs/creating-pages

• Docs Only: https://docusaurus.io/docs/docs-introduction#docs-only-mode

• Blog Only: https://docusaurus.io/docs/blog#advanced-topics

• Offline Search: https://docusaurus.io/docs/search#using-local-search

• draw / mermaid: https://docusaurus.io/docs/markdown-features/diagrams

for Wiki

Sphinx - Python

reStructuredText -> HTML, PDF, plain text, EPUB, TeX

• Start: https://www.sphinx-doc.org/en/master/tutorial/getting-started.html

• toctree options: https://www.sphinx-doc.org/en/master/usage/restructuredtext/directives.html

GraphiQL: https://github.com/hasura/sphinx-graphiql

Themes

Builtin: https://www.sphinx-doc.org/en/master/usage/theming.html#builtin-themes

• only the Alabaster and Scrolls themes are mobile-optimated

Templating/blocks: https://www.sphinx-doc.org/en/master/development/templating.html#blocks

Read the Docs theme with custom footer: https://github.com/readthedocs/sphinx_rtd_theme/blob/master/sphinx_rtd_theme/footer.html

html_show_sphinx = False # conf.py

# %templates_path%/footer.html    
<div data-gb-custom-block data-tag="extends" data-0='!footer.html'></div>

Static Files

https://www.sphinx-doc.org/en/master/usage/configuration.html

• html_static_path / html_css_files / html_js_files

• html_additional_pages: .html files

Table

https://docs.espressif.com/projects/esp-docs/en/latest/writing-documentation/table.html - span: https://return42.github.io/linuxdoc/linuxdoc-howto/table-markup.html#flat-table

Diagrams

https://chiplicity.readthedocs.io/en/latest/Using_Sphinx/UsingGraphicsAndDiagramsInSphinx.html

MkDocs - Python

mkdocs.yml

• https://github.com/mkdocs/mkdocs/blob/master/mkdocs.yml

• https://github.com/mkdocs/mkdocs/blob/master/mkdocs/tests/integration/complicated_config/mkdocs.yml

• https://gitlab.liris.cnrs.fr/pagoda/tools/mkdocs_template/-/blob/develop/user_config/mkdocs.local.yml

for Blogs

Pelican - Python

Markdown, reStructuredText, and HTML

• default theme -> blog : https://www.smashingmagazine.com/

• https://github.com/getpelican/pelican

• https://docs.getpelican.com/en/latest/index.html#documentation

Cloudflare Pages

<YOUR_PROJECT_NAME>.pages.dev: https://developers.cloudflare.com/pages/platform/build-configuration/#framework-presets

• Static: Framework presets = None

• Vue 3: env NODE_VERSION>14.18

1 github repo => 1 cf project = 1 build kernel (ref)

Github pages

CNAME: .github.io

Gihub token: https://github.com/settings/tokens

Github Actions - SSR

https://docs.github.com/en/actions/quickstart

.github/workflows

check usage: https://github.com/settings/billing

Issue Blog

Vue + JS: https://github.com/Yidadaa/Issue-Blog-With-Github-Action

Free Hosting

Free	Storage	month
Github	500 MB	2000 min
Cloudflare	25MiB/site	500 times
vercel	100GB b/w
netlify	500 sites	100GB b/w(then $55 per 100GB)

Demos

• vite --template vue : https://github.com/fzinfz/test-vue3/tree/vite-js-quasar

  • https://test-vue3.pages.dev/

• astro --template blog : https://github.com/fzinfz/test-pages/tree/astro.blog

  • https://test-pages-7ku.pages.dev/