---
tags: hexo
---
# 用Hexo架設個人blog
Blog幾乎現代工程師必備的工具，優點：
1. 發布tutorial
2. 提供與其他Developer的交流
3. 記錄自己的學習

將日常學習整理成tutorial，除了避免日後自己忘記，能夠快速熟悉曾經的學習外，還能夠建立留言板與其他Developer交流，互相學習。也能幫助其他人快速上手相同性質的開發，類似Open source的概念，通過其回饋社會。甚至在面試時，能夠作為能力的證明!

# 環境建置
我們需要的環境如下：
1. Node.js (用於方便安裝Hexo)
2. git
3. Hexo-git
4. Hexo
5. github帳號

## Node.js
1. <a href='https://tw.alphacamp.co/blog/node-js-and-javascript'>認識Node.js</a>
2. <a href='https://nodejs.org/zh-tw/download/'>安裝Node.js</a>

## git
1. <a href='https://gitbook.tw/chapters/introduction/what-is-git.html'>認識git</a>
2. <a href='https://kknews.cc/zh-tw/code/n3e8l8g.html'>git與github的關係</a>
3. <a href='https://git-scm.com/downloads'>安裝git</a>
(如果原本有開著command line，安裝完git後需要重啟command line，環境變數才會寫入)

通過檢查版本，來驗證是否安裝成功

$ git --version

## Github
登入<a href='https://github.com/'>github</a>
找到右上角選單中Your repositaries (儲存庫)
新增一個Repository
命名為
> 你的帳號名稱 + .github.io
> 例： ~~xxxxx~~.github.io

看到這個畫面就是創建成功了喔!

## Hexo
Hexo是一個快速、簡單且高效的Blog框架，我們可以使用node.js快速布置它。
它可以使非web開發人員，須要自己的Blog時，省去很多時間，並專注於內容的編寫。
Hexo產生出來的Blog支援MarkDown語法，並可以建置在github空間上!實在非常方便。

<a href='https://hexo.io/zh-cn/'>中文API</a>

## 安裝Hexo-git

$ npm install hexo-deployer-git --save

## 安裝Hexo

$ npm install hexo-cli -g

通過檢查版本，來驗證是否安裝成功

$ npm install hexo version

# 實作
## 建構blog的架構

$ hexo init blog    #建構blog架構
$ cd blog           #進入剛剛hexo建構的資料夾中
$ npm install       #通過npm幫我們安裝、紀錄hexo建構的架構中 所需的套件

建構完成後，blog目錄結構如下：
> .
├── _config.yml
├── package.json
├── scaffolds
├── source
│ ├── _drafts
│ └── _posts
└── themes

延伸閱讀：<a href='https://ithelp.ithome.com.tw/articles/10191783'>npm install做了什麼</a>

### _config.yml
網站的<a href='https://hexo.io/zh-cn/docs/setup#config-yml'>設定</a>信息，可以在此設定大部分的參數。

### package.json
網站的資本資料、套件名稱紀錄。

package.json
{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "hexo": {
    "version": ""
  },
  "dependencies": {
    "hexo": "^3.8.0",
    "hexo-generator-archive": "^0.1.5",
    "hexo-generator-category": "^0.1.3",
    "hexo-generator-index": "^0.2.1",
    "hexo-generator-tag": "^0.2.0",
    "hexo-renderer-ejs": "^0.3.1",
    "hexo-renderer-stylus": "^0.3.3",
    "hexo-renderer-marked": "^0.3.2",
    "hexo-server": "^0.3.3"
  }
}

### scaffolds
<a href='https://hexo.io/zh-cn/docs/writing'>模版</a>文件夹。當發布新文章時，Hexo 會根據 scaffold 來建立文件。

### source
資源文件夾是存放用户資源的地方。除 _posts 文件夹之外，開頭命名為 _ (下滑線)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。

### themes
<a href='https://hexo.io/zh-cn/docs/themes'>主题</a> 文件夹。Hexo 會根据主題來生成静態頁面。

## 設定blog config
接著，我們需要發布我們的blog到Github repository!

在blog資料夾底下，可以發現一隻檔案名叫<b>config.yml</b>，OS為windows的朋友，可以用記事本開啟它。
在第一行，它告訴我們，它是一隻Hexo套件的設定檔，接著拉到檔案的最下方。可以找到：

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type:

將設定發布的這部分改為：

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
  repository: 你的github repository網址
  branch: master

<font color="#dd0000">注意!! 在每個設定項後面，<b>必須空一格</b>，例：type: git</font>
網址可以在這個介面中找到
編輯完設定檔後，我們就可以準備發布服務了喔!

## 本地端運行、發布服務
在發布服務之前，我們可以先透過hexo將網站伺服器建立起來，並先檢查有沒有錯誤。

$ hexo server

本地端server運行後，連上本地端，先看看發布後的結果。
> http://localhost:4000

$ hexo d -g

如果正常發布的話，會看到hexo-deployer-git要求登入喔
<br>
<font color="#dd0000">注意!! 如果在發布過程中遇到這個錯誤，請在執行一次安裝hexo-deployer-git的指令</font>

$ npm install hexo-deployer-git --save

## 檢查是否發布成功
在發布完成後，我們可以透過這串網址，造訪我們的blog。如下：
> https://~~caseLearner0718~~.github.io/

其中caseLearner0718代換入自己的github帳號，即可造訪自己的Blog。

## yml副檔名
yml、yaml附檔名屬於YAML資料格式，YAML是一個可讀性高，用來表達資料序列化的格式。YAML參考了其他多種語言，包括：C語言、Python、Perl，並從XML、電子郵件的資料格式（RFC 2822）並從中獲得靈感。。目前已經有數種程式語言或手稿語言支援（或者說解析）這種語言。

YAML是"YAML Ain't a Markup Language"（YAML不是一種標記語言）。在開發的這種語言時，YAML 的意思其實是："Yet Another Markup Language"（仍是一種標記語言），但為了強調這種語言以資料做為中心，而不是以標記語言為重點，而用反向縮略語重新命名。
以上資料來自<a href='https://zh.wikipedia.org/wiki/YAML'>YAML-維基百科</a>

# 發布文章

## 創建文章

$ hexo new [postName]

新增完後，在source/_post底下，會看到剛剛新創的檔案，將內容直接新增在裡面就可以了。

推薦MD編輯器：<a href='https://hackmd.io/?nav=overview'>HackMD</a>

## 刪除文章
在source/_post底下，會看到所有發布的文章，將文章直接刪除即可。

$ hexo clean    # 清除快取檔案和已產生的靜態檔案。
$ hexo g        # g = generate
$ hexo d        # d = deploy

# 參考資料
<a href='https://yaoandy107.github.io/hexo-tutorial/#more'>Hexo+GitHub，新手也可以快速建立部落格</a>
<a href='https://hexo.io/zh-cn/'>Hexo 官方文件(含API)</a>
<a href='https://blog.csdn.net/jiluben/article/details/40656935'>解决hexo博客的乱码问题</a>