newcoderlife

Hexo On Github
写本文主要是为了记录我这次在 Github Pages 上部署 Hexo 的经历。开始之前我本地系统是 Deepi...
扫描右侧二维码阅读全文
19
2018/11

Hexo On Github

写本文主要是为了记录我这次在 Github Pages 上部署 Hexo 的经历。

开始之前

我本地系统是 Deepin 15.7(官方声称是基于 Debian,但是我感觉更像 Ubuntu)。搭建 Hexo 服务之前需要安装 Git:

sudo apt update && sudo apt upgrade -y && sudo apt install git -y # 日常滚一滚:)

然后是 NodeJS,这里我们安装 LTS 版:

wget -qO- https://deb.nodesource.com/setup_8.x | sudo -E bash -
sudo apt-get install -y nodejs

为了保持最广泛的支持,我们选择 LTS 版。目前版本号 v8.12.0。

PS:作为一个用谭爷C书入门的“正统”猿,我才不用JS呢 ( ̄^ ̄)

搭建

首先我们安装 Hexo。使用 npm 的安装命令如下:

sudo npm install -g hexo-cli

然后初始化我们的 Blog:

hexo init blog

这将建立名为 blog 的目录,blog 的全部文件都在里面。

运行如下命令,你就能看到 blog 的效果啦!

hexo generate
hexo server

这是我的 blog,因为换了主题所以稍有不同。

blog-screenshot

创建仓库

首先注册并登录 Github。点击右上角的头像,然后选择 “Your repositories”。

github-your-repo

点击 “New”,输入 <your-username>.github.io 然后确认。根据提示在本地克隆你的仓库。这里我建议大家添加 ssh key 来方便我们以后的提交。

添加 SSH 公匙

ssh-keygen -t rsa -C "<your-email>"
cat ~/.ssh/id_rsa.pub

将终端里显示的公匙填入 Github>Settings>SSH and GPG keys 里:

github-ssh

这样就可以使用本机免验证过程提交了。

部署

打开项目目录下的 _config.yml,在 deploy 处按如下格式填写:

deploy:
  type: git
  repo: <your-repo-ssh-address>
  branch: master

然后安装 deploy 插件 hexo-deployer-git

cnpm install hexo-deployer-git --save

最后,运行如下命令就可以在 https://<your-repo-name> 看到你的博客了!

hexo clean
hexo g
hexo d

注册域名并切换域名服务器

作为程序员,怎能没有自己拉风的域名呢?现在域名注册非常简单,.com 域名在 Godaddy 上只需要几十元一年。如果是国内的服务商(比如“万网”)会更便宜。由于之前我在腾讯云注册 .cn 域名遇到了很多限制,所以这里我们选择 Godaddy。从截图可以看到,目前价格还是非常优惠的。

godaddy-price

登录并填写相关信息。然后再主页输入你想买的域名,比如我这里是 mhtt1123.com

godaddy-search

在付款之后,域名很快就到手了。选择 Godaddy 的另一个原因是它支持使用支付宝付款。在购物车里可以删去 Godaddy 自动添加的一些付费服务。这里示例用的是 .net 域名稍微贵一些,我买 mhtt1123.com 的时候一共支付了¥120。

godaddy-shopping-cart-1

这里我们要修改域名服务器来进行下一步操作:

  1. 注册 Cloudflare 账号并登录
  2. 在 dashboard 里找到 Cloudflare 提供的两个域名服务器
  3. 打开 Godaddy 域名管理,更改默认的域名服务器
  4. 选择自定义,填入从 Cloudflare 获取到的两个地址,然后保存
  5. 回到 Cloudflare,recheck一下

稍等一会(大概 20min)就可以看到 Cloudflare 生效了。

cloudflare-active

添加域名解析

为了通过我们新注册的域名访问博客,我们需要添加 DNS 解析记录。这里我们打开 Cloudflare 并切换到 DNS 选项卡,添加如下记录:

cloudflare-dns-record

然后等待 DNS 服务器同步记录即可。此过程一般需要几分钟。这时我们访问刚刚设置好的域名应该会遇到如下情况:

github-pages-404

这是因为我们没有在 Github 上添加相应的 CNAME 信息。为此,我们需要在 <blog-path>/source 目录下添加 CNAME 文件。CNAME 文件里输入刚才注册的域名,我这里是 mhtt1123.com。注意,这里只能输入一个。根据 Github 的描述,我们也只能设置一个 CNAME 记录。多余的会导致 404.

PS:我一直不明白为什么我的 www CNAME记录会成功解析到 @ CNAME 记录对应的 Github Pages 默认域名上...

然后运行如下命令来更新我们的 blog:

hexo clean
hexo g
hexo d

现在访问新注册的域名就能看到我们的博客啦!

配置 CDN 加速

因为某些不存在的原因,我们的域名注册在海外并且非 .cn 结尾,所以无法通过备案(18 年新规基本杜绝了非 .cn 后缀的域名通过备案的可能性)。所以我们不能把服务器放在大陆。因此,为你的网站加上 CDN 就非常必要啦!使用 Cloudflare 解析的域名添加 CDN 非常简单,只需要在 Caching 栏目开启各种选项就可以了。前文我们费力把域名服务器切换到 Cloudflare 就是为了这个。

使用 Cloudflare 作为 CDN 还有一个好处:Cloudflare 的 CDN 服务器有 IPv6 地址,会使你的网站具有 ‘IPv6 Only’ 的特性。同时,Cloudflare 会隐藏你博客的真实 IP,达到预防 DDoS 的效果。

Last modification:May 30th, 2019 at 08:59 pm
点击广告投喂博主 以获得更快的访问速度!

Leave a Comment