Featured image of post 使用codespace在线编辑与部署hugo网站

使用codespace在线编辑与部署hugo网站

使用hugo这类静态网站生成程序相对于wordpress、typecho等程序最大的一个问题就是在线修改网站内容不方便,但是随着github codespace beta测试结束,对每个用户开放,这已经不再是问题。

静态网站在线编辑构建的新方案

我曾经写过一篇文章 使用Github在线编辑器与Actions实现静态博客在线编辑与部署, 描述了我是如何使用Github的在线编辑器(在仓库中按.进入)以及github actions实现了在浏览器里面直接编辑、新增网站的文章,并提交到github仓库,然后触发github actions自动生成静态页面并通过rsync同步到自己的服务器上。但是当时的方案仍旧存在着一些不足,因为当时进入的在线编辑页面是一个静态版本的,完全跑在浏览器里面的程序,虽然可以使用大部分的插件,但是少了重要的一环——后端,因此我们修改好文章之后还得先提交到git分支上并借助actions来为我们提供构建、发布等缺失的后端的服务,这一流程还是比较耗时的。

但是在前段时间GitHub codespace结束了beta测试,向所有用户开放,2c4g的实例下免费用户每个月差不多有60小时的使用时间, 其实当时写那篇文章的时候我就听说了codespace,但是当时没有机会使用,而在正式开放之后,之前的想法便可以实践一下了。

使用流程

首先,这一切的前提是你的hugo项目要通过github管理,也就是 content、assets、themes等目录都在你的github仓库里面(推荐使用private repo),codespace的使用倒是很简单,访问主页,点击new codespace并选择你的hugo项目对应的仓库,codespace便会开始初始化,如果你用vscode并且vscode登录了你的github账号,初始化之后codespace也会安装你本地使用的插件,除此之外codespace还预装了常用的程序,甚至自带hugo,可以说是非常贴心了,不过自带的hugo不是extended版本的,部分主题可能需要extended版本的hugo,这样的话就得自己手动替换一下了。

1
2
3
4
5
cd /tmp
wget https://github.com/gohugoio/hugo/releases/download/v0.106.0/hugo_extended_0.106.0_Linux-64bit.tar.gz
tar -zxvf hugo_extended_0.106.0_Linux-64bit.tar.gz
chmod +x hugo
cp hugo $(which hugo)

之后的流程就和我们直接在vscode里面写文章一致啦,直接在terminal中输入 hugo new 吧!除此之外,codespace还支持对内部的端口进行反向代理,比如你可以执行 hugo server 便能得到一个公网可以访问的hugo预览页面了。

写了这篇文章体验了一下,总的来说还是不错的,就是粘贴图片麻烦一些,关于hugo怎么便捷的插入图片,读者可以阅读这篇文章使用vscode来写hugo博客并处理图片插入问题,我在本地使用了文章中提到的paste image插件,体验相当不错,不过codespace看上去是读取不到剪贴板中的图片,所以没办法直接粘贴图片进去了。不过我们依旧可以右键static目录,选择upload files,然后选择图片上传到static目录,然后在markdown中使用相对路径引用图片即可。

发布到服务器上

如果你是直接使用的github page来作为网站的展示,那么直接hugo一下,便能更新你的网站了(不过private repo需要pro账户才能开启page功能),考虑到github在国内糟糕的连通率,我采取的方式则是通过rsync将生成的文件同步到我自己的服务器上,之前这一步是在github actions里面做的,而现在我们无需等待actions便能实现了,codespace的预装环境中也包含了rsync,可以说是非常方便了。

之前我的workflow文件部署的步骤是这样写的:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
      - 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: "root"
          TARGET: "/var/www/html/aoyou"

其实上面的action步骤就是使用rsync实现的,我们也可以直接去执行这个命令,不过需要注意的是,codespace的github secret和github action的secret是不一样的,所以我们需要在codespace secret中重新设置目标服务器的ssh key。

secret

在我们添加了secret之后,codespace中便会提示我们需要reload去加载新的secret,reload之后我们便可以直接在命令行中以环境变量的形式去访问这些secret了,我将上面的命令改写为下面的形式,推荐直接在你的项目中新增一个脚本文件,之后只需要执行就能完成构建到发布的整个流程。

1
2
3
4
5
#!/bin/bash
hugo
echo "${SSH_KEY}"  > ~/.deploy_key
chmod 600 ~/.deploy_key 
rsync -Pavz --delete -e "ssh -i ~/.deploy_key" $(pwd)/public/ root@aoyouer.com:/var/www/html/aoyou

博客使用submodules的情况

为了便于对hugo的主题进行自定义,并且还要能够及时的更新,我使用git submodule的形式将hugo的主题放在了另一个仓库中,但是这样的话codespace初始化之后默认是不会克隆这些submodule的仓库的,我们可以在工作目录中执行git submodule update --init来clone这些submodules。但是为了避免每次新建codespace都要执行这个命令(其实也不会频繁新建啦),我们可以在项目目录下新建一个文件夹 .devcontainer,并在其中新建一个文件 devcontainer.json,内容如下:

1
2
3
{
    "postCreateCommand": "git submodule update --init"
}

其实这个文件是给vscode的remote container模式用的,不过codespace应该也是类似的架构,运行一个容器来作为开发环境,所以这里也可以用,这个文件还有更多可以自定义的地方,不过这就得自己看看文档了,这个配置的意思是每次在codespace创建完成之后都会执行这个命令,这样就不用每次都手动执行了。

最后,别忘了在写完文章之后提交到github上。

现在在线编辑变得便捷了许多

总结

相对于wordpress、typecho等cms系统,我还是更喜欢hugo这类静态网站生成程序,因为维护起来要比PHP+mysql这一套下来要简单得多,想要迁移也很简单,性能也好得多。但是之前无法在线编辑文章一只是一个令人头大的问题,但是现在已经可以通过codespace来解决这个问题了,并且这类云端开发环境的优点是即使更换了电脑,也不需要重新配置环境,只需要登录codespace就能继续上次的编写,总的来说还是值得尝试一下的。

Licensed under CC BY-NC-SA 4.0
最后更新于 Nov 23, 2022 13:37 UTC
comments powered by Disqus
本站访客数:
Built with Hugo
主题 StackJimmy 设计