将hexo部署到github,再使用域名绑定github pages
Easul Lv6

上一篇博客写了如何将Hexo部署到Cloudflare worker上,但是后来发现,自己的博客数据存储到Worker KV很占空间,1G的免费存储怕是很快就没了,遂还是将博客放到github,然后用Cloudflare反代比较好。

这里使用了github action,将push到github的项目自动编译到新的分支,就不用本地编译再上传了,显得比较优雅,哈哈!

准备工作

  1. 创建自己的仓库
    注意创建自己的仓库的时候,仓库名要写成用户名.github.io,这样在后边用自定义域名绑定github pages就不会出现找不到静态文件的场景了。

仓库名如果随便写,如blog,生成的github pages就是用户名.github.io/blog
静态文件的路径是/blog/xxx
而用域名如example.com绑定github pages后,静态文件的路径就成了/xxx,从而找不到静态文件
但是仓库名写成用户名.github.io,静态文件默认在/xxx下,绑定好域名后就静态文件找不到的问题了

  1. 生成SSH公私钥
    这里可以参考这篇博客
    公钥的添加这篇博客已经写了,私钥输入下边的链接
    1
    https://github.com/用户名/用户名.github.io/settings/secrets/actions
    然后点击New repository secret,nameHEXO_DEPLOY_PRI,Value填写刚刚cat id_rsa的内容,然后Add secret

Hexo仓库的操作

  1. 添加.gitignore
    在文件中加入自己不需要上传到github的文件和目录的名称,大家可以自行添加,下边是我的一些不需要push的目录和文件
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    .DS_Store
    Thumbs.db
    db.json
    *.log
    node_modules/
    public/
    .deploy*/
    dist/
    workers-site/
    wrangler.toml
    .deploy_git/
  2. 在项目顶层的_config.yml修改配置
    YAML
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    # url进行如下修改
    url: https://用户名.github.io
    # 访问文件的根目录
    root: /
    # 部署的调整
    deploy:
    type: 'git'
    # 仓库地址,github action会用刚刚添加的SSH公钥和私钥上传到这个仓库下
    repo: git@github.com:用户名/用户名.github.io.git
    # 部署的分支,github action最后会将编译的项目部署到这个分支上
    branch: master
  3. 在项目根目录创建.github/workflow目录
    然后在里边创建hexo-build.yml文件,内容如下(需要自行修改user.nameuser.email的内容)。用于github action的自动构建
    YAML
    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
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    # workflow name
    name: Hexo Blog CI

    # master branch on push, auto run
    on:
    push:
    branches:
    - hexo

    jobs:
    build:
    runs-on: ubuntu-latest

    steps:
    # check it to your workflow can access it
    # from: https://github.com/actions/checkout
    - name: Checkout Repository master branch
    uses: actions/checkout@master

    # from: https://github.com/actions/setup-node
    - name: Setup Node.js 12.x
    uses: actions/setup-node@master
    with:
    node-version: "12.x"

    - name: Setup Hexo Dependencies
    run: |
    npm install hexo-cli -g
    npm install

    - name: Setup Deploy Private Key
    env:
    HEXO_DEPLOY_PRIVATE_KEY: ${{ secrets.HEXO_DEPLOY_PRI }}
    run: |
    mkdir -p ~/.ssh/
    echo "$HEXO_DEPLOY_PRIVATE_KEY" > ~/.ssh/id_rsa
    chmod 600 ~/.ssh/id_rsa
    ssh-keyscan github.com >> ~/.ssh/known_hosts

    - name: Setup Git Infomation
    run: |
    git config --global user.name '用户名'
    git config --global user.email '用户邮箱'
    - name: Deploy Hexo
    run: |
    hexo clean
    hexo generate
    hexo deploy
    各个参数含义可以参考阮一峰对github action的详解
  4. 仓库下的一些git操作
    BASH
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    # 初始化git
    git init
    # 设置自己的邮箱和用户名
    git config user.email '用户邮箱'
    git config user.name '用户名'
    # 设置自己的remote路径,这里使用ssh进行上传
    git remote set-url origin git@github.com:用户名/用户名.github.io.git
    # 创建hexo分支,用于存储源代码,只要一上传文件,github action就会触发
    git checkout -b hexo
    # 添加修改的文件
    git add .
    # 本次提交的描述
    git commit -m "init"
    # 进行仓库提交
    git push origin hexo
  5. 大概解析一下流程
    在上边的配置之后,git先将项目上传到hexo分支,然后hexo-build.yml设置了只要hexo分支有上传操作就触发github action,然后github action自行安装依赖并编译,最后找到项目顶层下的_config.yml中的deploy下的branch,编译后的项目将上传到该分支。

这里边我用github action很多次都部署失败,说是找不到仓库,我心想:我创建了仓库了啊,为什么仓库会是空的呢?

后来明白了,我需要对应好这里的几个配置文件里的仓库及分支名

YAML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 这里的分支是只要一触发,就执行github action,也是上传源代码的分支
hexo-build.yml:
on:
push:
branches:
- hexo
# 这里的repo是github action自动执行时推送的仓库,branch是github action自动执行时推送的分支
# url是最后部署好在github pages限时的链接,root是github pages静态文件的根目录
项目顶层的_config.yml:
deploy:
type: 'git'
repo: git@github.com:Easul/easul.github.io.git
branch: master
url: https://easul.github.io
root: /
  1. 推送上去后,可以开启自己的github pages,路径如下
    1
    https://github.com/用户名/用户名.github.io/settings/pages
    source处选择分支,然后save即可

然后在Custom domain那里填写自己的其他域名,cloudflare再将该DNS对应的cname设置为用户名.github.io就可以用了

因为添加自定义域名后,项目的根目录会自动生成一个CNAME文件,
然而在重新push后,github action会将新编译的文件部署到master分支下,删除原来的CNAME文件,自定义域名就无法访问了。
我们可以在项目的根目录的source文件夹下创建CNAME文件,里边填上自己的域名,如blog.example.com,不要带https等其他字符
这样github action自动构建后就会顺便将CNAME添加到根目录下,也就不影响自定义域名的访问了。

 评论
Powered By Valine
v1.5.2