Hexo博客双线部署

前言

最近折腾了HEXO 的博客，以前我使用的是Typecho，Typecho是基于PHP的动态博客程序，而HeXo则截然相反。它是纯静态的，可以托管于gh pages。

相比于Typecho，Hexo在配置博客时虽然更加麻烦，但在后期维护的成本大大降低不再需要云服务器或者虚拟主机之类的服务，因而成本降低了不仅仅是服务器成本，在维护成本上也大大降低。使用动态博客程序要兼顾到很多东西，比如服务器宕机了，需要有人维护而静态博客就不需要了，扔到gh pages后基本就不用太过于操心，其实说了这么多主要原因是我的服务器快到期了。。。

下面就开始吧~

安装 Node.js

Hexo 的运行需要 Node.js 的支持，所以需要首先安装好 Node.js 。打开Node.js官网就能很明显地看到下载提示，点击左边的按钮进行下载即可。

下载完点击安装程序进行安装，无需修改安装路径的话无脑点击下一步即可。
当安装完成后打开命令行工具（cmd/powershell)，输入node -v，如果输出如下信息，安装即为成功。

1 2	`$ node -v v12.18.1`

安装 Git

需要从 GitHub 上下载主题文件，最重要的是需要将本地的博客部署到可供外部访问的网页上去，借助的是 GitHub ，这些都离不开 Git 的支持。同样的到 Git官网下载页下载即可。这里选择 Windows 64 位最新版本的 Git for Windows 进行安装。

安装和 Node.js 差不多，不做修改的话一直点下一步即可。
安装完成后同样打开命令行工具（cmd/powershell)，输入git --version，如果输出如下信息，安装即为成功。

1 2	`$ git --version git version 2.26.2.windows.1`

安装 Hexo

Hexo 就是个人博客网站的框架，需要在电脑里创建一个文件夹（称之为博客根目录），用来存放 Hexo 的相关文件以及博客文章，文件夹名字随意（建议不要出现中文），我文件夹名字为 Hexo-Blog。创建好后，进入文件夹中，右键进入 Git Bash Here，由于国内的 npm 访问外网下载速度较慢，可以将 npm 源更换为淘宝的镜像（当然如果你觉得你的下载速度较快的话，也可以选择不进行更换），在 Git Bash 中输入以下指令

1	`$ npm install -g cnpm --registry=https://registry.npm.taobao.org`

请注意如果进行了上述操作，那么之后的下载等操作需要使用到 npm 的地方你都应该更换为 cnpm 指令，这样才能起到加速作用，如果未进行更换，则使用 npm 即可。

输入如下指令即可安装完成 Hexo 的安装

1	`npm install -g hexo-cli`

安装完成后，输入 hexo -v 命令，如果显示如下信息，则安装成功。

hexo-cli: 1.1.0
os: Windows_NT 10.0.17134 win32 x64
http_parser: 2.8.0
node: 10.14.1
v8: 6.8.275.32-node.36
uv: 1.23.2
...

初始化博客

1	`hexo init`

文件夹中大致如下

Hexo-Bolg
|---- node_modules
|---- public
|---- scaffolds
|---- source
|---- _post
|---- themes
|---- _config.yaml

node_modules 是 node.js 各种库的目录，
public 是生成的网页文件目录（一开始可能没有）
scaffolds 里面就三个文件，存储着新文章和新页面的初始设置
source 是最常用到的一个目录，里面存放着文章、各类页面、图像等文件
themes 存放着主题文件
_config.yaml 站点配置文件

本地预览

在 Git Bash 中输入 hexo g 命令（是 hexo generate 的简写），等待 Hexo 自动生成网页，得到如下反馈则生成成功：

$ hexo g
INFO  Start processing
INFO  Files loaded in 192 ms
INFO  Generated: index.html
...
INFO  28 files generated in 459 ms

接下来需要开启开启本地服务器，输入 hexo s 命令（是 hexo server 的简写），输出

1
2
3

$ hexo s
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

Hexo 正在 http://localhost:4000 运行，按 Ctrl+C 可停止

在Github创建仓库

首先如果你还没有 Github 账号的先注册一个，点击 GitHub 中的右上角的 + 创建新仓库（new repository），仓库名应该为：yourname.github.io 这里的 yourname 使用你的 GitHub 帐号名称代替，这是固定写法。

连接GitHub

在桌面右键点击 Git Bash Here设置user.name和user.email配置信息，
在弹出界面中输入以下内容

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

然后创建 SSH

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

然后直接三个回车即可，即不设置密码

然后在 C:\Users\Username\.ssh 路径下找到名为 id_rsa.pub 的文件，就是你刚刚创建的密钥，右键用记事本打开然后复制全部内容

然后进入 GitHub 添加密钥

将复制的内容粘贴至 Key 中，title 随便填然后点击 Add SSH key

在 Git Bash 中检测 GitHub 公钥设置是否成功

1	`ssh -T git@github.com`

当出现 Hi,yourname! You've successfully...... 则已经成功

部署到 Github

需要将 hexo 和 GitHub 关联起来，部署之前还需要修改配置和安装部署插件。

第一：打开项目根目录下的 _config.yml 配置文件配置参数。拉到文件末尾，填上如下配置：

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
 type: git
 repo: 
   github: [email protected]:yourname/yourname.github.io.git
 branch: master

第二：要安装一个部署插件 hexo-deployer-git

1	`npm install hexo-deployer-git --save`

最后执行以下命令就可以部署上传啦

1	`hexo clean && hexo g && hexo s`

稍等一会，在浏览器访问网址： https://你的用户名.github.io 就会看到你的博客啦！！

完善配置文件 `_config.yaml`

只提供主要配置的中文
按 Ctrl+F 可进行搜索

(#后为注释)

首先修改网站基本信息

# Site
title:          # 网站标题
subtitle: ''
description:    # 网站描述
keywords:       # 网站关键词
author:         # 博客作者名字
language: zh-CN # 语言
timezone: ''

将链接改为你博客域名（yourname.github.io）

1	`url: http://yoursite.com`

你博客文章的地址，默认为 yourname.github.io/year/mouth/day/title
，可自行修改
例如你的一篇文章叫 post，如果按照默认设置则文章地址是 xxxxxxx/2020/02/10/post
如果是我图片上的设置则地址是 xxxxxxx/2020/post

1	`permalink: :year/:month/:day/:title/`

每页的文章数量

1	`per_page: 10`

选择你的主题，默认即为landscape，你可以到官网主题页或者网上找你喜欢的，可以根据主题官网使用文档说明修改相应的配置，达到自己想要的效果。

1	`theme: landscape`

文章编写

博客搭好了，就开始写文章了，这里简单介绍一下，详细的文档可以看 hexo 官网。
新建文章，输入以下命令即可

1	`hexo new '文章标题'`

执行完成后可以在 /source/_posts 下看到一个名为 hello-world.md 的文件 .md 即为markdown文章的后缀名

---
title: Hello World
---
Welcome to [Hexo](https://hexo.io/)! This is your very first post. Check [documentation](https://hexo.io/docs/) for more info. If you get any problems when using Hexo, you can find the answer in [troubleshooting](https://hexo.io/docs/troubleshooting.html) or you can ask me on [GitHub](https://github.com/hexojs/hexo/issues).
............
............

两个 --- 中间的部分称之为 Front-matter ，即文章的属性，该部分来自 \scaffolds\post.md ,这个md文件中放着一份模板，之后用 hexo n “xxx” 命令新建的文件的 Front-matter 都来自这，可以自己修改该文件。

title 标题，date 建立日期，updated 更新日期，tags 标签，categories 分类

除了使用命令新建文章还可以自己在 _post 文件夹中创建 .md 文件，需要注意的是，使用命令创建的文章会自动帮写好 Front-matter，而手动创建的需要自己写。

图床

图床一般是指储存图片的服务器，有国内和国外之分。国外的图床由于有空间距离等因素决定访问速度很慢影响图片显示速度。国内也分为单线空间、多线空间和cdn加速三种。

利用jsDelivr CDN加速访问

jsDelivr 是一个免费开源的 CDN 解决方案，PicGo工具一键上传，操作简单高效，GitHub和jsDelivr都是大厂，不用担心跑路问题，不用担心速度和容量问题，而且完全免费，可以说是目前免费图床的最佳解决方案！

PicGo

图床工具，就是自动把本地图片转换成链接的一款工具，网络上有很多图床工具，就目前使用种类而言，PicGo 算得上一款比较优秀的图床工具。它是一款用 Electron-vue 开发的软件，可以支持微博，七牛云，腾讯云COS，又拍云，GitHub，阿里云OSS，SM.MS，imgur 等8种常用图床，功能强大，简单易用

新建GitHub仓库

新建一个仓库按要求填写仓库名，仓库描述，是否初始化README.md描述文件

生成一个Token

在GitHub首页以次打开【Settings】-【Developer settings】-【Personal access tokens】-【Generate new token】，填写好描述，勾选【repo】，最后点击【Generate token】生成一个Token

注意这个token只会显示一次，自己一定要保存下来！！！

配置PicGo

下载PicGo并安装！

设定仓库名：你的用户名+创建好的仓库名

设定分支名：master

设定Token：粘贴之前生成的token

指定储存路径：填写想要储存的路径，如【tuchuang/】，这样就会在仓库下创建一个名为 tuchuang 的文件夹，图片将会储存在此文件夹中

设置自定义域名：它的作用是，在图片上传后，PicGo会按照【自定义域名+储存路径+上传的图片名】的方式生成访问链接，这里是默认的GitHub连接格式https://raw.githubusercontent.com/用户名/仓库名/master

使用 jsDelivr 加速访问：也不需要注册，直接按这个格式粘贴进PicGo【https://cdn.jsdelivr.net/gh/用户名/图床仓库名 】即可实现自动生成加速后的连接

部署到Coding

由于github 一直处于半墙状态，访问速度堪忧，所以可以选择境内访问走 coding（国内的平台），境外访问走 github，你需要有自己的域名，挺便宜的，算下来一天好像一分钱不到

首先注册一个账号，官网查看链接

登录后，在右上角创建项目

创建项目

选择代码托管项目

然后按照下图填写，项目名称建议像 github 一样强制和用户名一样然后再加 coding.me，项目标识会自动弹出来

创建完成之后发现并没有静态网页，需要在左下角的设置中开启

然后返回点击静态网站有个构建与部署，点击立即发布，按下面设置后保存。

然后在 C:\Users\Username\.ssh 路径下找到名为 id_rsa.pub 的文件，就是你刚刚创建的密钥，右键用记事本打开然后复制全部内容，在个人设置里找到 SSH公钥，点击新增公钥勾选永久有效。

添加完成后可在 git bash 中输入如下代码，检查是否添加成功

1	`ssh -T git@e.coding.net`

如果添加成功会显示如下信息

$ ssh -T git@e.coding.net
Coding 提示: Hello Couurh, You've connected to Coding.net via SSH. This is a personal key.
Couurh，你好，你已经通过 SSH 协议认证 Coding.net 服务，这是一个个人公钥.
公钥指纹：11:11:11:11:11:11:11:11:11:11:11:11:11:11:11:11(例)

修改解析记录

首先进入你买域名的平台，我用的是阿里云

进入控制台–>域名管理–>解析设置

注意！先进行 coding 解析并申请证书开启强制 HTTPS，证书成功申请之后再进行 github 解析！

coding 解析

添加 coding 的解析，主机记录选 www，记录类型选 CNAME，记录值为coding分配的静态网站页面地址，不能加 https:// 或者 http://，后面默认就可以了；

再添加一条主机记录选 @ ，记录类型选择 A，记录值值填域名的 ipv4 地址(Ping记录值)

点击右上角设置将自己的域名填进去，可以开启强制 HTTPS，然后绑定

GitHub解析

添加 github 的解析，主机记录选 www，记录类型选 CNAME，记录值填写 github 给你的博客地址，不能加 https:// 或者 http://，线路选境外，也就是说如果境外访问你的博客会走 github；

再添加一条主机记录选 @ ，记录类型选择 A，记录值值填域名的 ipv4 地址(Ping 记录值)

解析记录填写完了，就需要到 github 上设置下，进入仓库点击 settings，然后向下滑找到 GitHub Pages填入自己的域名，点击 save，可以选择强制 HTTPS

进入站点根目录修改配置文件_config.yml

deploy:
 type: git
 repo: 
   github: git@github.com:yourname/yourname.github.io.git
   coding: git@e.coding.net:yourname/Blog/yourname.git
 branch: master

最后执行部署命令

1	`hexo clean && hexo g && hexo d`

如果部署成功，在 coding仓库中就可以看到你提交部署的代码，然后就可以访问你的博客站点了。

结语

文章到这差不多啦！技术有限，难免有纰漏，欢迎指正批评和讨论，感谢阅读！

网站建设

#Hexo

Hexo博客双线部署

https://couurh.github.io/posts/5deeb6a1.html

Author

Couurh

Posted on

August 1, 2020

Licensed under

Auto.js实现滑动验证码 Previous

基于 Auto.js 的蚂蚁森林能量自动收取脚本 Next

Hexo博客双线部署

前言

安装 Node.js

安装 Git

安装 Hexo

初始化博客

本地预览

在Github创建仓库

连接GitHub

部署到 Github

完善配置文件 _config.yaml

文章编写

图床

利用jsDelivr CDN加速访问

PicGo

新建GitHub仓库

生成一个Token

配置PicGo

部署到Coding

修改解析记录

coding 解析

GitHub解析

结语

完善配置文件 `_config.yaml`