前言
按照Hexo官网的说法
Hexo 是一个快速、简洁且高效的博客框架. Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页.
利用Hexo,我们可以用极低的成本构建属于自己的博客,并且自动为博文分类和归档,这篇教程是我使用Hexo构建个人博客时候做的总结。这份Hexo使用指南适用于Ubuntu环境,写这份指南时所用的操作系统版本为Ubuntu18.04.通过这份Hexo使用指南一,你可以快速掌握本地部署博客的方法. 完成本教程后,下一教程将会向您展示如何花费人民币1元的代价,购入属于自己的域名并与本教程中本地存在的Hexo博客关联.
安装前期环境
在运行Hexo之前,需要安装两个必备的工具Node.js和Git. 在Terminal中执行以下命令:
- 安装Node.js
$ sudo apt-get install nodejs
- 安装Git
$ sudo apt-get install git
安装Hexo
安装完Hexo运行所必备的两个组件后,接下来就可以安装Hexo啦
- 安装Hexo
$ sudo npm install hexo-cli -g
安装Hexo完成后可以使用
$ hexo -v
查看Hexo是否正确安装上
初始化Hexo环境
- 创建您想保存Hexo的文件夹(建议在主目录下新建
blog
文件夹,便于使用和管理所有blog)
$ mkdir blog
- 进入
blog
文件夹下
$ cd blog
- 初始化Hexo环境(此处叫
myblog1
,可自定义Hexo环境文件夹名,最好与域名相同,便于查找和管理)
~/blog$ hexo init myblog1
上述命令执行完成后,可发现/blog文件夹中,新出现了一个myblog1
文件夹
进入myblog1文件夹发现其文件结构如下:
其中
-
node_modules
: 依赖包 -
scaffolds
: 生成文章的模板 -
source
: 所有博客文章 -
themes
: 主题 -
_config.yml
: 博客的配置文件 -
db.json
: 解析source的到的文件 -
package.json
: Hexo及其依赖包的版本信息
本教程中使用的只有_config.yml
文件和source
, themes
文件夹
- 清空Hexo环境
$ hexo clean
- 生成Hexo静态文件
$ hexo generate
- 上传到本地虚拟服务器
$ hexo server
当命令行出现以下内容,恭喜你,您的博客已成功部署在本地虚拟服务器,点击链接http://localhost:4000/即可在浏览器中查看自己的博客
发布文章
- 在
myblog1
目录下使用hexo new post <博文名>
来创建新博文,例如:
$ hexo new post myfirstblogarticle
hexo new [layout] <title>
命令的layout参数有三种,分别为:
- post : 发布博文
- page : 发布新页面
- draft : 发布草稿
具体区别和更多关于Hexo博文的知识点可在Hexo官网的 帮助文档中查看
进入source
目录中的_posts
目录,新创建的myfirstblogarticle.md
博文被创建在此,格式为markdown,可在简书的markdown新手指南中了解书写博客的基本格式.
使用主题
博客的主题最能体现博主的风格,相信大家都很在意. Hexo初始化环境默认使用的皮肤为landscape,更多皮肤可以在Hexo官网的themes中挑选并拷贝到themes
文件夹中,本教程用hipaper主题作介绍
- 进入
themes
文件夹,用git将hipaper主题下载至文件夹内
$ git clone git@github.com:iTimeTraveler/hexo-theme-hipaper.git
如果不会使用Git,建议查看廖雪峰的Git教程
- 为使用主题的搜索功能,需安装
hexo-generator-json-content
工具
$ npm install -S hexo-generator-json-content
- 为hipaper主题配置tags, categories, about页面
由于hipaper主题默认只开启了archives(归档)功能,所以标签,分类,简介页面需要靠代码开启
$ hexo new page tags
$ hexo new page categories
$ hexo new page about
执行完毕进入source
文件夹,发现其中多了about
, categories
, tags
三个子文件夹,且都包含一个名为index.md
的文件,
,以/soucce/about/index.md
为例,分别将三个不同的index.md
文件中加入一行代码
原代码为:
---
title: about
date: xxxx-xx-xx xx:xx:xx
---
增加一行代码,改为:
---
title: about
date: xxxx-xx-xx xx:xx:xx
layout: about
---
tags
和categoroes
文件夹中的index.md
文件也作相应更改,layout参数值就是title参数值,至此,hipaper主题配置完成.