Why I Use Hugo

• Easy to get started: Hugo offers a large number of pre-made templates, requiring little to no front-end knowledge, allowing for a quick setup of website.
• Fast page loading speed: Compared to Hexo, which I used previously, Hugo generates pages significantly faster. This is because Hugo uses precompiled templates and minimal rendering and is written in Go which offers extremely high compilation speed and performance optimization.
• Beautiful templates: Hugo’s templates are generally less flashy than Hexo’s. The Hugo template I am currently using is, in my opinion, the most well-designed one after reviewing numerous blogs.
• Affinity with Go: My first web backend project was written in Go, so I have a special affinity for the language. Although using Hugo to build a blog doesn’t require much direct use of Go syntax, this connection still influenced my choice.

References I Used During This Process

• Hugo Official Documentation
• Tutorials on setting up a website with GitHub and Hugo
• Blogs and repositories of other users using the same theme on GitHub
• Hugo Themes Official Website

Note: Among these resources, the Hugo Official Documentation is particularly recommended because is up-to-date, pretty detailed and user-friendly, while other online tutorials may be outdated. By simply following the Quick Start, you can set up the blog framework. Afterwards, you can modify theme files according to your needs, focusing initially on the config.toml and content folders, while using hugo server to preview the changes locally.

File Structure

For more information, you can also refer to Hugo document - Directory structure

content and public

• The content folder contains the original Markdown files of the blog.
• The public folder contains HTML files automatically generated by Hugo based on the Markdown files, which will later be pushed to a GitHub repository named <replace_with_your_github_username>.github.io.
• Since the files in the public folder are automatically generated, there is generally no need to manually modify the HTML files in this folder. Running hugo will automatically convert newly added files. However, simply deleting files in the content folder will not automatically delete the corresponding old HTML files in the public folder. Although not deleting them may not affect the display, it can make the overall project structure less clean. My approach is to delete all files under the public directory except for the .git file, and let Hugo to regenerate the HTML files based on my current content.

themes

• The themes folder contains Hugo’s theme files, which include:
  • The exampleSite folder. This folder contains sample site information. It is recommended to copy the .toml file, as well as the content and static folders, to the corresponding locations in your blog project for testing.
  • The layouts and static folders. These folders contain HTML and CSS files for building the website structure and rendering effects. Later, you can modify these files, as well as other configuration files in your blog project, to adjust the layout and style of the website.

GitHub Repository

Create Repositories

• If you use GitHub to host your project files, generally three repositories are needed:

  1. A repository to store all the site information (the repository name can be arbitrary).
  2. A repository to store the HTML files in the public folder, named <replace_with_your_github_username>.github.io. The repository name must be set to <replace_with_your_github_username>.github.io, and it will be the URL of your future blog.
  3. A theme repository (optional). Although many tutorials suggest directly using the original theme repository, I forked the theme repository to my own, making it easier to manage and maintain.

In these three repositories, the first repository is the main repository for the second and third repositories. It is recommended to use submodules to manage the three repositories. For more information on submodules, you can refer to my other blog post. Alternatively, you can manage them directly by cloning the second and third repositories into the first repository.

Using GitHub Actions for Automated Deployment

• Since manually pushing files can be cumbersome, we can also use GitHub Actions for automated deployment. This way, GitHub will automatically regenerate and deploy the website files every time we push updates.