在github codespace写博客

前言

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

后来参考了网上的资料实现了,最后的效果是,可以直接在github codespaces上面写文章,也可以使用hexo s命令预览,同时使用了github actions自动化部署,只要将文章push到github上,就会触发github action自动执行hexo ghexo 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

    .gitignore 复制代码
    .DS_Store
    Thumbs.db
    db.json
    *.log
    node_modules/
    public/
    .deploy*/
    .deploy_git/
    .idea
    themes/next/.git

2. 启动github codespaces

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

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

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,很方便。

autodeploy.yml 复制代码
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后感觉能做很多的事情。

相关推荐
mortimer3 小时前
零依赖、高效率的语音转文字c++版 whisper.cpp (附批量处理脚本)
开源·github
sulikey7 小时前
从零配置一个规范的 Python Git 仓库(适用于 Gitee / GitHub)
git·python·pycharm·gitee·github
whysqwhw7 小时前
KuiklyUI声明式组件体系的实现分析
github
whysqwhw7 小时前
ComposeView 的上下游继承关系及相关类/接口分析
github
逛逛GitHub9 小时前
登上 GitHub 热榜!一口气调用多个 AI 大模型开源神器。
github
21号 19 小时前
4.客户端(Redis)
开发语言·数据库·github
梦想CAD控件9 小时前
网页CAD中组(Group)功能的二次开发
前端·javascript·github
米诺zuo11 小时前
不同的项目仓库配置不同的github账号
github
修炼室11 小时前
如何在GitHub上查看自己提过的Issues
github
CoderJia程序员甲13 小时前
GitHub 热榜项目 - 日榜(2025-10-21)
ai·开源·github·ai编程·github热榜