准备工作没做好的,可以先参考用hugo搭建静态博客——准备。
初始化
初始化项目
hugo new site blog # blog 即为项目名
执行以上命令即可在当前目录下创建一个名为blog的目录,结构如下:
blog # 项目名
├── archetypes # 文档模板目录
│ └── default.md # 默认模板
├── assets
├── config.toml # 默认的配置文件
├── content # 文档目录
├── data
├── layouts
├── public # 默认生成目录
├── static
└── themes # 主题存放目录
初始化 git
cd blog # 切到项目目录
git init # 初始化 git 仓库
echo .hugo_build.lock > .gitignore # 创建 git 忽略文件
下载主题
下载并使用主题有三种方案:手动管理、git submodule 子模块管理和hugo mod 管理。
手动管理
手动管理是最笨、最麻烦的一种。
-
从选定好的主题的网站上下载主题包(可能为
*.zip这种) -
手动解压主题,并把主题的
整个目录放入项目的themes目录中
采用这种方案了,建议把主题也加入到仓库,否则如有遗失、误改等会相当麻烦。
如果使用的主题有更新了(如:想使用新特性或bug修复),或者想更换别的主题了,一整套操作还得手动来一遍(包括后面的构建等)。
git submodule 子模块管理
前提是已经进行过git 初始化。
cd blog # 切到项目目录
git submodule add <主题的仓库地址> themes/<主题名> # 把主题下载到指定的目录中
按照 git 子模块的管理方法进行管理即可,一般不会出啥大错,也几乎不占用项目仓库空间,将来更换别的主题也方便。
hugo mod 管理
hugo mod应该是类似于go mod,由于对golang也不熟,暂不展开,以后弄明白了再说。
修改配置
编辑config.toml,默认内容如下,可根据实际进行修改:
baseURL = 'http://example.org/' # 网站的基础地址
languageCode = 'en-us' # 网站的主要语言
title = 'My New Hugo Site' # 网站的标题
设置基础网址
基础网址可暂且理解为发布后的主页地址,对于基于github或gitee的静态页面来说,该地址是和仓库名强相关的:
-
如果
仓库名与用户名同名,则发布后的地址为http://<用户名>.github.io/或http://<用户名>.gitee.io/ -
如果
仓库名与用户名不同名,则发布后的地址为http://<用户名>.github.io/<仓库名>/或http://<用户名>.gitee.io/<仓库名>/
应用主题
直接添加如下配置:
theme = '<主题名>' # 如'hugo-theme-relearn'
测试
cd blog # 切到项目目录
hugo server # 启动服务
然后在浏览器打开http://localhost:1313/即可查看效果。
保持服务运行,直接修改配置或文档内容,即可直接看到修改效果,无需重启服务。
构建发布
构建
cd blog # 切到项目目录
hugo # 启动服务
执行命令后,会在public目录下生成整个站点的页面,发布时只需将public发布即可。
发布
以gitee为例:
-
把所有内容都提交到仓库,并推到远程仓库
-
在网页上进入仓库,选择
服务->Gitee Pages,选择分支,填写部署目录即public,点启动等待部署完成即可
据gitee pages 帮助所说:
仓库编译目录下存在
config.toml|josn|yaml文件和content目录时候,会使用hugo生成静态文件。
也就是说:如果gitee pages能够使用hugo成功编译,那么就不需要手动构建public并上传到仓库再发布了,直接把所需配置和文档上传到仓库即可。
但是,经过多次测试,并未成功发布,不知道是哪里没做对,还是对官方的描述理解有误,等以后了解得更深入了再说吧。