最近按照Hugo官方教程搭建了一下自己的个人博客页面,分享一下我的搭建过程。
Hugo安装
首先进入Hugo下载地址,找到对应系统的Hugo压缩文件进行下载。
例如windows系统,则选择windows压缩包下载,如图:
下载好之后选择目录解压缩,同时将 hugo.exe 所在目录添加到环境变量。例如:解压到 D:\Software\hugo 目录下,此时 hugo.exe 所在目录为 D:\Software\hugo ,将 D:\Software\hugo 添加到环境变量的 Path 中。
配置好之后,在终端窗口运行 hugo version 查看是否配置成功,如果正常显示Hugo版本,则配置成功。
创建新的Hugo个人博客页面
1. 创建一个页面
在指定目录下,命令行运行
hugo new site quickstart
(这里的 quickstart 可以任意设置名称。由于我最后将搭建在 github 上,这里的 quickstart 设置为 XXX.GITHUB.IO-GENERATOR )。这时会创建一个 quickstart 目录。
2. 添加一个主题
通过如下命令,为我们的个人博客添加一个主题。
cd quickstart
git init
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
命令运行结束之后,再运行如下命令就可以添加主题了。
echo 'theme = "ananke"' >> config.toml
我没有去设置其他主题,采用的默认主题,有兴趣的同学可以看文档研究一下。
3. 添加博客内容
以上操作做完,我们就可以开始写第一篇博客了。
运行命令
hugo new posts/my-first-post.md
这时候会在 content\posts 目录下生成文件名为 my-first-post.md 的文件。打开 my-first-post.md 的文件,可以修改 title 来设置文章的名称, draft: true 是否要保存草稿,我这里直接设置为 false 。做好这些配置之后,我们就可以在这个文件里用markdown语法开始写博客了。
4. 在浏览器中查看个人博客
写好第一篇博客之后,我们需要通过执行 hugo server -D 命令来启动Hugo服务,通过 Ctrl+C 停止服务。
服务启动之后,根目录下会生成 public 静态页面目录,我们需要将这个目录添加到忽略文件下,避免之后创建远程仓库导致本地创建子仓库。
我们通过 http://localhost:1313/ 这个地址就可以看到自己的博客啦。
5. 编译静态页面
如果需要发布在个人的 github 上预览。首先,在github上创建一个空的代码仓库 xxx.github.io ,和本地的 quickstart\public 目录进行关联,将代码提交到 github 。然后,我们需要打开 config.toml 文件进行编辑,将 baseURL = "https://example.org/" 替换为 baseURL = "https://xxx.github.io/",再执行一次 hugo -D ,再将 xxx.github.io 进行代码更新,之后就可以通过 Github Pages 来预览个人博客了。