如何用 hugo 搭建个人博客

472 阅读2分钟

最近按照Hugo官方教程搭建了一下自己的个人博客页面,分享一下我的搭建过程。

官网教程

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 来预览个人博客了。