preface

To build personal websites, we used to choose WordPress because of its wide range of use (it is said that 80% of the world’s websites are built with it), rich themes and easy to use.

In recent years, the Markdown format has become more and more popular. We prefer to use Markdown format to write articles, and then use static site generation tools to convert the content into HTML format and post it to our personal website. Some of the best tools for generating static websites are Jekyll, Hexo, and Hugo.

Compare WordPress with Hexo and Hugo:

project Development of language advantage Any inconvenience caused
WordPress php 1. There is a visual background to write articles;

2. Wide range of use;

3. Rich themes and plug-ins.		 1. Too many dependencies lead to slow loading.

2. Deploy servers and rely on databases.

3. Back up data periodically.
Hexo nodejs 1. Static generation, SEO friendly;

2. The NPM ecosystem has a rich set of plug-ins for extended functionality.		 1. Static files generated by local compilation are slow.

2. Debugging trouble, often encountered JS error.
Hugo go 1. Fastest compilation speed;

2. Developing themes is very convenient.		 1. The current number of topics is small.

Overall, I still recommend using Hugo to build a personal website.

Install Hugo

On MacOS, you can use BREW for installation.

brew install hugo
Copy the code

Once installed, the Hugo command can be used globally

hugo version
Copy the code

Create a Personal website

hugo new site myblog
Copy the code

Entering the myBlog directory you created, you can see that the generated directory structure looks like this:

.├ ─ archetypes │ ├─ ├─ default. Md ├─ config. Toml ├─ Data ├─ static ├─ themesCopy the code

Choose a topic

After creating the website, we can choose a theme we like from Hugo’s official theme store and download it to use.

Using the theme hugo-Notepadium as an example, go to the personal website created in the previous step and clone the theme into the Themes folder:

git clone https://github.com/cntrump/hugo-notepadium.git themes/hugo-notepadium
Copy the code
.├ ─ archetypes │ ├─ default. Md ├─ config. Toml ├─ Data ├─ static ├─ themes ├─ hugo-notepadiumCopy the code

Modifying the Website Configuration

Modify the site configuration file config.toml to fill in your own site information and the name of the theme to be used, or you can customize the site content according to the example configuration information in the theme description.

baseURL = "https://example.com"
title = "MyBlog"
theme = "hugo-notepadium"
copyright = "© 2020 my name."
Copy the code

To create the article

Next we can start writing the article by:

hugo new posts/helloworld.md
Copy the code

Create a new article. Use markdown format to write the article content in the generated file.

---
title: "Helloworld"
date: 2020-04-19T23:56:47+08:00
draft: true
---

# # instructions

> HelloWorldThis is the contentCopy the code

Web site preview

Execute the server command to preview all published and edited articles:

hugo server -D
Copy the code

Publish content

After you have written the article and the preview is ok, you can change the draft state of the article to Draft: False and then compile to generate static website content:

hugo -t hugo-notepadium
Copy the code

As you can see, the compilation is almost instantaneous. The generated static content is in the public directory:

Public ├ ─ ─ 404. HTML ├ ─ ─ categories ├ ─ ─ CSS ├ ─ ─ index. The HTML ├ ─ ─ index. The XML ├ ─ ─ page ├ ─ ─ posts ├ ─ ─ a sitemap. XML └ ─ ─ tagsCopy the code

Deploy online

Github Pages: XXX. Github. IO: xxx. Github.

You can also write a shell script to automatically synchronize the content in the public directory to Github or your own server after compiling the article, so as to keep the content updated online.

conclusion

From the previous steps we saw how easy it is to create a static site with Hugo, and how fast the build is before release. One of the drawbacks of a traditional dynamic site is that there is no visual background to add or modify markdown content at any time, but it is actually possible. We can choose to develop our own theme. During theme development, we can use getJSON to get the dynamic data passed by the API. With this function, maybe you can combine the advantages of dynamic and static websites. We’ll talk more about developing custom themes later.

reference

  • Official documents of Hugo
  • Hugo Theme Mall
  • hugo-notepadium

Please follow me on my wechat account or leave me a comment in the comments section.

Cc /posts/build…