博客从Firekylin迁移到Hexo

序言

之前使用的一直是Firekylin,Firekylin是由360公司Web前端工程师组成的专业团队 75Team 进行开发和维护,基于ThinkJS开发,快速很快且后台管理很方便。但是前些天突然想把博客放到二级目录,在折腾的过程中出现了一些问题,如静态资源无法加载,尝试了很多办法,最终都没不能完全解决这个问题。查了一下,Firekylin在设计之初没有考虑子目录,本着“生命不息,折腾不止”的精神,我决定把博客迁移到Hexo

Hexo也是一款基于Node.js的静态博客框架,依赖少易于安装使用,可以方便的生成静态网页托管在GitHubHexo同样支持markdown,写起来也很顺手。因为Hexo的创建者是台湾人,对中文的支持很友好,可以选择中文文档进行查看。

准备工作

我用的系统是ubuntu,所以下面命令均是在ubuntu上完成的。

安装nodejsnpm

1
2
3
$ sudo apt-get install python-software-properties
$ curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
$ sudo apt-get install nodejs

安装nodejsnpm的方法网上还有很多,这里就不再赘述了。

安装Hexo

使用npm命令安装Hexo

1
$ npm install -g hexo-cli

初始化博客

1
2
3
$ hexo init blog
$ cd blog
$ npm install

以上命令完成后,会在目标目录生成以下的目录结构:

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes
  • _config.yml 是博客的配置文件。
  • scaffolds 是博客文章模板。
  • source 是博客文章目录。
  • themes 存放主题风格文件。

配置Hexo

Hexo的配置信息都储存在_config.yml中,需要注意的一点:冒号后面一定要加空格!

下面是Hexo的一些基础配置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 网站信息
title: #标题
subtitle: #副标题
description: #网站描述
author: #作者昵称
language: #网站语言,默认英语,设置简体汉语

# 网址设置
#网址 因为我的博客是放在子目录中,所以将url设置成'http://zhoushuo.me/blog'
url: http://zhoushuo.me/blog/
root: /blog/ #博客根目录,同上。

# 主题配置
theme: # 对应themes下存放主题的文件夹名

如果是要部署到Github需要修改一下部署配置:

1
2
3
4
5
# 部署配置
deploy:
type: git
repo: # github仓库名
branch: master

更多详细配置可以查看官方文档:https://hexo.io/zh-cn/docs/configuration.html

解析

我的博客是部署在我的云主机上的,所以需要在nginx配置里面添加一条解析:

1
2
3
location /blog/ {
alias /home/ubuntu/www/blog/public/;
}

这样在浏览器里输入网址就可以访问了。

安装主题

Hexo提供了很多主题,可以打开Hexo官方主题浏览查看,选择自己喜欢的主题。我这里使用的是icalm,下面也是以icalm为例:

1
$ git clone git@github.com:nameoverflow/hexo-theme-icalm.git

启用主题:

修改博客目录blog\_config.yml中的theme属性,将其设置为icalm

1
theme: icalm

配置主题

主题的配置在\themes\icalm\_config.yml文件里面。每个主题的配置内容也都不太一样,一般来说,主题的作者都会有对主题的相关介绍,看他介绍的修改就可以了。我主要针对导航栏简单说明一下。

1
2
3
4
5
6
#因为我的博客是放在子目录中,所以路径前面加了/blog
menu: #导航栏
Home: /blog/ #主页
Archive: /blog/archives/ #归档
Tags: /blog/tags/ #标签
About: /blog/about/ #关于

Hexo命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
npm install hexo -g     #安装Hexo
npm update hexo -g #升级
hexo init #初始化博客

#命令简写
hexo n "我的博客" == hexo new "我的博客" #新建文章
hexo g == hexo generate #生成
hexo s == hexo server #启动服务预览
hexo d == hexo deploy #部署
hexo server #Hexo会监视文件变动并自动更新,无须重启服务器
hexo server -s #静态模式
hexo server -p 5000 #更改端口
hexo server -i 192.168.1.1 #自定义 IP
hexo clean #清除缓存,若是网页正常情况下可以忽略这条命令

注意,这里的命令都是作用在Hexo博客所在的文件夹中。

写作

博客基本配置完成了,主题也更换了,开始写一篇文章吧!

1
$ hexo n "开博大吉"

这时候,你会看到一个 md 文件的路径:

1
2
$ hexo n "开博大吉"
INFO Created: ~/www/blog/source/_posts/开博大吉.md

复制路径,用vim打开md文件

1
$ vim ~/www/blog/source/_posts/开博大吉.md

然后就可以写博客内容了,写完之后保存退出。然后生成html文件,部署。

1
$ hexi g -d

添加文章抬头信息

Hexo默认新建的文章抬头已有titledatetags等属性,可能缺乏categoriesmeta标签,想要指定目录就需要添加categories属性,而meta标签则是为了便于搜索引擎的收录。

1
2
3
4
5
6
title:  #文章标题
date: #时间,一般不用改
categories: #目录分类
tags: #标签,格式可以是[Hexo,总结],中间用英文逗号分开
keywords: #文章关键词,多个关键词用英文逗号隔开
---

迁移

接下来就是把之前Firekylin里面的博文迁移到Hexo上。Hexo的md文件都保存在/blog/source/_posts/下,所以我只需要将Firekylin里导出的md文件上传到这个目录下,然后生成部署就可以了。

到这里博客迁移就基本完成了,当然还有很多细节需要完善,就先写到这里,有时间继续折腾。