掘金 后端 ( ) • 2024-06-07 13:39
搭建自动化博客工作流（Elog+Vuepress+Jenkins+Github Action+Git）
Elog+Vuepress+Jenkins+Github Action+ 博客 工作流

本文已收录于：https://github.com/danmuking/all-in-one（持续更新）

哈喽，大家好，我是DanMu。开始写博客也有一段时间了，有写过博客的同学可能也知道，写博客除了需要输出优质的内容以外，有大量的时间其实是消耗在了一些重复工作上，比如说在多个平台之间进行数据的同步，这**真的很烦人！**有没有一种办法能够减少或者是自动化这些重复工作，今天和大家分享一下，我是如何搭建一个快速，自动化的博客编写工作流程。

需求分析

先来看看，如果我想要开发一个自动化的流程，这个流程需要完成什么工作：

  1. 文章同步：因为我更喜欢利用语雀这个平台进行博客的编写，然后在将其导出为md文件，保存在本地，所以首先我需要一个能够将语雀文档同步到本地的工具。
  2. 图片替换：因为语雀文档中的图片使用的都是语雀的链接，存在防盗链机制，在其他平台无法展示，所以要将文档中的图片批量上传到图床，然后对图片链接进行一次替换。
  3. 提交代码：将md文件提交到Github、以及Gitee上。
  4. 同步文章：将md文件同步到我的个人博客上
  5. 发布文章：将文章同步到掘金，CSDN，微信号等各类平台上。

现在回过头来看看，这个流程也并不复杂，但是在第一次进行配置的时候真是一步一坑，步步辛酸泪o(╥﹏╥)o，接下来就开始进入正题，我是如何一步步实现这些需求的自动化。

Nginx+Vuepress部署个人博客

要实现自动化的前提当然是得要现有一个博客啦，现在使用较多的博客平台主要有：Hexo、Vuepress和Halo，Hexo和Vuepress都是静态博客，Halo带有Java开发的后端，经过比较之后，相对来说Vuepress更加符合我的审美，所以这里我选用Vuepress作为我的博客平台。 要如何安装Vuepress，可以直接看官方文档，很简单，这里就不在赘述了。比较困难的是如何部署Vuepress，Vuepress的部署主要有两种方式：

  1. 直接通过Github Page部署，可以看这篇文章，这种方式的优点是可以直接白嫖Github的服务器，不过在国内有魔法墙，所以能不能访问比较看命。
  2. 部署在国内的云服务器上，便于国内访问，也可以绑定自己的域名，但是需要有一台云服务器，这也是本文使用的方式。

要在服务器上部署Vuepress，通常会结合Nginx进行。 首先，需要在Vuepress项目下运行这段命令，从md文档生成静态文件（根据自己的管理工具运行对应的命令）

npm run docs:build
pnpm docs:build
yarn docs:build

如果成功，就可以在项目路径/src/.vuepress/下看到生成的dist文件夹。 接下来需要对Nginx进行配置，让静态网页能被访问，在Nginx配置文件中添加如下配置

server {
  # 监听的端口，默认80
  listen       80;
  # 服务器ip
  server_name  127.0.0.1;

  # 静态文件
  location /{
    root   项目路径/src/.vuepress/dist;
    index  index.html index.htm;
  try_files $uri $uri/ /index.html; 
  }
}

这样子我们博客就能够通过IP地址访问了。

将文章同步到本地（Elog）

如果有同样需求的同学，这里给大家推荐一个开源工具，Elog，通过这个工具可以直接实现文章同步和图片批量替换的功能。

Elog是一个开放式跨端博客解决方案，支持随意组合写作平台（语雀/飞书/Notion/FlowUs）和博客平台（Hexo/Vitepress/Confluence/WordPress）等

根据我自己的实际使用体验，感觉非常不错，并且作者也很或活跃，提出的issue基本上都会回复，唯一的问题就是教程确实比较少，第一次使用的时候也是废了半天功夫。因此在这里我就尽量补充上Elog的配置过程，希望能够帮助大家减少一些困难。

安装

首先，你需要使用npm/yarn/pnpm全局安装@elog/cli

# 使用 npm 安装 CLI
npm install @elog/cli -g

# 使用 yarn 安装 CLI
yarn global add @elog/cli

# 使用 pnpm 安装 CLI
pnpm install @elog/cli -g

# 安装指定版本
npm install @elog/[email protected] -g

# 也可使用 npx 运行 elog 的所有命令：将本文档使用 elog 命令的地方换成 npx @elog/cli
# 例如
# 初始化 elog 配置文件
npx @elog/cli init
# 本地同步命令
npx @elog/cli sync -e .elog.env
# 清除本地缓存
npx @elog/cli clean

初始化

如果你的博客是Hexo/Vitepress/HuGo等，进入其根目录下，使用命令进行初始化： 如果只是想用Elog进行写作平台备份的话，可以在任意文件夹中初始化使用。

elog init

根据提示初始化成功后，会在根目录生成一份elog.config.js配置文件和本地调试用的.elog.env环境变量配置文件。

配置

接下来，就需要编写对应的配置文件了，我这里以语雀为例，看完我这个配置，再去看Elog的文档应该就没有问题了。

elog.env文件

首先，我们需要先修改一些.elog.env文件的内容，将一些变量配置进去，主要需要配置的变量有这几个

YUQUE_USERNAME=语雀账号
YUQUE_PASSWORD=语雀密码
# 语雀公共参数，使用语雀必填
YUQUE_LOGIN=仓库，见下文
YUQUE_REPO=知识库，见下文


# Github图床配置
# 在 Github 流水线中，Github不允许以GITHUB开头的自定义变量
# GITHUB_TOKEN 为内置变量，无需改名也无需配置，流水线中可直接获取
GITHUB_TOKEN=如何获取见下文
ELOG_GITHUB_USER=用户名
ELOG_GITHUB_REPO=用来做图床的仓库名
YUQUE_LOGIN

语雀个人路径。访问工作台 => 左上角头像 => 账户设置 => 账户设置 => 个人路径，设置语雀的简易的个人路径，拿到个人路径。例如 1874w 才是 login 取值

YUQUE_REPO

语雀仓库短名称，也称为语雀知识库路径。访问需要作为博客文章的知识库 => 更多设置 => 知识库信息，拿到语雀知识库路径。 5cedeeb7cbcc5e8ed25f7efb8b510fb6.png61dce475fb779c1e9aaa039e423ab2f1.png

GITHUB_TOKEN

Github访问Token。访问 GIthub Token 配置 => Generate new token => 勾选必要的参数，生成 token。 到这一步为止elog.env文件就算是配置完了。

elog.config.js文件

接下来配置elog.config.js文件，首先修改platform，来指定从什么平台进行同步 image.png 然后配置部署到什么平台 image.png 最后是图床配置 image.png 完成这些配置后，就可以开始同步文件了

开始同步

配置完成后在根目录下，执行本地同步命令：

elog sync -e .elog.env

fe4c43e0f09a7751297205a26c2e07c3.png

同步到github和gitee（Git+Github Action）

在上面一步，已经实现了将文章下载到本地的功能，那么接下来，我们就可以使用Git来管理文章内容，这里Elog实际上是可以实现直接监听语雀变化，将文章同步到Github的功能（见持续集成），但是因为我需要在本地需要进行一些额外的修改和控制，因此这一步我决定还是手动进行操作。那么现在还有一个问题，就是由于Github是不是被墙，云服务器要拉取Github仓库非常不稳定，因此我需要将Github的内容同步到Gitee中去，让后通过云服务器去拉取Gitee仓库进行同步，这样子就可以避免Github的网络问题。 Gitee本身是有一个自动同步仓库的按钮image.png 但是每提交一次代码到Github我就要点一下这个按钮也太累了，有没有什么自动化的方法，经过我的研究，我发现这里可以使用Github Action这个功能进行实现。

这里使用了hub-mirror-action这个项目进行实现，这个项目的教程同样少的可怜，坑了我一把大的，可能是像我这样不会使的菜狗真的不多吧，哈哈哈哈。

配置

转载自https://github.com/mqyqingfeng/Blog/issues/236

我们也可以利用Github Actions，写一个工作流，在发现Github博客仓库的代码更新后，自动同步当前代码到Gitee上。 关于 Github Actions 的介绍，可以参考阮一峰老师的 《GitHub Actions 入门教程》。

生成私钥

本地终端 输入以下代码 (邮箱换为自己的), 不要犹豫，一路Enter即可，出现下图即表示成功

ssh-keygen -t rsa -C "[email protected]"

然后到对应文件夹检查一下文件是否正确生成。

给Gitee添加公钥

点击个人头像 设置 —> SSH公钥 —> 标题 (随便填) —> 公钥 (上一步获取的公钥) image.png

给GitHub添加私钥：

复制id_rsa内容，直接全选复制！开头的-----BEGIN OPENSSH PRIVATE KEY-----和结尾的-----END OPENSSH PRIVATE KEY-----也要，然后在要同步的Github仓库中，选择 "Setting" -> "Secrets" -> "New repository secret" 填入Secret内容，Name命名为 "GITEE_PRIVATE_KEY"，Value为复制的内容 然后点击Add secret即可。

  • dst_token创建仓库的API tokens， 用于自动创建不存在的仓库。这里我们从Gitee上获取，具体地址为 https://gitee.com/profile/personal_access_tokens。生成并复制Token，然后同样的步骤，保存在Github的Secrets 中，Name为 "GITEE_TOKEN"

那么我们就可以在仓库建立的根目录下，建立目录 .github/workflows然后创建一个名为syncToGitee.yml的文件：

name: syncToGitee
on:
  push:
    branches:
    # 同步哪个分支
      - gh-pages
jobs:
  repo-sync:
    runs-on: ubuntu-latest
    steps:
      - name: Mirror the Github organization repos to Gitee.
        uses: Yikun/hub-mirror-action@master
        with:
          # github/github用户名
          src: 'github/mqyqingfeng'
          # github/gitee用户名
          dst: 'gitee/mqyqingfeng'
          dst_key: ${{ secrets.GITEE_PRIVATE_KEY }}
          dst_token:  ${{ secrets.GITEE_TOKEN }}
          static_list: "learn-typescript" #要同步到gitee的仓库名称
          force_update: true
    debug: true

其中，static_list表示单一仓库同步，force_update为true表示启用git push -f强制同步，debug为true表示启用debug开关，会显示所有执行命令。 这样子，当提交到Github仓库的时候，就会自动触发这个action然后推送到Gitee，你可以在仓库中看到对应的记录 image.png

自动部署博客（jenkins）

怎么还没完！如果你是采用Github Page这类的方式进行博客部署的话，下面的内容不要看了，但是我的博客是部署在云服务器上的，所以还需要进行自动打包和发布。在这里我使用jenkins来进行自动化部署。

安装jenkins

这里直接按照官网的安装流程进行安装就好了

sudo wget -O /usr/share/keyrings/jenkins-keyring.asc \
    https://pkg.jenkins.io/debian-stable/jenkins.io-2023.key
echo "deb [signed-by=/usr/share/keyrings/jenkins-keyring.asc]" \
    https://pkg.jenkins.io/debian-stable binary/ | sudo tee \
    /etc/apt/sources.list.d/jenkins.list > /dev/null
sudo apt-get update
sudo apt-get install fontconfig openjdk-17-jre
sudo apt-get install jenkins

接下来我们检查一下安装是否成功

systemctl status jenkins

如果成功，应该能看到以下信息 image.png

授予管理员权限

由于默认情况下jenkins是没有管理员权限的，由于我的服务器主要是个人使用，所以为了简便起见，直接授予jenkins管理员权限 这里需要修改两个位置/etc/default/jenkins和 /usr/lib/systemd/system/jenkins.service

由于jenkins有非常多的安装方式，如果采用其他方式安装文件位置可能并不相同。

/etc/default/jenkins image.png /usr/lib/systemd/system/jenkins.service image.png 重启一下jenkins服务

# 执行下，否则不生效
systemctl daemon-reload

# 重启下jenkins就可以了：
systemctl restart jenkins

最后检查一下jenkins进程所属用户是否为root

ps -ef | grep jenkins

image.png

编写工作流

接下来就可以使用jenkins编写工作流了，要如何配置jenkins大家可以看这篇博客。由于我们需要使用gitee进行代码同步，所以需要给jenkins安装Gitee插件，可以按照这篇博客进行插件的安装。完成了前期准备之后，就可以开始编写jenkins工作流了。 在编写工作流之前，先来分析一下，这个项目需要经过哪些流程。首先，这个项目涉及到两个git仓库，一个仓库用来管理vuepress的相关配置，一个仓库负责管理所有的md文档。并且这两个仓库的改变都需要触发工作流来重新部署博客，因此这里创建了两个工作流来分别处理不同仓库的变动博客自动化工作流.drawio.png 接下来，分别来完成这两个工作流

blog工作流

创建一个freestyle类型的工作流，名称为blog用来管理博客的md文档。先按照下图配置好jenkins image.pngimage.pngimage.png 最后在build step中选择执行shell

echo "开始构建"
# 构建前下先删除原有的代码
rm -rf /home/ubuntu/code/vuepress
# 重新下载
git clone https://gitee.com/danmuking/vuepress.git /home/ubuntu/code/vuepress

# 删除vuepress的md文档目录
rm -rf /home/xxx/code/vuepress/src/posts
cd ../
# 将blog项目的内容拷贝到vuepress中
cp -r ./blog /home/xxx/code/vuepress/src
mv /home/xxx/code/vuepress/src/blog /home/xxx/code/vuepress/src/posts
rm -rf /home/xxx/code/vuepress/src/blog

git config --global user.name 'xxxx' 
git config --global user.email '[email protected]'
git config --global --add safe.directory /home/xxx/code/vuepress

# 将vuepress项目中的修改提交
cd /home/xxx/code/vuepress
git add .
git commit -m "jenkins"  || true
git push https://gitee账户:密码@gitee.com/danmuking/vuepress.git main --force  || true
# 重新部署vuepress
npm install
npm run docs:build

然后需要再Gitee中将上面的url填上去 image.png

在这里点击上图的测试会显示失败，这是Gitee官方的问题，这边需要用真实的提交来测试配置是否成功

Vuepress工作流

同样创建一个freestyle类型的工作流，然后按照下图进行配置 image.png image.png image.png 同样编写shell

git config --global user.name 'danmuking' 
git config --global user.email '[email protected]'
git config --global --add safe.directory /home/ubuntu/code/vuepress
cd /home/ubuntu/code/vuepress
git pull
rm -rf /home/ubuntu/code/vuepress/src/.vuepress/dist
npm install
npm run docs:build

在Gitee项目中添加webhook image.png 接下来，只要项目进行提交，那么就会自动触发构建流程，重新部署网站。

一键发布

要如何将写好的博客发布到多个平台呢？其实我也没有找到比较好的解决方案，主要是由于各个平台都有不同的配置、话题、选项，有些博客还需要设置不同的封面图，所以这里我还是决定采用手工发布。不过这里我收集了一些常见的一键发布开源项目，希望能有些参考价值

如果有什么更好的方法欢迎大家一起讨论讨论

点关注，不迷路

好了，以上就是这篇文章的全部内容了，如果你能看到这里，非常感谢你的支持！ 如果你觉得这篇文章写的还不错， 求点赞👍 求关注❤️ 求分享👥 对暖男我来说真的 非常有用！！！ 白嫖不好，创作不易，各位的支持和认可，就是我创作的最大动力，我们下篇文章见！ 如果本篇博客有任何错误，请批评指教，不胜感激 ！

最后推荐我的IM项目DiTing（https://github.com/danmuking/DiTing-Go），致力于成为一个初学者友好、易于上手的 IM 解决方案，希望能给你的学习、面试带来一点帮助，如果人才你喜欢，给个Star⭐叭！
相关内容
什么原因让你放弃写博客了？
有没有低价的博客搭建方案
我们正在尝试收录所有的中文博客
博客来上半年新书畅销榜揭晓 这本两个月热销万本称王
博客来终于要开实体书店 创办人：18年前就想进驻信义区
统一将开首家博客来实体书店 罗智先：是我的主张
博客来实体书店进驻信义区 出版公会：书店愈多愈大愈好
统一接手诚品信义 高秀玲：将设博客来首间实体书店
信义区 Dream Plaza 明年有望开幕 全台首家博客来实体书店登场
统一证实：博客来首家实体书店2025年信义区登场