Hexo 优化与 Markdown 编辑器推荐

前言

最近和一个朋友聊天的时候谈到了一些 hexo 的优化,并且给我提了一些建议,感受颇多。于是我就开始了新的折腾之旅,下面就是我这几天遇到的疑问和解决办法。

更新

Hexo 更新及其插件更新

Hexo更新

网上有很多方法,但都没有怎么试验过,因为在我最后一次部署 Hexo 的时候它的版本号依然是 3.5.0。(如果下面方法不成功但话,就需要大家自行谷歌了)

  • 小版本更新
    如果你进行的是小版本的更新可以这样

    1
    $ npm update -g hexo

    或者

    1
    $ npm update

    通过hexo -v可以查看版本是否变化。

  • 大版本更新
    通过官网和各种谷歌查到的命令和方法如下:

    1
    2
    $ npm install hexo-cli -g
    $ npm install

    如果没有成功的话,需要重新定义在站点根目录下的package.json

    1
    2
    3
    4
    5
    6
    7
    {
    "name": "hexo-site",
    "version": "0.0.0",
    "private": true,
    "hexo": {
    "version": "3.5.0"
    },

    将版本号改为最新版的版本号,再次执行上面的两个命令。

插件更新

如果你不知道插件最新版本的话,可以通过npm outdated列出需要更新的插件名字和最新版本号。同样也有两种方法,任选其一就可以。

  • 通过更改上述package.json文件中包含的插件版本号,并通过如下命令进行更新插件:

    1
    $ npm update
  • 当然你可以不修改任何文件通过如下命令更新

    1
    $ npm install plugins-name@latest -S

    其中plugins-name改为你想要更新的插件名字。

NexT 主题及其更新

因为 NexT 主题在 GitHub 上迁移到新团队组织者名下,并且进入了6.0.x的新版本,优化不少,还添加很多新的留言模块,这些在下面会谈到。

从 5.1.x 更新

如果你想从5.1.x更新到6.0.x,请看 这里

一般的更新

你可以通过如下命令更新到最新的 master 分支:

1
2
$ cd themes/next
$ git pull

如果你遇到了这样的错误《Commit your changes or stash them before you can merge
这里有根据官方提供的两种方法,其中,第一个 Hexo 方法,现在不太适用于 Hexo 3.0 以上版本。因此我推荐用 NexT 方法,即将所有需要配置的放在hexo/source/_data/next.yml 下,如果在新的更新中出现了任何新的选项,你都只需从next/_config.yml复制出来放到source/_data/next.yml下,来配置你想要选项的。这个便是通过 Hexo 数据文件的方法进行的。具体步骤请看 Hexo 数据文件特性 进行更新。如果你是 Git 大神,想必自会解决吧!这里就不讨论使用 Git 的操作了。

还有问题的话,可以去 NexTGithub 上的新仓库中去提 issues,并仔细阅读README

Hexo 的部署和托管

Hexo 博客的部署和托管有很多方式,最常见的,资料最多的就是通过 GitHub 来搭建 Hexo 博客,后期在部署到自己的 VPS 上,通过 VPS 上的 Web 服务器来访问博客的内容。也有人选择 Netlify 这种更加简单的托管方式,并且自动抓取你上传到 GitHub 的静态文件,通过绑定的域名访问。下面就分别介绍一下两者。

部署到自己的VPS

当你自己有 VPS 的时候,自己博客可以同时托管到 GitHub 和 自己的 VPS 上。网上有很多教程,我列出两篇比较完整和相近的文章供大家参考。

  1. 如何将你的hexo博客部署在vps上?
  2. Deploy Hexo Blog to VPS |部署Hexo博客到VPS

上述两篇文章的 VPS 上的 Web 服务器是 Nginx 。这种比较常见资料很多,功能也很强大,相对的就是配置较为麻烦。有的同学肯定会说看不懂啊什么的,那么就有一种好配置,自动化比较好的 Web 服务器 —— Caddy。当然这个配置简单但资料极少,感兴趣的同学可以去找找看。

VPS 就有很多比较好的商家,比如绑定 GitHub 学生套餐的 Digital Ocean,还有熟知 BandwagonHost ( 搬瓦工 )和 支付更灵活的 Vultr 都很不错。这些我会在下一篇博客中介绍,并介绍一些爱国者工具。

Netlify 更加方便的托管服务商

如果博客的内容不大,并且不想花钱买 VPS,还想一键就有 https 的保护,那么我推荐使用 Netlify ,非常省心。

  1. 使用 GitHub 账号登陆 Netlify。
  2. 登陆后,右上角选择New site from Git
  3. 选择 Github ,然后关联包含网站源代码的仓库
  4. 设置,一路默认就好,如果你有自己的域名可以跟着提示一直走下去,将自己域名解析到 Netlify 服务器上。
  5. 域名设置。参考 Netlify 的详细说明文档
  6. HTTPS 设置。在 Domain management中,找到 HTTPS, 点击 Let’s Encrypt 就可以,变成下图:

    就可以了。从此你的站点加上了小锁,整个世界都美好了。

NexT 评论系统

在最新的6.0.x版本里,NexT 集成了一些新的评论系统,除了老牌的 Disqus 以外,最让我心动是 Valine 和 Gitment 这两个。

Gitment

其中 Gitment 是受 GitHub 的 issues 启发而开发的,还支持 Markdown 语法。一开始很喜欢很看好这个评论系统,但作者已经快一年没有更新过或者优化了。此外有一个缺点,就是不能匿名,必须登录 GitHub 账号,进行评论,并且每一篇文章需要自己稍微手动配置一下。最要命的是它是相当于 issues ,意味着你会不断的收到邮件提醒。所以我放弃了。

Valine

Valine 是我在查资料的时候看见有一个博主写了一篇关于它的文章。看了后,很是心动。虽然配置也有些繁琐但比 Gitment 好多了。正好新版的 NexT 集成了它,于是就用它了。

Valine,和 Gitment 具有相同的一点就是支持 Markdown 语法,此外它支持匿名和用邮箱登录。不同的是 Valine 的管理是通过 leancloud 完成的。意味着,你需要注册一个 leancloud,来完成相关的评论管理工作。这样已经很简单了。相比 Disqus 你需要采用代理来说很不错了。在最新的 NexT 里已经集成了,所以你只需在 leancloud 中建立应用,获取到其 appId, appKey 并在主题配置文件里找到 valine 的字段进行配置就好。同时你有自己的域名的话,为了你的数据安全,需要设置自己的安全域名。当然其他主题也可以进行配置,具体请参考 Valine 官网上的说明

为什么不推荐其他的评论系统?
因为其他的要不不干了,要不需要备案什么的比较麻烦。 (= = 我懒)

SEO优化

NexT 的 SEO 优化,我只推荐谷歌,不要问百度的怎么了。百度太特了,放着标准化的不用,非得用自己的。

Google Webmaster tools

设置 Google站点管理工具 的验证字符串,用于提交 sitemap ( 在 Google Search Console 上有很多验证方式,这里推荐的是 NexT 官网上提供的验证方法。)

  1. 获取 google site verification code

    登录 Google Webmaster Tools, 导航到验证方法,并选择 HTML Tag。将会获取到一段代码:

    1
    <meta name="google-site-verification" content="XXXXXXXXXXXXXXXXXXXXXXX" />

    content 里面的 XXXXXXXXXXXXXXXXXXXXXXX 复制出来。

  2. 设置主题。编辑主题配置文件,新增/修改字段 google_site_verification

    1
    google_site_verification: XXXXXXXXXXXXXXXXXXXXXXX

提交 Sitemap

  1. 进入博客根目录,输入以下命令:

    1
    $ npm install hexo-generator-sitemap --save
  2. 打开站点根目录下的 _config.yml,在最下方添加如下字段

    1
    2
    sitemap:
    path: sitemap.xml

    然后执行如下命令

    1
    $ hexo clean && hexo g -d
  3. 进入 Google Search Console - 抓取 - 站点地图,点击「添加/测试站点地图」,输入你的博客网址。若无报错则站点地图提交成功

提交robots.txt

robots.txt 是一种存放于网站根目录下的 ASCII 编码的文本文件,它的作用是告诉搜索引擎此网站中哪些内容是可以被爬取的,哪些是禁止爬取的。robots.txt 放在博客目录下的 source 文件夹中,博客生成后在站点目录 /public/ 下。
我的文件内容如下:

1
2
3
User-agent: *

Sitemap: https://liyafly.com/sitemap.xml

robots.txt 文件更新至网站后可进入 Google Search Console - 抓取 - robots.txt 测试工具进行测试。

添加 descriptions

对于每一篇文章我们都可以在 Front-matter 上添加 descriptions 来对我们的文章进行描述,方便搜索引擎找到你的博客具体如下:

1
2
3
4
5
6
7
8
---
title: ###
date: ###
categories: ###
tags: ###
keywords: ###
descriptions: ###
---

注:如果descriptions写为description,则为文章的描述,在每篇文章标题下方显示,并且作为网页的 description 元数据。其在首页的显示作用相对于<!-- more -->

修改文章链接

Hexo 默认的文章链接形式为 domain/year/month/day/postname,默认就是一个四级 url,并且可能造成 url 过长,对搜索引擎是十分不友好的,而且打开网站文件夹会很乱,我们可以将文章放入 post 里。编辑站点 _config.yml 文件,修改其中的 permalink 字段改为permalink: /post/:title.html即可。

Markdown 编辑器推荐

Markdown 编辑器有很多很多种,真的要写一篇推荐的话,可能会有很多要介绍的。有时间,我也会专门写一篇文章来介绍。现在我就挑一些比较常用和好用的给大家。

简书

比较喜欢写文章,而不注重技术类型,简书是一个不错的平台。当然在 17 年年末的时候出现了严重歧视程序员的事件,导致很多技术写作人员的转战其他平台。不介意的话可以在该平台写作。具有跨平台性。

文本编辑器 + 插件

这类文本编辑器很多,比较常用的有Atom、Visual Studio Code、Sublime Text 3、Vim 等。 有很多插件,这里就不一一介绍了。这类比较轻便,而且用的多数是大神和单纯的写文章的人群。具有跨平台性,有良好的数学公式插件,自定义性强,方便显示。

laverna

贴图方便。现在在用的新秀,功能基本都有,目前还没有看到付费计划,没有 Android 版本和 iOS 版本,其他三大平台都有。

MWeb

独占 macOS 和 iOS 平台。对比其他的特优秀的写作软件来说,价格感人。功能很多:支持一键发布文章,一键上传图床,具有文档管理功能等等,特别好用的一个软件。但只可惜只在 Apple 的生态圈。此外,作者在官网上分享了很多小窍门。有兴趣的同学可以去看看。


2018.2.8 更新,完善内容并修改错别字。