【hexo】学习篇（三）| hexo博客部署 (github + jsdelivr)

0. 技术选型

在决定最后到底用何种方式来部署我的博客时，我参考了几种方案。

比如：

  • 方案一：直接部署在家庭的服务器上，通过 DDNS + 端口映射 的方式来突破外网访问内网的限制。
  • 方案二：通过阿里 OSS（Object storage service，对象存储服务）来托管我们的静态博客。
  • 方案三：在云服务器上创建 Git 仓库，通过 Git Hooks 将本地生成的博客静态资源，推送到 Nginx 服务的托管目录。
  • 方案四：使用 github pages 功能布置博客，并通过 jsdelivr 加速。也就是本篇博客所要详细讨论的方案。

1. 本地 git 与 github 绑定

如果是平时有使用过 push 的同学，这一步的教程你们肯定是做过的了。这其实就是在本地 git 仓库设置一个远程仓库。

1.1 本地 git 设置用户名和邮箱

首先，右击打开 Git Bash ，设置用户名和邮箱来进行和 github 的绑定

git config --global user.name "你的名字"
git config --global user.email "你的邮箱"

这里的名字和邮箱并不需要设置为github账号的名字和邮箱。只是为本地git设置一个用户名，以便以后往远程仓库 push 的时候，远程仓库能够记录下来是谁 push 的。

如果你不知道你是否设置成功，或者不记得以前是否设置过这两个参数，可以使用这两条命令进行查看

git config user.name
git config user.email

1.2 生成 ssh 密钥文件

在 Git Bash 中输入一下命令

ssh-keygen -t rsa -C "你的邮箱"

这里可以不设密码，直接敲三个回车。就可以看到你的密钥文件被存放在了 c:/Users/username/.ssh/ 文件夹下。

生成 ssh 密钥文件

我这里因为以前生成过密钥文件，所以他让我覆盖密钥文件

cat ~/.ssh/id_rsa.pub

输入上面这行代码后，就可以看到下面这一串字符，也就是你的公钥，也就是我们要在 github 上添加的东西。

或者你也可以打开 bash 里说明的路径。 c:/Users/username/.ssh/

其中的 id_rsa 是私钥，用于解密，存在于客户机

而 id_rsa.pub 是公钥，用于加密，存在于服务器。所以在下一步中，我们要把公钥添加在 github 上。

打开 id_rsa.pub 文件，可以看到里面的内容和 bash 中输出的一样。复制这些内容。

1.3 给 github 添加密钥

  1. 登录 github ，点击头像旁边的菜单按钮，点击 Settings 。

  1. 点击 SSH and GPG keys

  1. 点击 New SSH key

  1. 将复制的内容，也就是公钥粘贴在 Key 输入框中，Title框随便填写一个，用于区别其他的 SSH keys 就行了

1.4 验证绑定是否成功

完成以上内容后，我们的本地 git 和 github 就完成绑定了。我们可以通过下面这个命令来进行测试。

ssh git@github.com

如果看到 bash 如下图输出 You've successfully authenticated，则表明绑定成功。

如果说这一步你出现了如下的报错，这是因为第一次登陆 github 主机， 你的 known_host 里没有 github 的公钥。在这里输入一个 yes 并回车，github 的公钥就会被保存至本机，下一次再连接 github 的时候就会直接验证通过了。

The authenticity of host 'github.com (52.74.223.119)' can't be established.
RSA key fingerprint is SHA256:nThbg6kXUpJWGl7E1IGOCspRomTxdCARLviKw6E5SY8.
Are you sure you want to continue connecting (yes/no/[fingerprint])?

2. 将博客部署至 github

将博客部署至 github 的过程其实就是将 hexo 生成的静态文件 push 到我们的 github 仓库的过程。因此我们需要在 github 上新建一个仓库来存放我们博客的静态文件，然后借助 hexo-deploy-git 插件将我们的文件从本地 push 到远程仓库 github 。

2.1 创建博客仓库

要创建的这个博客仓库，跟我们平时的仓库不一样。因为我们部署至 github 的目的其实是要使用 github pages 服务

两点要求：

  • 仓库名为 用户名.github.io
  • 仓库为公共仓库

就好比我这个，我的用户名是 woshixiaoguo ，因此我的仓库名应该填 woshixiaoguo.github.io

所以不要像我在图片里只填了一个用户名，我只是发现在填了用户名时，有一个神奇弹窗🧐

2.2 安装Git部署插件

在 bash 中输入 npm install hexo-deployer-git --save，插件会下载至我们博客文件夹下的 node_modules 文件夹中。

2.3 修改博客配置文件

为了修改博客的部署方式，我们需要修改 博客文件夹 路径下的 _config.yml 文件，而不是 博客文件夹/themes/ 路径下的 _config.yml

这两个文件是不一样的！如果你改的是后者，那下一步操作就不会起作用。

打开博客配置文件 _config.yml 。然后，回到我们创建好仓库的 github页面。复制地址栏的地址，又或者点击那个像记事板的按钮。可以看到从记事板复制的地址比从地址栏复制的地址要多一个 .git 的后缀。

然后，在 _config.yml 文件中以下图的方式输入这个地址。

2.4 执行部署命令

现在，我们建好了仓库，装好了插件，配好了文件。那么，就可以执行最后一步。

在命令行中输入 hexo d ，然后静静等待我们的代码上传 github。在这过程中，会需要我们输入一次 github 的账号和密码。

如果一切都像下图一样顺利完成，那么我们的博客就上线了，可以通过 github账号.github.io 这个地址来进行访问。

就好比我的 github 账号是 woshixiaoguo ，那么我的博客可以通过 https://woshixiaoguo.github.io 来进行访问。

每次 hexo d 都要输入账号密码让人不免觉得有点麻烦。其实，我们可以摆脱。具体请看FAQ。

3. 更换域名

使用 github pages 部署好我们的博客后，我们可以通过 ××××.gihtub.io 这个域名进行访问。但是，我们任然想要一个更加个性的域名。

3.1 准备个人域名

1. 购买

我个人的域名是在阿里云万网上购买的。所以这里我也只提供阿里云万网域名的操作，其他域名也可以借鉴。

首先，打开阿里云，https://aliyun.com

  • 点击域名
  • 输入你想要的域名
  • 搜索

然后，怎么逛菜市场还要我教你？🛒💸

如果你看到了一个一年只要10元以下并且刚好是你喜欢的名字。OMG！买它！买它！。千万不要想着考虑考虑，这样的域名你犹豫个一晚上，第二天绝对看不到了。而且，强烈推荐买它个十年，价格可能也就在两百多元。如果你是想要先买个一年用用看，第二年再续。那到时候，他可不是这个价了。一个首年只要8元的域名，当你要续费时，可能第二年就要50元。

2. 实名

在购买了域名以后，在阿里云首页点击 控制台 → 产品与服务 → 域名。

域名需要实名认证才可以用，不然不给解析。

点击提交资料，给刚刚购买的域名实名认证。主要是身份证的照片还有一些个人信息。这个认证的过程一般说是二十天，但是我每次两个小时就认证成功了。

3.2 解析个人域名

点击上面那张图域名后面的 “解析”。

在这里，我们要设置两类记录。

  • CNAME记录，指向另外一个域名
  • A记录，指向一个 IPV4地址

1. CNAME

指向的域名是我们的 github pages 域名 username.github.io

点击添加记录，输入以下信息

  • 记录类型：CNAME
  • 解析线路：默认
  • 记录值：xxxx.github.io
  • TTL：10分钟
  • 主机记录：www

2. A

指向的域名是我们的 github pages 所在的服务器的 IP 地址。

在命令行里输入

ping xxxx.github.io

使用这个命令来查找这个域名的 IP 地址。

如果发现找不到主机，那我们就借助第三方工具来实现。http://ip.tool.chinaz.com/

输入你的 github pages 地址，然后查询。

点击添加记录

  • 记录类型：A
  • 主机记录：@
  • 解析线路：默认
  • 记录值：我们查到的 IP 地址
  • TTL：10分钟

注：如果需要设置为二级域名，则主机记录改为相应的字符串。比如你申请的域名为aliyun.com。则填写 abc，对应 abc.aliyun.com。填写 www，对应 www.aliyun.com

经过多次尝试发现，在设置了二级域名后。www分配给A记录，@分配给CNAME记录。又或者www分配给A记录，@分配给CNAME记录。这两种情况都不影响二级域名blog.guoguo.host的使用，但是 www.guoguo.host 或者 guoguo.host 不能访问。希望懂的伙伴讨论一下，疑义相与析。

3.3 设置 github pages 自定义域名

最后一步，来到我们的博客仓库 username/username.github.io

点击 Settings

一直往下翻，直到你看见 GitHub Pages

在Custom domain里面，输入你的域名

🎉🎊🎇大功告成！

多次使用 hexo d 更新博客内容后，你可能会发现，每 hexo d 一遍，就要手动修改一次这个 Custom domain。其实，我们有办法摆脱。具体请看 FAQ。

4. 使用 jsdelivr 优化访问速度

4.1 jsdelivr是啥

jsdelivr 是个 CDN，为开源项目提供服务的 CDN。CDN 是啥？CDN 就是内容分发网络（Content Delivery Network）。

他就是个大仓库，由遍布各地的仓库（服务器）组成。（像京东那样？🐶）

当你需要从仓库里取东西时，这个大仓库直接安排离你最近的那个仓库为你传输信息。（好像真的像京东🐶）

4.2 jsdelivr能做啥

1. 特性

http://www.jsdelivr.com/features

在官网里，关于jsdelivr的特性描述为：

jsDelivr 为 npm、GitHub、WordPress 插件和一些提供特殊需求的自定义端点提供镜像。

npm 我们不关心，wordPress 插件我们也用不到。唯一跟我们有关的就是 GitHub，我们的博客目前是部署在 GitHub 仓库里，使用的 GitHub Pages 服务。

2. 使用

只需要通过访问特定的 URL，就可以更快地速度访问 GitHub 仓库中的资源

比如：

  • 加载 GitHub release，commit 或 branch
https://cdn.jsdelivr.net/gh/user/repo@version/file
https://cdn.jsdelivr.net/gh/用户名/仓库名@版本号/文件名
  • 省略版本号，或者使用 “latest” 也可以访问

https://cdn.jsdelivr.net/gh/jquery/jquery@latest/dist/jquery.min.js

https://cdn.jsdelivr.net/gh/jquery/jquery/dist/jquery.min.js

可能看到这里，你还没有明白 jsDelivr 到底怎么用，到底怎么配置。

其实，他不用配置。正如官网首页说的，他是 automated

像上面这两个 JS 文件，都是存放在 GitHub仓库里的资源。也就是说，我们也可以把博客里用的静态资源存放在 GitHub 仓库里。然后，每次打开博客时。浏览器通过访问这种特定的 URL 来加载博客用到的静态资源。从而实现提升打开博客的速度。

重！

重点!

重点来!

重点来啦!

两件事情：

  • 把博客里的静态资源上传至自己的仓库
  • 修改博客引用静态资源的方式

对于上传静态资源，具体可以参照一位叫作 如有乐享 的大佬的文章，Github+jsDelivr为脚本/图片等静态文件加速的全球CDN

除了 JS 文件，静态资源还有我们博客里的图片。对于博客加载图片的速度优化，我建议你使用（GitHub + jsDelivr + Picgo) 搭一个图床。可以参考 TRHX 大佬的文章，Github+jsDelivr+PicGo 打造稳定快速、高效免费图床

4.3 盘他

那么到底如何使用 jsdelivr 来提速我们的博客，其实对于使用不同的主题，做法可能不太一样。

  • 如果你使用的是 matery 主题，那么你只需要修改一下主题路径下的配置文件即可。
  • 如果你像我一样使用的是 fluid 主题，那么更简单。不需要配置，开发主题的作者已经做好了。虽然不一定用了jsdelivr，但是也用了其他的 CDN 加速服务。

matery主题

打开 博客路径/themes/matery 路径下的 _config.yml 文件

拉到最后，填写 jsDelivr 属性

jsDelivr:
  url: /img/woshixiaoguo.github.io
# url: https://cdn.jsdelivr.net/gh/xxxx/xxxx.github.io
# xxxx改为自己的github用户名

fluid主题

打开 博库路径/themes/fluid 路径下的 _static.prefix.yml 文件

或者，如果你使用了平滑升级

打开 博客路径/source/_data 路径下的 fluid_static_prefix.yml 文件

记得在第一次使用 fluid 主题的时候，发现静态资源总是加载不出来，所以将使用 staticfile 服务的静态资源重新替换成了使用其他 cdn 服务的静态资源。

以下 # 后面的都是原生的配置，由于不能使用，寻找了替代品。

anchor: https://cdn.bootcdn.net/ajax/libs/anchor-js/4.2.2/ #https://cdn.staticfile.org/anchor-js/4.2.2/

github_markdown: https://cdn.bootcdn.net/ajax/libs/github-markdown-css/4.0.0/ #https://cdn.staticfile.org/github-markdown-css/4.0.0/

jquery: https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/ #https://cdn.staticfile.org/jquery/3.4.1/

bootstrap: https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.4.1/ #https://cdn.staticfile.org/twitter-bootstrap/4.4.1/

highlightjs: https://cdn.staticfile.org/highlight.js/10.0.0/

prismjs: https://cdn.bootcdn.net/ajax/libs/prism/1.21.0/ #https://cdn.staticfile.org/prism/1.21.0/

tocbot: https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/ #https://cdn.staticfile.org/tocbot/4.11.1/

typed: https://cdn.bootcdn.net/ajax/libs/typed.js/2.0.11/ #https://cdn.staticfile.org/typed.js/2.0.11/

fancybox: https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/ #https://cdn.staticfile.org/fancybox/3.5.7/

mathjax: https://cdn.staticfile.org/mathjax/3.0.5/es5/

katex: https://cdn.staticfile.org/KaTeX/0.11.1/

aplayer: https://cdn.staticfile.org/aplayer/1.10.1/

busuanzi: https://busuanzi.ibruce.info/busuanzi/2.3/

clipboard: https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.6/ #https://cdn.staticfile.org/clipboard.js/2.0.6/

mermaid: https://cdn.staticfile.org/mermaid/8.5.0/

valine: https://cdn.staticfile.org/valine/1.4.14/

gitalk: https://cdn.staticfile.org/gitalk/1.6.2/

blueimp_md5: https://cdn.staticfile.org/blueimp-md5/2.13.0/

disqusjs: https://cdn.jsdelivr.net/npm/disqusjs@1.0/dist/

FAQ

1. 每次 hexo d 都要输入密码

我们在 2.3 修改博客配置文件 中，仓库的地址使用的是 HTTPS 地址。在给远程仓库（github）设置了 ssh 公钥后，我们可以通过 ssh 来建立安全通道，而无需再使用账密的方式来鉴权。

因此，我们需要把 HTTPS 地址改为 SSH 地址。

你们仿照着下面的形式进行修改（千万别把我的地址直接复制过去了！）

将原先的 https://github.com/woshixiaoguo/woshixiaoguo.github.io.git (HTTPS地址)

更改为 git@github.com:woshixiaoguo/woshixiaoguo.github.io.git (SSH地址)

SSH地址可以通过打开 github 仓库，点击 Code -> 点击SSH 

点击返回

2. 每次 hexo d 之后都要修改 github pages 的自定义域名

在 博客路径\source 这个路径下创建一个 CNAME 文件。

注意：

  • 这个文件没有后缀名，在命令行中输入 touch CNAME 即可创建这样一个文件

  • 在这个文件中输入你的域名地址

    完成这两部操作后，每次 hexo d 就无需再修改 github pages 的自定义域名了。

点击返回

References

[1] 吴润，GitHub+Hexo 搭建个人网站详细教程
[2] 如有乐享，Github+jsDelivr为脚本/图片等静态文件加速的全球CDN
[3] 大大怪将军鸭，使用jsdelivr访问github资源，为hexo站点提提速。
[4] TRHX，Github+jsDelivr+PicGo 打造稳定快速、高效免费图床

个人博客
#hexo #cdn #域名 #Git
【hexo】学习篇（三）| hexo博客部署 (github + jsdelivr)
http://example.com/2020/08/25/hexo-03-deploy/
作者
Guoguo
发布于
2020年8月25日
许可协议