Hugo 搭建个人博客
我使用的为 Windows 操作系统,只演示在 Windows 下的安装搭建流程。
本网页即为搭建成果
1. 下载 Hugo
官方中文文档
2. 下载 Hugo 主题
主题网站
安装前确保已经安装 git 并配置环境变量。下拉网页可以看到使用 git 安装主题的方式,例如:
themes 路径在执行上一步创建站点目录中被自动创建,如果按照官方文档进行安装,你的目录结构应该和我此时一样:
3. 在本地启动博客
- t 指定了安装的主题,-buildDrafts 显示内容。可以看到此时的访问地址为 http://localhost:1313/,在浏览器中访问(使用 m10c 主题)。
注意一定要在博客的 根目录 执行此命令。
不同主题的使用方式可能不同,比如 zzo 的开启方式为:
需要查看下载页的文档,灵活变动。
4. 创建博客文件
hugo new /test/HelloHugo.md
使用如上命令,创建一个 markdown 文件,此路径被保存到博客根目录下的./content 目录中。
于是就可以在 markdown 文件中编写博客了!
特别注意!如果在 markdown 文件中写了如 <img … > 的 HTML 标记,需要在 config.toml 中设置
unsave = true
,否则将不允许在 md 文件中使用 HTML 语法。由于我希望使用图片的缩放功能,需要用到 HTML 语法,需要进行设置。参考博客
5. 将博客部署到 Github
5.1. 创建一个空仓库
仓库名称为用户名.github.io
5.2. 在 Hugo 中进行部署操作
在根目录执行如下命令,将 hugo 部署到刚才创建的空仓库中。baseUrl 为你的博客配置完成后的访问路径。
执行完毕后,生成了 public 目录:
5.3. 将 public 目录上传至 github 仓库中
cd public
git init
git remote add origin 仓库地址
git add .
git commit -m “first commit”
git push -u origin master
如果你是第一次使用 git,还需要配置自己的用户名和邮箱:
- 配置用户名:
git config --global user.name "your name"
; - 配置用户邮箱:
git config --global user.email "youremail@github.com"
;
通过 baseUrl 中填入的路径,即可访问博客。
5.4. 后续博客的更新
还是需要通过 hugo new /test/HelloHugo.md
创建博客文件,编写完成后执行 hugo --theme= 主题文件名(h10c) --baseUrl= 博客访问网址(https://aalchemist.github.io/) --buildDrafts
将静态页面更新到 public 目录,再将 public 里的文件提交到暂存区git add .
,提交到版本库git commit -m "..."
(https://github.com/AAlchemist/AAlchemist.github.io),push 到远程仓库git push -u origin master
。
6. Enjoy it
搭建博客也花了不少时间,感觉进一步的配置还是巨大的坑,比如如何添加层级目录,如何添加评论系统,都需要继续学习配置,不过最主要的还是坚持写博客,在记录和总结中巩固知识。