How to build blog website by Hugo

Hugo 简介

​ Hugo是一个用Go语言编写的静态站点生成器，hugo的易操作性和其拥有大量的主题库使其备受技术博客博主喜爱。记录一些自己亲手搭建博客的经验之谈。本文操作基于macos 下

如何安装Hugo

如果你是macOs 用户可以使用homebrew 来安装：

brew install hugo

如果你是Ubuntu 或者其他linux 用户可以使用apt 来安装：

sudo apt-get install hugo

如果是Windows 用户，使用scoop 快速安装：

scoop install hugo

使用包管理工具，基本上可以实现一条代码快速安装，具体可以参考Hugo官网

Hugo官网

生成博客文件

自己选择合适的文件夹下使用终端输入命令：

hugo new site myblog

此命令会在当前文件夹下建立一个名叫myblog的文件夹；

接下来就是选择你喜爱的主题hugo主题可以随意挑一个自己喜爱的主题使用，也可以在github中搜索你想要的主题库，使用命令：

cd themes
git clone https://github.com/Track3/hermit.git themes/hermit

myblog/content文件夹是存放你博客文章的地方，在此新建.md文件

hugo new posts/XXXX.md

可以在XXXX.md文件中使用markdown格式编写一些博客内容，使用命令：

hugo server -t 主题名 -D

进行主题预览

配置主题，打开myblog/config.toml每个主题有不同的配置：

baseURL = "https://wuhongyui.github.io"
languageCode = "en-us"
defaultContentLanguage = "en"
title = "拿了橘子跑"
theme = "hermit"
# enableGitInfo = true
pygmentsCodefences  = true
pygmentsUseClasses  = true
# hasCJKLanguage = true  # If Chinese/Japanese/Korean is your main content language, enable this to make wordCount works right.
rssLimit = 10  # Maximum number of items in the RSS feed.
copyright = "This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License." # This message is only used by the RSS template.
enableEmoji = true  # Shorthand emojis in content files - https://gohugo.io/functions/emojify/
# googleAnalytics = "UA-123-45"
# disqusShortname = "yourdiscussshortname"

[author]
  name = "拿了橘子跑"

[blackfriday]
  # hrefTargetBlank = true
  # noreferrerLinks = true
  # nofollowLinks = true

[taxonomies]
  tag = "tags"
  # Categories are disabled by default.

[params]
  dateform        = "Jan 2, 2006"
  dateformShort   = "Jan 2"
  dateformNum     = "2006-01-02"
  dateformNumTime = "2006-01-02 15:04 -0700"

  # Metadata mostly used in document's head
  # description = ""
  # images = [""]
  themeColor = "#494f5c"

  homeSubtitle = "Stay hungry, Stay foolish!"
  footerCopyright = ' &#183; <a href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank" rel="noopener">CC BY-NC 4.0</a>'
  # bgImg = ""  # Homepage background-image URL

  # Prefix of link to the git commit detail page. GitInfo must be enabled.
  # gitUrl = "https://github.com/username/repository/commit/"

  # Toggling this option needs to rebuild SCSS, requires Hugo extended version
  justifyContent = false  # Set "text-align: justify" to `.content`.

  relatedPosts = false  # Add a related content section to all single posts page

  code_copy_button = true # Turn on/off the code-copy-button for code-fields

  # Add custom css
  # customCSS = ["css/foo.css", "css/bar.css"]

  # Social Icons
  # Check https://github.com/Track3/hermit#social-icons for more info.
  [[params.social]]
    name = "twitter"
    url = "https://twitter.com/"

  [[params.social]]
    name = "instagram"
    url = "https://instagram.com/"

  [[params.social]]
    name = "github"
    url = "https://github.com/wuhongyui"

[menu]

  [[menu.main]]
    name = "Article"
    url = "posts/"
    weight = 10

  [[menu.main]]
    name = "About"
    url = "about-hugo/"
    weight = 20

博客文章内的配置

打开myblog/archetypes/default.md可添加以下默认选项：

title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: true  #设置为false既可以编译成html，ture为本地修改
comments: false
images:
markup: mmark

注意：许多博客上的配置语句是用等号，有可能会导致主题文件编译的时候出现错误，建议使用:来分隔

Hugo上数学公式显示问题

​ 在markdown里编写的数学公式正常显示，到HTML网页中会出现不适配的现象，网上一般才用MathJax来进行渲染，但亲测配置起来麻烦，还不一定有效。建议在写包含数学公式的博文时使用 Mmark．只需要在 markdown 文件的 front matter 里加上一行：

markup: mmark

即可切换到 Mmark．推荐使用 Mmark 的原因只要是无需更多的配置就可以开始写数学公式了，数学公式全部用两个美元符号包围起来，就像这样 $$ f(x) = \lim_{n \to \infty}x_n $$ 变可以在行内显示公式 $$f(x)=\underset{n\to \infty }{\lim }{x}_n$$ 行间公式与行内公式是一样的，区别在于行间公式前后加上一个空行，这样就可以让 Mmark 自动判断你需要的是行内公式还是行间公式了，行间公式的例子：

$$
f(x) = \lim_{n \to \infty}x_n
$$

显示效果为：
$$f(x)=\underset{n\to \infty }{\lim }{x}_n$$

在Hugo中设置

这个很简单，只需要在 hugo 的主题目录里，加上一行代码到你的博文页面一定会包含的文件里即可．一般可以选择加入到 themes/hermit/layouts/partials/footer.html 里，这里的hermit是我使用的 hugo 主题名称．需要添加的一行代码为：

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_SVG"></script>

这样便可以顺利在hugo界面中愉快的输入数学公式啦！

将Blog推送到GitHub上

使用hugo server -D预览页面无误之后，可以正式发布网站供大家浏览，需要将blog文章里的draft改为false使用命令：

hugo --theme=hermit  --baseUrl="https://wuhongyui.github.io/" --buildDrafts

可以在当前目录生成一个/public文件夹，只需要使用如下命令将public文件夹推送到GitHub上的Repository即可：

git init
git add .
git commit -m "commit message"
git remote add origin https://github.com/ShaneTian/ShaneTian.github.io.git
git push -u origin master

推送失败时使用git push -u origin master -f强制覆盖git仓库。

在博客中插入图片

使用markdown编写的博客文章中插入的图片并不能直接显示在博客网页里，因此需要在博客文件中手动新建文件夹/myblog/static/images来保存图片文件。

在使用hugo命令生成博客网页时便会将图片文件添加到public文件夹下。

├── config.toml
├── content
│   ├── about
│   ├── archives.md
│   └── posts
├── public
│   ├── about
│   ├── archives
│   ├── categories
│   ├── css
│   ├── images # 这里就是static/imags目录下的文件
│   ├── index.html
│   ├── js
│   ├── page
│   ├── posts
│   ├── tags
│   └── true
├── resources
│   └── _gen
├── static
│   └── images  # 这个是新增的
└── themes
    └── hermit

线上怎么引入pulic/images中的图片，在你的博客文章中content/posts/xxx.md文章中使用路径![](/images/xxx.jpg)便可以在博客网站中显示引入的图片。