Hexo 搭建 Blog 精简笔记

2023-08-14 21:30:40

概述

本文总结一下 Hexo 搭建博客的主要流程，能够在日后快速恢复博客环境。

Hexo 的官方文档写的已经很全面了，本文仅将一些注意点列出。

安装 Hexo 的文档参考：

官宣-Hexo 文档

前提

安装 Hexo 之前，你的电脑上需要有

Node.js
Git

如果是 Mac 用户，您在编译时可能会遇到问题，请先到 App Store 安装 Xcode，Xcode 完成后，启动并进入 Preferences -> Download -> Command Line Tools -> Install 安装命令行工具

安装 Hexo

全局安装 hexo-cli：

npm install -g hexo-cli

如果遇到权限的问题，可以使用如下命令：

sudo chown -R $(whoami) /usr/local/lib/node_modules/

设置 /usr/local/lib/node_modules/ 文件夹属于当前用户。

此外，如果你要使用 root 权限安装的话，可以使用 sudo -s 切为 root 用户进行相关操作。这么做的话，会将一些文件夹的默认属组设置为 root 了，不推荐。

npm 权限问题：

建站

hexo init MyBlog

cd MyBlog

npm install

执行完毕之后，博客其实已经 OK 了：

hexo g

hexo s

执行上面命令即可本地预览博客内容了。

部署

官宣-站点配置文件内容中介绍了很多字段的用途

Hexo 提供快速一键部署，将博客部署到 GIthub Pages。

安装 hexo-deployer-git：

$ cd MyBlog

$ npm install hexo-deployer-git --save

修改站点配置文件中的配置：

# npm install hexo-deployer-git --save

deploy:

- type: git

  repo: git@github.com:Michael728/michael728.github.io.git

  branch: master

执行部署：

hexo d

常用命令

hexo 常用指令

hexo version # 显示hexo版本

hexo new <title> # 创建新文章

hexo g/generate # 生成静态文件

hexo clean # 清除缓存文件和已生成的静态文件（public）

hexo server # 启动本地服务器

hexo d/deploy # 部署网站

hexo list <type> # 列出网站资料

npm 常用指令

npm install 模块名 -g --save # g全局安装 save安装包信息将加入到dependencies（生产阶段的依赖）

npm install gulp@3.9.1 # 指定版本

npm install # 该命令可以根据dependencies配置安装所有的依赖包

npm update [-g] 模块名

npm outdated 模块名 # 检查模块是否过时

npm ls -g # 查看全局安装的模块

npm uninstall 模块名

npm info hexo-cli # 查看hexo-cli模块的信息

Hexo 写作技巧

Sanarous-hexo博客Next主题进阶写作技巧

Note

语法：

{% note [class] [no-icon] %}

这里写你需要写的内容

{% endnote %}

// 注意上面的class和no-icon属性是可以选择的

[class]   : default | primary | success | info | warning | danger.

[no-icon] : Disable icon in note.

示例：

{% note success no-icon %}

success形式的类别

{% endnote %}

效果：

{% note success no-icon %}

success形式的类别

{% endnote %}

这里使用 no-icon 表示不显示图标，可选，默认会带有图标。

使用主题自带 FontAwesome 图标

源码：

- <i class="fa fa-pencil"></i> 铅笔

- <i class="fa fa-cloud-upload"></i> 上传

- <i class="fa fa-download"></i> 下载

效果：

铅笔
上传
下载

文本居中

源码：

{% cq %}

人生乃是一面镜子，

从镜子里认识自己，

我要称之为头等大事，

也只是我们追求的目的！

{% endcq %}

效果：

{% cq %}

人生乃是一面镜子，

从镜子里认识自己，

我要称之为头等大事，

也只是我们追求的目的！

{% endcq %}

主题自带 label 标签

首先在主题 _config.xml 配置：

# Label tag.

label: true

源码：

{% label primary@primary内容 %}

效果：

{% label primary@primary内容 %}

主题自带 tabs 标签

主题配置文件：

# Tabs tag

tabs:

  enable: true

  transition:

    tabs: true

    labels: true

  border_radius: 0

源码示例：

{% tabs 选项卡, 2 %}

<!-- tab -->

这是选项卡 1 内容

<!-- endtab -->

<!-- tab -->

这是选项卡 2 内容

<!-- endtab -->

<!-- tab -->

这是选项卡 3** 哇，你找到我了！φ(≧ω≦*)♪～

<!-- endtab -->

{% endtabs %}

效果：

{% tabs 选项卡, 2 %}

这是选项卡 1 内容

这是选项卡 2 内容

这是选项卡 3** 哇，你找到我了！φ(≧ω≦*)♪～

{% endtabs %}

主题自带样式按钮

源码：

{% btn https://www.baidu.com, 点击下载百度, download fa-lg fa-fw %}

效果：

{% btn https://www.baidu.com, 点击下载百度, download fa-lg fa-fw %}

Hexo 其他知识

图床

由于一直使用的是「微博图床」，渣浪微博和简书开启了图片防盗链，请大家在博客中加入以下标签来绕过：

<meta name="referrer" content="never" />

Next 主题只需要在 themes/next/layout/_partials/head/head.swig 中添加上面一行内容即可。

Next 主题

theme-next/hexo-theme-next

安装 Next

$ cd MyBlog

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

Next 扩展都安装在themes/next/source/lib文件夹下

cd MyBlog

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

启动 Next 主题

编辑站点配置文件 _config.yml：

theme: next # 启用next主题

主题设置

next-开始使用

设置语言

站点配置文件：

language: zh-CN # 最新版中，不再使用zh-Hans

设置菜单

编辑主题配置文件：

menu:

  home: / || home

  #about: /about/ || user

  #tags: /tags/ || tags

  #categories: /categories/ || th

  archives: /archives/ || archive

  #schedule: /schedule/ || calendar

  #sitemap: /sitemap.xml || sitemap

  #commonweal: /404/ || heartbeat

菜单内容的设置格式是：item name: link || icon。其中 `item name 是一个名称，这个名称并不直接显示在页面上，她将用于匹配图标以及翻译。

设置菜单项的显示文本。在第一步中设置的菜单的名称并不直接用于界面上的展示。Hexo 在生成的时候将使用这个名称查找对应的语言翻译，并提取显示文本。这些翻译文本放置在 NexT 主题目录下的 languages/{language}.yml （{language} 为你所使用的语言）。

icon 使用的是 fontawesome 图标，严格区分大小写。

设置头像

将准备好的头像放置在主题目录下的 source/images/ 中。

avatar:

  # In theme directory (source/images): /images/avatar.gif

  # In site directory (source/uploads): /uploads/avatar.gif

  # You can also use other linking images.

  url: /images/logo.jpg

百度统计

登录百度统计，定位到站点的代码获取页面
复制 hm.js? 后面那串统计脚本 id，如：
编辑主题配置文件，修改字段 baidu_analytics 字段，值设置成你的百度统计脚本 id

阅读次数

使用 LeanCloud

参考这个为NexT主题添加文章阅读量统计功能

leancloud_visitors:

  enable: true # 启用了 valine，所以这里可以置为 false

  app_id: xxx

  app_key: xxx

设置 RSS

主题配置文件中，rss 字段设为空，启用，设为 false 则不启用。启用的话，需要安装插键：

npm install hexo-generator-feed --save

添加标签页面

新建页面 hexo new page tags
设置页面类型，编辑刚新建的页面，将页面的类型设置为 tags ，主题将自动为这个页面显示标签云

title: 标签

date: 2014-12-22 12:39:04

type: "tags"

---

如果有集成评论服务，页面也会带有评论。若需要关闭的话，请添加字段 comments 并将值设置为 false，如：

title: 标签

date: 2014-12-22 12:39:04

type: "tags"

comments: false

---

修改菜单，在菜单中添加链接。编辑主题配置文件，添加 tags 到 menu 中

标签示例：

title: 标签测试文章

tags:

  - Testing

  - Another Tag

请参阅 Hexo 的分类与标签文档，了解如何为文章添加标签或者分类

补充：

categories:

- Diary

tags:

- PS3

- Games

分类方法的分歧

如果您有过使用WordPress的经验，就很容易误解Hexo的分类方式。WordPress支持对一篇文章设置多个分类，而且这些分类可以是同级的，也可以是父子分类。但是Hexo不支持指定多个同级分类。下面的指定方法：

categories:

- Diary

- Life

会使分类Life成为Diary的子分类，而不是并列分类。因此，有必要为您的文章选择尽可能准确的分类。

并列分类，了解一下：

categories:

- [Linux]

- [Tools]

并列+子分类，再了解一下：

categories:

- [Linux, Hexo]

- [Tools, PHP]

同样的方法，添加分类页面：

$ hexo new page categories

设置字体

设置字体可参考:官宣-字体

设置代码高亮主题

代码高亮预览

# Code Highlight theme

# Available value: normal | night | night eighties | night blue | night bright

# https://github.com/chriskempson/tomorrow-theme

highlight_theme: night eighties

侧边栏社交链接