利用 Hexo + Github Pages (+ CloudFlare),免费构建自己的加密安全博客

Author Avatar
HjtHjtHjt 8月 27, 2017
  • 在其它设备中阅读本文章

在将博客由 WordPress 换成 Hexo 后,发现 Hexo 原来并没有想象中的那么难以配置,也不需要手动捣鼓什么环境变量。

Hexo 相比 WordPress,就好比原生 ROM 相比 MIUI ¯\_(ツ)_/¯

你可以选择使用 Github 提供的免费域名,并享受其带来的 HTTPS 加密服务,但我更推荐你 购买自己的域名,免费域名并不支持第三方 CDN 加速,而一年不过是 60~70 元的域名,在强稳定性的 Github 和 CloudFlare 的支撑下,非常合算。

下述操作均在 Windows 环境下实现,用 Linux 的大佬不用看了,既然敢用 Linux 就一定不是一般人 _(:з」∠)_

本文大多数内容可在 Hexo 官方中文文档中找到,我只是想更详细地述说而已。

环境搭建

依赖:

无论哪个软件,我都推荐你 安装稳定版 而不是 开发版,安装 Node.js 时,请勾选 Add to PATH 选项。

开始

安装 Hexo

请找到一个 空文件夹 (在后文称之为 根文件夹 ),这将成为你以后 Hexo 文件存放的地方。
在此文件夹右键,选择 Git Bash,此时将会打开一个命令行窗口,在其中输入:

npm install -g hexo-cli

在前面环境配置正确的情况下,Hexo 将被正确安装。当命令行窗口中出现 WARN 时,大部分情况下我们可以忽略它,只要别出现 ERROR。

建立站点

在刚才使用的 Git Bash(如果被你关闭了,重新在那个新建文件夹中右键打开即可)中,输入以下命令(命令执行后可能不会立刻有效果,请耐心等待直到命令结束,重新出现 $ 时)

hexo init
npm install

一堆奇怪的命令加载完毕后,刚才那个空白文件夹应该是这样子的

.
├── _config.yml
├── package.json
├── scaffolds
├── source
 |   ├── _drafts
 |   └── _posts
└── themes

各文件夹的作用,可以在 Hexo 官方文档 中找到。

配置 Hexo

打开目录中的 _config.yml 文件,它是 Hexo 的主要配置文件。

请注意,在填写有关内容的时候,根据 YAML 的规定,请在冒号与你的内容之间存在一个空格,例如 title: 233,而不是 title:233 ,详见:https://hexo.io/zh-cn/docs/troubleshooting.html

大部分内容,你可以在官方 _config.yml 指导中找到,并修改为你所需要的内容,在此仅仅为部分内容的推荐修改。
下面内容中的行数适用于 commit 5a47abca5d165e753b1eeb42f879be582f6aa7ee,我无法保证它在未来的版本中是否仍是该行数,但内容一般是不变的,可以通过文本编辑器的搜索功能找到对应内容。

10 行,中文语言应为 zh-CN,而不是 zh

language: zh-CN

17,18 行,将链接改为以下的内容,伪静态(这本来就是静态程序¯\_(ツ)_/¯)对搜索引擎更友好:

permalink: archives/:title.html
permalink_defaults: :title.html

随意行数,手动插入以下代码,此代码可以自动在中文与英文之间添加空格,请注意,代码仅适用于安装了 hexo-filter-auto-spacing 插件的 Hexo 程序,安装方式可以参考其 Github

auto_spacing: true

第 15 行中有关 url 的设定,如果你自己购买了域名,可以直接填入。
请在填写时遵循注释,保留 http:// 或者 https://,我推荐你使用后者,因为 CloudFlare 将提供免费的 SSL 加密服务。

在此,你应该已经配置好了主要内容,你可以通过在 根文件夹 中打开 Git Bash 后 执行以下指令,并打开 http://localhost:4000 进行测试访问:

hexo s

正常情况下,它将以默认主题显示你的博客。

安装主题

本博客使用的是 hexo-theme-material 主题,安装方式可以详见其网站。

在成功安装主题后,你仅需要修改 _config.yml 文件中第 76 行即可:

theme: (此处修改为主题文件夹名称)

如果修改后并不生效,请执行 clean 指令:

hexo clean
hexo s

使用 Github Pages

注册账号

如果你并没有 Github 账号的话,你可以选择注册一个账号。如果已有请跳过。

访问 Github,并正确注册一个账号。

新建一个 Repository

通常,我们将 Repository 简称为 Repo。

访问 Create a New Repository,将 Repository name 命名为:*username*.github.io(此处 *username* 即为你 Github 用户名,下同),其他内容可以不管,直接点击 Create repository

片刻后,刷新页面,它理论将告诉你它是一个空 Repo。

在任你喜欢的文件夹中使用 Git Bash 执行以下指令,它将在你所在的目录中新建一个自动命名为 *username*.github.io 的文件夹,且包含 .git 文件夹(注意修改以下指令中的 *username*):

git clone https://github.com/*username*/*username*.github.io.git

第一次连接 Github 时,会弹出登录框,请按照你在 Github 注册时填写的有关信息填写并提交。
正常情况下,验证通过后,它将会 Clone 你的 Repo。

绑定域名

如果你持有自己的域名,可以浏览此步骤,如果你仅希望使用 Github 提供的 *username*.github.io 域名,你可以跳过此步骤

设置 CNAME

进入 Repo 的 Setting 中的 Custom domain,修改为你的域名并保存。
在刚才 Clone 完成后,包含有 .git 的文件夹中,新建一个名为 CNAME,全大写且无后缀名的文件,使用文本编辑器打开并仅仅填入你绑定的域名,保存。
新建一个文件,命名为 index.html,任意填写内容,这仅仅是在此步绑定域名时用于验证所需的。

使用 CloudFlare

我希望你的网站是经过加密的,因此我推荐你使用 CloudFlare 的 CDN 服务,它提供免费的 SSL。
(如果你使用 Github 提供的免费子域名,它将会自动加密,不需要 CloudFlare)

请注意,我们需要的是国际版的 CloudFlare,而不是 CloudFlare 与百度合作的 百度云加速
访问 CloudFlare 官网,没有账号可以先注册,请记得验证邮件。

Add a website 中填入你的域名,然后点击 Scan DNS Records,等待扫描完成。即使没有扫到 DNS 记录也没有关系,我们可以在后面添加,接着点击 Continue

Add Record 最左侧,选择 CNAME,Name 处填入 @,Value 处 填入 *username*.github.io,完成后点击 Add Record,以及 Continue

Select a Cloudflare Plan 中选中 Free Website(当然你也可以选择其他套餐,如果你希望付费的话)。点击 Continue

接下来会出现两行 NS 记录,在 你的域名商 处,将 DNS 解析服务器 修改为 CloudFlare 提供的地址。点击 Continue

CloudFlare 既是一个 CDN 服务商,同样也是一个 DNS 服务商。
DNS 修改完成后可以点击 Recheck Nameservers 来复查 NS 记录是否正确设置。

顶部标签中选中 Crypto,在第一个出现的 SSL 中选中 Full

往下拉,找到 Always use HTTPS,将开关打开。
你可以选择打开 Automatic HTTPS Rewrites,或是不打开,它会将所有走 http 的资源强行转到 https。

CloudFlare 提供的 SSL 由于使用了 SNI 技术,在 Windows XP 上的 Internet Explorer,或是 Ice Cream Sandwich 版本之前的 Android 上也许不会正常工作。

更新文件

我们刚才新建的 index.html (以及自定义绑定域名中需要的 CNAME )实际仍在本地,没有上传至 Github。

*username*.github.io 文件夹中打开 Git Bash,输入(// 后的内容不必输入)

git add .   // 添加文件,它将会自动将本地改动(包括增加删除修改)的文件加入上传列表
git commit -m " 任意内容 "    // 提交内容,本意是在开源项目中声明提交的新内容,如果仅仅用于博客你可以每次都是一样的内容
git push     // 推送到 Github

当指令完全执行结束后,等待 DNS 缓存更新后就可以访问 *username*.github.io/index.html 或者 自定义域名 /index.html。DNS 缓存全球更新也许仅需要一会,也许又需要数小时。

新建文章

在根文件夹打开 Git Bash,输入:

hexo new post title // 请注意,post 是文章类型,title 请修改为英文文章名称,单词间使用 - 连接,英文文章链接对搜索引擎友好。

进入 source\_posts 文件夹,这时应该会看到与刚才名字相同的 .md 文件,用文本编辑器打开。

--- 下即为你将誊写的文章内容。文章使用 Markdown 语法,可以参考 Markdown 入门参考

渲染页面

仅需在根文件夹中执行以下指令:

hexo g

稍等片刻,根文件夹中会出现 public,其中的内容即为最终发布的内容。

发布

进入 *username*.github.io 文件夹,删除 index.html,将 public 中所有内容复制进去。

对于自定义域名,不管是现在还是未来,你都得保证 CNAME 文件存在。

执行 更新文件 中的 Git 指令来上传内容,片刻后打开网站,你应该能看到 Hexo。

本来 Hexo 的特性是支持一键部署到 Github Pages 的,但是我认为这种方式具有更高的可定义性。

更新文章

以后,当你修改文章,新增文章,删除文章后,均要通过 hexo g 指令重新渲染页面,并上传至 Github。

结语

懂得用 Google 搜索不会的内容!
懂得用 Google 搜索不会的内容!
懂得用 Google 搜索不会的内容!

不推荐百度!

由于 Hexo 的特殊性,文章均具有本地性限制,我的解决方式是使用 坚果云,设置 Hexo 根文件夹 为同步目录,这样即使以后在其他电脑上需要使用 Hexo,在安装完环境后便可使用。

Github Pages 没有特意声明限制多少空间,我并不推荐你将图片都放置在 Github 服务器上,你可以使用第三方服务,例如又拍云等。
我使用微博图床,通过 新浪微博图床 来快捷上传图片,且该 chrome 扩展支持 HTTPS 链接。

本文章使用 署名-非商业性使用-相同方式共享 3.0 未本地化版本 (CC BY-NC-SA 3.0) 协议许可。
本文链接:https://jakting.com/archives/hexo-setup-guide.html