HOW TO USE HUGO-CMS

Hugo is “the world’s fastest framework for building websites”.
Hugo is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again.

So you have choosen hugo as your framework to build your personal or professional website ?

Good choice !

Why I say that is a good choice ?

• You will stay focus on your main goal: publishing.
• It’s simplier to edit/create your articles. No editor in a webpage that mean no work loosed because you had refreshed the page, or meet a new bug…
  You simply use a classic text editor on your laptop.
• You will never loose all your work when you will upgrade your hugo version.
  I used this framework many years ago for a semi-professional website. 10 years later, after 5 minutes of work in order to make few code migration, this old website was alive again, ready for update.
• It’s fast and light (a static website is really difficult to beat).
• Static website did not mean not editable, not responsive, or not interactive
• It’s a cash saver when you will wanna publish your creation on internet.

First step with hugo

I assume that you’re not a beginner, so I didn’t explain those steps. Refer to the official documentation availaible (pretty good) and take time to read many blog about this subject.

Basically, you have to:

1. Instal hugo on your laptop
2. Choose a theme (take a really simple one if you are a beginner)
3. Wrote a post or use few sample availaible in your theme
4. Configure your theme with your domain name
5. Learn how to use command line

Second step : Use GIT

Save your work and time with git !
Repeat again: You must save your work in a git repository.

So you should have an account on github or another platform, and you created a git repository for your website.

But, what should you put in this repository ?

Everythings that you didn’t wanna loose.
Repeat again: Everythings

I had this directory structure :

Personaly, I use a single repository to store code, documentation and final generated website. It’s more simple to use it daily for little or medium sized website.

Adding resources in your git repository will speed up the build time. It’s mandatory if you use responsive images, even if you could adjust the parameter timeout in your config.yml.

In my .gitignore, I exclude mac-os, visual studio and hugo_build.lock files :

1
2
3
4
5

._*
._.DS_Store
.DS_Store
.vscode
.hugo_build.lock

Third Step : Choose your platform

https://www.netlify.com/pricing/

The starter is free Free
Deploy to global edge network
Live site previews with a collaboration UI for team members
Instant rollbacks to any version
Deploy static assets & dynamic serverless functions

Limit

Bandwidth: 100GB /month
Build minutes: 300 minutes /month

Build time will be saved by doing this part from

• your laptop for start
• github action (I will made a post on this subject)

Docs:
https://docs.netlify.com/

Git https://docs.netlify.com/git/overview/
Build Setting : https://docs.netlify.com/configure-builds/overview/
Domain https://docs.netlify.com/domains-https/custom-domains/
External DNS Provider https://docs.netlify.com/domains-https/custom-domains/configure-external-dns/
Setup HTTPS: https://docs.netlify.com/domains-https/https-ssl/

Wrote, Commit, Build and deploy

Don’t clean your public folder when you build a new version.

This could delete actual css, or js files actually in use. As Google indexation is not done in real time, you could break lot of things if you delete this kind of files.

hugo