yuque-hexo 自动化同步: PC & GitHub & Server 的安装与配置
本文的目的是实现语雀编辑发布后,GitHub Actions 自动同步到 github.io 以及 个人服务器。
引用声明
这篇教程是根据网络上的资料形成的,本篇教程引用内容声明如下:
版权声明:本文参考了 CSDN 博主「桐谷柯南」的原创文章,遵循 CC 4.0 BY-SA 版权协议。
原文链接:安装 Hexo 博客并部署到 GitHub 或云服务器(细节教程,越过各种坑)
本文本地部署、GitHub 部署、Server 部署内容摘录其本地与服务器端的安装与配置部分的教程,并作修改。
版权声明:本文参考了 CSDN 博主「Jack LDZ」的原创文章,遵循 CC 4.0 BY-SA 版权协议。
原文链接:SSH 简介及两种远程登录的方法
本文Server 部署-设置 SSH部分内容摘录了其SSH 两种级别的远程登录-公钥登录部分的教程,并作修改。
版权声明:本文参考了 CSDN 博主「CareyQ03」的原创文章,遵循 CC 4.0 BY-SA 版权协议。
原文链接:Hexo 博客部署到腾讯云服务器全流程
本文自动化部署部分内容摘录了其自动化部署部分的教程,并作修改。
版权声明:本文参考了 CSDN 博主「不染轻裳」的原创文章,遵循 CC 4.0 BY-SA 版权协议。
原文链接:Github Actions 自动部署 Hexo 博客至个人服务器
本文自动化部署部分内容摘录了其自动化部署部分的教程,并作修改。
版权声明:本文参考了语雀博主「yichen」的原创文章。
原文链接:语雀自动同步到 hexo 博客
本文自动化部署、后续-图片无法正常展示部分内容摘录了此教程内容,并作修改。
如果你没有服务器或只想同步到 github.io
,那么阅读这篇语雀即可:语雀自动同步到 hexo 博客。
下面开始我们的探索吧:)
本地 PC 部署
本地主机以 Windows 10 系统为例。
1. 安装 Node.js
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境,是一个让 JavaScript 运行在服务端的开发平台。
Node.js 的官方下载地址:https://nodejs.org/
当然它也有中文网:http://nodejs.cn/
建议下载 LTS(即 Long Term Support,长期技术支持)(此处是** 64 位**版本的,其他版本如源码可以在 DOWNLOAD 界面找到),较为稳定,下载文件,安装过程基本直接下一步即可。
安装完成后使用 命令提示符(以下均简写 cmd) 查看是否安装成功。
1 | $ node -v # 查看 node 版本,也可使用 $ node --version,下同 |
代码块符号说明:
$
表示这后面一条控制指令,你不需要输入$
#
表示这后面是注释语句,不会被执行,你不需要输入#
往后不再额外声明。
出现安装的版本号说明安装成功。
2. 安装 Git
Git 是一个开源的分布式版本控制系统,可以有效、高速地处理从很小到非常大的项目版本管理。
Git Bash 和 CMD 的区别:Bash 是基于 CMD 的,Bash 在 CMD 的基础上新增了一些命令和功能,故建议使用 Bash 更方便。
我们建议你使用 Git Bash 替代 CMD,Git Bash 可以便捷后续的操作。
官方网站:https://git-scm.com/ 选择 Windows 版本安装。
按照官方文档推荐中国大陆用户从 淘宝 Git for Windows 镜像 下载 Git(说得对)。
macOS 和 Linux 系统都有自带的 Terminal 终端方便下载 Git 。
3. 安装 Hexo
Hexo 的官方网站:https://hexo.io/ 该博客框架拥有中文文档,有些资料需要参考文档。
由于 npm 服务器在国外,因此使用 npm 直接下载可能会遇到卡顿的问题(除非你可以流畅地科学上网),所以我们先将 npm 转换成淘宝的镜像源:
1 | $ npm config set npm config set registry https://registry.npm.taobao.org |
然后安装 cnpm :
1 | $ npm install -g cnpm --registry=https://registry.npm.taobao.org |
然后通过 cnpm 安装 Hexo:
1 | $ cnpm install -g hexo-cli |
等待安装结束。
选择一个目录来初始化博客,例如 E:/
目录下:
1 | $ cd e: |
执行成功后安装两个插件:
1 | $ npm install hexo-deployer-git --save |
[hexo-deployer-git](https://github.com/hexojs/hexo-deployer-git)
允许你在本地快捷地实现 hexo 的 git 部署。[hexo-server](https://github.com/hexojs/hexo-server)
允许你在本地服务器上预览博客。
安装成功后可在本机查看自己的博客了:
1 | $ hexo server # 或简写成 $ hexo s |
打开浏览器输入 localhost:4000
可以看到初始界面。按 Ctrl+C 关闭本地服务器。
GitHub 部署
首先你得有个 GitHub 账户,这里就不提供创建账户的教程了。
1. 创建 GitHub Pages 格式的公有仓库
这个仓库将存放 hexo 编译后的博客静态页面
打开 GitHub ,点击 new 一个 repository,创建一个新的仓库,仓库名称必须要遵守 GitHub Pages 的格式: [your-username].github.io
。
编者注:一般无需勾选
Initialize this repository with a README
。
建好仓库后,在 Settings 设置中有一个 GitHub Pages 一项,里面就写着 GitHub Pages 为我们创建好的域名。在浏览器中访问就可以看到一个初始的界面。这就是博客的默认地址,当然后面我们也可换成自己的域名。
2. 设置 SSH
务必确保在 本地 PC 已经完成了 Node.js、Git 和 Hexo 的安装,本地(PC)打开 Git Bash
。
如果是第一次使使用 Git 的话,需要配置如下信息:
1 | $ git config --global user.name [your-username] |
代码块符号说明:
[tips here]
表示这是个变量,其内容因人而异,你不需要输入[]
在本机生成密钥对
使用 ssh-keygen 生成私钥和公钥:
1 | $ ssh-keygen -t rsa |
-t
表示类型选项,这里采用 rsa 加密算法。
然后根据提示一步步的按 enter 键即可,注意,出于安全考虑,建议为私钥设置密码(如果不想设置就按 enter 跳过即可)。
根据提示找到你的密钥 id_rsa
和公钥 id_rsa.pub
的位置。
GitHub 配置 SSH
此步骤非必须,但推荐。
目的是方便本地 Git 的后续操作(不用每次都登录且更加安全)。
打开 GitHub 并登录,依次点击:头像 -> Setting -> SSH and GPG keys -> New SSH key
将刚刚生成的公钥 id_rsa.pub
文件里的内容复制到 Key 里面(用记事本打开公钥文件即可),名称任意,然后选择添加,GitHub 提示输入密码确认后完成添加。
接着在 本地 PC 的 Git Bash
上输入:
1 | $ ssh -T git@github.com |
第一次的时候依旧会让你 yes 确认 ,如果看到 Hi 后面是自己的用户名,就说明成功了。
3. 从本地 PC 上推送到 GitHub
接下来回到我们的 PC 上,在刚刚我们生成的 e:/website 目录下,找到 hexo 的配置文件 _config.yml
,用编辑器打开它(文本编辑器、Notepad++或 VScode 都行)。修改最下面有个 deploy
的配置:
1 | deploy: |
注意缩进。
注意,以前创建的仓库分支 branch
的默认名称应该是 master,如果你不清楚,请先查看你的分支名。
保存并退出,然后发布到 GitHub 上:
1 | $ hexo clean |
这里不一定每次都要 clean,clean 会清除缓存,导致一些网站的计数脚本清零。
在 本地 PC 浏览器上输入 GitHub Pages 的域名 https://[your-username].github.io
,就可以在互联网上访问你的博客了。
Server 部署
首先你需要拥有一个服务器和域名,例如阿里云 ECS、阿里云轻量应用服务器、腾讯云 CVM、百度云 BCC 等。这里不再提供购买和配置的教程了。
这里提醒一下,检查安全组的应用类型 HTTP 协议 TCP 端口 80 是否设置打开,没有的话需配置一下安全组:
建议使用 Linux 系统的服务器镜像。这里以使用云服务器的 CentOS 为例。
1. 搭建 nginx
Nginx 是一款轻量级的 Web 服务器 / 反向代理服务器及电子邮件代理服务器,在 BSD-like 协议下发行。其特点是占有内存少,并发能力强,事实上 nginx 的并发能力在同类型的网页服务器中表现较好,中国大陆使用 nginx 网站用户有:百度、京东、新浪、网易、腾讯、淘宝等。
使用云服务商提供的远程登陆登录进云服务器,输入下列命令进入 root 用户:
1 | $ sudo su root |
安装 nginx:
1 | $ yum install -y nginx |
安装成功后使用开启环境:
1 | $ nginx |
在本地 PC 的浏览器中输入云服务器的公网 IP(如果你链接了域名,也可输入域名),就会显示类似界面:
以上界面是 CentOS 版本的,其他服务器会有所不同。
2. 配置 nginx
实际上我们需要将这个地址指向我们的博客,接下来我们去修改 nginx 的配置文件:
1 | $ cd /etc/nginx # 进入路径 |
提示:阿里云和腾讯云下载库中,默认的配置文件是位于
/etc/nginx
下的nginx.conf
,有些服务器可能是/etc/nginx/conf.d/default.conf
,按照官方的安装方法则可能是/etc/nginx/conf/nginx.conf
我们需要修改如下内容:
- 将最上一行的 user 改为 root(或者创建名为 nginx 的用户并给予权限)
- 向下寻找,在 http 中更改 root 指向的路径,比如我这里选择 /home/www/website ,当然此时我们还没有创建这个文件夹。
- 同时如果有了域名的话可以在 server_name 写上域名。
1 | # 编辑结束之后,按 esc 键退出编辑 |
创建我们所指定的路径:
1 | $ cd ~/home ## 这一步找不到路径的可尝试 $ cd ~/../home |
这样我们就得到了博客的根路径 /home/www/website
,这与 nginx.conf
文件设置的内容相对应。
3. 安装 Node.js
在 Linux 系统上安装 Node.js 的方法有很多种,详细可以参考搜索引擎或者 Node.js 的 GitHub 文件。
这里提供一种方法:
1 | curl -sL https://rpm.nodesource.com/setup_13.x | bash - |
在安装过程中可能会发生下载速度极慢的情况,具体取决于云服务器选择的源。
安装完成之后像我们 PC 上一样执行一下版本号命令:
1 | $ node -v |
4. 安装 Git 并配置 git 用户
主要是让我们的 PC 可以通过 ssh 的方式连接到云服务器,然后我们可以通过
$ hexo deploy
将我们的博客推到服务器上。
安装 Git
1 | $ yum install git |
添加名为 git 的用户:
1 | $ adduser git |
修改并配置 sudoers
文件权限:
1 | $ chmod 740 /etc/sudoers |
找到这段话并补充,同样是 vim 编辑器的操作:
1 | root ALL=(ALL) ALL |
保存退出后将 sudoers
文件的权限改回来:
1 | $ chmod 400 /etc/sudoers |
设置 git 用户的密码:
1 | $ sudo passwd git |
5. 本地通过 ssh 连接云服务器
请注意,这一步不是必须的。它只是方便你在电脑本地直接控制服务器,而不是使用云服务器的在线控制台。因此,如果你已经安装并配置过
XShell
,或者你并不常使用服务器,这一步看起来会显得多此一举了。
基本步骤
在本地 PC(注意,不是服务器端!),将之前创建好的公钥复制到远程主机(服务器)中:
1 | $ ssh-copy-id git@[public-ip-of-your-server] |
登录需要输入之前设置的密码。
密码正确会显示已添加:
继续在 本地 PC 使用以下命令:
1 | $ ssh -v root@[public-ip-of-your-server] |
出现 git 用户的命令,成功登录。
ERROR: Permission denied
你可能遇到如下报错:
1 | # Permission denied (publickey,gssapi-keyex,gssapi-with-mic) |
你可以尝试登录 root 账户测试,但结果是一样的:
1 | $ ssh -v root@[public-ip-of-your-server] |
解决方法参考了此文:Permission denied (publickey,gssapi-keyex,gssapi-with-mic) 解决方法
在服务器端,root 用户下,修改配置文件:
1 | $ sudo vim /etc/ssh/sshd_config |
找到被 #
注释的如下命令,按 i
进入编辑模式,取消注释并修改成:
1 | PasswordAuthentication yes |
按 esc
退出编辑模式,输入 :wq
保存修改。
再执行:
1 | $ sudo systemctl restart sshd |
然后本地(PC)再次尝试登录服务器:
1 | $ ssh -v git@[云服务器的公网IP地址] |
此时应该可以登录成功。
自动化部署
实现 语雀 编辑发布后,借助 serverless 云函数 和 GitHub Actions 自动同步到 github.io 以及 个人服务器上。
1. 创建 git 裸库
在服务器端(你现在可以选择使用云服务器在线登录,或者本地 ssh 连接了)创建裸库:
1 | $ su root # 注意是 root 用户下 |
2. 使用 git-hooks 同步网站根目录
这使用的是 post-receive
/post-update
这个钩子,当 git
有收发的时候就会调用这个钩子。 在 website.git
裸库的 hooks
文件夹中,新建 post-receive
/ post-update
文件(不同 git 版本不同,此处就都创建了):
1 | $ vim [website].git/hooks/post-receive |
1 | $ vim [website].git/hooks/post-receive |
添加如下内容,并保存退出:
1 | git --work-tree=/home/www/website --git-dir=/home/git/[website].git checkout -f |
赋予此文件权限:
1 | $ chmod +x /home/git/[website].git/hooks/post-receive |
1 | $ chmod +x /home/git/[website].git/hooks/post-update |
3. hexo 同步语雀内容
安装并配置 yuque-hexo
先登录语雀,创建一个互联网可见的知识库。
语雀知识库路径设置:
仓库设置 -> 知识库信息 -> 路径
语雀 Token 设置:
个人头像 -> 账户设置 -> Token -> 新建 -> 勾选读权限
安装并配置 yuque-hexo:
1 | $ npm i -g yuque-hexo |
然后在创建的 Hexo 项目的目录下的 package.json
文件中添加:
1 | "yuqueConfig": { |
配置本地 _config.yml
文件
此处的配置仅是方便后续本地手动上传
在创建的 Hexo 项目的目录下,打开此文件,找到 deploy
,添加如下内容:
1 | - type: git |
添加完后完整的 deploy 应该是这样的:
1 | deploy: |
这时候在本地使用以下命令,就会把语雀的文章给下载下来,下载到 \source_posts:
1 | $ yuque-hexo sync |
部署的流程仍然一致,只不过现在可以同时部署到 github.io 以及服务器了:
1 | $ hexo generate # 生成静态文件 |
4. 创建私有仓库并设置 GitHub Actions
创建私有仓库
存放 hexo 源码,并用来执行自动化
在 github 上创建一个私有仓库,这里将它命名为 yuque-website-sync
,你可以任意命名。
注意:在仓库里面再放一个仓库是没法把里面那个仓库 push 到 github 的,只会传一个空文件夹,导致后期博客成了空白页面,最简单粗暴的办法就是把你 git clone 的 hexo 主题里的
.git
文件夹给删掉
然后在构建了博客的 hexo 目录下运行如下命令(这里是之前提到的路径 E:/website
):
1 | $ git init |
创建 GitHub Token
点击:头像 -> Setting -> Developer setting -> Personal access tokens
只勾上 repo 这一类即可
生成了 token 之后一定要记下来,只展示 1 次,往后再回来就没法看了。
添加仓库 Secrets
在执行 GitHub Actions 时,使你的隐私信息不会暴露。
但即便这样,仍然不建议你将仓库设置为 public,因为在 安装并配置 yuque-hexo 时,你在 package.json 文件中添加了 语雀 的 token。
打开新创建的私有仓库,点击:setting -> Secrets -> New repository secret
创建如下 secrets:
- GH_USERNAME:填写你的 GitHub 名称
- GH_EMAIL:填写你的 GitHub 绑定的邮箱
- GH_REF :博客的仓库地址
github.com/[your-username]/[your-username].github.io
(注意去掉前面 https://) - GH_TOKEN :刚才生成的 token
- GH_PUBLIC_IP :服务器的公网 IP
- HEXO_DEPLOY_PRI :取自本地 PC 的
id_rsa
(详见之前的内容:在本机生成密钥对),将该文件所有内容复制出来即可
创建 Actions
然后来到 Actions,点击 set up a workflow yourself
workflow 的内容如下:
1 | name: Website Sync |
注意,此代码块中的 []
不是上文规定的意思, []
是代码中包含的内容,请勿除去。
点击 commit 保存配置,然后点击 Actions,可以看到自动化执行。
点进去可以看执行的详情,正常情况过一会就和图示历史记录一样,执行成功。
5. 配置 serverless
创建云函数
以腾讯云为例,搜索云函数,新建一个函数服务:
选择:自定义创建 -> 事件函数 -> 函数名称任意 -> 地域视情况而定 -> 代码部署 -> 环境为 Python2.7 -> 代码提交方法为在线编辑
代码内容填写
1 | # -*- coding: utf8 -*- |
修改r = requests.post()
内容,仓库是刚刚那个私有仓库。
注意,那个 token 是带着的,完整的格式是 'Authorization': 'token xxxxxxxxxxxxxx'
。
点击完成,开始部署。部署完毕后点下面那个测试,返回 This's OK!
说明代码该函数可以正常访问到私有仓库创建的 Actions。
同时私有仓库的 GitHub Actions 也会收到指令
过一阵就成下面那个绿色的对号了,然后去访问一下博客,看看是否正常。
创建触发器
点击:触发管理 -> 创建触发器
选择:默认流量 -> API 网关触发 -> 新建 API 服务 -> 请求方法 ANY -> 发布环境 发布 -> 鉴权方法 免鉴权 -> 不选择集成响应
他会给你一个访问路径,记下来
6. 配置语雀 Web Hook
在知识库中:··· -> 设置 -> 开发者 -> 添加 Web Hook -> 其它渠道
将触发器的 URL 粘贴在此处,命名任意,勾选发布和更新文档。
添加 Web Hook 成功,可点击测试,查看 GitHub Actions 、 github.io、 域名下网站的情况。
后续
恭喜你,到这里你就完成了所有配置!
配置主题
你已经完成了 hexo 的自动化部署,现在你在语雀上指定的公开知识库里创建和更新的文章,都会同步到你的 GitHub Pages 以及 个人服务器上。
但是,你的网站仍然显得非常单调和粗糙,现在,是时候寻找一个合适的主题来装饰你的网站了。
你可以访问:https://hexo.io/themes/;或者直接在 GitHub 搜索 “hexo theme”.
玩得愉快!
图片无法正常展示
解决方法参考:语雀 cdn 防盗链临时解决方案 #41
不同主题的处理方法不同,你可能需要在 themes/layout/
中找到类似 post.ejs
的文件,并添加在正文部分之前添加:
1 | <meta name="referrer" content="no-referrer" /> |
类似这样:
不过,正文部分的代码可能从 post.ejs
链接到另一个文件中:
打开对应文件,找到正文部分,在前面添加这段代码即可:
或者,你也可以直接在设置 img
标签的 referrerpolicy
属性:
1 | <img |
参考资料
【语雀】语雀自动同步到 hexo 博客 | yichen
【CSDN】Hexo 博客部署到腾讯云服务器全流程 | CareyQ03
【CSDN】安装 Hexo 博客并部署到 GitHub 或云服务器(细节教程,越过各种坑)| 桐谷柯南
【CSDN】Hexo 搭建 - 部署服务器 | Dawson_
【CSDN】nginx server 中的 root 和 location 的 root 的区别 | fengzyf
【CSDN】Permission denied (publickey,gssapi-keyex,gssapi-with-mic) 解决方法 | xiaojueguan
【博客园】git init 和 git init –bare 的区别 | 接近风的地方 coc
【CSDN】Github Actions 自动部署 Hexo 博客至个人服务器 | 不染轻裳
【CSDN】ssh 免密以后还是需要输入密码:ssh 配置的一些坑 | Van_2009
【CSDN】SSH 简介及两种远程登录的方法 | Jack LDZ
yuque-hexo 自动化同步: PC & GitHub & Server 的安装与配置