搭建个人博客是每个程序员成长的必经之路，不但可以记录与分享自己在学习过程中Get到的新技能、新知识，还能顺便提高一下自己的文采。

Hexo简介

Hexo是一款基于Node.js的静态博客框架，可方便快捷的托管于GitHub上，是搭建博客的首选框架。

根据Hexo官网介绍，主要有以下四大优点：

  • 超快速度： Node.js 所带来的超快生成速度，让上百个页面在几秒内瞬间完成渲染。
  • 支持 Markdown：Hexo 支持 GitHub Flavored Markdown 的所有功能，甚至可以整合 Octopress 的大多数插件。
  • 一键部署：只需一条指令即可部署到 GitHub Pages, Heroku 或其他平台。
  • 插件和可扩展性：强大的 API 带来无限的可能，与数种模板引擎（EJS，Pug，Nunjucks）和工具（Babel，PostCSS，Less/Sass）轻易集成

Hexo搭建步骤

安装Git

Git是目前世界上最先进的分布式版本控制系统，可以有效、高速的处理从很小到非常大的项目版本管理。无论是个人代码管理还是团队合作开发中，学会git那都是百利而无一害的。如果对git还不是很了解，推荐去廖雪峰老师的博客或者先看一下Git Book的前三章。

1
2
3
4
5
# 安装命令
$ sudo apt-get install git

# 查看版本
$ git --version

安装Node.js

Hexo是基于Node.js环境运行的，所以需要安装Node环境及npm包管理工具。

1
2
3
4
5
6
7
8
9
10
11
# node安装命令
$ sudo apt-get install nodejs

# 查看node版本
$ node -v

# npm安装命令
$ sudo apt-get install npm

# 查看npm版本
$ npm -v

安装Hexo

1
2
3
4
5
6
7
8
9
10
11
# 利用npm全局安装hexo脚手架
$ npm install -g hexo-cli

# 查看hexo版本
$ hexo -v

# 删除hexo
$ npm uninstall -g hexo-cli

# 查看npm全局版本
$ npm ls -g --depth=0

创建博客项目

到此为止，装好了node环境以及hexo框架，基本上前期的环境配置就完成了，接下来就可以创建自己的博客项目了。

1
2
3
4
5
6
7
8
# 新建一个文件夹，如名为blog
$ mkdir blog

# 进入blog文件夹
$ cd blog

# 初始化hexo
$ hexo init

初始化成功后，blog文件夹下会出现如下文件：

  • _config.yml: 博客的核心配置文件（设置主体、标题等属性）
  • package.json：项目所需的依赖包
  • source：用来存放你的文章
  • themes：放下下载的主题
  • public：存放生成的页面
  • scaffolds：生成文章的一些模板
1
2
# 安装所需依赖
$ npm install

安装成功后，会出现node_modules文件夹，文件夹内即安装的package.json内所有依赖包。接下来就可以配置并启动hexo了

1
2
3
4
5
6
7
8
9
10
11
# 清除缓存文件 (db.json) 和已生成的静态文件 (public)
$ hexo clean

# 生成静态文件，generate
$ hexo g

# 部署博客网站，deploy
$ hexo d

# 启动服务器，server
$ hexo s -g

运行成功后，浏览器打开http://localhost:4000便可看到你的hexo博客项目了，除了主题有点儿吃藕，还是挺不错的~

将Hexo部署到GitHub

这一步，我们就可以将hexo和GitHub关联起来，也就是将hexo生成的文章部署到GitHub上，打开站点配置文件_config.yml，翻到最后，修改为下面这样，其中LeeDebug改为你的GitHub账户名

1
2
3
4
deploy:
  type: git
  repo: git@github.com:LeeDebug/LeeDebug.github.io.git
  branch: master

这个时候需要先安装deploy-git，也就是部署的命令,这样你才能用命令部署到GitHub。

1
$ npm install hexo-deployer-git --save

部署项目

1
2
3
$ hexo clean
$ hexo g
$ hexo d

部署成功后，浏览器打开http://LeeDebug.github.io，就能看到你的博客了

安装主题

首先下载主题包，如butterfly

1
npm i hexo-theme-butterfly

配置_config.yml文件

1
theme: butterfly

新建文章

首先修改/scaffolds/post.md文件模板，改为想要的形式，比如

1
2
3
4
5
6
7
8
9
10
11
---
title: {{ title }}
tags:
- Hexo
categorier:
- Hexo
keywords: "Hexo,笔记"
date: {{ date }}
description: "描述"
cover: https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg.png
---

利用post模板新建文章

1
hexo new post 文章标题

随后在source/_posts/文件夹下会出现文章标题的文件夹和文章标题.md的MarkDown文件，文章内容在*.md文件内编辑即可

新增分类页

1
hexo new page categories

将/source/categories/index.md/这个文件改为以下内容

1
2
3
4
5
---
title: 分类
date: 2018-01-05 00:00:00
type: "categories"
---

新增标签页

1
hexo new page tags

将/source/tags/index.md/这个文件改为以下内容

1
2
3
4
5
---
title: 标签
date: 2018-01-05 00:00:00
type: "tags"
---

祝君无Bug~