Hugo搭建博客（二）— Hugo+Github Pages搭建博客

程序员酷森

发布于 2020-10-19 16:29:36

2.1K0

发布于 2020-10-19 16:29:36

文章被收录于专栏：Java面试精选

使用Hugo已经把博客搭建好了，那应该部署到哪里呢？可以使用VPS、云服务器等，我使用的是Github Pages，免费而且也很好用！

我使用过两种方式来部署，第一种部署简单，但是每次发表博客很麻烦，第二种部署虽然步骤较多，但是发表博客非常便捷，管理起来很非常方便。下面介绍一下在部署过程的步骤和解决的问题。

1 最简单的部署

1.1 创建Repository

在 Github 上创建一个用户名.github.io 的 Repository。

1.2 生成 public 目录

1	hugo --baseUrl="http://cool-sen.github.io/

当然，也可以在config.toml中设置base URL，这样就不用每次设置base URL了，直接使用hugo命令即可

1.3 推送到Github远程仓库

这步就是将public目录添加到远程仓库。如下面的命令：

1 2 3 4 5 6	$ cd public $ git init $ git remote add origin https://github.com/cool-sen/cool-sen.github.io.git // 添加远程仓库 $ git add -A // 跟踪所有文件 $ git commit -m "first commit" // 提交 $ git push -u origin master // 推送到远程仓库

注意：push出错时语句改为

1	$ git push -u origin master -f //强制覆盖

此时访问用户名.github.io就可以在线查看你的网站了。

这种方式，每次都需要手动使用hugo命令去生成public目录，不是很方便。下面介绍一种自动化的方式。

2 使用Github Actions自动构建博客

本地添加文章，提交到Github，之后会自动触发Github Actions帮助我们把刚刚添加的文章通过Hugo发布到Github Pages进行托管。之后即可通过 Github 给 Pages 生成的 URL 访问即可。

2.1 创建两个仓库

这里需要创建两个仓库，一个是 Github Pages仓库，也就是usename.github.io；另一个是Hugo文章仓库，来存放Hugo文章。

创建Github Pages仓库在你的 Github 账号里新建一个 Repository ，仓库名必须为 username-github.io，必须使用 master 分支，这个就是你建立 Github Pages 的 Repository.
创建Hugo文章仓库仓库名为：名称随意都可以，我设置是cool-sen.github.io.myBlog,可以设置为Private，看个人需求。

2.2 为两个仓库绑定 SSH Key

因为当我们在通过Git提交源码之后，Github Actions会编译生成静态文件并通过Git Push到 username.github.io，因此这一步需要 Git 账户认证。

2.2.1 生成提交代码用的 ssh key

打开cmd或者其他命令行工具

1	ssh-keygen -t rsa -b 4096 -C user.email

这种方式可以输入自定义的路径来保存SSH Key，这样就不会影响到电脑中旧的SSH Key。

将会得到以下这两个文件:

1 2	id_rsa_hugo_deploy.pub (public key) id_rsa_hugo_deploy (private key)

2.2.2 填写密钥

假设部署的项目为 username.github.io，Hugo 文章的 Repository 名字是 myBlog。

将 Public Key填写到username.github.io

红色箭头指的Allow write access 一定要勾上，否则会无法部署。

将 Private Key 添加到 username.github.io.myBlog仓库

这里 Secrets 变量名要一定是： ACTIONS_DEPLOY_KEY, 后面会用到。

2.3 本地准备

这一步主要是本地和仓库进行同步，假设Hugo 文章的 Repository 名字是 myBlog，将myBlog仓库克隆到本地，开始初始化 Hugo 系统，如果本地已经有Hugo 系统，只需要步到myBlog仓库即可。

2.4 编写 Github Actions 脚本

通过 Github 自动为我们仓库生成，注意是为 username.github.io.myBlog仓库配置 Actions。

new workflow后，会出现一个 yml 文件的编辑器。第一次使用出现的是skip this : Set up a workflow yourself。

接下来参考peaceiris/actions-hugo 和 peaceiris/actions-gh-pages 项目，编写自己的 workflow。如下面代码，修改完用户名信息，可以直接粘贴过去。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

name: Github Pages #自动化的名称 on: push: # push 的时候触发 branches: # 那些分支需要触发 - master jobs: build: runs-on: ubuntu-latest # 镜像市场 steps: - name: checkout # 步骤的名称 uses: actions/checkout@master #软件市场的名称 # with: # 参数 # submodules: true - name: Setup Hugo # 安装 Hugo uses: peaceiris/actions-hugo@v2 with: hugo-version: 'latest' # 使用Hugo最新版 extended: true - name: Build # 编译 run: hugo --minify - name: Deploy # 部署 uses: peaceiris/actions-gh-pages@v2 env: ACTIONS_DEPLOY_KEY: ${{ secrets.ACTIONS_DEPLOY_KEY }} EXTERNAL_REPOSITORY: 你的用户名/你的用户名.github.io PUBLISH_BRANCH: master PUBLISH_DIR: ./public

修改好之后，点击右上角 commit 提交即可。以后可以本地重新commit，更加方便。