145. hexo搭建博客
配置环境
安装 Hexo
接下来就需要安装 Hexo 了,这是一个博客框架,Hexo 官方还提供了一个命令行工具,用于快速创建项目、页面、编译、部署 Hexo 博客,所以在这之前我们需要先安装 Hexo 的命令行工具。 命令如下:
1 | $ npm install -g hexo-cli |
信息提前说明
配置文件说明
在 Hexo 中有两份主要的配置文件,其名称都是 _config.yml
。 其中,一份位于*站点根目录下,主要包含 Hexo 本身的配置;另一份位于主题目录*下,这份配置由主题作者提供,主要用于配置主题相关的选项。
为了描述方便,在以下说明中,将前者称为 站点配置文件, 后者称为 主题配置文件。
初始化 hexo
创建文件夹
1
$ mkdir io_github_qeuroal
初始化
1
2$ hexo init
$ mkdir ~/Desktop/hexo && ls -al > ~/Desktop/hexo/hexo_init.info将 Hexo 编译生成 HTML 代码
1
$ hexo generate
本地运行
1
$ hexo server
站点配置文件
修改根目录下的
_config.yml
文件,找到 Site 区域,这里面可以配置站点标题title
、副标题subtitle
等内容、关键字keywords
等内容.例:
1
2
3
4
5
6# Site
title: NightTeam
subtitle: 一个专注技术的组织
description: 涉猎的主要编程语言为 Python、Rust、C++、Go,领域涵盖爬虫、深度学习、服务研发和对象存储等。
keywords: "Python, Rust, C++, Go, 爬虫, 深度学习, 服务研发, 对象存储"
author: NightTeamlanguage
的字段设置为zh-CN
配置主题
Pure 主题
使用 pure, 教程见这里的 《Hexo搭建个人博客并部署到Github》和《Hexo博客主题pure使用说明》
下载主题
下载
1
$ git clone https://github.com/cofess/hexo-theme-pure.git themes/pure
启用主题
修改 站点配置文件
1
theme: pure
更新主题 (可选, 暂未使用过)
1 | $ cd themes/pure |
主题配置
导航菜单
1 | # 导航菜单 |
主题配置
1 | # config |
页面显示
1 | # Pagination |
大图显示
1 | # Fancybox |
捐赠
直接更改照片文件即可
修改为自己的名字
- 改
cofess
为<your name>
修改 example.com
全局搜索 example.com
将其替换成网站网址 Qeuroal.top
个人链接
1 | links: |
个人标签
1 | # My Personal Labels |
搜索 (未处理)
主题内置三种站内搜索方式:insight、swiftype、baidu
1 | # Search |
文章启用目录索引
1 | title: 文章标题 |
分享
支持weibo,qq,qzone,wechat,tencent,douban,diandian,facebook,twitter,google,linkedin
1 | # Share |
分类, 标签, 仓库, about等菜单的配置
将 /theme/pure/_source
下的所有文件复制到 /source
下
友情链接
复制theme/pure/_source/
目录下links
文件夹到blog path/source/
目录下
在 hexo 目录下的 source 文件夹内创建一个名为 _data(禁止改名)的文件夹。
然后在文件内创建一个名为 links.yml 的文件,在其中添加相关数据即可。
单个友情链接的格式为:
1 | Name: |
添加多个友情链接,我们只需要根据上面的格式重复填写即可。
将 Name 改为友情链接的名字,例如 Cofess。
http://example.com 为友情链接的地址。
http://example.com/avatar.png 为友情链接的头像。
这是一个描述 为友情链接描述。
数学公式
Hexo默认使用 “hexo-renderer-marked” 引擎渲染网页,该引擎会把一些特殊的 markdown 符号转换为相应的 html 标签
解决方案
解决方案有很多,可以网上搜下,为了节省大家的时间,这里只提供亲身测试过的方法。
更换 Hexo 的 markdown 渲染引擎,hexo-renderer-markdown-it-plus 引擎替换默认的渲染引擎 hexo-renderer-marked 即可。
安装hexo-renderer-markdown-it-plus插件
1 | npm un hexo-renderer-marked --save |
配置
安装插件后,如果未正常渲染LaTeX数学公式,在博客配置文件_config.yml
中添加
1 | markdown_it_plus: |
文章启用mathjax
1 | title: Hello World |
文章简介内容不全显式
1 | showContent: false # 页面文章小于2篇时显示文章内容 |
删除部分文件
themes/pure/_config.yml.example
themes/pure/README.cn.md
themes/pure/README.md
关闭订阅
# rss # rss: /atom.xml
1
2
3
4
5
6
7
8
9
10
11
- ```yml
social:
links:
github: https://github.com/Qeuroal
weibo: http://weibo.com/Qeuroal
twitter: https://twitter.com/Qeuroal
# facebook: /
# dribbble: /
behance: https://www.behance.net/Qeuroal
# rss: atom.xml
更改头像
1 | profile: |
更改个人简介
文件: /source/about/index.md
安装插件
hexo-deployer-git (must, common)
安装
1 | $ npm install hexo-deployer-git --save |
站点配置(根目录) config.yml
_config.yml
1 | # Deployment |
hexo-generator-feed (normal, 但不推荐订阅)
Github:https://github.com/hexojs/hexo-generator-feed
简介
RSS的生成插件,你可以在配置显示你站点的RSS,文件路径\atom.xml。
安装:
1 | $ npm install hexo-generator-feed --save |
配置:
在博客配置文件_config.yml
中添加
1 | feed: |
- type - Feed type. (atom/rss2)
- path - Feed path. (Default: atom.xml/rss2.xml)
- limit - Maximum number of posts in the feed (Use
0
orfalse
to show all posts) - hub - URL of the PubSubHubbub hubs (Leave it empty if you don’t use it)
- content - (optional) set to ‘true’ to include the contents of the entire post in the feed.
hexo-generator-json-content (must)
Github
https://github.com/alexbruno/hexo-generator-json-content
简介
用于生成静态站点数据,提供搜索功能的数据源。
安装
1 | $ npm install hexo-generator-json-content --save |
配置
在博客配置文件_config.yml
中添加
1 | jsonContent: |
hexo-image-link (must)
在github上用hexo搭建了自己的博客,用typora写完一篇博文,满怀欣喜地deploy之后发现图片加载失败…真的很吐血。去网上一搜索,嗯,好像不少人都遇到了这个问题,解决方法看似一大堆实则无效或过时不匹配,绝大多数资料都是安装hexo-asset-image
的插件,亲测对于markdown图片路径没有用啊!比出现问题更折磨人的是遇上一堆错误的解决方法…
我想要寻找在本地和网页上都能显示的办法,终于发现了一款插件hexo-image-link
,是将markdown图片路径转换为asset_img语法,使得图片能够同时显示在typora和hexo上。
1 | {% asset_img "local-image.png" "image file label" %} -> {% asset_img label local-image.png %} |
具体步骤
修改
_config.yml
中的post_asset_folder: true
安装hexo-image-link
1
$ npm install hexo-image-link --save
修改 站点配置文件 为
post_asset_folder: true
注
如果 npm下载比较慢的话,尝试 cnpm下载
安装
1
2$ npm install -g cnpm --registry=https://registry.npm.taobao.org
$ cnpm install hexo-image-link --save修改md文件中的图片路径
hexo-autonofollow (bad)
Github:https://github.com/liuzc/hexo-autonofollow
简介:自动为站外链接添加nofollow属性
安装:
1 | $ npm install hexo-autonofollow --save |
配置:
在博客配置文件_config.yml
中添加
1 | nofollow: |
- enable - 是否启用
- exclude - 排除域名
配置主题无意义的组件
豆瓣书单 (关闭, 毫无意义)
复制theme/pure/_source/
目录下books
文件夹到blog path/source/
目录下
1 | # douban 豆瓣书单 |
评论 (关闭, 鸡肋)
1 | comment: |
Next 主题
下载主题
最新版本:
Download the Latest Master Branch
稳定版本
Download the Latest Release Version
指定版本
Download the Specific Release Version
In rare cases useful, but not recommended.
You must define version. Let’s take v8.0.0 as an example. Replace it with any version from tags list.git 下载
1
2$ cd io_github_qeuroal
$ git clone https://github.com/next-theme/hexo-theme-next themes/next
教程: Installation
主题配置
修改 theme/next/_config.yml
主题配置文件
1 | #Schemes |
Menu 增加关于、标签、分类、404页面
将 about、tags、categories 前的 #号去掉,示例如下:
1
2
3
4
5
6
7
8
9menu:
home: / || fa fa-home
about: /about/ || fa fa-user
tags: /tags/ || fa fa-tags
categories: /categories/ || fa fa-th
archives: /archives/ || fa fa-archive
#schedule: /schedule/ || fa fa-calendar
#sitemap: /sitemap.xml || fa fa-sitemap
#commonweal: /404/ || fa fa-heartbeat新建相关页面
在博客根目录下执行下列命令
1
2
3
4$ hexo new page "about"
$ hexo new page "tags"
$ hexo new page "categories"
$ hexo new page 404修改生成页面的配置
1
2
3
4source/about/index.md
source/tags/index.md
source/categories/index.md
source/404/index.md404 相关
在
front-matter
中添加permalink: /404
,表示指定该页面固定链接为 http://“主页”/404.html1
2
3
4
5
6
7---
title: 404 Not Found:该页无法显示
toc: false
comments: false
permalink: /404
---
<script type="text/javascript" src="//www.qq.com/404/search_children.js" charset="utf-8" homePageUrl="<%- config.url %>" homePageName="回到我的主页"></script>
设置左上角或右上角 github 图标
主题配置文件,启用 github-banner
如下:
1 | github_banner: |
设置侧栏阅读进度百分比
编辑站点配置文件,修改 back2top
部分如下
1 | copyback2top: |
设置网页底部信息
查看主题配置文件,修改 footer 配置如下:
1 | footer: |
图片懒加载设置
在主题配置文件中启用 lazyload
1 | copylazyload: true |
设置代码块复制和代码高亮
在主题配置文件中修改 codeblock
1 | codeblock: |
修改文章底部标签样式
在主题配置文件中修改
1 | copytag_icon: true |
网站icon
1 | favicon: |
侧边栏头像
1 | # Sidebar Avatar |
侧边栏社交链接
修改主题配置文件
1 | social: |
在文章底部增加版权信息
编辑 主题配置文件,修改如下配置:
1 | creative_commons: |
开启缓存
1 | # Allow to cache content generation. Introduced in NexT v6.0.0. |
压缩
1 | # Remove unnecessary files after hexo generate. |
侧边栏显示分类条数
1 | # Posts / Categories / Tags in sidebar. |
友链
1 | # Blog rolls 友链 |
文章toc
1 | toc: |
顶部元信息
1 | post_meta: |
首页摘要
1 | excerpt_description: false # 关闭自动提取 |
手动控制
使用
<!--more-->
控制使用
front-matter
中添加description
或excerpt
字段1
2
3
4---
description: your excerpt
excerpt: your excerpt
---
安装插件
hexo-deployer-git (must, common)
安装
1
$ npm install hexo-deployer-git --save
站点配置(根目录) config.yml
_config.yml
1
2
3
4
5
6# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: {git repo ssh address}
branch: master
hexo-image-link (must)
在github上用hexo搭建了自己的博客,用typora写完一篇博文,满怀欣喜地deploy之后发现图片加载失败…真的很吐血。去网上一搜索,嗯,好像不少人都遇到了这个问题,解决方法看似一大堆实则无效或过时不匹配,绝大多数资料都是安装hexo-asset-image
的插件,亲测对于markdown图片路径没有用啊!比出现问题更折磨人的是遇上一堆错误的解决方法…
我想要寻找在本地和网页上都能显示的办法,终于发现了一款插件hexo-image-link
,是将markdown图片路径转换为asset_img语法,使得图片能够同时显示在typora和hexo上。
1 | {% asset_img "local-image.png" "image file label" %} -> {% asset_img label local-image.png %} |
具体步骤
修改
_config.yml
中的post_asset_folder: true
安装hexo-image-link
1
$ npm install hexo-image-link --save
修改 站点配置文件 为
post_asset_folder: true
注:
如果 npm下载比较慢的话,尝试 cnpm下载
安装
1
2$ npm install -g cnpm --registry=https://registry.npm.taobao.org
$ cnpm install hexo-image-link --save修改md文件中的图片路径
hexo-generator-searchdb
安装 exo-generator-searchdb 这个插件
1
$ npm install hexo-generator-searchdb --save
配置 主题配置文件:
_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13# Local Search
# Dependencies: https://github.com/next-theme/hexo-generator-searchdb
local_search:
enable: true
# If auto, trigger search by changing input.
# If manual, trigger search by pressing enter key or search button.
trigger: auto
# Show top n results per article, show all results by setting to -1
top_n_per_article: 1
# Unescape html strings to the readable one.
unescape: false
# Preload the search data when the page loads.
preload: false
部署
配置站点配置文件
_config.yml
1
2
3
4
5
6# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: {git repo ssh address}
branch: master部署
1
$ hexo deploy
自定义域名
添加 CNAME 文件
在 /source
文件夹下添加 CNAME
文件, 如下所示:

hexo 常用命令
1 | $ hexo new "postName" # 新建文章 |
git
删除远程仓库里的某个文件/文件夹
在git中可以用git rm命令删除文件(删除远程仓库文件)
1 | git clone 仓库地址 |
上面的方法会把对应的本地文件也删除掉,如果不想把本地文件删除,只把缓存区中的对应部分删除,则加上 --cached
1 | git rm --cached 文件 //本地中该文件不会被删除 |
在 git add .
后面执行上面的命令,再推送到 github 远程仓库上的时候,仓库里面对应的文件/文件夹就会被删除
1 | git clone 仓库地址 |
git commit后,如何撤销commit
修改了本地的代码,然后使用:
1 | git add file |
复制
执行commit后,还没执行push时,想要撤销这次的commit,该怎么办?
解决方案: 使用命令:
1 | git reset --soft HEAD^ |
复制
这样就成功撤销了commit,如果想要连着add也撤销的话,–soft改为–hard(删除工作空间的改动代码)。
1 | HEAD^ 表示上一个版本,即上一次的commit,也可以写成HEAD~1 |
复制
1 | --soft |
复制
1 | --hard |
复制
另外一点,如果commit注释写错了,先要改一下注释,有其他方法也能实现,如:
1 | git commit --amend |
撤销 git add . 并保留修改的方法
执行完 git add .
文件退出暂存区,但是修改保留:
1 | git reset --mixed |
撤销所有的已经 add 的文件:
1 | git reset HEAD . |
撤销某个文件或文件夹:
1 | git reset HEAD -filename |
另外:可以用 git status
Git 会告诉你可以通过那个命令来执行操作。
补充
可以用 git status
Git 会告诉你可以通过那个命令来执行操作。
push 失败
case 1
OpenSSL SSL_read: Connection was reset, errno 10054
的话就把代理关了
删除未跟踪文件
1 | # 删除 untracked files |
1 | # 连 untracked 的目录也一起删掉 |
1 | # 连 gitignore 的untrack 文件/目录也一起删掉 (慎用,一般这个是用来删掉编译出来的 .o之类的文件用的) |
1 | # 在用上述 git clean 前,墙裂建议加上 -n 参数来先看看会删掉哪些文件,防止重要文件被误删 |
多终端同步
新建私有仓库
1 | echo "# Readme" >> README.md |
文件夹说明
文件夹 | 说明 | 是否需要上传github |
---|---|---|
node_modules | hexo需要的模块,就是一些基础的npm安装模块,比如一些美化插件,在执行npm install 的时候会重新生成 |
不需要 |
themes | 主题文件 | ==需要== |
public | hexo g命令执行后生成的静态页面文件 | 不需要 |
packages.json | 记录了hexo需要的包的信息,之后换电脑了npm根据这个信息来安装hexo环境 | ==需要== |
_config.yml | 全局配置文件,这个不用多说了吧 | ==需要== |
.gitignore | hexo生成的默认的.gitignore模块 | ==需要== |
scaffolds | 文章的模板 | ==需要== |
.deploy_git | hexo g自动生成的 | 不需要 |
.gitignore内容
1 | .DS_Store |
删除.git文件
删除所有主题的 .git
文件,如:rm -rf ./theme/pure/.git
注
查找 .git
文件
在==根目录==下执行以下命令
1 | find . -name ".git*" |
上传
1 | git add . |
新电脑上的操作
下载
1
git clone <your repo>
安装依赖
1
npm install
npm install
其实就是读取了packages.json
里面的信息,自动安装依赖,有的小伙伴可能只执行npm install
就行了,不过按照上面的三步是最稳妥的仓库更新
为了保证同步,推荐先合并更新再进行博客的编写
pull (不推荐)
1
git pull
fetch
1
2git fetch --all #将远程git仓库上最新的内容拉取到本地,将本地库所关联的远程库更新至最新
git reset --hard origin/master #强制将本地内容指向刚刚同步git云端内容reset
对所拉取的文件不做任何处理,此处不用pull
是因为本地尚有许多文件,使用pull
会有一些版本冲突,解决起来也麻烦,而本地的文件都是初始化生成的文件,较拉取的库里面的文件而言基本无用,所以直接丢弃。
部署
1
2hexo clean && hexo g && hexo s
hexo d
更新脚本
1 |
QAs
Error: Cannot find module ‘hexo-util’
方法1
rm -rf node_modules
npm install hexo-util
方法2
For those who also encounter this issue, please check your NPM version.
> 3
: Still not work. Please remove node_modules directory and reinstall using npm install.< 3
: Please add hexo-util explicitly via npm install –save-dev hexo-util to you site package deps.
reference: https://github.com/iissnan/hexo-theme-next/issues/1490