在github codespaces上写博客

发表于
本文介绍了如何将本地Hexo博客部署到GitHub Codespaces，以便实现随时随地通过网络编写和发布博客。作者首先将本地博客上传到GitHub上的一个私有仓库`myblog-source`，并确保`.gitignore`文件正确配置以避免不必要的文件上传。接着，通过启动GitHub Codespaces，利用其预装的Node.js和Git环境，手动安装Hexo后即可使用`hexo s`等命令预览博客。最后，通过配置GitHub Actions自动化脚本，实现了在将博客推送到GitHub后自动执行`hexo clean`、`hexo generate`等命令，并将生成的静态资源自动部署到GitHub Pages。整个过程简化了博客的编写和部署流程，只需完成“写文章”和“推送到GitHub”两个步骤。

前言

自己的博客已经很久没有动过了，一直默默的呆在github pages上面，正好自己最近了解到了github codespaces，我理解它是一个云主机（默认ubuntu，自带nodejs和git），我之前把实验mit6.s081部署到了上面，很丝滑，我就在想能不能把hexo本地博客部署到上面，如果成功的花就可以不限设备，随时随地的写博客了，只要有网络，能连接github就行了。

后来参考了网上的资料实现了，最后的效果是，可以直接在github codespaces上面写文章，也可以使用hexo s命令预览，同时使用了github actions自动化部署，只要将文章push到github上，就会触发github action自动执行hexo g和hexo d等命令，自己需要做的只有1.写文章 2. push到github上。

参考文章

我主要是参考了下面这两篇文章

Github Codespace初体验 | 瓦解的生活记事

博客入门：每个人的独立博客 - XAOXUU

部署过程

1. 将本地博客上传到github

我最开始是在本地写博客，通过hexo生成静态资源然后部署到github pages。

因此，我们第一步是将原来本地博客打包上传到github上面，关于如何上传到github自己去网上搜吧。

大体步骤就是：

  1. 在github上创建存储博客的private仓库，名字可以叫myblog-source。
  2. 将本地博客上传到仓库myblog-source，注意些好.gitignore。

这里有几个注意事项：

  1. github仓库最好是private，我看网上都是这么说的，说是为了保护个人信息什么的。我也就跟着他们一块了

  2. 一定要写好.gitignore文件，因为这个本地博客可能会很大，我当时的本地博客得有个好几百兆。下面是我的.gitignore

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .DS_Store
    Thumbs.db
    db.json
    *.log
    node_modules/
    public/
    .deploy*/
    .deploy_git/
    .idea
    themes/next/.git

2. 启动github codespaces

按照前面的两个参考文章，开启myblog-source仓库的github codespaces。开启后就是下面这个样子：

image-20250213111011775

跟你在本地开发的时候一模一样，而且node_modules都自动下好了，自带nodejs和git。但我在使用时提示hexo没有找到，可能需要你手动使用npm install hexo-cli -g安装hexo，安装完成后就可以使用各种hexo命令了，例如，我用hexo s开启了本地模拟博客，访问4000端口就可以看到了，跟在自己电脑上的一模一样。

image-20250213111446527

3. github actions的使用

前面都好的话，我们还要每次在github codespace中写完博客的时候执行hexo clean，hexo g … 等一系列命令才能将hexo生成的静态资源推送到github pages，很麻烦，但现在可以使用github actions来取代前面一系列的复杂操作，github actions类似脚本，下面是我的（我也忘记是抄的谁的了）。

下面这个github actions作用就是在codespace写完博客push到github后，会触发actions，会自动完成hexo的一系列命令并部署到github pages，很方便。

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
name: 自动部署
# 当有改动推送到master分支时，启动Action
on:
  push:
    branches:
      - master
      #2020年10月后github新建仓库默认分支改为main，注意更改
  release:
    types:
      - published

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: 检查分支
        uses: actions/checkout@v2
        with:
          ref: master

      - name: 安装 Node
        uses: actions/setup-node@v1
        with:
          node-version: "16.x"

      - name: 安装 Hexo
        run: |
          export TZ='Asia/Shanghai'
          npm install hexo-cli -g

      - name: 缓存 Hexo
        id: cache-npm
        uses: actions/cache@v3
        env:
          cache-name: cache-node-modules
        with:
          path: node_modules
          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-build-${{ env.cache-name }}-
            ${{ runner.os }}-build-
            ${{ runner.os }}-

      - name: 安装依赖
        if: ${{ steps.cache-npm.outputs.cache-hit != 'true' }}
        run: |
          # npm install gulp-cli -g #全局安装gulp 暂时不用gulp，因为会报错
          npm install --save

      - name: 生成静态文件
        run: |
          hexo clean
          hexo generate
          # gulp 暂时不用gulp，因为会报错

      - name: 部署到Github
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          token: ${{ secrets.MY_GITHUB_TOKEN }}
          repository-name: jiqiren116/jiqiren116.github.io
          branch: master
          folder: public
          commit-message: "${{ github.event.head_commit.message }} Updated By Github Actions"

至此，我们将本地博客部署到github codespaces就完成了，感谢前面两篇文章的作者，有了github codespace后感觉能做很多的事情。