前言

很久以前就开始折腾个人博客,从 Wordpress 到今年年初折腾的 Hexo,但从来没有静下心来写过东西。最近报名参加了一个 Game Jam,于是想再折腾一下博客,记录一下开发过程。但是因为各种原因(主要是找不到喜欢的主题),不是很想再用 Hexo 了,所以这次选择使用 Hugo。网络上的很多搭建 Hugo+Caddy+WebHook 的文章都使用的是 Caddy 1,但如今 Caddy 已经更新到了 v2 ,本着用新不用旧的原则,自己折腾出来了,就将过程记录在此。

我的准备

  • Mac
  • Gitee 账号(或 Github 等)
  • 一台运行 Ubuntu (18.04) 的阿里云主机

在 Mac 上安装 Hugo

在 Mac 下可以直接使用 Homebrew 进行安装

brew install hugo

然后,使用 Hugo 在本地生成站点

hugo new site mysite
cd mysite

需要先下载一个主题,我这里使用的是 PaperMod

git submodule add https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod --depth=1

并在 config.yml 中启用它 (Hugo 默认使用 config.toml,因为我的习惯,选择使用 yaml 格式的配置文件)

theme: "PaperMod"

创建一个测试用的页面

hugo new posts/my-first-post.md

之后就可以启动 Hugo 自带的服务器在本地进行预览

# -D 显示草稿; -w 实时更新
hugo server -D -w

用浏览器访问 localhost:1313 就可以预览博客的样子啦,并且对文章或配置做出的改动会试试更新在页面上。

创建 Git 库

直接运行 hugo 命令会在站点根目录下创建一个 public 文件夹,和 Hexo 一样,里面是 Hugo 生成的网站静态文件,我们需要把它部署到服务器上。为了免去将文件手动上传到服务器的麻烦,我使用 Gitee 作为一个本地和服务器之间的桥梁(原本使用的是 Github,但因为众所周知的原因,阿里云拉取 Github 总是出错),并把 public 目录推送到远程仓库中。 首先在 Gitee 上新建一个仓库,然后在本地执行

cd public
git init
git add .
git commit -m "first commit"
git branch -M master
git remote add origin https://gitee.com/user/repo.git
git push -u origin master

接下来配置 WebHook,它会将仓库中代码的改变推送到我的服务器,从而让服务器拉取远程仓库中的代码进行更新。从网页端进入仓库,选择右上角管理,选择 WebHooks,并添加 webHook。URL 可以填写 https://example.com/webhook ,然后填写密码,事件只需勾选 Push 即可。

Caddy

Caddy 是一个用 Go 编写的轻量级 Web 服务端,配置起来比 Apache/Nginx 更加简单,而且可以自动申请 ssl 证书,非常方便。 安装 Caddy 之前要首先安装 Go ,在官方网站下载好之后,只需运行

rm -rf /usr/local/go && tar -C /usr/local -xzf go1.17.2.linux-amd64.tar.gz
echo "export PATH=$PATH:/usr/local/go/bin" >> ~/.bashrc
source .bashrc

这样就安装好了,可以通过运行 go version 来确认。

接下来安装 Caddy 。由于官网上的第三方模块有限,我们需要自己编译一个带 caddy-webhook 模块的 Caddy,这个模块可以让 Caddy 使用 WebHook 自动从 Gitee 上拉取更新。

go install github.com/caddyserver/xcaddy/cmd/xcaddy@latest
mkdir caddy
cd caddy
xcaddy build --with github.com/WingLim/caddy-webhook

安装过程非常缓慢,完成之后会在本目录下生成一个名为 caddy 的文件。在同目录下新建一个 Caddyfile 作为网站的配置文件,内容如下:

example.com {
    tls yourmail@example.com
    encode zstd gzip
    root blog
    file_server

    handle_errors {
        @404 {
            expression {http.error.status_code} == 404
        }
        handle @404 {
            rewrite * /404.html
            file_server
        }
    }

    route /webhook {
        webhook {
            repo https://gitee.com/user/repo.git
            branch master
            path blog
            secret yoursecret
            submodule
            type gitee
        }
    }
}

然后输入 ./caddy start 启动 Caddy 服务器,就可以看到它在自动申请 ssl 证书并且拉取 Gitee 上的仓库啦,大功告成!


感谢