Hexo 博客相关

Hexo 知识大全。

Hexo 官方网站:Hexo

Hexo 的安装

  1. 基础安装命令:npm install hexo-cli -g
  2. npm install。这个命令会根据当前目录下的 package.json 文件安装相关的依赖。
  3. 安装 deployer:npm install hexo-deployer-git --save

常用命令

参考:指令 | Hexo

生成静态文件

1
hexo generate

可简写为:

1
hexo g

启动服务器

1
hexo server

可简写为:

1
hexo s

Hexo添加sitemap

安装 hexo-generator-sitemap

1
npm install hexo-generator-sitemap

source 文件夹创建 robots.txt 文件,指定sitemap位置,为swiftype搜索引擎优化

其他优化

安装hexo-asset-image插件

修改主题的配置:

开启fancybox、fastclick、pace. 都需要相关依赖的支持

配置第三方评论功能

来比力(LiveRe)

Disqus

Utterance

A lightweight comments widget built on GitHub issues

首页:https://utteranc.es/

Github项目页:https://github.com/utterance

使用 Netlify 代替 Github pages 进行托管

HTTPS证书

Let’s Encrypt

使用 Let's Encrypt 获取免费的证书必须保证服务器是自己的才可以。

使用CDN

CDN基本原理

CDN学习笔记一(CDN是什么?) - Tinywan - 博客园

CDN 全站加速是什么原理? - V2EX

腾讯云

只有在工信部备过案的域名才能进行CDN加速。可以选择流量计费和流量峰值计费方式。每个用户每个月有10GB的免费流量包。

七牛云

又拍云

网上的一些讨论

个人博客用七牛云还是又拍云? - V2EX

请问有免费加速 https 网站的 CDN 吗? - V2EX

大佬们有没有免备案的 CDN 推荐? - V2EX

拓展阅读

HUGO

The world’s fastest framework for building websites

HUGO

自己有可能可以做的优化

图片展示

现在用的是 fancybox

https://laravel-china.org/articles/21811这个网站用的图片展示功能很赞,看情况自己实现一下。

主题自定义美化

hexo的next主题个性化教程:打造炫酷网站 - 简书

NexT的主题设定与配置 - BLUEHEART - CSDN博客

Next主题自定义CSS样式(字体) - 二次元の技术宅

hexo s 启动本地服务器模式下,修改主题配置文件是实时生效的,可以实时修改看到效果。

重新安装了 node.js 之后

重新安装了 node.js 之后,在博客文件夹执行 hexo new [article name] 时,出现了错误提示,可能是缺少了某些全局模块。

执行了 npm audit fix 解决了。

文章

Markdown 中的尖括号问题

Markdown 支持 HTML 标签,所以一对尖括号括起来的内容会被当作 HTML 的标签来处理。如果要想表示一对尖括号,需要使用转义的 HTML,即使用 &lt; 表示 <,使用 &gt; 表示 >

修改 FrontMatter 的分类

Hexo 的分类默认是多级分类。分类 - Hexo 官方文档

1
2
3
categories:
- 技术
- Java

上面这种会被分类到 [技术, Java] 分类中,Java 分类作为技术分类的一个子分类存在。

如果希望一篇文章同时分到两个顶级分类中,可以这么做:

1
2
3
categories:
- [技术]
- [Java]

使用 VS Code 的正则表达式替换功能

VS Code 支持使用正则表达式进行查找替换。

VS Code 替换时引用分组不是 \1 这种形式,而是 $1 这种形式。如图:

VSCode-regex-substitution

还可以使用VS Code 打开一个文件夹,然后批量查找替换。

第三方插件

有一些插件可以直接根据目录自动生成 categories,比如:

hexo-directory-category(之前使用一直报错)

hexo-auto-category(可能会覆盖所有frontmatter,谨慎使用)

关于 Next 主题

5.1.4版本的官方文档(比6.6.0版本的详细)

Next主题官方网站

Github上6.0.0版本的主页

Next.Pisces主题的网站范本1

Next.Pisces主题的网站范本2

文章摘要

手动指定文章摘要截取部分:在摘要结束的地方,手动加上 <!-- more -->

Next主题使用 Latax 数学公式

按照要求开启之后,在需要使用数学公式的文章的文件头中加上 mathjax: true

相关博客文章:

Hexo使用next主题也可以用latex啦

如何处理Hexo和MathJax的兼容问题

配置搜索

Algolia 和 Switfy 对比

Algolia 需要你手动上传索引,虽然麻烦,但是索引更新和文章更新可以做到同步。

Swiftype 不需要手动上传索引,Swiftype的服务器自动抓取你网站的新内容,但是他们的服务器可能不会实时检测网站变化,索引更新可能会有延迟。

Algolia

官方配置教程关于Swiftype的部分

重点看next主题配置文件中给的两个文章:

See:https://github.com/theme-next/hexo-theme-next/blob/master/docs/ALGOLIA-SEARCH.md

Dependencies:https://github.com/theme-next/theme-next-algolia-instant-search

注意,上边的依赖,clone到next主题文件夹下之后,把隐藏的文件夹 .git 删除了,不然 git 同步的时候会导致错误。

另外,algolia的配置信息,既需要在站点的配置文件中加上,还需要在主题的配置文件中加上。两个地方需要的信息是不一样的。

另外,因为对免费用户有限制,所以之索引了标题,没有索引内容。
参考:https://github.com/theme-next/hexo-theme-next/blob/master/docs/ALGOLIA-SEARCH.md#known-issues

上传索引

1
2
hexo clean
hexo algolia

每次更新索引,需要重新执行这个命令。

配置Swiftype搜索引擎

官方配置教程关于Swiftype的部分

只有免费试用,不能长期使用。