Hexo

介绍

hexo 是一款快速、简洁且高效的博客框架,利用 hexo 可以快速建立自己的博客站点,其主题众多,可定义性极强,开发团队更新活跃,是目前最主流的博客建站框架之一。

特点

  • 超快速度

    Node.js 所带来的超快生成速度,让上百个页面在几秒内瞬间完成渲染。

  • 支持 MarkDown

    Hexo 支持 GitHub Flavored Markdown 的所有功能,甚至可以整合 Octopress 的大多数插件。

  • 一键部署

    只需一条指令即可部署到 GitHub Pages, Heroku 或其他平台。

  • 插件和扩展性

    强大的 API 带来无限的可能,与数种模板引擎(EJS,Pug,Nunjucks)和工具(Babel,PostCSS,Less/Sass)轻易集成。

开始使用

安装 Node

去官网或者中文网下载安装双击安装即可。

安装 hexo 框架

$ npm install hexo-cli -g
$ hexo init blog
$ cd blog
$ npm install
$ hexo server

命令解释

  • 第一行全局安装 hexo 框架
  • 第二行初始化 hexo 项目到 blog 目录
  • 第三行进入 blog 目录
  • 第四行安装依赖
  • 第五行本地启动 hexo 服务,默认端口为 4000,可以利用 -p 参数指定,例如 hexo server -p 1234

注:

如果安装过慢导致失败,可以更换淘宝的 npm 源,命令如下:

 $ npm config set registry https://registry.npm.taobao.org

验证是否设置成功:

npm config get registry

如果返回如下结果则设置成功:

https://registry.npm.taobao.org/

Hexo 安装完成后,具体的使用方法可以在官网查阅 Hexo Docs

这里简单提下双线部署的问题,后面会详细介绍。为什么要双线部署,因为 GitHub 的国内环境并不是太好,访问非常慢,影响体验,因此我们选择 Coding + GitHub 双线部署的方式,国内流量走 Coding 的 Pages,国外就走 GitHub 的 Pages,这样一来,我们的博客无论境内境外都能拥有不错的访问速度和延迟。

双线部署需要配置 blog 的 _config.yml 文件,如下:

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
- type: git
  repository: 
    coding: https://e.coding.net/iamzhl/iamzhl.coding.me.git
  branch: master
- type: git
  repository:
    github: https://github.com/athlonreg/athlonreg.github.io.git
  branch: master

其中仓库地址改为自己的,在部署之前去 GitHub 和 Coding 开一个仓库(GitHub 仓库名为用户名.github.io),将链接修改一下就可以了。以上做好之后,在 blog 目录下执行以下命令将站点部署到仓库:

$ hexo d

部署完成之后,前往 GitHub 仓库和 Coding 仓库打开 Pages 服务,就可以通过域名在线访问了。

GitHub

在建立的仓库点击 Settings 按钮进入仓库设置页面:

然后滑到最下面找到 GitHub Pages 项:

将 Source 改为 master branch,然后 GitHub 就会给一个名为 用户名.github.io 的二级域名作为的你博客网址。

这里由于我之前绑定过自定义域名,因此名称有所不同,请知悉。

Coding

Coding 的 Pages 服务目前需要实名认证才可以用,实名完后需要在 项目设置 -> 功能开关 里面打开 持续集成持续部署 两项功能:

然后在项目的 持续部署 里面就可以设置静态网站(也就是 Pages 服务)了。

点击 立即发布静态网站,然后填写下面的相关信息点击保存

此时,Coding 就会给我们列出当前已经设置好的访问地址,首次发布时,需要手动点击 立即部署 按钮。

选择主题

主题官网 Hexo Themes

目前最常用也是最容易配置,维护最频繁的要数 Next 主题,地址为 Next

安装主题

$ cd blog
$ git clone https://github.com/next-theme/hexo-theme-next themes/next

启用主题

安装完成后,Next 主题就在 blog 目录下的 themes 文件夹内,目录名为 next,修改 blog 目录下的 _config.yml 文件,将 theme 项改为 next。

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

修改完成后,就可以看看效果了。

定制主题

将主题启用完成之后,开始修改主题配置,定制自己的专属 Next。对于 Hexo 主题的配置,基本都是修改主题目录下 _config.yml 文件,每一项配置都有相应的注释解释,Next 官方也出了一篇文章,可以参考Getting Started

自定义域名

在域名的选择上,建议大家注册 .com、.cn、.net 等国际域名或国内域名,因为这种域名对后面的备案、SEO 优化等会带来诸多方便,比如 tlhub.cn 就是我注册的国内域名。如果你是一枚羊毛党,就想白嫖建站,那么可以利用 Freenom 来注册免费的 .ml、.gq、.cf、.tk 域名,需要谷歌邮箱。当然还是推荐去阿里云、腾讯云去注册常见的顶级域名,目前腾讯云有活动,.cn 域名首年十多块,还是挺便宜的,不过备案的话腾讯云要求企业认证,所以可以在阿里云购买,然后万能的 X 宝搜索 XX云服务号 就可以了。

DNS 解析

首选 DNSPod,其免费强大的 DNS 解析可以说是首屈一指的,而且现在活动个人专业版 DNS 解析套餐首年 6 块,当然了,个人用其实免费版也够了。

进入 DNSPod 控制台,依次进入 DNS 解析 -> 我的域名 -> 添加域名,将自己的域名添加进来,添加之后域名就出现在列表中了,但是状态是 DNS 错误,这时我们需要去域名商修改 NS 记录,记录值为提示信息后面的弹出框:

以阿里云为例,在域名管理控制台点击你的域名后面的管理,然后在跳转的页面中点击修改 DNS:

将前面 DNSPod 提示的两条记录修改好确认保存回到 DNSPod,点击提示信息的刷新,状态就变为正常了。

点击域名进入解析列表:

设置两条 CNAME 解析记录

主机记录 记录类型 线路类型 记录值 权重 MX 优先级 TTL (秒)
blog CNAME 默认 ytenc2.coding-pages.com. - - 600
blog CNAME 境外 athlonreg.github.io. - - 600

主机记录 blog 表示二级域名解析,通过 blog.tlhub.cn 访问。记录类型 CNAME 表示解析到某个域名,线路类型为默认的记录值设为你的 Coding Pages 给出的域名,为境外的设置为 GitHub Pages 给出的域名,注意记录值后面有个 .

解析记录设置好,还需要去两个仓库设置一下域名绑定。

GitHub

在 GitHub 仓库的设置页面找到 GitHub Pages 部分,在 Custom domain 下面的输入框输入自己刚才解析的域名,例如 blog.tlhub.cn

GitHub 后台会自动帮你申请 SSL 证书,过小一会刷新一下页面看到如上图所示的 Your site is published at https://xxx.xxx.xxx/ 就代表 GitHub 自定义域名成功了。

Coding

在设置 Coding 的自定义域名之前请先将前面解析的境外记录暂停掉,否则 Coding 申请证书失败,无法正常使用 https,暂停之后,去 Coding 仓库的持续部署 -> 静态网站,点击右侧的设置按钮进入设置页面,在下方的自定义域名部分输入自己的域名,点击绑定,Coding 会自动申请证书,过一小会刷新页面就会发现证书申请成功了,勾选 强制 HTTPS 即可。

绑定完成之后就可以去 DNSPod 将刚才暂停的境外记录重新打开,这样就完成了博客的双线部署。

备案

如果有备案的打算,那么建议将备案放在最前面,因为后面备案的话要求关站,当然了,咱们的二级域名可以忽略,只需要将 www@ 根解析停掉就可以了。

CDN 加速

如果你想用免费的 CDN 的话,那么 CloudFlare 将是不二选择,其提供的一站式的 HTTPS + CDN + DDOS 等服务,而且免费,当然了国内目前速度不太好。

愿意为流量付费的可以考虑下面几个 CDN 加速

  • 百度云加速
  • 又拍云
  • 腾讯云

另外几个托管方案

Netlify

Netlify 是一个主要做 CI/CD 的平台,也可以用来部署静态网站,而且其与 GitHub 拥有无缝的授权链接,结合持续集成的理念,配合自动化的 SSL 证书申请,也是一个非常不错的选择。

fast.io

fast.io 也可以用来托管静态网站,其也可以与 GitHub 授权链接,自动同步,自动SSL。

托管方案对比

说了这么多,到底哪个好?下面是我基于前面介绍的四种方式部署的站点,大家可以打开体验一下,自行对比。

网站名称 部署方式 访问地址
套陆的部落阁 Coding + Pages + DNSPod https://blog.tlhub.cn
套陆的部落阁 Netlify https://www.hackintosh.online/
套陆的部落阁 Fast.io https://tlhub.imfast.io
套陆的部落阁 CloudFlare https://www.cloudops.ml

关于 CloudFlare 的几项配置

这里将我自己之前用的配置截图说明:

DNS

SSL/TLS

速度

  • 优化

    缓存

    网络