Hugo blog build use

Last week, I spent a week trying to create a static blog using Hexo, modified my Theme, and finally fell into Hexo deployment. Subsequently, I had to choose other platforms, and then I found Hugo. Here is a record for future reference and data search.

1. Build Hugo environment

Reference blog:

Generate a static blog using Hugo and deploy it on GitHub

1. Install the local environment

As an example, Windows can refer to the details in the official documentation for the MAC system, which uses BREW as a package manager.

// Brew install Hugo // Check whether the installation is successful and check the Hugo versionCopy the code

2. Start a blog

// XXX is the project name of the blog, Hugo new site XXXcd xxx
Copy the code

3. Hugo’s basic command

Compared to Hexo, Hugo is already much simpler, generating static pages many times faster than Hexo. In addition, some blog themes are automatically converted and cached for the pictures used in the blog, so that each static page does not need to process a picture every time, so that the speed of page generation has been improved.

// Generate static page file, directory is public HugoCopy the code

4. Configure GitHubpage

Without going into details here, you can upload the generated static home page file after creating the corresponding project on GitHub.

cd public
git init    Initialize the repository
git remote add origin <https://github.com/caecarxu/caecarxu.github.io.git>    ## Link remote repository
git add .
git commit -m "first commit"
git push -u origin master
Copy the code

You need to manually push the article again after each update.

cd public
git add .
git status
git commit -m "add blog post"
git push
Copy the code

Second, use themes

1. Pick a theme

There are a lot of themes, all of which are of the highest quality. Unlike Hexo, which is rough, it seems that next is the only one that is used by many people, and it is not diversified enough.

The theme can be directly selected by clicking on the official theme page, and I chose Hugo-theme-stack. The personal impression is very beautiful, and I do not need to manually modify too much configuration.

The effect is shown below:

2. Make some personalized adjustments

There are two web sites to refer to

  • Basic changes, through the official stack theme document to modify, stack theme template directory also has the corresponding example can be copied, overwrite the original configuration, simple initialization.
  • Advanced modification, through the user’s blog for reference

Here do some simple configuration introduction:

2.1 Changing the Default Display language

There is a button to switch the theme in the lower left corner, which corresponds to different languages. You can check i18N under the theme and the configuration of Config. The initial awkwardness of stack is that markdown’s multilingual identification is based on file name suffixes, so every configuration needs to name md files ending in. Cn.

# config config file change, change to default Chinese
DefaultContentLanguage: zh-cn
languageCode: zh-CN
The # language switch also defaults to Chinese
languages:
    zh-CN:
        languageName: Chinese
        title: Kevin's Blog
        weight: 1
    en:
        languageName: English
        title: Kevin's Blog
        weight: 2
Copy the code

2.2 The sidebar displays Settings

# Set Emoji, similar to Github's status, allows you to use emoji directly
# subtitle can be your introduction or motto
# avatar is the configuration of the avatar
sidebar:
        emoji: xx
        subtitle: xxx
        avatar:
            enabled: true
            local: true
            src: img/avatar.png
Copy the code

2.3 Addition of Home page

The default example configuration does not have a home page, because the default index screen is the home screen. You can modify the URL to see what it looks like.

Add a home page to sidebar
# menu is sorted by weight
menu:
    main:
        - identifier: home
          name: Home
          url: /
          weight: - 100.
          params:
            icon: home
Copy the code

2.4 Adding gold digging links, etc

The address of icon configuration can be found by searching globally. (I don’t remember where)

social:
        - identifier: github
          name: GitHub
          url: <https://github.com/JKevin-5>
          params:
              icon: brand-github

        - identifier: juejin
          name: JueJin
          url: <https://juejin.cn/user/2154698523021608>
          params:
              icon: brand-juejin
Copy the code

Third, summary

Overall, Hugo has several advantages over Hexo:

  1. Thanks to go language, static page generation speed is fast;
  2. Static page generation is relatively smooth and there will be no abnormal problems caused by the MAC environment;
  3. The theme page quality is relatively high, the personalized point of view is easier, more worry;
  4. Take the stack theme for example, the search function does not need to configure a third party search plug-in is very convenient;
  5. The configuration file or project file structure is very similar to Hexo, and the use cost of modifying or transferring from Hexo is not high.

For subsequent use, if there are points that need to be added, they will be added again. So far, I am satisfied with them. I will try the modification and use of the advanced part later when I am free, and it does not affect the use at present.