Hugo 博客 Github Page /私有化部署指南

Hugo 是一个用 Go 编写的开源静态网站生成器，一般只需几秒钟就能生成一个网站，被称为“世界上最快的网站构建框架”。用户可以使用 markdown 语法编写博客内容，结合 Github Page 可以无需服务器部署自己的博客，同时也支持采用 Nginx 、Apache 等 HTTP 服务器的私有化部署方式。本文结合本博客的部署过程，详细叙述以上两种部署方式，以及 CI/CD 自动化部署、国际化配置等过程。

英文站点 - Github Page 访问地址:

zoyao.github.io

中文站点 - Nginx 私有化部署访问地址:

zoyao.top

Hugo 安装

hugo 本地安装，建议首次使用时在本地安装好 hugo 客户端，方便调试。后续使用过程中，可脱离 hugo 客户端使用，在本地编辑好 markdown 文件上传至 github，即可触发自动化部署，详见Github Page 自动化部署与私有化自动化部署章节

hugo 安装

安装过程 - 以 windows winget 为例，安装 Extended 版本
1 2 3 4 5

//安装 winget install Hugo.Hugo.Extended //卸载 winget uninstall --name "Hugo (Extended)"
其它系统及安装方式，可查看官方文档
新建站点

执行以下命令，即可在当前文件夹下新建站点 mysite
1

hugo new site mysite
预览

执行成功，可以在本地 1313 端口下，预览网站
1

hugo server
打包

打包完成，在 public 目录下生成静态网站
1

hugo
环境配置

hugo 在 config 文件夹下对环境配置文件进行管理(默认不存在该目录，需要用户自己新建)，目录结构如下所示
1 2 3 4 5 6 7

mysite ├── config.toml └── config ├── development │ └── config.toml └── production └── config.toml
如上，新建了 development 与 production 环境配置，可以通过 --environment development 指定配置文件，若无指定，则

hugo server 预览命令，默认使用 development 环境

hugo 打包命令，默认使用 production 环境

指定配置文件的启动命令：
1 2 3 4 5

//预览 hugo server --environment development //打包 hugo --environment development

主题配置

得益于 hugo 丰富的主题库，我们可以简单快捷地获取到许多个性化 hugo 主题，可以预览官网主题库挑选自己喜欢的主题

以下，将采用 hugo-theme-stack 主题为例进行说明

git 初始化

1
2
3
4
5


//进入所在目录
cd mysite

//git初始化
git init

添加子模块，方便后续主题更新

1
2


//在 mysite/themes 目录下，拉取 hugo-theme-stack 并创建名为 stack 的主题
git submodule add https://github.com/CaiJimmy/hugo-theme-stack.git themes/stack

配置主题

打开刚刚下载的主题文件，将 themes/stack/exampleSite 目录下的配置文件复制到根目录，覆盖原先的配置文件，编辑配置文件，将 theme 字段配置为上述步骤创建的主题名称，即 stack

hugo-theme-stack 部分配置说明

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


//访问url，页面跳转时用到
baseurl: https://example.com/

//主题名称，在此处应为 stack
theme: hugo-theme-stack

//网站名称
title: Example Site

//网站说明
copyright: Example Person