Hexo+Github+自定义域名+CDN搭建博客系统（附namesilo优惠码）

hexo , 评论

Why#

之前分别在csdn和cnblogs写了一些文章，csdn的广告越来越过分实在忍不了。然而cnblogs的markdown编辑器又太弱，一直也没什么更新，所以就再造一个轮子。

What#

  • Hexo是个啥，这一套是怎么工作的？

    • Hexo是一个基于Nodejs的渲染引擎，可以集成多个主题和插件，实现了内容和样式分离，可以根据喜好快速换装。
    • 用户可以撰写一个markdown格式的博客文件，使用Hexo渲染为html格式
    • 然后将html部署到github（或者自有服务器/vps等等）
    • 使用github的pages服务/cloudflare pages/serverless page/自有服务器 即可访问我们的博客
    • 可选：接着可以用我们的自有域名解析到github的pages服务即可（或者我们服务器的IP）

  • 搭建好了怎么写博客？

    • 本地写markdown格式，安利下typora，巨好用。
    • 写完执行一个命令会自动渲染成html，再执行一个命令会自动部署到github，相当简单。

How#

把大象关进冰箱需要三步，搭建基于Hexo的博客也需要三步：

  • 安装Hexo，跑起来
  • 搞一个Gayhub的repo，弄一个page.io
  • 搞一个域名，DNS解析即可（如果需要加速，在CDN配置一下）

Details#

安装Hexo#

  • 首选需要安装nodejs，安装cnpm

    • 选择操作系统的发行版:

      • https://nodejs.org/en/download/

      • 我是linux，下载解压，配置环境变量，source一把即可。

      • windows用户更简单，下载后各种next即可。

      • mac和linux类似

    • npm加速，安装cnpm：

    • npm install -g cnpm --registry=https://registry.npm.taobao.org

  • 安装Hexo：cnpm install -g hexo 会自动从gayhub下载hexo并安装

  • 然后就进入目录去配置_conifg.yml,包括博客title、作者、语言等等

    image-20200520132503890

  • 运行 hexo s，然后去http://localhost:4000就能看到了。默认样式会有点丑，别着急看下一节。

选择主题#

  • 先戳这里，官方有巨多主题： https://hexo.io/themes/
  • 也可以去gayhub自己搜hexo-theme即可，也有n多
  • 我一个老年大叔，选择了一个简单一点的主题hexo-theme-pure，这个https://github.com/cofess/hexo-theme-pure 主题的中文说明：https://github.com/cofess/hexo-theme-pure/blob/master/README.cn.md
  • 按照主题说明，clone到hexo的theme文件夹内，然后修改一下hexo的_config.yml文件中的主题theme: pure
  • 按照主题说明，安装主题渲染所需的nodejs插件。无非就是几个cnpm install xxxx即可
  • 按照主题说明，配置主题的配置文件，一般在主题文件夹./hexo/theme/pure下的_config.yml（无非是颜色、元素是否显示、布局之类的），很简单看一眼就知道。
  • 运行渲染hexo clean && hexo g && hexo s，分别是清理、生成、运行，然后再去http://localhost:4000看一眼，主题就生效了。

NexT主题#

关于评论功能及去广告#

pure主题启用livere（来必力）的评论系统后，来必力会在留言板下方插入流氓广告

也就是主题配置文件启用来必力后

1
2
comment:
  type: livere

会出现来必力的广告，想过在然会的内容种修改，不发出广告的http请求，不过太费劲。

最简单的办法就是在css中隐藏这个广告的元素：

修改 themes\pure\layout\_script\_comment\livere.ejs文件，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<% if (typeof(script) !== 'undefined' && script) { %>
<!-- 以下三行是新增的 -->
<style>
        #taboola-livere { display: none;}
</style>
<script defer type="text/javascript">
  (function(d, s) {
    var j, e = d.getElementsByTagName(s)[0];

    if (typeof LivereTower === 'function') { return; }

    j = d.createElement(s);
    j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
    j.async = true;

    e.parentNode.insertBefore(j, e);
  })(document, 'script');
</script>
<% } %>

gayhub托管#

  • 我们hexo g渲染生成的静态文件在public文件夹内，需要把它丢到一个web容器内运行就可以了。gayhub提供githubpages服务可以托管静态文件，并可以http浏览。
  • 所以去github新建一个repo，repo名字为xxxx.github.io,这个xxxx必须和你的github用户名一致!
  • 然后回到hexo中配置deploy模式为git，配置仓库地址为上面的repo地址。更多参见https://hexo.io/zh-cn/docs/github-pages
  • 配置完毕hexo d输入github账号密码即可push到服务器（如果本机没有保存，或者服务器配置秘钥的话，具体github配置公钥上网查找）
  • 然后可以访问我们的博客了https://xxxx.github.io`

自定义域名[可选]#

  • 上面虽然博客可以访问了，但是github.io看起来有点low，而且国内访问速度也很慢。
  • 所以，我建议撸一个域名，挂博客，搞微信开发，内网穿透，出国留学等等用处多多。。。而且最好是境外服务商域名，境内的域名要备案、年检，非常非常麻烦。
  • 目前最便宜的是戳这个：namesilo官网，优势：
    • 他家的.com域名只要7.99刀，.xyy和.online域名只要0.99刀，简直白送！关键是续费便宜没有坑，别家有首年很便宜，后面续费巨贵的。
    • 永久免费的whois隐私保护，其他家这个功能还要收费。
    • 支持支付宝收款，不用别家还要信用卡或者PayPal
    • 所以戳链接进去官网： www.namesilo.com/
  • 进入官网后，右上角注册sign up，输入用户名，邮箱，密码即可。
  • 然后register，选择域名进行注册，第一次会让你填写信息（以免域名丢失找回，或者服务商后续通知一些域名相关事项）
  • image-20200520140905968
  • 输入你想注册的域名，搜索，看看有没有被注册过：

image-20200520142246492

  • 假如你选择的没有被占用。点击下面的add加入购物车，然后checkout结算,我这里用.com的8.99刀域名举例（你也可以用下面0.99刀的，简直便宜到几乎白送！）

    imagereg3

  • 结算页面，按图上选择即可，然后下面的打折码输入**cutoff** ，点击submit即可享受打折优惠！

    image-20200520143429325

  • 下一步就是支付宝扫码付款即可。

  • 付完款去account个人中心，点击domain manager域名管理，会出来你的域名列表。点击设置dns

    reg5

  • 设置DNS,点击CNAME，会出来一条解析，可以根据喜好设置为www的主域名，还是blog.xxx.com的二级域名。目标设置我们上面个人的xxxxxx.github.io，提交即可。

    img

搞定你以为大功告成了？还需要在github的repo里面设置这个域名，否则github会阻止域名解析，导致404。看下一节

  • github配置域名：

    • 在那个custom domain填写你的域名，save一下

    image-20200520145606979

    • 然后在你本地的hexo/source目录下创建个CNAME文件夹，写上你的域名

  • 最后，重新hexo g & hexo d

此时即可用我们的域名访问。

Others#

生成目录#

为博客生成toc目录

  • 使用插件cnpm install hexo-toc --save
  • 然后配置一下最大深度等
1
2
3
4
5
6
7
8
9
toc:
  maxdepth: 3
  class: toc
  slugify: transliteration
  decodeEntities: false
  anchor:
    position: after
    symbol: '#'
    style: header-anchor

评论管理#

关于博客的评论，一般来说是需要一个数据库的。但是我们是纯静态服务，所以有人搞了类似gitalk、gitment 这样的东西。只用前台引用js即可，一般都不用我们管，主题已经集成好了。只用按照说明进行配置几个参数即可。

推荐使用更强大的Valine,这是一个无后端的评论框工具，其依赖于 Leancloud 开发,见本文最后.

或者使用第三方服务livere也行

关于latex公式显示#

  • latex会显示失败，按照pure主题的解决方案：

数学公式#

Hexo默认使用"hexo-renderer-marked"引擎渲染网页，该引擎会把一些特殊的markdown符号转换为相应的html标签

解决方案#

解决方案有很多，可以网上搜下，为了节省大家的时间，这里只提供亲身测试过的方法。

更换Hexo的markdown渲染引擎，hexo-renderer-markdown-it-plus引擎替换默认的渲染引擎hexo-renderer-marked即可。

在blog根目录给hexo安装hexo-renderer-markdown-it-plus插件#

1
2
3
cnpm un hexo-renderer-marked --save # 卸载
cnpm i hexo-renderer-markdown-it-plus --save # 安装新的渲染框架
cnpm i markdown-it-katex --save  # 安装katex渲染latex

配置#

安装插件后，如果未正常渲染LaTeX数学公式，在博客根目录配置文件_config.yml中添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
markdown_it_plus:
  highlight: true
  html: true
  xhtmlOut: true
  breaks: true
  langPrefix:
  linkify: true
  typographer:
  quotes: “”‘’
  plugins:
    - plugin:
        name: markdown-it-katex
        enable: true
    - plugin:
        name: markdown-it-mark
        enable: false

文章启用mathjax（不用设置true也可以）#

1
2
title: Hello World
mathjax: true

按照上面操作了还是不行，元素错位。看了下面这个解决了：

还错位或者显示元素不准的话，需要引入一个katex的css#

1
<link href="https://cdn.bootcss.com/KaTeX/0.7.1/katex.min.css" rel="stylesheet">

https://blog.csdn.net/u014792304/article/details/78687859

katex和latex大部分命令是相通的，不同的略微差别见下面：

https://khan.github.io/KaTeX/function-support.html

CDN加速[可选]#

  • 想继续折腾访问速度的往下看：
  • 首先，不推荐国内的CDN供应商和域名解析商，因为他们动不动就有合规要求。会折腾客户去备案（不是所有的）
  • 然后，推荐cloudflare，也很简单，注册一个账号，在namesilo里面把CDN服务迁移到cloudflare即可。上网搜索巨多资料。

加速及评论管理#

leancloud#

  • Complete serverless backend,提供多种DB/多种server/IM支持

https://www.leancloud.app/

https://console.leancloud.app/

netlify#

  • 一个云函数引擎,静态资源部署的服务
  • 可以从github监控我们仓库,有变化就自动拉过来部署
  • https://app.netlify.com/

waline#

FAQ#

  • 为啥配置好了域名无法访问？

    等待域名解析，尝试DNS那里的TTL设置小一点，刷新本地DNS缓存。

  • 为啥速度不一般？

    因为是国外DNS，可能第一次访问有点慢。有精力的尝试迁移到cloudflare，还有CDN加速，https，爽歪歪。戳这里：https://www.cloudflare.com/

猫哥Risk Control Engineer

一个金融风控软件工程师。