Analyze-SSG
Static Site Generators
Introduction:
Static Site:
It is a web page that is delivered to the user’s web browser exactly as stored, in contrast to dynamic web pages which are generated by a web application. (Source: Wikipedia)
Markdown: Markdown is a widely used, simple markup language for formatting text. Many developers today prefer using Markdown to traditional HTML when coding content, and many static site generators support Markdown. (Source: Cloudfare)
There are many static site generators like VuePress, Docusaurus and many more. All of them have one single and specific goal, to generate static HTML file and all of its assets.
The advantages of using SSGs are,
- Faster Loading Time
- Secure
- Easier Caching
- Flexibility
- Scalability
- Lighter backend
- Easier to Update (Depending on the SSG you tend to use)
| Static Page | Dynamic Page |
|---|---|
 |
 |
Static vs Dynamic Sites:
Static sites can be written almost exclusively in HTML and serve a fixed set of data that renders the same for every site visitor. Static sites use server-side rendering to serve pre-built HTML, CSS, and JavaScript files to a web browser. Dynamic sites operate in a completely different way, by leveraging HTML and CSS as well as server-side scripting languages like PHP to build webpages on the fly and serve different content to each site visitor. (Source: Sanity.io)
SSG Comparison:
| License | Language | Framework | Focus | Based On | Hybrid | Image Optimization | Community | Learning Curve | Community Chat | URL | GitHub | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Docsify | MIT License | JavaScript | VueJS | Documentation | VueJS/Markdown | No | No | Good Support | Easy | Docsify Discord | Docsify Website | Docsify GitHub |
| Hugo | Apache License 2.0 | Go | None | General | Hugo Specific | No | No | Good Support | Medium | Hugo Gitter | Hugo Website | Hugo GitHub |
| Docusaurus | MIT License | JavaScript | React.js | Documentation | JSX/TSX (React Based) | No | No | Very Good Support | Easy | Docusaurus Discord | Docusaurus Website | Docusaurus GitHub |
| VuePress | MIT License | JavaScript | Vue.js | Documentation | Vue.js/Markdown | No | No | Good Support | Easy | Vue.js Discord | VuePress Website | VuePress GitHub |
| Nuxt.js | MIT License | JavaScript | Vue.js | Application | Vue.js | No | No | Good Support | Easy | Nuxt.js Discord | Nuxt.js Website | Nuxt.js GitHub |
| Next.js | MIT License | JavaScript | React.js | Application | JSX/TSX (React Based) | Yes | No | Very Good Support | Easy | Next.js Discord | Next.js Website | Next.js GitHub |
| Gatsby.js | MIT License | JavaScript | React.js | CMS | JSX/TSX (React Based) | Yes | Yes | Very Good Support | Easy | Gatsby.js Discord | Gatsby.js Website | Gatsby.js GitHub |
| Jekyll | MIT License | Ruby | None | General | Liquid | No | No | Very Good Support | Easy | Jekyll Community | Jekyll Website | Jekyll GitHub |