In this first post I want to introduce the basic information to create a blog like this using the Hugo framework.

Hugo framework

Intro

Hugo is a static site generator writtend in Go.

The main characteristics are:

  • speed
  • flexibility
  • usability

I used for fun a lot of cms, static site generators and when I started to use Hugo I loved it. The reasons are substancially three:

  1. Is written in Go so I can use it to improve my skills in that language
  2. Contents are edited in markdown that I use for all my docs (work, notes, ecc.)
  3. Deploy mechanism (netlify integration, see below…)

Installation

Hugo initial development can be achieved offline, installing Hugo in local is a very simple task for all most-used platforms.

For example, it has packages for most common Linux distros and, as I prefer, a very useful snap version.

For a local linux installation using snap:

$ snap install hugo --channel=extended

The channel extended will install Sass/SCSS support.

Create your site

To create a new site you can run:

$ hugo new site <your_blog_name>

The command above will create a folder named <your_blog_name> with the basic structure for a static site.

At this point you will need a theme: inside the folder created by Hugo initialization you have to put a theme under themes folder.

You can find a lot of themes at https://themes.gohugo.io/

Adding contents

You can create content files manually, but using new command will automatically add all metadatas like title, date, ecc.

For example to create a new post you can run:

$ hugo new posts/my-first-post.md

Then you can modify the markdown file to add all your text.

Testing locally

You can test all you changes using a local hugo server that can be lauched with:

$ hugo server -D

This allow to navigate your site at http://localhost:1313/

Site configuration

The file config.toml contains basic configurations like site title, languages, theme ecc.

Feel free to try and suddenly test all you changes locally, That’s the best way I use to learn new thing:

  1. Read some inital docs
  2. Try & error
  3. Retry until I get comfortable with the new technology
  4. Read more specific docs/tutorial
  5. Retry with more advanced stuffs

After a bunch of time I have learned new things with a light approach that I feel like a game.

Deploy

The feature that I prefer in my new configuration is the automatic deploy using git to versioning the site project and netlify to deploy.

Git is the most powerful tool for software (and not only software) versioning. I think all of you know what it is… I use for everything, sw project, notes, and naturally for tracking my blog configurations and contents.

Netlify allows you to link you repository on gitlab or github and automatically rebuid hugo site after every push. All you have to do is the initial configuration for hugo (see https://gohugo.io/hosting-and-deployment/hosting-on-netlify/)

My workflow for mantain update my blog is:

  1. update or add contents
  2. test locally with hugo server -D
  3. approve and push changes

And automatically my site will be recreated with new contents.

Referencies