用 Hugo 搭建个人静态博客

目录说明

1. layout目录和themes目录都可以控制皮肤，区别在于：hugo会首先查找layout中是否有皮肤文件，因此不需要指令；对于theme中的文件需要额外的指令，相对更加方便导出传递
2. static目录存放：images, CSS, JavaScript，etc

生成站点

将站点生成到所需路径下

1
2

cd d:/hugo/sites
hugo new site myblog

1. 将路径设置到需要添加blog的位置
2. 使用hugo new site命令生成blog
3. 设置blog文件夹的名称

在public目录下生成网站的方式

1

hugo

它会将你的网站设置和内容生成到public目录下，为后面的部署做准备

设置主题

clone 主题到 themes 目录

1. 在 主题列表 中，找到自己喜欢的主题，将主题添加到themes目录下

   1 2	cd themes git clone 主题网址

   • 在 clone 的时候要将主题文件 clone 到 themes 目录下。也可以自己复制到对应目录。
   • 这里的命令在主题的网页中有，可以直接复制。

2. 对于一些提供 example site 的主题，可以将文件中的 example site 目录下的文件复制并覆盖掉源blog下的文件

   layout目录

3. layout 目录可以承载以 .html 为格式的模板

4. 模板类型包括：single page、partials、list pages、homepage、taxonomy templates

运行hugo

执行hugo命令进行调试

1

hugo server --theme=主题名称 --buildDrafts

调试完成后可以在本地的 local host 上打开

动态监测

hugo 在运行网站后，能够动态的调整网站内容，只需要将修改的文件保存后，效果就会在网站上动态显示出来

关闭动态监测的方式：

1
2
3
4

hugo server --watch=false

# 或者
hugo server --disableLiveReload

这个方法同样可以通过在 config.toml 或 config.yml 中加入以下任意语句达成

1
2
3
4

disableLiveReload = true

# 或者
disableLiveReload ： true

本地编写文章

在 post 目录下生成 markdown 文件

1

hugo new post/blog.md

如果只需要创建在 content 下，可以直接生成而不必指明路径

1

hugo new blog.md

部署在GitHub上

1. 在GitHub上创建一个仓库，并设置好命名和描述——比如将仓库命名为 blog
2. 在仓库设置中打开 GitHub Pages 设置，并复制生成的 GitHub Pages 网址
3. 在站点根目录执行 hugo 命令，生成最终页面

   1	hugo --theme=主题名称 --baseUrl="GitHub Pages 网址"

   完成后，所有的静态页面都会生成public目录
4. 将public目录下所有文件push到刚建立的repository的master分支下

   1 2 3 4 5 6

   cd public git init git remote add origin https://github.com/用户名/仓库名.git git add -A git commit -m "fist commit" git push -u origin master

然后在对应的 GitHub Pages 可以打开我们的个人博客

参考资料：

• 哔哩哔哩：手把手教你从0开始搭建自己的个人博客；
• 利用基于Go Lang的Hugo配合nginx来打造属于自己的纯静态博客系统 (v3u.cn)；
• Hugo Theme Introduction | Hugo Themes (gohugo.io)；
• Hugo中文文档 (gohugo.org)；