如何使用 Hexo 部署个人博客

安装准备

在安装 Hexo 前,需要安装 Node.jsGit, 详见 Hexo 官方网站

安装 Hexo

利用 nvm 安装 Hexo

sudo npm install -g --unsafe-perm hexo-cli

WordPress 迁移到 Hexo

导出 WordPress

WordPress > Tools > Export

安装 Hexo 插件

npm install hexo-migrator-wordpress --save

Hexo 命令

注意设置文件中,# 号后为注释。

完整命令

完整的 Hexo 命令如下:

hexo clean # 清理已经生成的动态文件
hexo server # 在端口 `http://localhost:4000/` 查看
hexo server --debug # Debug 模式
hexo generate # 生成动态网站
hexo deploy # 发布网站
hexo generate --deploy # 生成并发布

快捷命令

快捷操作的 Hexo 省略命令如下:

hexo n # 等同于 hexo new
hexo s # 等同于 hexo server
hexo g # 等同于 hexo generate
hexo d # 等同于 hexo deploy
hexo g d # 等同于 hexo generate --deploy

安装主题

查看所有主题
查看本网站使用的 NexT 主题

安装 NexT 主题

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

提示

  • 主题中的 categoriestags 页面需要手动创建 hexo new page "categorieshexo new page "tags"
  • After adding pages, the names of the pages should be defined in /themes/next/languages/'.
  • 如何使用主题
  • 图标集

网站发布

注册 GitHub

生成 GitHub SSH key

# Attempts to ssh to GitHub
ssh -T git@github.com
# Lists the files in your .ssh directory, if they exist
ls -al ~/.ssh
# Configure the user email
git config --global user.email "allenlightman@qq.com"
# Configure the user name
git config --global user.name "J.Liu"
# Creates a new ssh key, using the provided email as a label
ssh-keygen -t rsa -b 4096 -C "your_email@example.com"
# Copies the contents of the id_rsa.pub file to your clipboard
pbcopy < ~/.ssh/id_rsa.pub
# Attempts to ssh to GitHub

安装发布到 GitHub 的插件

npm install hexo-deployer-git --save

FTP

FTP 的布置可以参考 FTP deployer

npm install hexo-deployer-ftpsync --save

不推荐使用这种模式发布,可以使用其他 FTP 工具将生成的网站直接上传到服务器上。

Configure RSS and sitemap

如何生成 RSS 以供他人订阅,请参见 Migrate My blog from WordPress to Hexo

RSS

npm install hexo-generator-feed --save

添加 Sitemap

npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save

/_config.yml 文件里,添加

# plugins:
# - hexo-generator-feed
# feed:
# type: atom
# path: atom.xml
# limit: 20

# sitemap:
# path: sitemap.xml

# baidusitemap:
# path: baidusitemap.xml

写作

写作命令

hexo new [layout] <title> # General command format
hexo new page "New page name" # Publish a new page
hexo new draft "New draft name" # Draft a new post into _drafts
hexo new post "New post name" # Publish a new post into _posts
hexo publish post "Old draft name" # Publish a draft as a post

添加图片

添加图片有绝对路径和相对路径两种方法,推荐使用绝对路径的方法,相较而言比较稳定。当然也可以使用图床链接的方式,暂不讨论。

绝对路径添加图片的方法

将图片存放在 source/images 文件夹中,然后通过类似 ![](/images/image.jpg) 来访问。

相对路径添加图片的方法

_config.ymlpost_asset_folder 值改为 true,即 post_asset_folder: true。之后,每次新建 post 时,Hexo 会新建一个同 post 相同名的文件夹。此时,可以将相关资源放到这个相对文件夹中,然后通过 ![](/image.jpg)来引用。

控制图片大小

<img src="./xxx.png" width = "300" height = "200" alt="图片名称" align=center />

添加新 layout

Add photo.md into scaffolds with the following contnent. This would be a layout for photos.

---
layout: { { layout } }
title: { { title } }
date: { { date } }
tags:
photos:
-
---

文章摘要

以上是摘要
<!--more-->
以下是余下全文

第三方支持

LaTeX 数学公式

启用主题中 _config.ymlmathjax 选项。

mathjax:
enable: false
cdn: //cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML

###
安装 hexo-generator-searchdb,在站点的根目录下执行以下命令:

$ npm install hexo-generator-searchdb --save

编辑 站点配置文件,新增以下内容到任意位置:

# Local search
search:
path: search.xml
field: post
format: html
limit: 10000

评论系统

多说评论系统请参照
如何添加多说评论

添加 RSS

如何添加 RSS

npm install hexo-generator-feed --save

如果遇到以下错误

FATAL (unknown path) [Line 7, Column 23]
Error: Unable to call `the return value of (posts["first"])["updated"]["toISOStrin"]`, which is undefined or falsey

应注意,public 里至少要有一篇 post 才能够生成 RSS,否则会报错。
如何解决该错误

添加站内搜索

swiftype 网站上注册,填写个人网站信息,直到生成 swiftype_key。之后将其,添加到 NexT主题中的 _config.yml 中。
参考 NexT 第三方服务集成

网站访问计数

NexT 主题中已经集成了不蒜子,可以直接修改主题配置文件中一下部分,将 false 改为 true 即可。另可进行个性化配置,详见 NexT 说明文档

busuanzi_count:
# count values only if the other configs are false
enable: false
# custom uv span for the whole site
site_uv: true
site_uv_header: <i class="fa fa-users"></i>
site_uv_footer:
# custom pv span for the whole site
site_pv: true
site_pv_header: <i class="fa fa-eye"></i>
site_pv_footer:
# custom pv span for one page only
page_pv: true
page_pv_header: <i class="fa fa-file-o"></i>
page_pv_footer:

标签块

解决图片大小等问题

插入指定大小图片

{% img [class names] /path/to/image [width] [height] [title text [alt text]] %}

引用

基本使用

{% blockquote [author[, source]] [link] [source_link_title] %}
content
{% endblockquote %}

引用书籍

{% blockquote David Levithan, Wide Awake %}
Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.
{% endblockquote %}

Markdown

引用

使用 > 符号即可。

> Quotation

Quotation

假设要提供一个连接以供访客下载 book.pdf。首先在 ./source 下创建文件夹 book, 并将 book.pdf 添加进去。在编写 markdown 文档时使用[Download my book!](/books/book.pdf)。或者使用如下代码以提供给一个下载按钮:

{% raw %}
<button onclick="window.open('/books/book.pdf')">Download</button>
{% endraw %}

How to trigger a file download when clicking an html button or javascript
How to provide files users can download?

参考文献

Wordpress to hexo 搬家记录
从WordPress迁移博客到Hexo
hexo你的博客

结语

本文写的较为简洁,如有疑问,敬请留言。

This is it.
Cheers!