使用hugo搭建博客

hugo是什么

Hugo 是一个快速且现代的静态网站生成器，采用 Go 编程语言开发，Hugo 的设计目标是让创建网站重新变得有趣。 Hugo 是一个通用的网站框架。从技术上讲，Hugo 是一个静态站点生成器。与动态构建页面的系统不同，Hugo 在创建或更新内容时构建页面。由于网站的浏览频率远高于编辑频率，因此 Hugo 旨在为您的网站最终用户提供最佳的浏览体验，并为网站作者提供理想的写作体验。

使用 Hugo 构建的网站非常快速和安全。Hugo 构建的网站可以托管在任何地方，包括 Netlify、Heroku、GoDaddy、DreamHost、GitHub Pages、GitLab Pages、Surge、Aerobatic、Firebase、Google Cloud Storage、Amazon S3、Rackspace、Azure, 和 CloudFront，并且与 CDN 更配。Hugo 网站在运行时不需要数据库或依赖于诸如 Ruby、Python 或 PHP 等昂贵的运行时环境。

我们认为 Hugo 是一个理想的网站创建工具，具有几乎即时的构建时间，能够在网站修改时即刻重建。

以上内容是hugo官网对hugo的定义，简而言之，hugo是一个静态网站生成器，非常利于我们使用它去搭建博客、企业官网等等静态网站

安装hugo

下面以mac平台为例，我们使用brew安装hugo

安装brew

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

安装hugo

brew install hugo

创建空白博客

hugo new site demo -f yml

-f yml表示config使用的格式，hugo默认使用的toml格式，因为我对yml更熟悉，所以指定为yml格式

运行hugo服务

首先进入我们的hugo目录中，cd demo

启动hugo服务hugo server

默认端口是1313，打开http://127.0.0.1:1313，内容是空白的，因为我们没有添加内容

自定义主题

hugo提供了非常多的主题供我们使用，我们可以通过https://themes.gohugo.io找到我们喜欢的主题。
下面我们来安装paperMod

使用git submodule安装我们的主题

在demo目录下执行以下命令

git init # 初始git，否则submoudule无法使用
git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod
git submodule update --init --recursive

这时我们已经成功安装了paperMod的主题

修改config.yml让我们的hugo使用paperMod主题

编辑config.yml添加theme配置

我们再打开http://127.0.0.1:1313可以看到我们的主题已经成功加载了

创建第一篇博客

下面我们来创建我们的第一篇博客
hugo new posts/fisrt.md
我们设置draft的值为false，否则他不会出现在我们网站中

这时候我们打开http://127.0.0.1:1313，发现我们编辑的第一篇博客已经出现在我们的网站中了

部署我们的网站

手动部署

使用hugo命令生成网站，这时候public目录会生成我们的网站代码。我们可以通过nginx或者其他web服务器部署我们的网站，再此不做详细说明。

通过github action部署到github pages

上传我们的代码到github

为了不暴露我们的源码，我们单独的创建了一个私有仓库存储我们的hugo网站源代码。

创建githubPages仓库

我们创建部署github page的仓库，仓库名必须要符合[username].github.io的规则，[username]替换成你的github用户名即可，比如我的github用户名 是ckfear，那么创建的仓库名即为ckfear.github.io

添加我们的workflow

在我们的项目目录下创建.github/workflows/hugo-auto-deploy.yml文件，并且添加如下内容：

配置我们的accessToken

personal_token: ${{ secrets.ACTION_ACCESS_TOKEN }}需要我们去配置token到action中的secret中 因为workflow需要我们提供认证信息，从而可以上传代码到其他仓库中。

点击头像打开settings,接着点击红色圈标志的位置

点击Generate new token,勾选一下图片勾选的内容

生成新的token，我们保存我们生成的token。

根据图示，依次操作，name使用我们之前在workflow中使用的ACTION_ACCESS_TOKEN, 在value中填入我们刚才保存的token。

上传我们的workflow代码

这时候，将我们新增的.github目录下的代码提交到github中，然后github会自动的生成 静态网站并且自动部署到我们的gh仓库中。我们打开我么网站代码仓库中的action，会发现已经在自动构建了，如下图所示。

我们再次打开我们之前创建的yourusername.github.io仓库，发现我们的workflow已经将构建好的网站推送到我们的仓库中了。

这时候在浏览器中打开yourusername.github.io，发现我们的网站已经成功部署到githubpage上了。 以后我们想更新我们的网站，只需要在本地编辑内容，提交到github即可，不用担心网站的部署问题了。