Why a static website with Hugo?
Static pros are better!
Fast 🏎️
Visitors don’t have to wait on the servers while it builds the HTML file on the fly. The file has been there all along, ready to serve!
As a result, loading speed is super fast even on low bandwidth!
Safe 🔐
No Database. No SQL injection. No potentially exposed data is stored anywhere but on in your core files.
There’s only one gate to keep, your file server. 🧙
Reliable 💪
A static website does not need any work from server beside serving HTML and media files. It’s pretty much like serving a bunch of tiny pictures everytime a visitor lands on the site.
No risk of the sever slowing down or heating up during peak traffic.
Bye bye Error 501!
A visit walkthrough…
WordPress or any classic dynamic website
- Visitor lands on the page
- File Server connects to database
- Database server returns the required data
- File serveur uses the retrieved data to build an HTML file on the fly.
- Vistor’s browser downloads the HTML file and put it on screen.
Static site
- Visitor lands on the page
- Vistor’s browser downloads the HTML file and put it on screen.
CMS Solution ✏️
A database free CMS? Yes can do!
Forestry.io is a Canadian company (🇨🇦❣️) which offers a reliable CMS solution for static website!
👉 Forestry.io Demo
- Add/Edit page
- Add a media
- Add blocks
- Preview unpublished changes
- Shortcode/Snippet
Why Hugo rather than other static gen out there?
Hugo is in the top three Static Site Genrators1, and easily wins ranks number one in velocity 🥇.
Build speed
A static generator must be able to build every HTML pages the instant the content is edited. If you intend on updating the content often, then the build speed becomes undeniably very critical.
Hugo can build 10,000 pages in less than 10 seconds 😱
Gimme facts! 📈23
| StatGen | 1,000 | 10,000 |
|---|---|---|
| Hugo 🚀 | 0.65s | 7.46s |
| Gatsby 🏃 | 7.4s | 74s (> 1 minute) |
| Jekyll 🐌 | 18.42s | 218s (> 3 minutes) |
Think about that for your editors 🤔
Within the 5 long seconds it usually takes WordPress to reload the page after hitting “save”, Hugo will have rebuilt the website and deployed the thousands newly generated files live! And all of that while allowing the editor to keep on queuing new changes!
Or… you could just programmatically set automatic builds every 5 minutes without a sweat.
Technically… How does that work? 🤓
Any editor be through a CMS like Forestry.io or directly from within a content file edit a page of the website.
This update will trigger a build or compilation of the the HTML files from Hugo.
During the build, Hugo will read every Markdown files from the content directory and generate the HTML files using their data.
Content Directory structure example
└── content
├── about.md
├── contact.md
├── team.md
├── posts
│ ├── a-new-initiative.md
│ └── speaker-intro.md
└── projects
├── city-museum.md
└── warehouse-redesign.md
Markdown file example:
👇 Let’s look at a simple Markdown file:
---
title: Une nouvelle initiative
date: 2018-08-07
image: intitiatve.jpg
categories:
- Entreprise
- Solutions
---
## La nouvelle initiative en question
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vestibulum id ligula porta felis euismod semper. Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur. Sed posuere consectetur est at lobortis.
1. Débuter
2. Continuer
3. Perseverer
## Conclusion
Pour en savoir plus [c'est par là](https://liens-utiles.org)
👉 We can also at the Mardkdown code from this very page here.