Hugo-建站教程

使用Hugo + Github Pages搭建自己的博客

hugo官网,LoveIt官网

1 hugo安装

windows使用chocolatey安装

choco install hugo-extended -confirm

这里需要注意前置条件，要求先安装git，chocolatey和golang

2 新建本地hugo站点

GitHub 页面有两种类型：

• 用户/组织页面 ( https://<USERNAME|ORGANIZATION>.github.io/)
• 项目页面 ( https://<USERNAME|ORGANIZATION>.github.io//)

一般情况我们都是创建用户/组织页面 ( https://<USERNAME|ORGANIZATION>.github.io/)即在你的github上使用该格式命名新建一个仓库。

然后克隆到本地。在该仓库中使用如下代码初始化本地站点：

1

hugo new site . --force

之后安装主题，首先到hugo主题官网上去选择一个漂亮的主题，打开主题文档页面，根据提示将主题安装到本地站点中，这里以LoveIt为例子：

1

git submodule add https://github.com/dillonzq/LoveIt.git themes/LoveIt

这样就能把主题下载到themes文件夹下了。

一般情况下，我们只需要配置config.toml，主题文档或者git仓库里面通常有默认config.toml，可以直接粘贴到你本地站点的config.toml。默认配置里面有详细的注释，你可以按需配置。

下一步就是更新你的博客内容了，使用如下命令添加一个新的文章：

1

hugo new posts/first.md

这个命令会在你的content文件夹下的posts文件夹里创建一个first.md，这样你就成功创建了一个文章，你需要配置文章的属性，包括题目title，作者author，tag标签tags以及类别categories等。这些配置相关的内容你可以在主题文档里面找到示例，直接复制到你的文章下面，按需配置即可。 我们需要在本地启动服务运行一下站点，看看效果，使用如下命令：

1

hugo server

该命令对于 draft=true 的文章并不会渲染，如果使用 hugo server -D 则将 draft=true 的文章也进行渲染，所以你需要将要渲染的文章的 draft 属性改为 false 或者直接使用后面一个命令。启动的服务能够进行热重载，每一次对文件的保存都会重启服务，所以你可以一边运行服务一边修改自己的内容或配置。

3 将本地站点部署到Github Pages

本地服务运行站点修改好后，在config.toml里面添加一个属性 publishDir = "docs" ，将输出的静态页面放置到docs文件夹里面，原因是Github Pages里面设置静态页面位置只能是仓库main分支本身或者main分支里面的docs文件夹，仓库本身存储我们的hugo站点，所以我们需要将输出的静态页面输出到docs文件夹。

还有一个需要修改的属性是 baseurl = "https://xxx.github.io/" ，将baseurl设置为自己的github页面url。

然后就可以使用命令输出静态页面：

1

hugo

完成后，直接使用git推送到远程仓库：

1

git push origin main

这里需要注意有一个坑，我们需要在本地站点根目录里面添加一个文件 .nojekyll 否则github将把这个仓库识别为一个jekyll驱动的页面，从而无法解析成功，最后的结果就是你打开你的github页面url展示的是你的readme.md的内容。加入这个空文件后可以避免这个情况。

然后打开git仓库的set页面，选择page选项将 Build and deployment 里 Branch 设置为main分支的docs文件夹。设置完后等一段时间就可以看到github以及帮我们把站点部署好了，你打开你的github页面url就可以看到你的博客。

至此你的个人博客就搭建好了，你可以在本地随时修改内容，之后只需要先使用 hugo 输出静态页面然后使用 git 推送到远程仓库即可。