Hexo + GitHub Pages + Cloudflare
系统环境配置
安装 Node.js
Node.js 是一种 JavaScript 的运行环境,点击此处以下载。
如何安装 Node.js 详见此文章。注意:Linux 上安装 Node.js 需要安装 Python 2.6 或 2.7 ,不建议安装 Python 3.0 以上版本。
安装 Git
Git 是一个开源的分布式版本控制系统,帮助你合并多次改动并记录下来。点击此处以下载。
如何安装 Git 详见此文章。
安装 Hexo
Hexo 是一个使用 Markdown 引擎解析文章的快速、简洁且高效的博客框架。当你已经安装好 Node.js 和 Git 后,直接使用 npm 安装 Hexo。
|
|
此时你可以访问 http://localhost:4000/ 查看预览。
|
|
目前我安装所用的本地环境如下:
|
|
Hexo 的基本命令
|
|
新建一个博客。将
|
|
新建一篇 title.md 文章。如果没有设置 layout,将使用默认的 layout。可能的参数有:post, page。如果标题包含空格,请使用引号括起来。
|
|
生成静态文件,此时你可以在目录中看到一个叫 public 的文件夹。可选的选项有:-d(–deploy)表示文件生成后立刻部署网站, -w(–watch)表示监视文件变动。
|
|
启动服务器。默认情况下访问地址为:http://localhost:4000/ 。可选的选项有 -p(–port)重设端口,-s(–static)只使用静态文件,-l(–log)启动日记记录,使用覆盖记录格式。
|
|
部署网站到远端。可选的选项有:-g(–generate)部署之前先生成静态文件。
Hexo 的文件结构
博客新建完成后,指定文件夹的目录如下:
|
|
安装和设置 Hexo 主题。
此处以本博客使用的 typing 为例。
|
|
安装主题
|
|
设置、更新主题
|
|
修改 Hexo 目录下 _config.yml 配置文件中的 theme 属性,将其设置为 typing 以启用主题。
|
|
此时访问 http://localhost:4000/ 可以预览你更换的主题。
配置博客
使用文本编辑工具打开 _config.xml,按需求修改文件内容。
|
|
注意:如果使用独立域名,请记得修改 url 的值为独立域名的网址。
配置 GitHub Pages
GitHub Pages 是一个免费的静态网站托管平台,既可以用于展示你在 GitHub 上的项目,也可以用来做个人博客。(国内有类似的服务 Coding Pages)
每个帐号只能有一个用于存放个人主页的仓库,命名必须为 username/username.github.io,创建后的主页将通过 http://username.github.io/ 来访问。
连接 GitHub
创建 SSH Key
检查电脑上现有的 SSH key。
|
|
如果已经存在 key 文件,备份旧的文件并删除它。
|
|
生成新的 SSH Key
|
|
最后可以看到
|
|
表示成功设置 SSH Key。
添加 SSH Key 到 GitHub
用文本编辑工具打开 id_rsa.pub 文件,如果找不到该文件,注意本机是否已经设置显示隐藏文件。复制这个文件中所有的文本内容。
打开 GitHub 主页,点击头像,点击 Settings 进入设置。选择左侧的 SSH and GPG keys,点击 New SSH key。将复制的内容粘贴在 Key 一栏中,设置一个 Title(可以为本机名称)后点击 Add SSH key 即成功添加。
如果需要配置多个 GitHub 帐号,请参考此文章:多个 github 帐号的 SSH key 切换。
测试设置是否成功:
|
|
如果出现:
|
|
此时输入 yes 即可:
|
|
在 Git 中配置帐号
|
|
注意:使用的名字不是你在 GitHub 中的昵称。
创建 GitHub Pages
点击右上角的加号选择 New repository,进入页面填写 Repository name 为 username.github.io,注意不要填写错误。选择 Public,点击 Create repository 即完成创建。
部署 Hexo 到 GitHub Pages
使用 hexo deploy
安装拓展:
|
|
将配置文件修改为如下形式:
|
|
然后在命令行中执行
|
|
完成部署。
使用 git
将之前创建的 repository 克隆到本地并新建用于存放克隆的文件夹 .deploy:
|
|
创建 deploy 脚本文件:
|
|
在以后需要部署时只需执行这段脚本(可以将脚本保存为 deploy.sh)。执行过程中可能需要输入 GitHub 帐号密码,按提示一步一步来即可。
绑定独立域名
首先你需要有一个独立域名,可以通过 Godaddy 或阿里云-万网来购买。这里以万网为例。
进入 repository 的 Settings,向下滚动找到 Custom domain,输入你的域名,点击 Save 保存。
登录阿里云,进入控制台,依次点击域名与网站(万网)→域名,找到你的域名,点击右侧的「解析」。添加一条 CNAME 指向 username.github.io。如果想要设置 apex domain(即无 www 前缀的网址)请添加两条 A 记录:
将主机记录设置为 @
将记录值分别设置为:
192.30.252.153
192.30.252.154
等候约三到五分钟即可应用本次更改。
使用 Github 与 Let’s Encrypt 提供的 SSL 服务
虽然 Github 早在 2016 年为 GitHub Pages 添加了 HTTPS 支持,但自定义域名开启 HTTPS 却是一件令人头疼的事情。 直接用 https 链接访问自定义域名会出现证书错误(这是因为 Github 提供的 SSL 证书指向的域名是 *.github.com 和 *.github.io,而不是我们绑定的域名),只能使用 Cloudflare 之类的支持 Universal SSL 的 CDN 曲线支持 HTTPS 。
如果你之前使用了 Cloudflare 提供的 SSL 服务,请登录 Cloudflare 用户中心暂停或停止服务。
如果未使用其他 CDN,请回到域名注册商域名解析设置处,将原有 A 记录及 www 前缀的 CNAME 记录中的 IP 地址修改为:
|
|
请进入 *.github.io repository 的 Settings 中,清空原有自定域名点击 Save,待页面刷新后再次输入自定域名保存。待解析成功即自动带上 https 啦。
使用 Cloudflare 提供的 SSL 服务
由于 GitHub Pages 本身不支持上传 SSL 证书(截至 2018.2),我们可以使用 Cloudflare 提供的免费 CDN,利用反向代理实现全站 https。
注册并登录 Cloudflare,点击 Add Site 以添加自己的网站。输入网址后点击 Begin Scan 便会开始扫描网站的解析记录。点击 Continue Setup 以继续。
Cloudflare 会默认把需要使用 CDN 服务的记录勾选,确认 A 记录和 CNAME 记录右侧的云朵图案均点亮为橙色后点击 Continue 继续下一步操作。
选择 Free Plan。
回到阿里云-万网,进入控制台,依次点击域名与网站(万网)→域名,点击域名右侧的「管理」进入域名控制台。点击右侧的「DNS 修改」,将默认 DNS 替换为:
|
|
等候约三到五分钟即可应用本次更改,你可以在 Cloudflare 查看应用情况。