一篇尽可能囊括我在使用Hexo搭建博客过程中遇到的所有问题的文章,欢迎阅读。

目录

  1. 前言及环境搭建
    1. 背景
    2. 环境搭建
      1. node.js
      2. git
      3. 使用GitHub
      4. 安装Hexo
      5. 初始化Hexo
      6. 本地调试
    3. 使用域名
      1. 购买域名
      2. 域名解析
      3. 域名绑定
  2. Hexo配置和使用
    1. 基本配置
    2. 基本使用
      1. 发表文章
    3. 主题配置和使用
      1. 主题推荐
      2. 主题next的配置
      3. 主题tranquilpeak的配置
    4. 进阶配置
      1. 阅读全文
      2. 支持目录
  3. 后续维护
    1. 异常情况
      1. fatal: in unpopulated submodule ‘.deploy_git’
      2. Cannot set property ‘lastIndex’ of undefined
      3. 404
    2. 参考
    3. 本文更新情况

前言及环境搭建

背景

created on 2017.5.6

这是一篇介绍搭建Hexo博客的文章,我一年前花了一两天搭好了博客,但是没多久Windows炸了然后重装了,也没搞个备份,当时只知道博客文章放在了GitHub上,但Hexo的那些配置文件全没了。

踩了这么多坑,实习又忙就一直搁置了,现在有时间来重新整理一遍,希望能帮到大家吧。

updated on 2018.3.10

域名又要到期了,两年过去了,博客也没怎么写东西,实在是浪费。但这次还是要续费的,趁此机会再把这篇文章更新下。

这一部分主要介绍前期的环境搭建,这一遍弄好之后,后续不需要再来看了。

环境搭建

node.js

直接在官网下载即可:node.js

安装好之后可以直接查看版本号,可以看到npm也会一起安装好了:

1
2
3
4
MacBook-Pro:~ nomasp$ node -v
v6.10.3
MacBook-Pro:~ nomasp$ npm -v
3.10.10

git

mac上自带了git:

1
2
MacBook-Pro:~ nomasp$ git --version
git version 2.11.0 (Apple Git-81)

如果是ubuntu等系统可以自行安装:

1
sudo apt-get install git-core

下面是一些我推荐使用的git别名,也可以说是快捷键吧,以Mac为例:

1
emacs -nw ~/.gitconfig

添加以下内容,同时在下文中我也是直接使用这些别名的:

1
2
3
4
5
6
7
8
9
10
11
12
13
[alias]
cm = commit
cs = commit -s
ca = commit --amend
can = commit --amend --no-edit
gsta = git stash
cp = cherry-pick
co = checkout
br = branch
rssoft = reset --soft
rsmix = reset --mixed
rshard = reset --hard
st = status

使用GitHub

大家自己到GitHub上找New repository来创建新的项目仓库。

在仓库的Clone and download里可以复制到链接,然后使用git clone加链接来下载到本地。

我创建了3个分支:master分支目前还没用,hexo分支是hexo的相关文件,gh-pages是hexo生成的博客内容,后面会讲到。

1
2
3
4
5
6
7
8
MacBook-Pro:nomasp-blog nomasp$ git br --all
gh-pages
* hexo
master
remotes/origin/HEAD -> origin/master
remotes/origin/gh-pages
remotes/origin/hexo
remotes/origin/master

安装Hexo

使用npm直接进行安装:

1
npm install -g hexo-cli
1
2
3
4
5
6
7
8
9
10
11
12
MacBook-Pro:~ nomasp$ hexo -v
hexo-cli: 1.0.2
os: Darwin 16.5.0 darwin x64
http_parser: 2.7.0
node: 6.10.3
v8: 5.1.281.101
uv: 1.9.1
zlib: 1.2.11
ares: 1.10.1-DEV
icu: 58.2
modules: 48
openssl: 1.0.2k

然后可以来看看是否安装成功:

1
$ hexo -v

初始化Hexo

根据上文GitHub的使用一节,我们在hexo分支下面来初始化hexo,我的文件夹是nomasp-blog。

1
2
3
$ hexo init <folder>
$ cd <folder>
$ npm install

可以看到目录结构如下所示,其中_config.yml是hexo的配置文件,scaffolds下面放着博客内容的模版,source下面是博客的md文件,themes下面是博客主题。

1
2
3
4
5
6
7
8
9
10
.
├── _config.yml // hexo的配置文件
├── db.gson
├── package.json
├── public // 生成的index.html等都放在这里,是最终显示的内容
├── scaffolds // 博客内容的目标,包括文章、草稿等
├── source // 源文件,也就是我们写的md文件存放的地方
| ├── _drafts // 草稿
| └── _posts // 文章
└── themes // 主题

尤其要注意public中一定要有CNAME文件,下面域名的地方就会讲到,切记一定要有这个文件!

本地调试

这个时候可能你已经等不及想要看看博客的模样了。

1
2
$ hexo generate
$ hexo server

还有“hexo deploy“是用来部署到网络上的,这个后面再讲,这些命令分别可以简化成:“hexo g, hexo s, hexo d“。

输入上面两个命令后,应该就会给你一个地址然后在浏览器打开即可。

在本地调试也挺麻烦的,我们直接将其发布到网上吧!那就少不了域名了,接着往下看。

使用域名

购买域名

域名可以在万网买,我是在传说中的”去他爹“买的,官网是:GoDaddy.

在首页的搜索框输入你想要的域名后,点击“Search Domain”会查看该域名能不能购买,能的话就一路确认然后付款就好了。

域名解析

域名解析可以使用腾讯的DNSPOD,其官网是:DNSPOD

如果不清楚具体怎么弄的话请继续往下看,点击:域名解析,然后点击“添加域名”。输入域名后,点击该域名进入其管理页面。然后点击“添加记录“,具体各项的请看:
1)主机记录为“@”,表示直接解析主域名;记录类型为“NS”,表示需要把子域名交给其他DNS服务商解析;记录值填你在GoDaddy获取到的“Nameservers“(在DNS Management中);其他均为默认值。
2)还需要添加两条,主机记录分别为“@”和“www”;记录类型均为为“CNAME”,记录值均为“yourname.github.io“。

域名绑定

在你的hexo文件夹下会有一个public,这个目录是hexo根据markdown文件生成的html文件等,包括域名绑定的CNAME文件也得放在这里。创建一个叫做“CNAME”(注意是没有后缀的)的文件,内容就是域名地址,比如我的CNAME文件是“nomasp.com“。

Hexo配置和使用

基本配置

既然博客是自己的,当然要进行一些自定义的配置了,其实根据单词大家都能看出来意思。

1
2
3
4
5
6
7
# Site
title: 标题
subtitle: 子标题
description: 描述
author: 作者
language: 语言
timezone: 时区

来看看部署相关的配置吧:

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repository: git@github.com:<your-user-id>/<your-repository-id>.git
branch: gh-pages

基本使用

发表文章

回到我们前面说的scaffolds文件夹,打开它可以看到post等md文件,以它为例:

1
2
3
4
5
6
---
title: {{ title }}
date: {{ date }}
categories:
tags:
---

上面这个以后初始化的每一篇文章的默认的内容,categories是归类,tags是标签,这个应该不用说。

你还可以在上述内容之后继续添加你的自定义内容。

博文的创建我们可以通过hexo命令,我刚刚就创建一个标题为“Hexo-Tutorial”的文章:

1
2
MacBook-Pro:nomasp-blog nomasp$ hexo new post Hexo-Tutorial
INFO Created: ~/workspaces/github/nomasp-blog/source/_posts/Hexo-Tutorial.md

主题配置和使用

主题推荐

我最早使用的主题,后来换成了Next,到现在(2018.3.10)又换了回来,非常喜欢。
tranquilpeak

2017年里使用的主题,同样也很不错。
next

主题next的配置

我使用的主题是iissnan的next,可以在 这里 下载源码,解压好后放在上面所说的themes目录下。

将你解压后的文件夹名字记好,然后放到hexo的_config配置文件中:

1
theme: hexo-theme-next-master

关于next的配置,可以直接看官方的文档,非常详细。

主题tranquilpeak的配置

等待补充

进阶配置

阅读全文

如果在首页让每一篇文章都完整的显示出来,则会非常拥挤和难看,如果文章很长那就更是如此了。

1
<!--more-->

这样在首页就只显示more以上的简短内容,全文放在more以下就需要点开才能看到啦,就像我这篇文章一样。

支持目录

如果想让文字支持目录的显示,可以添加toc标记,在文章开头即可,你当前看到的这篇博客就支持toc哦!

1
<!--toc-->

后续维护

异常情况

大部分的问题都可以在这里找到。

fatal: in unpopulated submodule ‘.deploy_git’

2018.3.10,今天又重新搞了下hexo,好久不动它居然报了错。

这种情况可以先安装下相关的依赖:

1
npm install hexo-deployer-git –save

实在不行,就把它删掉,然后重新生成和部署。

1
2
3
rm -rf .deploy_git
hexo g
hexo d

大功告成!

Cannot set property ‘lastIndex’ of undefined

2018.4.5,使用hexo g生成的时候遇到了这个错误,解决办法是hexo clean一次即可。

1
2
3
4
➜ nomasp-blog git:(hexo) ✗ hexo g
INFO Start processing
FATAL Something's wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.html
TypeError: Cannot set property 'lastIndex' of undefined

404

2018.4.5,刚才404了,搞了半天没找到原因,后来恍然大悟。因为public文件夹里的CNAME在hexo clean的时候被删掉!!!所以才会出现找不到的情况。只需要在hexo/public目录下新建一个就OK啦……

参考

感谢Git/GitHub/Hexo以及诸多贡献者。

Hexo写作
Tranquilpeak v2.0.0 Doc

本文更新情况

updated on 2018.3.10,增加了两个进阶配置,一些小的微调。

updated on 2018.4.5,这次调整了文章的结构,添加了异常情况的记录。


未完待续,欢迎补充。

也欢迎大家把自己搭建好的hexo博客的地址用邮件发给我,互相学习嘛。



本站地址:http://nomasp.com/

欢迎交流,转载请联系本人,多谢🙏