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。

    $ cd <folder> # 将 <folder> 改为你希望安装 Hexo 的路径
    $ npm install hexo-cli -g # 使用 npm 安装
    $ hexo init <folder> # 将 <folder> 改为你希望搭建博客的路径
    $ cd <folder>
    $ hexo generate # 或 hexo g
    $ hexo server # 或 hexo s

此时你可以访问 http://localhost:4000/ 查看预览。

    $ hexo -v # 查看本地环境版本号。

目前我安装所用的本地环境如下:

    hexo: 3.5.0
    hexo-cli: 1.0.4
    os: Darwin 17.4.0 darwin x64
    http_parser: 2.7.0
    node: 8.9.4
    v8: 6.1.534.50
    uv: 1.15.0
    zlib: 1.2.11
    ares: 1.10.1-DEV
    modules: 57
    nghttp2: 1.25.0
    openssl: 1.0.2n
    icu: 59.1
    unicode: 9.0
    cldr: 31.0.1
    tz: 2017b

Hexo 的基本命令 #

    $ hexo init <folder>

新建一个博客。将 改为你希望搭建博客的路径。

    $ hexo new [layout] <title>

新建一篇 title.md 文章。如果没有设置 layout,将使用默认的 layout。可能的参数有:post, page。如果标题包含空格,请使用引号括起来。

    $ hexo generate
    # 或简写为
    $ hexo g

生成静态文件,此时你可以在目录中看到一个叫 public 的文件夹。可选的选项有:-d(–deploy)表示文件生成后立刻部署网站, -w(–watch)表示监视文件变动。

    $ hexo server
    # 或简写为
    $ hexo s

启动服务器。默认情况下访问地址为:http://localhost:4000/ 。可选的选项有 -p(–port)重设端口,-s(–static)只使用静态文件,-l(–log)启动日记记录,使用覆盖记录格式。

    $ hexo deploy
    # 或简写为
    $ hexo d

部署网站到远端。可选的选项有:-g(–generate)部署之前先生成静态文件。

Hexo 的文件结构 #

博客新建完成后,指定文件夹的目录如下:

    .
    ├── _config.yml # 网站的配置信息。
    ├── package.json # 应用程序的信息。
    ├── scaffolds # 固定模板。
    ├── source # 资源文件夹。
    |    ├── _drafts
    |    └── _posts # 将文章存放于此。
    └── themes # 主题文件夹。

安装和设置 Hexo 主题。 #

此处以本博客使用的 typing 为例。

    $ hexo clean # 清除缓存文件(db.json)和已经生成的静态文件(/public)。

安装主题 #

    $ cd <folder> # 将 <folder> 改为你安装博客的路径
    $ git clone https://github.com/geekplux/hexo-theme-typing themes/typing 

设置、更新主题 #

    theme: typing

修改 Hexo 目录下 _config.yml 配置文件中的 theme 属性,将其设置为 typing 以启用主题。

    $ cd themes/typing
    $ git pull
    $ hexo g
    $ hexo s

此时访问 http://localhost:4000/ 可以预览你更换的主题。

配置博客 #

使用文本编辑工具打开 _config.xml,按需求修改文件内容。

    # Site
        title: Undercurrent # 博客名称,网站标题
        subtitle: Another blog. # 副标题
        description: # 网站描述
        author: Fan Rongbin # 作者姓名
        language: zh-CN # 网站语言
        timezone: Asia/Shanghai # 网站所用时区

    # URL
    ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
		url: https://fanrongbin.com/ # 网站网址
        root: /
        permalink: :year/:month/:day/:title/
        permalink_defaults:

注意:如果使用独立域名,请记得修改 url 的值为独立域名的网址。

配置 GitHub Pages #

GitHub Pages 是一个免费的静态网站托管平台,既可以用于展示你在 GitHub 上的项目,也可以用来做个人博客。(国内有类似的服务 Coding Pages)

每个帐号只能有一个用于存放个人主页的仓库,命名必须为 username/username.github.io,创建后的主页将通过 http://username.github.io/ 来访问。

连接 GitHub #

创建 SSH Key #

检查电脑上现有的 SSH key。

    $ cd ~/.ssh

如果已经存在 key 文件,备份旧的文件并删除它。

    $ ls config id_rsa id_rsa.pub  known_hosts
    $ mkdir key_backup
    $ cp id_rsa* key_backup
    $ rm id_rsa*

生成新的 SSH Key

    $ ssh-keygen -t -rsa -C “youremail@youremail.com” # 将引号内内容改为你的电子邮件。
    Generating public/private rsa key pair.
    Enter file in which to save the key (/Users/your_user_directory/.ssh/id_rsa): # 如果你需要将 key 文件放在不同路径请键入,无特殊情况请直接回车。
    Enter passphrase (empty for no passphrase): # 输入加密串。
    Enter same passphrase agian: # 再次输入。

最后可以看到

    Your identification has been saved in
    /Users/your_user_directory/.ssh/id_rsa.
    Your public key has been saved in
    /Users/your_user_directory/.ssh/id_rsa.pub.
    The key fingerprint is:
    The key’s randomart image is:

表示成功设置 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 切换

测试设置是否成功:

    $ ssh -T git@github.com

如果出现:

    The authenticity of host 'github.com (207.97.227.239)' can't be established.
    RSA key fingerprint is …
    Are you sure you want to continue connecting (yes/no)?

此时输入 yes 即可:

    Hi <username>! You've successfully authenticated, but GitHub does not provide shell access.

在 Git 中配置帐号 #

    $ git config --global user.name "你的名字"
    $ git config --global user.email "your_email@youremail.com"

注意:使用的名字不是你在 GitHub 中的昵称。

创建 GitHub Pages #

点击右上角的加号选择 New repository,进入页面填写 Repository name 为 username.github.io,注意不要填写错误。选择 Public,点击 Create repository 即完成创建。

部署 Hexo 到 GitHub Pages #

使用 hexo deploy #

安装拓展:

    $ npm install hexo-deployer-git --save

将配置文件修改为如下形式:

    deploy:
        type: git
        repo: git@github.com:username/username.github.io.git
        branch: master

然后在命令行中执行

    $ hexo d

完成部署。

使用 git #

将之前创建的 repository 克隆到本地并新建用于存放克隆的文件夹 .deploy:

    $ cd <folder> # 博客所在路径
    $ git clone https://github.com/username/username.github.io .deploy/username.github.io

创建 deploy 脚本文件:

    hexo g # 生成新的静态文件
    cp -R public/* .deploy/username.github.io # 将新文件拷贝到 git 目录下
    cd .deploy/username.github.io
    git add .
    git commit -m “update”
    git push origin master # 提交代码到主分支

在以后需要部署时只需执行这段脚本(可以将脚本保存为 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 地址修改为:

		A 185.199.108.153
		A 185.199.109.153
		A 185.199.110.153
		A 185.199.111.153
		CNAME www 185.199.108.153
		CNAME www 185.199.109.153
		CNAME www 185.199.110.153
		CNAME www 185.199.111.153

请进入 *.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 替换为:

	arnold.ns.cloudflare.com
	ruth.ns.cloudflare.com

等候约三到五分钟即可应用本次更改,你可以在 Cloudflare 查看应用情况。

参考文章 #

Webmention this post, or contact me directly.

You can use Hypothes.is to select texts and highlight.

You've copied this page url!

Search it in your Mastodon server, and reply that toot by @fanrongbin.com@fanrongbin.com.