使用Hexo搭建个人博客网站

Step 1. 创建 Github Pages

• 在github新建一个repo，并命名为username.github.io
• setting中选择主题
• 即可使用https://username.github.io访问到主页

Step 2. Hexo 环境搭建

Hexo是基于nodehs的快速、简洁且高效的博客框架。

推荐教程：

• hexo官方文档: https://hexo.io/docs/index.html 说的非常详细
• 极客学院：http://wiki.jikexueyuan.com/project/hexo-document/

2.1 安装Node.js

1. 网站deb.nodesource.com维护了nodejs的各版本安装包的PPA，我们可以从该网站上下载执行导入。

    $ curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash 
   

2. 接下来安装nodejs，安装完成之后npm也自动安装好了。

    $ sudo apt-get install nodejs
   

3. 安装完成之后我们查看一下$ node -v和 $ npm -v的版本。

2.2 使用npm安装Hexo

npm是Node.js安装时自带的类库,是目前全球最大的类库之一,通过npm install可以直接安装基于Node.js的所有插件

$ npm install hexo-cli -g 

Step 3. 创建及启动网站

1. 创建一个网站的目录，此处命名为blog

2. 通过blog目录创建站点

    $ hexo init blog
   

3. 进入blog 安装插件支持

    ~/blog$ npm install
   

4. 启动站点

    ~/blog$ hexo server
   

   或使用--denug开启调试

    ~/blog$ hexo s --debug 
   

5. 查看站点: 在浏览器中查看http://localhost:4000/

Step 4. 部署到 Github

4.1 配置Github

~/blog$  vim _config.yml

修改deploy下

# 这里冒号后面一定要有空格
deploy:
    type: git
    repo: https://github.com/username/username.github.io

4.2 部署到Github

1. 安装部署插件

    ~/blog$ npm install hexo-deployer-git --save
   

2. 清理项目(optional)

    ~/blog$ hexo clean
   

3. 部署

    ~/blog$ hexo deploy
   

Step 4. 更改博客主题

1. 进入( https://hexo.io/themes/ )选择主题，进入相应的repo。 此处以bootstrap-blog为例。

   ~/blog$ git clone https://github.com/cgmartin/hexo-theme-bootstrap-blog.git themes/bootstrap-blog
   

2. 根据README中的setup Instructions安装插件

    ~/blog$ npm install hexo-tag-bootstrap --save
   

3. 修改blog根目录的_config.yml,将theme修改为bootstrap-blog

4. 更新并查看，先清空缓存hexo clean，然后启动服务器hexo s --debug，在本地浏览器输入localhost:4000/查看效果。

Step 5. 创建文章

$ hexo new "blog"
INFO  Created: ~/blog/source/_posts/blog.md

编辑md

---
title: blog1
date: 2018-03-16 15:28:40
tags: tag1
categories: cat1
---

MY FIRST BLOG!  // 这里是要展示的缩略图
<!--more--> // 以下是查看全文

清理后启动 本地查看预览

$ hexo s --debug

5.1 创建一个新的标签页

$ hexo new page "github"
INFO  Created: ~/blog/source/github/index.md

修改配置文件 themes/主题名称/_config.yml,增加一个menu中一个页面菜单。

hexo 参考教程: https://www.cgmartin.com/2016/01/03/getting-started-with-hexo-blog/

主题：https://github.com/cgmartin/hexo-theme-bootstrap-blog