I spent some time rebuilding “猫狗窝” (a website for cats and dogs) using Hugo, hosted it on Github Pages, and implemented CI/CD using Github Actions. It has been a hassle-free process, allowing me to focus on writing content and easily publishing it. This article is a continuous work-in-progress, allowing me to write and publish as I go along.
Here, I will summarize the process of overcoming the challenges in three parts of this series:
- Setting up a local server
- Publishing to Github Pages
- Configuring Github Actions for CI/CD
This article is the first part - Setting up a local server.
Why rebuild?
In 2019, I used Leanote for a private note-taking service. This allowed me to directly publish my notes as web pages and saved me from the hassle of maintaining accounts on public platforms. However, the maintenance work that came along with having a personal website became burdensome and deviated from my original intention of using Leanote to focus on writing. Eventually, my personal website fell into neglect.
This year, I decided to revive my blog as a platform for recording and practicing writing.
To avoid getting caught up in the same situation again, I have the following requirements for a new note-taking solution:
- Support for Markdown, with easy migration capabilities for the future.
- Ability to host the service.
- Full control over both the source and website files.
- A framework with a strong and supportive community.
Choosing Framework
Based on the desire to focus on writing, WordPress is first excluded because it is too heavy and its management services are too flexible, making it very easy to become distracted. The blog engine I need must provide the simplest writing experience possible.
After an extensive search, I have narrowed down my options to three blogging engines: Jekyll, Hexo, and Hugo. These are currently the three most popular blog generators among programmers. Let’s make a brief comparison of them.
| Dimensions of Comparison | Jekyll | Hexo | Hugo |
|---|---|---|---|
| Community Support(On September 25, 2022, the number of stars on GitHub) | 45.3k | 35.4k | 62.5k |
| Programming Language | ruby | nodejs | go |
| Compile Speed(here , the generation time for 585 articles is provided) | 15.90s | Between the two | 4.90s |
| Other aspects | Jekyll has Github support, which allows you to directly place markdown files into a Git repository. Github will automatically generate web pages from these files. (Github has always been a Ruby-friendly community) | Hexo provides convenient deployment commands, allowing you to deploy to Github with just one command. | The official documentation for Hugo is very well-written, and its deployment process is concise. The first two options require installing multiple dependencies for deployment, while Hugo can be run directly from its binary files without even needing root permissions. |
The difference in compilation speed is due to the fact that Hugo is developed in the Go language, which is a compiled language known for its fast execution speed. On the other hand, Jekyll is based on Ruby, and Hexo uses Node.js. Both of these languages are interpreted languages, and their execution efficiency is lower compared to Go. Node.js is slightly faster than Ruby. From the data provided, we can see that Hugo is almost 10 times faster than Jekyll, making it a completely different level of comparison.
In the end, I chose Hugo. While it may require some time to get familiar with, comparing it across all dimensions, Hugo emerged as my top choice.
Setting up locally
Let’s embark on the exploration journey of Hugo.
Setting up hugo
The installation process is quite simple. Since I’m using macOS, the official recommendation is to use Homebrew.
brew install hugo
After completion, you can use the following command for verification:
hugo version
Creating a site
To create a new web site, you can execute the command hugo new site [name of your blog].
After executing the command, a folder will be created with the same name as the one specified in the command, including the following contents:
.
├── archetypes
│ └── default.md
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes
Among them:
config.toml: Hugo configuration file
content: Markdown files and HTML files
static: Static resources
themes: Themes
Other files can be ignored for now.
Choosing Themes
Hugo does not have a default theme, so you need to install a theme yourself. I am using hugo-theme-cleanwhite 。You can find more themes in the official theme repository: Hugo Themes
$ mkdir themes
$ git submodule add https://github.com/zhaohuabing/hugo-theme-cleanwhite.git themes/hugo-theme-cleanwhite
Start the Hugo server, and you will see the example website generated by the theme at http://localhost:1313/.
$ hugo serve -t hugo-theme-cleanwhite
Or simply run
hugo server
to do it.
Configure Hugo
The configuration file is located in the root directory of the website, named config.toml. Modify it according to your own needs. You can refer to the files in the exampleSite folder of the hugo-theme-cleanwhite theme. By default, the articles will be stored in ./content/post. After finishing writing an article, run the hugo command, and Hugo will generate the static website in the public folder. We just need to publish the content of that folder on the web.
For more configuration options related to the theme, you can refer to hugo-theme-cleanwhite README.md
For more detailed configuration rules, you can refer to the official Hugo documentation
Writing
Now you can create a new article. Execute the command hugo new post/hello-world.md, and it will create a new file named hello-world.md in the content/post/ directory. After modifying the automatically generated header, you can write your own notes or blog posts below.
---
title: "Hello World"
date: 2022-09-25T16:00:21+08:00
categories:
- "Blog"
tags:
- "Hugo"
draft: true
---
# Hello World.
Post example
Local Deployment
By executing the local debugging command, you can directly access the local preview webpage at http://localhost:1313.
hugo server
After executing the local deployment command, a complete set of static website will be generated under the public/ directory, which can be directly copied to a web server.
hugo
At this point, the setup process of the local Hugo solution is complete!
Reference Articles
- https://zhuanlan.zhihu.com/p/368407566
- https://sspai.com/post/59904
- https://blog.yeshuanova.com/2018/07/from-jekyll-to-hugo/
- https://www.pseudoyu.com/zh/2022/05/29/deploy_your_blog_using_hugo_and_github_action/
- https://zhuanlan.zhihu.com/p/417259374
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License by IvyWooo. Please attribute the source when reproducing.
「真诚赞赏，手留余香」
猫猫和狗狗的小窝
真诚赞赏，手留余香
使用微信扫描二维码完成支付
本文总阅读量次