使用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