渊澄YC

川流不息,渊澄取映

自从部署了HEXO,就开始寻找一个靠谱的图床系统来用于托管网站的图片。
之前在群晖NAS上使用Chevereto系统部署了一套私有的图床系统,但是如果用于网站图片的托管,需要24小时开机,不仅费电,而且还会加大硬盘的读写,增加坏盘的风险,所以还是放弃了这个想法。
接着我在七牛云上部署了图床系统,想着他有10GB免费的额度,也够用了。但部署完成之后,第二天查看账单发现有了费用,名字叫做https-cdn-海外加速费用,咨询了客服工单之后说是因为我使用的域名没有备案,所以只能使用海外站点,如果你从国内访问的话就会产生费用。
于是我想到了用GitHub来部署图床,网上也有大把的教程,操作起来也很简单,需要配合PicGo来使用。

创建一个公开仓库

生成GitHub Token

进入GitHub账户设置-开发者设置-私人Token,生成一个新的token并复制。

安装PicGo设置

安装完成PicGo之之后按照下图进行设置。

如果感觉在国内访问GitHub速度慢的话,可以在设置自定义域名那里填入https://cdn.jsdelivr.net/gh/GitHub用户名/仓库名
来使用jsdeliver提供的免费cdn服务加速。
这样设置就完成了,将图片用PicGo上传之后,图片地址就会自动复制到粘贴板,使用起来很方便

请输入图片描述
chevereto是一款用于搭建图床的系统,分为免费版和收费版,我们今天在群晖NAS上使用chevereto免费版来进行搭建。
由于官方最新free版本取消了多语言设置选项,所有我们使用github上keven1024 fork的版本来搭建。

1
GitHub地址:https://github.com/keven1024/chevereto-free-multi-language

从GitHub下载zip包,上传到群晖NAS的WEB目录并解压。
将解压出来的文件夹赋予http用户读写权限。
在WebStation中新建一个虚拟主机,指定一个端口号,并指向解压出来的文件夹。
请输入图片描述

####这里需要在HTTP后端服务器中选择Apache。
设置完成之后直接访问群晖NASip+端口号即可开始安装。
安装过程也很简单,输入数据库名称,用户名,密码,然后下一步新建用户,根据提示进行操作即可完成。
至此安装完成,使用创建好的用户名密码就可以登录到网站了。
请输入图片描述
更详细的使用方法请参照官方使用指导。

1
官网地址https://chevereto.com/

我自己使用chevereto搭建的图床系统已经映射到了公网,并开放了注册,欢迎大家注册使用。

1
http://nas.miaoyang.win:8015

家里一台电脑,单位一台电脑,如何用两台电脑同时对HEXO进行更新呢?

生成密钥并部署到GitHub

我们需要在另一台电脑上安装git、node等必要环境,然后选取一个文件夹作为工作文件夹,在这个文件夹下运行git bash命令窗口。

创建一个新的密钥:

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

在本地用户名文件夹下找到.ssh文件夹,复制里面的id_rsa.pub内容,然后前往GitHub的settings页面,添加一个SSH key,title最好取名为你的电脑名称,然后粘贴刚才复制的公钥的内容。

克隆远程仓库文件

运行下面的命令来克隆GitHub仓库里面的文件:

1
git clone [email protected]:miaoyanginfo/hexo-action.git

命令完成之后我们进入文件夹内会看到有一个名为“hexo-action”的文件夹,这个文件夹里面包括我们远程仓库里的所有文件,我们可以在这个文件夹里面更新文件。

推送到GitHub

当我们做完相应的更新之后,运行常规push命令就能直接将更新推送到GitHub了。

1
2
3
git add .
git commit -m ""
git push

另一台电脑如何操作

当我们在原先那台电脑上工作时,本地代码和远程的代码发生了不一致,为了保持同步,所以需要将GitHub仓库中的代码同步到电脑上。

从远程的origin的main主分支下载最新的版本到origin/master分支上:

1
git fetch origin main

然后比较本地的master分支和origin/master分支的差别:

1
git log -p master..origin/master

最后进行合并:

1
git merge origin/master

picgo有用于vscode的扩展插件,配置方法类似于桌面版,把Github的开发token信息及仓库源信息填上就可以开始使用了。
20220423143041

部分快捷键

1
2
3
4
5
Ctrl + Alt + u  ##从剪贴板上传图像

Ctrl + Alt + e ##从资源管理器上传图像

Ctrl + Alt + o ##从输入框上传图像

之前提到了使用第三方软件RaiDrive来挂载WEBDAV协议的网盘,其实Windows自身是支持WEBDAV协议的,只需要简单的设置一下即可,可以完全抛弃三方软件。
##1.开启WEBCLIENT服务。
右键计算机-管理-服务,找到WEBCLIENT服务并开启运行。
webdav01.png

##2.编辑注册表,修改键值,以同时支持http和https协议。
运行输入regedit回车。
找到如下路径,将BasicAuthLevel值改为2。

1
\HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\WebClient\Parameters

webdav02.png
##3.添加网络位置即可。
webdav03.md.png

微信截图_20220329163639.png

概述

上图是我家目前的网络拓扑示意图,及部分设备正在运行的服务,下面我将尽量对每个设备及所提供的服务来做详细的介绍,某些服务由于涉及到的知识点较多,以后可以能单独写文章来介绍。

联通光猫

负责运营商光纤到户后的光电转换,并给固定电话和IPTV提供接入服务。
网络方面,光猫使用桥接模式,不负责拨号,不负责提供WIFI服务,WIFI服务由华为AX3路由器及水星D191G路由器负责。

华为AX3路由器

负责宽带拨号,负责提供DHCP服务,负责提供WIFI覆盖服务,负责局域网内设备的端口转发服务及DMZ服务,为了方便远程管理内网设备,还在路由器上部署了花生壳的DDNS服务。WAN口与上级的联通光猫连接,LAN与需要提供网络服务的下级设备连接。
##水星D191G路由器
提供WIFI覆盖服务及普通交换机服务。LAN口与上级主路由的LAN口连接,LAN口IP设置为和上级路由器一个网段,方便管理,关闭DHCP,DHCP服务由上级路由统一管理。剩余的LAN口可作为交换机使用,连接设备后将自动从华为AX3路由器获取IP地址。

N1盒子-OPENWRT

N1盒子已刷F大的OPENWRT系统,目前作为旁路由使用,提供科学上网服务,里面内置Docker服务,由于N1是24小时全天候运行,所以使用Docker服务部署了HomeAssistant服务来管理家里智能设备的自动化运行,后来又部署了青龙面板JD签到服务。为了方便远程管理N1路由器和里面的Docker容器,所以在华为AX3主路由上将N1的80端口和Docker容器中用到的端口做了转发处理,这样在外网环境下使用DDNS域名+对应端口就可以了访问到内网的服务了。

N1盒子及OPENWRT的其他使用分享我会再后续分功能来介绍

##群晖NAS
为局域网设备提供网络存储服务,目前我使用到的服务套件有Synology MailPlus Server,使用自己的域名搭建邮件服务器;Synology Photos,用于备份和管理移动端的相片等,DownloadStaion用来下载文件和电影,配合浏览器插件,用起来很方便。WebStaion用来搭建网站。还有Docker服务,目前我在群晖的Docker上部署了KMS激活服务、阿里云盘WEBDAV服务、和FRPC服务三个容器。KMS激活服务用于直接激活内网环境下VOL版本的Windows系统和Office办公软件,如果将端口映射出去,也可以用于外网的激活。阿里云盘WEBDAV服务是将阿里云盘转换为标准的WEBDAV协议,可以在各种客户端中使用WEBDAV协议来读写云盘里面的文件。最后一个FRPC服务是一个用于内网穿透的服务,可以在外网环境下直接使用域名访问到内网中的各种服务。另外我在群晖NAS里面部署了DNSPOD的DDNS服务,将自己的域名解析到了NAS,而且在华为AX3主路由上将群晖NAS的主机加到了DMZ服务,这样直接使用DDNS服务的域名加端口就可以直接访问到群晖里面的各种服务,不需要单独做转口转发服务,当然除了运营商已经封锁掉的80/443等端口。这也是我为什么要在Docker上再跑一个DRPC服务的原因了。

群晖NAS的相关使用及经验分享可能后续会单独开个分类。

HEXO默认是不带评论系统的,但后台支持调用许多第三方的评论系统,我们这里以Valine为例来给HEXO站点配置第三方评论系统

1.注册LeanCloud账户并创建应用

进入LeanCloud网站注册账户,进行实名认证,然后创建一个应用,命名为hexo。

2.获取应用的APP KEY

进入创建好的应用,点击”设置”,然后”应用凭证”,获取APPID和APPKEY。

3.编辑主题配置文件

编辑主题的_config.yml配置文件

1
2
3
4
5
6
7
8
9
10
comments:
use: Valine
valine:
appId:
appKey:
avatar: monsterid # gravatar style https://valine.js.org/#/avatar
serverURLs: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)
bg: # valine background
visitor: false
option:

use字段填入”Valine”
appid和appkey字段填入获取到的信息,然后保存文件。

3.添加安全域名

进入应用”设置”-“安全中心”,填入你的HEXO站点地址,然后保存。

4.编译站点并发布

经过上面步骤之后对站点进行重新编译和发布,就可以在文章结尾看到评论窗口了。

下载安装Microsoft Visual Studio Code安装包(以下简称VScode)

下载地址:

1
https://code.visualstudio.com/

设置显示语言为中文

软件安装完成之后默认语言是英文,我们在主界面同时按下ctrl+shift+P三个按键,输入configure display language,点击安装其他语言,然后下载安装简体中文包,安装完成之后即可启用切换到中文界面。

新建MarkDown格式文件

新建文件,格式选择MarkDwon即可创建MarkDwon格式的文件。

经过上一篇的步骤之后,我们已经可以将我们的HEXO站点发布到GitHub上了,并且可以正常访问。但是我们每次更新文章以及站点配置的时候必须先在本地进行编译、然后再部署到GitHub上,也就是每进行一次修改,必须执行以下命令

1
2
3
hexo g
hexo clean
hexo d

那有没有一种方法就是,系统检测到我们发布了新文章,然后自动进行程序的编译和发布呢?
今天部署的这个GitHub Action服务就是解决这个问题的。在上一篇文章中我们在 GitHub上还新建了一个私人仓库,我们今天用这个私人仓库来进行操作。

1.修改本地文件

删除主题文件夹下隐藏的.git文件夹

删除hexo根目录下的.deploy_git文件夹

这两个是我踩过的坑,因为主题文件和hexo deploy git工具是git clone到本地的,所以如果直接上传到GitHub仓库的话,只会上传一个空的指针文件夹,之后进行自动化编译的时候会报错,所以必须删除本地的.git相关信息。

2.将本地HEXO源文件推送到私人仓库

在hexo文件夹中初始化hexo

1
2
hexo init
git init

关联远程仓库

1
git remote add origin [email protected]:miaoyanginfo/hexo-action.git

和远程仓库进行一个同步

1
git pull --rebase origin main

将本地文件添加到暂存库

1
git add .

添加注释

1
git commit -m "init repo"

推送到GitHub私人仓库

1
git push -u origin main

如果一切顺利的话,我们就会在GitHub的私人仓库中看到我们PUSH上去的HEXO文件夹和文件。

3.生成并部署deploy公钥和密钥

定位到本地hexo文件夹运行以下命令创建deploy key:

1
ssh-keygen -f github-deploy-key -C "HEXO CD"

运行完成之后会在hexo根目录下生成github-deploy-key和github-deploy-key.pub两个文件,一个私钥,一个公钥。
进入github我们创建的私人仓库,settings-secrets添加actions secrets。
名字输入 SSH_PRIVATE
value输入生成的github-deploy-key内容,也就是私钥的内容。

进入github我们创建的公开仓库,找到settings-deploy keys,
名字输入 HEXO_DEPLOY_PUB
内容输入github-deploy-key.pub文件内的所有内容,也就是公钥的内容。

4.创建GitHub Action文件

进入GitHub私人仓库页面,切换到Actions选项,创建一个名为deploy.yml的文件,内容复制下面:

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
name: Deploy                      # Actions 显示的名字,随意设置
on: [push] # 监听到 push 事件后触发
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout # 拉取当前执行 Actions 仓库的指定分支
uses: actions/checkout@v2
with:
ref: main # 注意选择私人仓库是main还是master分支

- name: Setup Node # 使用node 14
uses: actions/setup-node@v2
with:
node-version: "14"

- name: NPM INSTALL #安装依赖
run: |
npm install hexo-cli -g
npm install hexo-deployer-git --save
npm install

- name: Add KEY #这里需要提供一个ssh私钥,用你平时常用机器里的 ~/.ssh/id_rsa即可
env:
SSH_PRIVATE: ${{ secrets.SSH_PRIVATE }}
run: |
mkdir -p ~/.ssh/
echo "$SSH_PRIVATE" > ~/.ssh/id_rsa
chmod 700 -R ~/.ssh
ssh-keyscan github.com >> ~/.ssh/known_hosts
git config --global user.email "[email protected]"
git config --global user.name "miaoyanginfo"

- name: Hexo Deploy # hexo deploy 会自动build然后上传到github.io项目中
run: |
hexo clean
hexo deploy

5.测试Action是否正常运行

我们现在私人仓库/source/_posts文件夹下新建一个.md的日志文件,然后切换到Actions选项卡看下自动化执行过程是否有报错,如果运行正常的话,我们进入公开仓库,看下文件的最后修改时间是不是最近几秒钟内。
然后我们再打开我们的github站点地址,看看是不是有新日志已经发布了。

总结

经过两篇文章的操作,我们已经可以实现HEXO在GitHub上面的部署以及使用GitHub的Action功能来实现文章发布时自动编译和部署。如果在部署过程中遇到问题,欢迎和我交流。


经过三天的不断网上趴文和自我修炼,参考了众多网上大神的教程和文章,自己又填了无数个坑之后,终于成功在GitHub上部署了HEXO系统发布文章,使用GitHub Action功能自动编译HEXO程序并发布静态页面。我将用两个篇幅来记录部署过程。
第一部分介绍如何在本地部署HEXO程序,安装主题,本地预览,然后发布到Github Page。
第二部分介绍如何使用GitHub Action功能实现HEXO程序的自动编译和发布。

1.GitHub上新建仓库

登录你的Github,新建两个仓库:
一个仓库用于发布我们的HEXO站点,为了便于区分,我们在这里叫它公开仓库,新建的时候选在类型为Public,网址那里填入***.github.io,确保你可以使用域名https://***.github.com 访问到你的页面,这篇文章我们主要在这个仓库中进行操作;
另一个站点用于存放我们的HEXO程序源文件,用于和主仓库实现自动化编译和发布的联动,我们叫它私人仓库,类型选择Pravite,名称随便起,我们这里叫做hexo-action。

2.本地安装配置环境

需要安装的工具有git和node两个环境,安装包已经上传到了阿里云,大家可以自行下载。
git x64

1
https://www.aliyundrive.com/s/eWkiy8beBEj

node x64

1
https://www.aliyundrive.com/s/A6iLQPNecXt

安装完成之后在cmd窗口运行git –version及node -v 命令确保安装正确。

3.部署Github通讯密钥

我们在本地运行git bash命令窗,

1
2
git config --global user.name "你的GitHub用户名"
git config --global user.email "你的GitHub注册邮箱"

生成ssh密钥文件:

1
ssh-keygen -t rsa -C "你的GitHub注册邮箱"

连续回车,直到命令运行结束。
在本地用户名文件夹下会看到一个.ssh命名的文件夹,用记事本或是notepad++打开里面的id_rsa.pub文件并复制全部内容。
打开GitHub_Settings_keys 页面,新建new SSH Key,Title随便填,Key那里把刚才复制的公钥粘贴过去,然后点击Add SSH Key。

我们可以输入下面命令来测试一下密钥是否配置正确:

1
ssh [email protected]

3.运行安装命令进行HEXO的安装

在本地选择一个文件夹,作为你的hexo主目录,在这个文件夹下右键,选择git bash here打开git命令窗口。

运行命令安装hexo:

1
npm install -g hexo

运行命令在此文件夹新建站点:

1
hexo init

如果命令没有报错的话,在你选定的文件夹下应该会下载到hexo的文件。

我们可以编辑根目录下的_config.yml来配置HEXO站点的相关信息。
编辑完相关信息之后运行以下命令重新生成站点文件:

1
hexo g

4.打开本地演示模式

输入下面命令打开本地演示模式:

1
hexo s

打开之后在浏览器输入http://localhost:400 就可以访问到网站了。

5.安装主题butterfly

我们接下来安装一个主题,这里以butterfly这个主题为例,其他主题的安装也类似。

在hexo文件下下运行以下命令:

1
2
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
npm install hexo-renderer-pug hexo-renderer-stylus --save

运行完成之后我们编辑主题文件夹下的_config.yml文件来对主题进行配置。
编辑完成之后复制一份这个yml文件到hexo根目录,并命名为_config.butterfly.yml。
接着编辑根目录下面的站点配置文件_config.yml来更改主题

1
theme: butterfly

修改完成之后重新运行下面命令编译HEXO:

1
hexo g

然后本地预览新安装的主题:

1
hexo s

6.将站点发布到Github上

如果在本地演示没有报错,我们就可以将站点发布到Github上面了。
首先我们需要编辑根目录下的_config.yml文件,拉到文件最底部填入你的github地址:

1
2
3
4
5
deploy:
type: 'git'
repo: [email protected]:miaoyanginfo/miaoyanginfo.github.io.git
branch: master

然后运行下面的命令:

1
2
npm install hexo-deployer-git  --save
hexo clean && hexo g && hexo d

发布完成之后我们直接用域名https://***.github.io
就可以访问到我们搭建的HEXO站点了。