Hugo建站指南—

写在前面

大学期间曾经尝试了许多中博客框架，从最初的WordPress到后来的Hexo再到使用Django搭建包含管理员后台系统的完整博客网站，但都没能够长时间使用，总感觉从前期开发到后期部署会出现各种各样的问题。于是我一直想要寻找一个能够快速构建、方便部署并能够让我在更新过程中不断对其进行完善的博客框架；直到Git Pages的出现，让静态网站框架搭建博客有了无与伦比的优势，我也开始搜集各种教程搭建博客，并最终确定了Hugo这一优秀的框架。

本篇文章作为Hugo建站的系列文章，将详细记录我在建站过程中的建站流程、遇到的困难以及解决方法，希望能给读者朋友们带来一定的帮助。

注：我是在Ubuntu 20.04环境下搭建的，在一些细节方面不同系统可能存在一些差异，见谅。

准备阶段

由于Hugo是基于Go语言开发的静态网页框架，并且需要我们部署到Github上来允许其他人的访问，因此我推荐你预先安装以下三款软件。

1
2
3


1. Go           # 为Hugo提供更多的Go语言支持
2. Git          # 实现与Github的远程拉取及推送服务
3. DartSass     # 实现Hugo中Sass语法与css语法的转换

Go

Linux

删除旧版本的Go，一般是在 /usr/local/go 中，然后下载官方的tar包并解压到 /usr/local 中:

1

    $ rm -rf /usr/local/go && tar -C /usr/local -xzf go1.21.6.linux-amd64.tar.gz

以上指令可能需要管理员身份或添加sudo语句来执行，记住不要将文件解压到一个已经存在的go目录，可能会导致Go无法正常运行。

将 /usr/local/go/bin 添加到环境变量中（将以下语句写入 $HOME/.profile 或者 /etc/profile ）

1

    export PATH=$PATH:/usr/local/go/bin

添加该行语句并保存退出后记得使用source指令更新系统环境变量

在命令行中输入以下语句来检验go的安装及版本号

1

    $ go version

Windows

下载好相应的MSI文件后根据提示依次执行安装程序
重新打开命令行输入 go version 验证安装。

Git

Linux(System Based on Debian)

1

    sudo apt install git-all

Windows

1

    直接按照官网提示进行安装即可。

DartSass

Linux(System Based on Debian)

进入Dart-Sass Release下载相应的安装包
解压到 /usr/local 中

1

    sudo tar -zxvf ~/Downloads/dart-sass-1.52.1-linux-x64.tar.gz -C /usr/local

以上指令可能需要管理员身份或添加sudo语句来执行，记住不要将文件解压到一个已经存在的dart-sass目录，可能会导致Dart无法正常运行。

将 /usr/local/dart-sass 添加到环境变量中（将以下语句写入 $HOME/.profile 或者 /etc/profile ）

1

    export PATH=$PATH:/usr/local/dart-sass

添加该行语句并保存退出后记得使用 source 指令更新系统环境变量

在命令行中输入以下语句来检验go的安装及版本号

1

    $ sass --version

安装Hugo

进入Hugo Release的下载页面，下载对应的Hugo-extended版本的deb包(注意！！！一定要安装hugo-extended版本，否则有些主题会出现不支持的问题)
输入以下命令进行安装和验证

1
2


    sudo dpkg -i 你的安装包的名字.deb
    hugo version

若命令行中出现extended字样，说明Hugo已被正确安装。

使用Hugo新建站点并引入主题

首先需要创建一个新的个人站点

1

    hugo new site blog

blog就是博客站点所在的目录，即站点根目录，创建后站点目录结构如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


    archetypes
    assets
    content
    data
    i18n
    layouts
    public
    resources
    static
    themes
    config.toml

简单介绍下Hugo根目录下各个文件目录的作用：

archetypes 存放创建文件时使用的模板，可以自定义front matter属性。
assets 存放需要被Hugo Pipes处理的文件，且只有使用了.Permalink或者.RelPermalink的文件才能被发布到public目录。注意，默认不会创建assets目录。
content 存放的各种md文件用于部署站点，该目录下可以自行创建若干个子目录来便于对文章进行分类，这些子目录被称为section。
data 目录存放的是用于定义变量的模板文件，相当于Java里的常量类，这些文件有JSON、 YAML或者TOML三种格式，会在生成站点时被使用到。一般用不到该功能，具体用法可以参考：data templates
i18n 存放博客所需的各种语言包
layouts 目录存放的模板文件用于渲染html页面，模板里可以定义不同页面的html代码。
public 目录用于存放站点执行hugo -D指令后生成的静态页面文件，提交时只需将此目录中的文件推送到远程库中即可
resources 目录用于缓存某些文件来提高生成效率。注意，默认不会创建resources目录。
static 目录存放的是静态内容：图片、CSS、JavaScript等。
themes 目录用于存放Hugo支持的主题文件
config.toml 是配置文件，可以有JSON、 YAML或者TOML三种格式，默认使用根目录下的config.toml、config.yaml或config.json中的某一个。可以通过–config来配置读取一个或多个配置文件，如：hugo –config a.toml,b.toml,c.toml。注意，默认不会创建config目录。

进入站点目录，下载主题到站点theme文件夹的相应主题目录下：

1

    git clone https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack

进入themes/hugo-theme-stack/exampleSite目录，复制所有内容到站点目录并进行替换：

1
2


    cd themes/hugo-theme-stack/exampleSite
    sudo cp * ../../../

切换到站点目录，使用如下指令即可新建博文并且在本地运行博客网站：

1
2
3


    hugo new post/我的第一篇博客
    hugo -D
    hugo server -D

注：新建博文后博文头部front matter中draft: true表明该文章是草稿，如果在启用服务时不指定参数-D或–buildDrafts，或者在配置文件config.toml中配置buildDrafts = true，则会在生成文章时忽略草稿。如果不想指定该参数就生成文章，需要改为draft: false或者将其删去！！！另注：新建博文后front matter中一定记着填写一个独一无二的标签，不是为了方便自己阅读，而是能够保证Hugo在生成静态页面文件时不至于将多篇博文错认成一篇博文从而导致一篇博文多次发表的情况！！！

总结

以上就是Hugo搭建Stack主题博客的基础部分，下期将会讲解如何将个人博客推送到GitPages以允许博客的外部访问。