Create your own blog with Hugo in 5 minutes

Disclaimer: This blog was written in 2020, so Hugo may have changed. So you better cross-reference newer resources as well.

Hugo is a framework for building websites, technically speaking, building static pages. You could build your own website with the only prerequisite of some command line and start writing immediately with markdown.

Step 0. Install Homebrew

If you have a Mac but not using Homebrew, you definitely have to try this package manager. And we will need it to install Hugo anyway.

Use the following command to install Homebrew:

> /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

> brew --version # check installation

Step 1. Install Hugo

If you have installed Homebrew successfully, then you could have Hugo installed in one line:

    > brew install hugo
    > hugo help # if this success, you are good to go!

For users of other OS: If you are not using macOS, you need to check more complete instructions at Install Hugo.

Step 2. Create a new site

> hugo new site /@path/your-new-site

The above will create a folder named your-new-site in your designated @path. And it will be the root of your newly created Hugo web application.

Step 3. Choose a theme

Being one of the most popular open-source framework for building websites, Hugo has a large and responsive community producing cool themes. Complete list of available themes can be found here.

From the root of you Hugo site:

    > cd @your-new-site
    > git init
    > # add as submodule your favorite theme into `themes/@your-theme`:
    > git submodule add https://github.com/@author/@your-theme.git themes/@your-theme
    > # example
    > # git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
    
    > # Generate site files into public directory
    > hugo -t @your-theme

See also Hugo’s Quick Start.

Step 4. Start writing

Congratulations, your first blog post is only one stone’s throw from here!

Creating Posts

It depends on the theme you use, but posts should generally go under a content/blog directory. Simply run:

    > hugo new blog/your-new-post.md

the above will create your-new-post.md under content/blog/, as well as the content/blog/ directory itself if not exist.

For posts to be displayed on your site, you could do one of the following:

• add draft = false in the post’s front matter
• or use the --buildDrafts option when building
• or add builddrafts = true in config.toml.

Creating Fixed Pages

Fixed pages such as an About page should preferably go under content/fixed or be present at the root of the content directory(my preferable way).

    > hugo new about.md

The static pages you are going to build is genuinely text-based and the only tool you need to grab is the markdown makeup language.

Step 5 Deploy your web with GitHub Pages.

Now you have your websites tested out locally, it is time for you to deploy it online! You can check my post on deploying HUGO website.

Also, here is a nice blog post that show you how to deploy your HUGO website via GitHub Pages and set up automatically deployment.

References:

• Hugo docs.
• Hugo 中文文档
• Hugo 从入门到会用