用hugo搭建静态博客——初始框架

498 阅读3分钟

准备工作没做好的,可以先参考用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 管理

手动管理

手动管理是最笨、最麻烦的一种。

  1. 从选定好的主题的网站上下载主题包(可能为*.zip这种)

  2. 手动解压主题,并把主题的整个目录放入项目的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'      # 网站的标题

设置基础网址

基础网址可暂且理解为发布后的主页地址,对于基于githubgitee的静态页面来说,该地址是和仓库名强相关的:

  • 如果仓库名用户名同名,则发布后的地址为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为例:

  1. 把所有内容都提交到仓库,并推到远程仓库

  2. 在网页上进入仓库,选择服务->Gitee Pages,选择分支,填写部署目录即public,点启动等待部署完成即可

gitee pages 帮助所说:

仓库编译目录下存在config.toml|josn|yaml文件和content目录时候,会使用hugo生成静态文件。

也就是说:如果gitee pages能够使用hugo成功编译,那么就不需要手动构建public并上传到仓库再发布了,直接把所需配置和文档上传到仓库即可。

但是,经过多次测试,并未成功发布,不知道是哪里没做对,还是对官方的描述理解有误,等以后了解得更深入了再说吧。