文章目录

Hexo 的安装
- 安装 Git
- 安装 Node.js
- 升级 Node.js 版本
- 安装 Hexo
- 升级 Hexo 版本
- 初始化 Hexo
- 启动 Hexo 服务
Hexo 部署到 GitHub
- 在 GitHub 官网上创建个人仓库
- Git 初始化设置
- 查看设置是否正确
- 生成 SSH 公钥添加到 GitHub
- Hexo 部署到 GitHub Pages
Hexo 部署到 Gitee
- 在 Gitee 官网上创建个人仓库
- 初始化 Git 设置
- 查看设置是否正确
- 生成 SSH 公钥添加到 Gitee
- Hexo 部署到 Gitee Pages
Matery 主题安装及优化
Hexo 插件的安装
- 代码高亮
- 搜索
- 中文链接转拼音
- 文章生成永久链接
- 外链跳转
- 文章字数统计
- 添加 Emoji 表情支持
- 添加 RSS 订阅支持
- 图片懒加载
- 折叠功能
- 代码压缩
Hexo 添加 Valine 评论系统
- Valine 简介
- Valine 的配置
- 增加点击跳转评论按钮
实现 Valine 评论系统通知功能
- Valine-Admin 简介
- Valine-Admin 的配置

Hexo 的安装

Hexo 是一款基于 Node.js 的静态博客框架，依赖少易于安装使用，可以方便的生成静态网页托管在 GitHub 、Gitee 上，是搭建博客的首选框架。

安装 Git

Git 是目前世界上最先进的分布式版本控制系统，可以有效、高速的处理从很小到非常大的项目版本管理。

apt-get install git -y

安装 Node.js

Hexo 是基于 Node.js 编写的，所以需要安装一下 Node.js 和 npm 工具，Node.js 默认包含 npm 。

apt-get install nodejs npm -y

安装完后，输入如下命令，检查是否安装成功。

node -v

npm -v

升级 npm 到最新版本，更换 npm 源为淘宝源。

npm install -g npm

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

升级 Node.js 版本

清除 npm 缓存。

npm cache clean -f

安装 Node.js 版本管理工具 n 。

npm install n -g

查看 Node.js 所有版本。

npm view node versions

升级 Node.js 版本。

# 升级到指定的版本：n 版本号
n 16.0.0# 升级到最新的稳定版本
n stable# 升级到最新版本，不推荐
n latest

用 node -v 查看 Node.js 版本，如果版本号改变为想要的则升级成功。如果版本号没变，可以重启机器或者尝试以下方法：

查看安装 Node.js 的位置，输入如下命令后显示 Node.js 的安装路径。

which node

/usr/local/n/versions/node/16.0.0 // 具体的安装路径

配置环境变量，进入该位置。

cd /usr/local/n/versions/node

编辑 /etc/profile ，将 Node.js 安装的环境变量添加到文件末尾。

export NODE_HOME=/usr/local/n/versions/node/16.0.0 // 16.0.0 是Node.js 的版本号
export PATH=$NODE_HOME/bin:$PATH

保存文件，再刷新 /etc/profile 使配置生效，输入如下命令。

source /etc/profile

安装 Hexo

前面 Git 和 Node.js 安装好后，就可以正式进行安装 Hexo 。

安装 Hexo 。

npm install -g hexo-cli

查看版本信息。

hexo -v

升级 Hexo 版本

安装 npm-check 和 npm-upgrade ，-g 是全局安装，输入如下命令。

npm install -g npm-check npm-upgrade --save

检查本地插件版本。

npm-check

交互式升级，根据提示选择要升级的工具。

npm-upgrade

按照提示选择后会更新 package.json 文件，输入如下命令进行升级。

npm install

正确运行后 Hexo 及插件已经升级成功，执行 hexo version 查看版本。

初始化 Hexo

hexo init filename（文件名随意定义）cd filename //进入这个文件夹npm install

hexo init

说明：自动在文件夹（filename）中创建项目所需的文件。

cd filename

说明：将操作位置转移到将要存放项目的文件夹目录。

npm install

说明：安装依赖包。

上述步骤操作完成后，指定 Hexo 根目录下有如下文件：

_config.yml ：站点的配置文件，需要备份。
themes ：主题文件夹，需要备份。
source ：资源文件夹。用来存放图片、Markdown 文档（文章、草稿）、各种页面（分类、关于页面等），需要备份。
scaffolds ：文章的模板，需要备份。
package.json ：安装包的名称，需要备份。
.gitignore ：限定在 push 时哪些文件可以忽略，需要备份 .git ：主题和站点都有，标志这是一个 git 项目，不需要备份。
node_modules ：是安装包的目录，在执行 npm install 的时候会重新生成，不需要备份。
public ：hexo g 生成的静态网页，将 source 文件夹里的 MarkDown 文档，转换成 index.html，不需要备份。
deploy_git ：将 public 文件夹的内容提交到 GitHub 后生成，内容与 public 文件夹基本一致，不需要备份。
db.json ：文件，不需要备份。

启动 Hexo 服务

正确安装完成后便按照下面操作启动 Hexo 博客。

hexo generate # 生成静态页面至 public 目录

hexo server # 开启预览访问端口（默认端口 4000 ，ctrl + c 关闭 server ）

打开浏览器输入对应的网址 http://localhost:4000 ，就可以看到生成的博客。

Hexo 部署到 GitHub

在 GitHub 官网上创建个人仓库

创建一个和账号名相同的仓库（即 http://xxx.github.io ，其中 xxx 是 github 的账号名），点击 Greate Repository 创建。

Git 初始化设置

git config --global user.name "你的 github 账号名"

git config --global user.email "你的 github 邮箱号"

查看设置是否正确

git config user.name

git config user.email

生成 SSH 公钥添加到 GitHub

创建 SSH Key ，默认回车，输入如下命令：

ssh-keygen -t rsa -C "你的邮箱号"

查看 SSH key ，输入如下命令：

cat ~/.ssh/id_rsa.pub

复制 id_rsa.pub 里面的全部内容，在 GitHub 的 Setting 中，找到 SSH and GPG keys 的设置选项，点击 New SSH key，粘贴 id_rsa.pub 里面的全部内容。
查看是否连接成功，输入如下命令：

ssh -T git@github.com

打开 Hexo 根目录下的配置文件 _config.yml ，修改添加如下内容：

deploy: type: gitrepo:github: git@github.com:xxx/xxx.github.io.git # `xxx` 是 github 配置的仓库名branch: master

Hexo 部署到 GitHub Pages

在部署到 GitHub 之前，首先安装 hexo-deployer-git 的 Hexo 插件。

npm install hexo-deployer-git --save

部署到 GitHub 。

hexo g -d

上述操作完成后，打开浏览器访问设置的网络地址 https://xxx.github.io/ （xxx 是 github 账号昵称），就可以看见和本地网络地址 http://localhost:4000 一样的 Hexo 博客页面。

Hexo 部署到 Gitee

在 Gitee 官网上创建个人仓库

打开码云官网，注册登陆，创建项目，点击右上角加号，新建仓库。

开启 Gitee Pages 服务。

点击启动后出现的蓝色链接就是生成的博客网址地址，每次部署都要进入 Gitee Pages 服务页面点击启动按钮才能更新更改。

初始化 Git 设置

git config --global user.name "你的 gitee 账号名"

git config --global user.email "你的 gitee 邮箱号"

查看设置是否正确

git config user.name

git config user.email

生成 SSH 公钥添加到 Gitee

创建 SSH key ，默认回车，输入如下命令：

ssh-keygen -t rsa -C "你的邮箱号"

查看 SSH key ，输入如下命令：

cat ~/.ssh/id_rsa.pub

复制 id_rsa.pub 里面的全部内容，在 gitee 的安全设置中，找到 SSH 公钥 的设置选项，添加 SSH key ，粘贴 id_rsa.pub 里面的全部内容。
查看是否连接成功，输入如下命令：

ssh -T git@gitee.com

打开 Hexo 根目录下的 _config.yml 配置文件，修改添加如下内容：

# 账号名和仓库名不一致时添加如下配置形式，否则不用添加
url: Gitee Pages 服务网站地址： https://空间名.gitee.io/仓库名root: /仓库名/

deploy: type: git repo: gitee: git@gitee.com:xxx/xxx.git # `xxx` 是 gitee 的账号名branch: master

GitHub 和 Gitee 双部署的 Hexo 根目录下的配置文件 _config.yml 配置形式：

deploy:type: gitrepo:github: git@github.com/cqupthao/cqupthao.github.io.git  # cqupthao 为账号名gitee: git@gitee.com/cqupthao/cqupthao.git  # cqupthao 为账号名branch: master

Hexo 部署到 Gitee Pages

在部署到 Gitee 之前，首先安装 hexo-deployer-git 的 Hexo 插件。

npm install hexo-deployer-git --save

部署到 Gitee 。

hexo g -d

上述操作完成后，打开浏览器访问设置的网络地址 https://xxx.gitee.io/ （xxx 是 gitee 账户号），就可以看见和本地网址地址 http://localhost:4000 一样的 Hexo 博客页面。

参考官方文档

Matery 主题安装及优化

Matery 主题安装参考 Matery 官网教程。
Matery 优化参考基于 Hexo 的 Matery 主题搭建博客并深度优化一站式完全教程。

Hexo 插件的安装

代码高亮

从 Hexo5.0 版本开始自带了 prismjs 代码语法高亮的支持，如果博客安装过 hexo-prism-plugin 的插件，须执行 npm uninstall hexo-prism-plugin 来卸载掉它，否则生成的代码中会有 { 和 } 的转义字符。

修改 Hexo 根目录下 _config.yml 文件中 highlight.enable 的值为 false ，并将 prismjs.enable 的值设置为 true ，主要配置如下：

highlight:enable: falseline_number: trueauto_detect: falsetab_replace: ''wrap: truehljs: false
prismjs:enable: truepreprocess: trueline_number: truetab_replace: ''

主题中默认的 prismjs 主题是 Tomorrow Night ，如果想定制自己的主题，可前往 prismjs 下载页面定制下载自己喜欢的主题 css 文件，然后将此 css 主题文件取名为 prism.css，替换掉 Matery 主题文件夹中的 source/libs/prism/prism.css 文件。

搜索

使用 hexo-generator-search 的 Hexo 插件来实现内容搜索，安装命令如下：

npm install hexo-generator-search --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

search:path: search.xmlfield: post

中文链接转拼音

使用 hexo-permalink-pinyin 的 Hexo 插件使在生成文章时生成中文拼音的永久链接，安装命令如下：

npm i hexo-permalink-pinyin --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

permalink_pinyin:enable: trueseparator: '-' # default: '-'

执行 hexo clean && hexo g 重新生成博客文件，就可以生成拼音链接。

文章生成永久链接

使用 hexo-abbrlink 的 Hexo 插件来实现文章生成永久链接，安装命令如下：

npm install hexo-abbrlink --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

abbrlink: alg: crc16 #算法：rep: hex #输出进制：十进制和十六进制，默认为10进制。丨dec为十进制，hex为十六进制

将 _config.yml 文件中的 permalink 的值修改为如下内容：

permalink: posts/:abbrlink.html  # 此处可以自己设置，也可以直接使用 :/abbrlink

执行 hexo clean && hexo g 重新生成博客文件，就可以生成永久链接。生成完后，原 md 文件的 Front-matter 内会增加 abbrlink 字段，值为生成的 ID 。

外链跳转

使用 hexo-external-link 的 Hexo 插件来实现外链跳转，安装命令如下：

npm install hexo-external-link --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

hexo_external_link:enable: trueenable_base64_encode: trueurl_param_name: 'u'html_file_name: 'go.html'target_blank: truelink_rel: 'external nofollow noopener noreferrer'domain: 'your_domain' # 如果开启了防盗链，填写你的域名safety_chain: true

执行 hexo clean && hexo g 重新生成博客文件，就可以实现外链跳转。

文章字数统计

使用 hexo-wordcount 的 Hexo 插件来实现在文章中统计显示文章字数、阅读时长信息，安装命令如下：

npm i hexo-wordcount --save

在 Matery 主题下的 _config.yml 文件中，将各个文章字数相关的配置激活：

postInfo:date: trueupdate: falsewordCount: false # 设置文章字数统计为 truetotalCount: false # 设置站点文章总字数统计为 true min2read: false # 阅读时长readCount: false # 阅读次数

执行 hexo clean && hexo g 重新生成博客文件，就可以实现文章字数统计。

添加 Emoji 表情支持

使用 hexo-filter-github-emojis 的 Hexo 插件来支持 emoji 表情的生成，安装命令如下：

npm install hexo-filter-github-emojis --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

githubEmojis:enable: trueclassName: github-emojiinject: truestyles:customEmojis:

执行 hexo clean && hexo g 重新生成博客文件，然后就可以在文章中用 emoji 语法写表情。

添加 RSS 订阅支持

使用 hexo-generator-feed 的 Hexo 插件来做 RSS，安装命令如下：

npm install hexo-generator-feed --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

feed:type: atompath: atom.xmllimit: 20hub:content:content_limit: 140content_limit_delim: ' 'order_by: -date

执行 hexo clean && hexo g 重新生成博客文件，在 public 文件夹中看到 atom.xml 文件，说明已安装成功。

图片懒加载

使用 hexo-lazyload-image 的 Hexo 插件来实现图片懒加载，安装命令如下：

npm install hexo-lazyload-image --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

lazyload:enable: true onlypost: false  # 是否只对文章的图片做懒加载loadingImg: # eg ./images/loading.gif

执行 hexo clean && hexo g 重新生成博客文件，一般情况下懒加载会和 gallery 插件会发生冲突，结果可能就是点开图片，左右翻都是 loading image ，解决方法是修改在 Matery 主题 source/js/ 目录下的 matery.js 文件，在第 108 行添加如下内容：

$(document).find('img[data-original]').each(function(){$(this).parent().attr("href", $(this).attr("data-original"));
});

做完这步之后，首页的 logo 点击会直接打开 logo 图，而不是跳到首页，解决方法是修改在 Matery 主题目录 layout/_partial/ 下的 header.ejs 文件，在 img 和 span 的两个头之间添加个 div 。

<div class="brand-logo"><a href="<%- url_for() %>" class="waves-effect waves-light"><div><% if (theme.logo !== undefined && theme.logo.length > 0) { %><img src="<%= theme.logo %>" class="logo-img" alt="LOGO"><% } %><span class="logo-span"><%- config.title %></span></div></a>
</div>

执行 hexo clean && hexo g 重新生成博客文件，就可以实现图片懒加载。

折叠功能

使用 hexo-sliding-spoiler 的 Hexo 插件来实现折叠功能，安装命令如下：

npm install hexo-sliding-spoiler --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

plugin:
- hexo-sliding-spoiler

执行 hexo clean && hexo g 重新生成博客文件，就可以实现折叠功能。

代码压缩

使用 hexo-neat 的 Hexo 插件来实现代码压缩，安装命令如下：

npm install hexo-neat --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

#hexo-neat 优化提速插件（去掉 HTML、css、js 的 blank字符）
neat_enable: true
neat_html:enable: trueexclude:- '**/*.md'
neat_css:enable: trueexclude:- '**/*.min.css'
neat_js:enable: truemangle: trueoutput:compress:exclude:- '**/*.min.js'- '**/**/instantpage.js'- '**/matery.js'

执行 hexo clean && hexo g 重新生成博客文件，就可以实现代码压缩了。

Hexo 插件安装参考 Hexo 官网

Hexo 添加 Valine 评论系统

Valine 简介

valine 诞生于 2017 年 8 月 7 日，是一款基于 LeanCloud 的快速、简洁且高效的无后端评论系统。理论上支持但不限于静态博客，目前已有 Hexo 、Jekyll 、Typecho 、Hugo 、Ghost 等博客程序在使用 valine 。

valine 具有快速安全，Emoji

搭建 Hexo 个人博客和 Matery 主题的配置优化相关推荐

最简便的方法搭建Hexo+Github博客,基于Next主题
前言如果你喜欢写作,我觉得你可以试试gitbook或者跟着本文搭建一个属于自己的博客空间(即使你不是IT行业的一员),不再受限于第三方博客地址,当然Hexo搭建的博客也是基于github托管的,但是 ...
如何改typecho主题头像_零成本搭建hexo个人博客(二)--修改主题
hexo默认主题landscape 估计很多小伙伴在搭建部署hexo完成后,会看到上面的页面后,然后就感觉,啊?就这?这个页面也太难看了.有没有什么方法可以改一下这个页面的UI啥的,方法是有的: 第一 ...
hexo搭建博客教程(matery主题)
hexo搭建博客教程(matery主题) 写在前面这篇教程是我搭建个人博客的路程经历和经验总结,matery主题挺多人用,网上也有各种详细教程,没时间我就不出详细教程了,这里给出其他大佬的教程链接, ...
从零开始使用GitHub Pages搭建Hexo静态博客
本文主要讲述如何使用GitHub Pages/Coding/Vercel搭建Hexo静态博客,以及如何使用jsDelivr加速静态资源.如何使用LeanCloud国际版搭载博客评论,和如何使用PicG ...
搭建hexo+Github博客
摘要本文主要向大家介绍了如何搭建hexo-Github博客的详细过程,有需要的朋友们可以尝试阅读,希望对大家有帮助. 简要吐槽搭博客其实没那么麻烦,但是在网上各类教程的"指导下" ...
在 Coding 上搭建 Hexo 个人博客！
前言最近闲来没事干,想搭建一个自己的博客来玩玩,但是又不想出钱买域名和租服务器.正好最近很流行搭建一个静态博客(本人用的是 hexo),而且部署上 github.coding.GitGafe上面也很 ...
如何改typecho主题头像_如何搭建hexo个人博客
自媒体时代,每个人都有展示自己的舞台. 你是否想过搭建一个属于自己的博客,不再为各种广告和限制而头疼? 那就入坑hexo吧!保证你一时半会儿爬不出来! 先上效果图移动端效果图如下是不是有一种网易轻 ...
Hexo搭建个人博客及next主题基本配置
前言国内一些免费的博客平台比如CSDN.博客园都已经很成熟,功能齐全,已经可以满足我们的需求,帮助我们记录学习过程遇到的问题,还能分享帮助其他人解决问题.为什么还要自己动手去搭建博客呢?首先写博客是 ...
使用 Github 空间搭建 Hexo 技术博客——Hexo NexT主题内设置可爱的动漫小人（九）
1.安装模块 hexo博客根目录选择cmd命令窗口或者git bash 输入以下代码,安装插件 npm install --save hexo-helper-live2d 各种模型展示 live2d- ...

搭建 Hexo 个人博客和 Matery 主题的配置优化

文章目录

Hexo 的安装

安装 Git

安装 Node.js

升级 Node.js 版本

安装 Hexo

升级 Hexo 版本

初始化 Hexo

启动 Hexo 服务

Hexo 部署到 GitHub

在 GitHub 官网上创建个人仓库

Git 初始化设置

查看设置是否正确

生成 SSH 公钥添加到 GitHub

Hexo 部署到 GitHub Pages

Hexo 部署到 Gitee

在 Gitee 官网上创建个人仓库

初始化 Git 设置

查看设置是否正确

生成 SSH 公钥添加到 Gitee

Hexo 部署到 Gitee Pages

Matery 主题安装及优化

Hexo 插件的安装

代码高亮

搜索

中文链接转拼音

文章生成永久链接

外链跳转

文章字数统计

添加 Emoji 表情支持

添加 RSS 订阅支持

图片懒加载

折叠功能

代码压缩

Hexo 添加 Valine 评论系统

Valine 简介

搭建 Hexo 个人博客和 Matery 主题的配置优化相关推荐

最新文章

热门文章