在浏览器中编辑与部署静态博客

这篇文章即是在网页中编辑完成。

静态博客(hugo、hexo)一直存在着一个痛点——编辑与部署操作相对于动态博客(wordpress、typecho)要复杂一些，动态博客可以直接在网页上登录进后台发布新文章或者是修改已有的文章，而静态博客的话要么将站点文件放在本地，编辑好之后生成静态站点文件上传，或者是将hugo、hexo装在服务器上,并通过vscode remote ssh一类的工具连接到服务器上编辑文章并构建发布，总还是有一些不方便。为了解决这个问题，我之前开始了一个静态博客编辑器的项目，不过没想到这个项目还没完成，我就发现了一个更加合适的解决方案——使用gihtub Web-based editor + github actions 来实现静态博客的在线编辑与自动构建、发布工作。

今天朋友告诉我在github仓库下按下句号 “.” 键可以进入一个网页版的vscode编辑器的时候，我才发现我火星了(其实之前也听说过，不过一直没多想)，虽然这个网页版的vscode只是一个编辑器(没办法像vscode那样运行程序，要实现这个需求得使用codespaces)，不过可以编辑仓库中的文件并进行提交，也可以安装vscode的多数插件，于是我突然想到，既然可以提交代码，那么配合github actions不就可以做很多事情了吗，比如检测到提交后运行hugo或是hexo生成静态网站文件，并将生成的文件部署到自己的服务器上，或者是将站点文件部署到github page对应的仓库中。

将博客文件夹上传

之前我的站点文件一致保存在服务器上，我们想将其上传到私有仓库中，先在github上创建一个private仓库，然后按照 create a new repository on the command line 的在本地/服务器上的hugo/hexo文件夹中执行仓库初始化并将仓库push到私有库中。

1
2
3
4
5
git init
git add *
git commit -m "first commit"
git branch -M main
git remote add origin

git repo

此时我们可以尝试进入到包含文章内容的文件夹下，如 content/posts/ ，再按下句号键就可以看到文章啦，网页版的vscode也可以安装插件来改善markdown的体验，不过 Unotes 和 vditor 这两个提供类似于 typora 即时渲染体验的插件都无法在网页版上使用有一点可惜。

在网页中打开Markdown

我们可以在网页中对文章进行修改，然后点击左侧的git相关部分进行commit与push即可将我们的修改同步到仓库中了。

git相关操作

自动构建与发布

其实到上面为止，这篇文章的新东西已经说完了，下面的都是已经有很多人做过的通过Action构建与部署阶段了，不过本着一篇文章做完整个流程的想法，这里还是做一下记录。

Actions构建Hugo

因为我使用的是hugo，所以这里只提到了hugo的构建，不过hexo的构建也有很多的文章写过了，自行查阅即可，这部分我参考了用 Hugo 配合 Github Actions 自动构建Blog

在仓库页面中点击Actions标签，并点击 *Skip this and set up a workflow yourself * 创建一个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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
# This is a basic workflow to help you get started with Actions

name: Blog Deploy

# Controls when the workflow will run
on:
  # 有push的时候便进行构建
  push:
    branches: [ main ]
    
  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  # This workflow contains a single job called "build"
  build:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest

    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
      - uses: actions/checkout@v2
      # https://github.com/peaceiris/actions-hugo
      - name: Install hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: 'latest'
          extended: true
          
      - name: Build site
        run: hugo --minify

      # https://github.com/easingthemes/ssh-deploy
      - name: Deploy site to server
        uses: easingthemes/ssh-deploy@v2.2.11
        env:
          SSH_PRIVATE_KEY: ${{ secrets.ACCESS_TOKEN }}
          # 此处为rsync的flag
          ARGS: "-avz --delete"
          SOURCE: "public/"
          REMOTE_HOST: "aoyouer.com"
          REMOTE_USER: "aoyou"
          TARGET: "/var/www/html/aoyou"

部署到自己的机器

部署到自己的服务器由上面的action中的 Deploy site 这一step实现，使用 ssh-deploy，其中ssh key等敏感数据我们可以采用在github中配置，运行时注入的方式来使用。

1
2
3
4
# 生成 ssh key
ssh-keygen -m PEM -t rsa -b 4096
# 将公钥追加到 authorized_keys 文件中
cat id_rsa.pub >> ~/.ssh/authorized_keys

在同一仓库的 Settings 栏下点击 Secrets 选项，我们可以在这里添加运行时注入的变量。

secrets

新增一个名为 ACCESS_TOKEN 的变量并将 ssh 私钥放进去,配置好之后便可以将本地/浏览器编辑器中的修改commit并push到Github上了

成功构建

部署到Github page

部署到page的部分可以参考用 Hugo 配合 Github Actions 自动构建Blog 与使用 Github Actions 來自動化部署 Hugo 到 Github Pages 这两篇文章使用actions-gh-pages即可实现将站点文件部署到Github page。

参考

actions-hugo

ssh-deploy

用 Hugo 配合 Github Actions 自动构建Blog

使用 Github Actions 來自動化部署 Hugo 到 Github Pages。