Introduction
After using Wordpress for so many years, I recently had the idea to revamp my own blog. So I decided to use Hugo to build it.
Hugo is a popular static website generator written in Go. It is fast, easy to use, and highly configurable. Compared to Hexo, it is even simpler to operate.
Hugo has a content and template directory, which are rendered into a complete HTML website. You can refer to the Hugo official website to build your own personal blog.
Download and Install Hugo
The process is different for MAC and Windows users.
- For MAC users:
In the terminal, enter $ brew install hugo and $ hugo version to download it.
- For Windows users:
- Download from: https://github.com/spf13/hugo/releases.
Download the corresponding installation package based on your operating system. I have Windows 10 64-bit, so I chose hugo_0.69.2_Windows-64bit.zip.
-
After extracting the files, take out the hugo.exe file and place it in a folder you created in advance. For example, if you created a folder named "hugo" in the software folder on the D drive, the final address would be D:\Software\hugo\hugo.exe.
-
Add D:\Software\hugo\ to the PATH environment variable. This step is crucial.
-
Restart the terminal and run
hugo versionto check the version.
After completing the above steps, open the command line and enter hugo help.
If you see the following information, it means the installation was successful.
hugo is the main command, used to build your Hugo site.
Hugo is a Fast and Flexible Static Site Generator
built with love by spf13 and friends in Go.
Complete documentation is available at http://gohugo.io/.
Create a Hugo Site
Create your own blog site. Here, "Blog" can be changed to the name you prefer.
hugo new site Blog
You will receive a message indicating that the creation was successful.
Congratulations! Your new Hugo site is created in E:\blog.
Just a few more steps and you're ready to go:
1. Download a theme into the same-named folder.
Choose a theme from https://themes.gohugo.io/, or
create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
with "hugo new <SECTIONNAME>\<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".
Visit https://gohugo.io/ for quickstart guide and full documentation.
Enter the directory and you will see that 5 directories and a config.toml configuration file have been automatically generated.
|-- archetypes
|-- content # directory for storing content
|-- data
|-- layouts
|-- static # directory for storing static resources (images, css, js)
|-- themes # directory for storing themes
|-- config.toml # configuration file
Add a Theme
You can add the default theme or choose a different one. Here, we will demonstrate using the default theme. Enter the following two lines of code:
git init
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
Then update the git repository from the root directory of the site:
git submodule update --remote --merge
Next, add the name of the default theme to the configuration file config.toml.
Create New Content
Create a new markdown file to complete the blog content.
Navigate to the directory and enter the following command to create a post directory in the content directory and a file named test.md within the post directory.
cd blog
hugo new post/test.md
At this point, your first blog post has been generated in the posts folder. Now, modify the title, change "draft" to true, and edit the content as desired. For example:
---
title: "Hello world!"
date: 2020-03-16T11:47:15+08:00
draft: true
---
## Hello everyone
This is my blog. I hope to write some good articles to share with everyone~~~
Next, enter the following code to preview your blog:
hugo server -D
To build the static pages, a public directory will be generated. This directory is essentially a website. Simply enter the following code:
hugo -D
Upload the latest public directory to your repository (GitHub, Coding, Gitee).
Congratulations, you're done! 🎉🎉🎉
This is my own blog website: chenyyds.com