部署你的Hugo-Stack博客

🍕利用Github Page和Github Action部署你的Hugo博客

🍔注册GitHub

打开https://github.com/,(打不开的可能需要魔法,或者换个时间点打开,具体怎么操作就不细说了,懂得都懂😶),注册一个GitHub账号,如果不会注册那你还来看这篇文章干嘛.

🧀创建Github仓库

为了使用GitHub Action自动部署,加上便于管理,所以创建两个仓库,虽然一个也行.

1.我们先创建一个名字为blog的仓库用于存放hugo生成的文件,打开右上角的+号,然后选择New repository以新建仓库

2.跟着图片里的步骤操作,先给仓库取个名字,叫做blog(小白最好将仓库名字跟我起一样的),然后勾选public,接着勾选Add a REAMME file,最后点击Create repository完成创建.

3.接下来我们按照刚才那样依葫芦画瓢,再创建一个名为blog-file的仓库

🍦获取SSH Key密钥

ssh密钥可以是我们推送文件到仓库时不需要每次都输入密码,大大的提高我们的效率.所以我们首先需要在我们的电脑生成ssh密钥

1.在git bash执行以下指令,配置邮箱和用户名

git config --global user.email "you@example.com"   #you@example.com替换为你的邮箱并回车
git config --global user.name "Your Name"          #Your Name替换为你的名字并回车

2.生成shh key,在git bash中 输入以下命令

ssh-keygen -t rsa

一路回车就行

默认会生成在如下目录

C:\Users\用户名\.ssh

用记事本打开生成目录下id_rsa.pub,其中的内容即为公钥,id_rsa即为私钥.这两个待会要用到.

3.将将公钥配置到GitHub账户中,先打开设置,即Settings

进入SSH and GPG key配置项里,点击SSH keys下的New SHH key进行添加

4.然后随便在Title项里随便起一个名字,在Key里填入刚才得到的id_rsa.pub里的内容,然后点击Add SSH key就添加好了.

5.接下来我们需要往刚才创建的名为blog-file的仓库里添加id_rsa密钥,点击Settings,然后找到Secrets and variables,点击Actions,然后点击New repository secret，在Name里填入ACTIONS_DEPLOY_KEY，在Value里填入id_rsa密钥即可。

🍚部署hugo博客

1.接下来我们在我们的博客根目录下创建一个名为.github的文件夹,然后在文件夹里新建一个新的文件夹,名字为workflows,接着进入workflows文件夹里新建一个名为deploy.yml的文件,再在deploy.yml里填入如下内容,最终目录为~\blog\.github\workflows\deploy.yml,将deploy.yml中的external_repository项里的lin-snow改为你GitHub注册时的名字即可

name: GitHub Page

on:
    push:
        branches:
            - main # main 更新触发

jobs:
    deploy:
        runs-on: ubuntu-latest
        steps:
            - uses: actions/checkout@v3
              with:
                  submodules: true # clone submodules
                  fetch-depth: 0 # 克隆所有历史信息

            - name: Setup Hugo
              uses: peaceiris/actions-hugo@v2
              with:
                  hugo-version: "0.115.2" # Hugo 版本
                  extended: true # hugo插件版 Stack主题 必须启用

            - name: Cache resources # 缓存 resource 文件加快生成速度
              uses: actions/cache@v3
              with:
                  path: resources
                  # 检查照片文件变化
                  key: ${{ runner.os }}-hugocache-${{ hashFiles('content/**/*') }}
                  restore-keys: ${{ runner.os }}-hugocache-

            - name: Build # 生成网页 删除无用 resource 文件 削减空行
              run: hugo --minify --gc

            - name: Deploy # 部署到 GitHub Page
              uses: peaceiris/actions-gh-pages@v3
              with:
                  # 如果在同一个仓库下使用请使用 github_token 并注释 deploy_key
                  # github_token: ${{ secrets.GITHUB_TOKEN }}
                  deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}

                  # 如果在同一个仓库请注释
                  external_repository: lin-snow/blog # 你的 GitHub page 仓库 example/example.github.io

                  publish_dir: ./public
                  user_name: "github-actions[bot]"
                  user_email: "github-actions[bot]@users.noreply.github.com"
                  full_commit_message: Deploy from ${{ github.repository }}@${{ github.sha }} 🚀
                

2.然后在博客根目录文件夹下新建一个名为deploy.sh的文件用于一键部署博客,在deploy.sh中填入如下内容,其中最后一行代码里的git@github.com:lin-snow/blog-file.git需要更改为你自己仓库的地址,可以通过如下图片中的操作获得该地址

hugo #构造你的blog

git init #初始化git

git add -A

git commit -m 'deploy'

git push -f git@github.com:lin-snow/blog-file.git main#向存储库推送

然后双击打开运行deploy.sh即可自动推送文件到仓库,以后写完博客或修改博客后都需要运行一下deploy.sh,才能部署到云端

3.接下来我们先运行deploy.sh推送一下文件到仓库,等推送上去之后,我们才能完成接下来的操作.

注意,第一次运行deploy.sh可能会出现如图这种情况,直接输入yes回车即可,如果仓库里没发现上传的文件可以再运行一次deploy.sh

这里贴出我的GitHub Action运行状况

🍺开启Github Page

等待Github Action完成后,我们需要开启GitHub page,首先进入blog这个仓库,然后打开设置,找到page项,根据如下设置即可.

到这里我们就成功上线我们的博客了.至于自定义域名可以在网上找到很多教程,这里就不写了,毕竟我比较懒.

🥝利用Vercel部署你的Hugo博客

由于Vercel相比与GitHub在国内的访问速度更快,所以我比较推荐使用Vercel部署,但是Vercel分配的二级域名已经被墙了,所以需要绑定自定义的域名才能解决国内的访问问题.接着上面的操作.

🍖登录Vercel

首先我们需要登录一下Vercel,由于Vercel支持直接使用GitHub登录,所以直接用GitHub登录就行了.

🎈导入博客

登录Vercel后,点击页面右上角的Add New ...按钮,选择Project

然后选择我们在GitHub创建的Blog项目,点击Import

接着其他什么都保持默认即可,直接点击Deploy等待部署完成

等待导入完毕后会自动分配一个二级域名给你,但是这个被墙了,所以我们要自定义域名,先点击刚刚导入的项目,选择Settings,然后选择Domains,在输入框中输入自己的域名,然后按照提示在域名服务商中添加解析即可.

这样子我们就完成博客在Vercel的部署了.🎉