After trying to build blogs with Hexo, GatsbyJs and Vuepress, one of the biggest complaints about these tools is how fast they run and how fast they pack.

Then I saw Hugo, who claims to be the fastest static site generator.

I tried to build a blog and found that it was super fast in both running speed and packaging speed. I decided to migrate my blog to Hugo. Hugo’s official definition is:

Hugo is a fast and modern static site generator written in Go, Designed to make website creation fun again. Hugo is a fast and modern static site generator written using Go, designed to make website creation fun.

Install Hugo

Before Hugo set up his personal blog, he needed to install Git and Go language development environment first.

Download the binary installation package at golang.org/dl/ and git-scm.com/, and click On Default Settings to install.

Mac installation, Hugo

You can install either using HomeBrew or at github.com/gohugoio/hu… Download the binary package and install it

brew install hugo 
Copy the code

Windows installation, Hugo

In github.com/gohugoio/hu… Download the binary package and install it

After the installation is complete, enter the following command on the cli to verify the installation:

hugo version
Copy the code

IO/geting-sta for more installation methods, see Gohugo. IO/geting-sta…

Build the Hugo Project

A Hugo project is a site, created with the following command:

hugo new site [project-name]
Copy the code

For example, if my site name is blog, create the following command:

hugo new site blog
Copy the code

Once created, the following file structure will be generated under the blog folder:

. ├ ─ ─ archetypesSave the template to generate the blog├ ─ ─ assets# Store Hugo Pipes files├ ─ ─ the configJSON YAML TOML configuration files are supported├ ─ ─ the content# Save markdown file├ ─ ─ the data# Store data processed by Hugo├ ─ ─ layouts# Store layout files├ ─ ─ the static# Store static file image CSS JS file└ ─ ─ themes# save theme
Copy the code

Add the theme

To quickly set up a blog, use themes. Once you use a theme, you simply add the Markdown file to the Content folder.

Hugo has themed market themes.gohugo. IO /, and selected two themes that I think look good:

  1. Github.com/olOwOlo/hug…
  2. Github.com/yoshiharuya…

The first one looks better and is more powerful, so I chose the first one. Go to the root directory and clone the theme file to install the theme.

cd blog
git clone https://github.com/olOwOlo/hugo-theme-even themes/even
Copy the code

Start the Hugo

Enter the blog/themes/even/exampleSite folder, will the config. Tom file copy to the project root directory, At the same time the blog/themes/even/exampleSite/content folder off the root directory of the content.

Command line type the following command to start Hugo:

hugo server
Copy the code

To see the effect, open http://localhost:1313/ in your browser.

Configure the topic

For personal use, you need to modify the config. Tom file, just follow the instructions to modify the configuration.

My theme profile

Enter the blog/ Themes /even folder and you will find that the file structure is almost the same as that of the new Hugo project. This is done so that the user’s configuration overrides the topic’s configuration.

Such as I should be displayed at the bottom of the custom, Hugo – theme – even the bottom configuration by blog/themes/even/layouts/partials/footer HTML controls.

To override theme configuration, a new blog in the project root directory/layouts/partials/footer. The HTML file, fill in the custom content can override the topic configuration. The coverage for other files is the same.

Hugotheme-even uses Webpack to pack JS and CSS, and the file name is added with hash value. This CSS cannot be overwritten by JS, but there are parameters for overwriting this CSS and JS in the hugotheme-even configuration, please refer to my file configuration for details.

Adding a New Blog

Adding a new blog command is relatively simple, as follows:

hugo new post/my-first-blog.md
Copy the code

This command creates a file using the template, looking first for the user’s template file, and then for the topic’s template file if there is none.

Hugo – theme – even the template file blog/themes/default/even/archetypes. The md is more complex, the new blog/archetypes/default. The md file cover.

My template configuration is as follows:


---
title: "{{ replace .TranslationBaseName "-"" " | title }}"
date: {{ .Date }}
description: ""
draft: truetags: [] categories: [] --- <! --more-->Copy the code

The Draft parameter controls whether the page is displayed on the website. Set to false or remove this parameter.
The previous content is automatically served as the page summary.

packaging

To deploy online, you need to package the Markdown file as an HTML file. The package command is as follows, even is the subject name:

hugo -t even
Copy the code

Deploy to Github Pages

Once packaged, this is a pure HTML file, which should theoretically be available on any site that supports static page deployment.

My deployment command is as follows. For more deployment methods see gohugo. IO /hosting-and…

#! /bin/bash
# Deploy to github Pages script
Abort script on error
set -e

Delete the package folder
rm -rf public

# packaging. Even is a topic
hugo -t even # if using a theme, replace with `hugo -t <YOURTHEME>`

Go to the pack folder
cd public

# Add changes to git.

git init
git add -A

# Commit changes.
msg="building site `date`"
if [ $# -eq1]then msg="The $1"
fi
git commit -m "$msg"

# Push to Githu
# nusr.github. IO can only use the master branch
git push -f [email protected]:nusr/nusr.github.io.git master

Return to the original folder
cd.Copy the code

code

Blog files are stored at github.com/nusr/blog

Nusr.github. IO /