IT博客汇 | 搭建环境与部署博客的最简便方法

搭建环境与部署博客的最简便方法

xaoxuu (me@xaoxuu.com)发表于 2022-11-26 00:00:00

使用脚本自动化搭建

注：此脚本只适用于 Mac/Linux 平台

此脚本只适用于 Mac/Linux 平台，其中 Mac 平台全部指令均支持，而 Linux 平台有部分指令存在兼容性 BUG 有待解决：

blog init
blog test xxx
blog i 主题

一键搭建环境

如果电脑重装了系统，还没有安装 node.js 和 hexo 环境，可以在终端输入下面这行代码，一键完成前期准备工作：

此命令会完成以下内容：

下载并安装 blog 脚本
由 blog 脚本检测 node.js 环境，如果没有则安装
由 blog 脚本检测 hexo 环境，如果没有则安装

一键搭建环境并克隆自己的博客

如果博客源码是私有仓库，且还没有配置过 ssh 或 git 账号密码，此时需要先配置一下。然后将后面的地址换成自己的博客源码地址：

已安装blog脚本

未安装blog脚本

blog resume https://github.com/user/repo

此命令会完成以下内容：

克隆博客及其子模块源码
执行 npm i 安装依赖
执行 hexo s 运行博客
打开 http://localhost:4000 预览博客

curl -s https://sh.xaox.cc/install | sh -s blog && blog resume https://github.com/user/repo

此命令会完成以下内容：

下载并安装 blog 脚本
由 blog 脚本检测 node.js 环境，如果没有则安装
由 blog 脚本检测 hexo 环境，如果没有则安装
克隆博客及其子模块源码
执行 npm i 安装依赖
执行 hexo s 运行博客
打开 http://localhost:4000 预览博客

测试主题效果

如果遇到了问题，可以对比主题 demo 查看效果是否正常：

已安装blog脚本

未安装blog脚本

安装其它主题

换成任意主题名，需要是发布到 npmjs.org 的主题，匹配到 hexo-theme-主题名 的部分。

附：常用命令

命令	功能
`blog init`	检查并安装环境，然后创建并运行博客
`blog test`	检查并安装环境，然后创建并运行单元测试博客（用于查看未经修改的主题效果）
`blog test stellar`	检查并安装环境，然后创建并运行单元测试博客（用于查看未经修改的主题效果）
`blog test vlts`	检查并安装环境，然后创建并运行单元测试博客（用于查看未经修改的主题效果）
`blog test 主题名`	检查并安装环境，然后创建并运行单元测试博客（用于查看未经修改的主题效果）
`blog i node`	安装 node.js
`blog i hexo`	安装 hexo
`blog i stellar`	安装 stellar 主题，同理换成其它主题名字都可以
`blog i 主题名`	安装任意主题
`blog c`	同 `hexo clean` 然后打开 `localhost:4000`
`blog cs`	同 `hexo clean && hexo g` 然后打开 `localhost:4000`
`blog cgd`	同 `hexo clean && hexo g && hexo d && git add --all && git commit && git push origin`
`blog help`	打开文档页面

设置 npm run 运行脚本

打开博客的 package.json 文件，在 scripts 部分增加这些快捷指令：

{
  ...
  "scripts": {
    "c": "hexo clean",
    "s": "hexo clean && hexo server",
    "g": "hexo clean && hexo generate",
    "d": "hexo deploy"
  },
  ...
}

这样输入 npm run s 就相当于输入 hexo clean && hexo server 了，除此之外你也可以根据自己的需要增加其他脚本。

GitHub Actions 自动化部署

通过 GitHub Actions 可以只提交源码到仓库，后续流程全部由 CI 自动完成，本质上是完成以下几个步骤：

checkout 源码
配置环境
生成静态文件
部署到对应平台（GitHub Pages / Vercel / Server…）

配置文件

.github/workflows/auto-deploy.yml

name: auto deploy

on:
  workflow_dispatch:
  push:

jobs:
  build:
    runs-on: ubuntu-latest # 运行环境为最新版 Ubuntu
    name: auto deploy
    steps:
    # 1. 获取源码
    - name: Checkout
      uses: actions/checkout@v3 # 使用 actions/checkout@v3
      with: # 条件
        submodules: true # Checkout private submodules(themes or something else). 当有子模块时切换分支？
    # 2. 配置环境
    - name: Setup Node.js 18.12.x
      uses: actions/setup-node@master
      with:
        node-version: "18.12.x"
    # 3. 生成静态文件
    - name: Generate Public Files
      run: |
        npm i
        npm install hexo-cli -g
        hexo clean && hexo generate
    # 4. 部署到 GitHub 仓库（可选）
    - name: Deploy to GitHub Pages
      uses: peaceiris/actions-gh-pages@v3
      with:
        deploy_key: ${{ secrets.DEPLOY_KEY }}
        external_repository: xaoxuu/xaoxuu.github.io
        publish_branch: gh-pages
        publish_dir: ./public
        commit_message: ${{ github.event.head_commit.message }}
        user_name: 'github-actions[bot]'
        user_email: 'github-actions[bot]@users.noreply.github.com'
    # 5. 部署到服务器（可选）
    - name: Deploy to Server
      uses: easingthemes/ssh-deploy@v3
      env:
        SSH_PRIVATE_KEY: ${{ secrets.SERVER_SSH_KEY }}
        ARGS: "-rltgoDzvO --delete"
        EXCLUDE: ".well-known, .user.ini"
        SOURCE: public/
        REMOTE_HOST: ${{ secrets.REMOTE_HOST }}
        REMOTE_PORT: ${{ secrets.REMOTE_PORT }}
        REMOTE_USER: ${{ secrets.REMOTE_USER }}
        TARGET: ${{ secrets.TARGET }}

关键参数

如果要部署到 GitHub 的仓库，需要配置 DEPLOY_KEY 参数，在 Settings -> Secrets 中填写对应的值：

DEPLOY_KEY: xxx

如果要部署到服务器，需要配置这些参数，在 Settings -> Secrets 中填写对应的值：

SERVER_SSH_KEY: 第一步本机生成的 id_isa 文件内容
REMOTE_HOST: 服务器地址
REMOTE_PORT: 服务器SSH端口
REMOTE_USER: 用户名，例如 "git"
TARGET: 生成的文件路径，例如 "/www/wwwroot/xaoxuu.github.io/"

GitHub Codespaces

如果你经常需要在一些临时电脑上写写稿子、预览效果，不能立即发布且需要多端同步，或许这是个不错的选择，详见这篇文章：

https://xaoxuu.com/blog/20221121/