免费开源的一键化部署方案

本次部署采用思源+Hexo+GithubActions，本人亲测有效，完全免费，绝对可用

准备工作

1.有一个GitHub账号

2.安装Git，hexo部署到GitHub时要用，我这里用的是wsl，wsl自带Git

3.安装NodeJS，hexo是基于NodeJS编写的，所以需要安装NodeJS和npm工具

https://blog.csdn.net/yaorongke/article/details/119084295（Windows）

https://blog.csdn.net/gandongusa/article/details/123010941 （wsl）

创建仓库

要创建三个仓库

存放图床	https://github.com/Dre4m017/Pic
存放markdwn	https://github.com/Dre4m017/Blogs
存放静态页面	https://github.com/Dre4m017/Dre4m017.github.io

注意：存放markdown的仓库要设置成私有仓库提高安全性

安装Hexo

这里使用Hexo来搭建博客

1	`npm install -g hexo-cli` BIN

查看版本

1	`hexo -v` BIN

创建一个项目 hexo-blog 并初始化

1
2
3

hexo init hexo-blog
cd hexo-blog
npm install
BIN

本地启动

1 2	`hexo g hexo server` BIN

浏览器访问 http://localhost:4000，页面默认主图风格如下

更换主题

官方提供了数百种主题供用户选择，可以根据个人喜好更换，官网主题点这里查看，个人用的是Fluid，后面章节的功能也是以 Fluid 为基础进行讲解的。

fluid主题官方介绍

安装主题

下载最新 release 版本解压到 themes 目录，并将解压出的文件夹重命名为 fluid。

指定主题

如下修改 Hexo 博客目录中的 _config.yml：

1 2	`theme: fluid # 指定主题 language: zh-CN # 指定语言，会影响主题显示的语言，按需修改` BIN

创建「关于页」

首次使用主题的「关于页」需要手动创建：

1	`hexo new page about` BIN

创建成功后，编辑博客目录下 /source/about/index.md，添加 layout 属性。

修改后的文件示例如下：

---
title: about
date: 2020-02-23 19:20:33
layout: about
---

这里写关于页的正文，支持 Markdown, HTML
BIN

本地启动

1 2	`hexo g -d hexo s` BIN

浏览器访问 http://localhost:4000

个性化页面展示

页面的标题等位置显示默认的文字，可以改下显示一些个性化的信息。

浏览器tab页名称

修改根目录下 _config.yml 中的 title 字段。

博客标题

主题目录 themes\fluid 下 _config.yml 中的 blog_title 字段。

主页正中间的文字

主题目录 themes\fluid 下 _config.yml 中的 text 字段。

修改好配置后，页面效果如下，可以看到现在显示的内容变成了我们的个人信息。

添加阅读量统计

需要借助三方服务来统计阅读量，这里是用 Leancloud 的免费服务来进行统计。

申请LeanCloud账号

进入官网注册账号

需实名认证，完成后才能使用各项服务

验证邮箱

创建应用，选择开发版即可，免费的

进入该应用的 设置->应用凭证，找到 AppID 和 AppKey还有服务器地址，记录下来后面配置要用

修改Fluid配置

打开主题目录 themes\fluid下的 _config.yml 文件，修改如下配置

单篇文章阅读量计数

打开统计开关

配置 leancloud的 app_id 和 app_key

页面底部展示网站的 PV、UV 统计数

添加评论

打开主题目录 themes\fluid下的 _config.yml 文件，修改如下配置

启用评论插件

配置 LeanCloud 的 appId 和 appkey

思源配置

本次需要使用的两个插件为

PicGo

配置PicGo

参考这张图，完成个人的仓库名，分支

经过测试完善，要把替换本地链接****和剪切板自动上传****给关掉，插件也可以关掉，避免在断网环境下本地笔记都打不开笔记图片

以及Token设定

token生成如下：

Personal Access Tokens (Classic) (github.com)

token生成选择repo,admin:org,workflow,write:packages

(很重要，不然图片显示不出来

完成设置后，可以上传图片测试是否成功

Publisher

发布工具->设置->平台导入->一键全部导入->发布配置

启用Hexo，选择设置

我这里markdown文档都是统一放到source/_posts下面，所以发布目录选择/source/_posts,图床服务选择PicGo

其余基本默认即可，完成后及时完成测试

Github Actions

这里将hexo-blog这个目录未编译的文件传到Blogs里面，可参考我的目录结构

https://github.com/Dre4m017/Blogs

（themes文件夹内容过多可能不能直接以拖拽的方式传到网页端github，可以先将项目clone到本地，在本地拖拽进对应的目录，再push上去，wsl可能会遇到网络问题push不上去，可以给wsl挂一个代理）

存放静态页面的项目什么都不用上传

生成密钥

1	`ssh-keygen -t ed25519 -f hexo_deploy_key_nopass -N ""` BIN

在我们第一个存放源码的仓库Blogs中将hexo_deploy_key_nopass放入secret

第二个.github.io的仓库Deploy存放hexo_deploy_key_nopass.pub

完成上述之后，我们实际上为了完成两个仓库之间交互的第一步

编写Action脚本

到Blogs下的Actions，New workflow→set up a workflow yourself ，自行编写Action脚本

name: HEXO CI

on:
  push:
    branches:
    - main

jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [20.x]

    steps:
      - uses: actions/checkout@v3

      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v3
        with:
          node-version: ${{ matrix.node-version }}

      - name: Configuration environment
        env:
          HEXO_EPLOY_PRI: ${{ secrets.HEXO_EPLOY_PRI }} //改成你自己的Blogs secrets名称
        run: |
          mkdir -p ~/.ssh/
          echo "$HEXO_EPLOY_PRI" | tr -d '\r' > ~/.ssh/id_rsa
          chmod 600 ~/.ssh/id_rsa
          ssh-keyscan github.com >> ~/.ssh/known_hosts
          git config --global user.name "Dre4m017"       //改成你自己的github名称
          git config --global user.email "   "           //写上你自己的邮箱

      - name: Install dependencies
        run: |
          npm install -g hexo-cli
          npm install
          npm install hexo-deployer-git --save

      - name: Deploy hexo
        run: |
          hexo clean
          hexo g
          hexo d
BIN