---
# System prepended metadata
title: 用Hexo架設個人blog
tags: [hexo]
---
---
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. 認識Node.js
2. 安裝Node.js
## git
1. 認識git
2. git與github的關係
3. 安裝git
(如果原本有開著command line，安裝完git後需要重啟command line，環境變數才會寫入)
通過檢查版本，來驗證是否安裝成功
```
$ git --version
```
## Github
登入github
找到右上角選單中Your repositaries (儲存庫)
新增一個Repository
命名為
> 你的帳號名稱 + .github.io
> 例： ~~xxxxx~~.github.io
看到這個畫面就是創建成功了喔!
## Hexo
Hexo是一個快速、簡單且高效的Blog框架，我們可以使用node.js快速布置它。
它可以使非web開發人員，須要自己的Blog時，省去很多時間，並專注於內容的編寫。
Hexo產生出來的Blog支援MarkDown語法，並可以建置在github空間上!實在非常方便。
中文API
## 安裝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
延伸閱讀：npm install做了什麼
### _config.yml
網站的設定信息，可以在此設定大部分的參數。
### 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
模版文件夹。當發布新文章時，Hexo 會根據 scaffold 來建立文件。
### source
資源文件夾是存放用户資源的地方。除 _posts 文件夹之外，開頭命名為 _ (下滑線)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。
### themes
主题 文件夹。Hexo 會根据主題來生成静態頁面。
## 設定blog config
接著，我們需要發布我們的blog到Github repository!
在blog資料夾底下，可以發現一隻檔案名叫config.yml，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
```
注意!! 在每個設定項後面，必須空一格，例：type: git
網址可以在這個介面中找到
編輯完設定檔後，我們就可以準備發布服務了喔!
## 本地端運行、發布服務
在發布服務之前，我們可以先透過hexo將網站伺服器建立起來，並先檢查有沒有錯誤。
```
$ hexo server
```
本地端server運行後，連上本地端，先看看發布後的結果。
> http://localhost:4000
```
$ hexo d -g
```
如果正常發布的話，會看到hexo-deployer-git要求登入喔
注意!! 如果在發布過程中遇到這個錯誤，請在執行一次安裝hexo-deployer-git的指令
```
$ 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"（仍是一種標記語言），但為了強調這種語言以資料做為中心，而不是以標記語言為重點，而用反向縮略語重新命名。
以上資料來自YAML-維基百科
# 發布文章
## 創建文章
```
$ hexo new [postName]
```
新增完後，在source/_post底下，會看到剛剛新創的檔案，將內容直接新增在裡面就可以了。
推薦MD編輯器：HackMD
## 刪除文章
在source/_post底下，會看到所有發布的文章，將文章直接刪除即可。
```
$ hexo clean # 清除快取檔案和已產生的靜態檔案。
$ hexo g # g = generate
$ hexo d # d = deploy
```
# 參考資料
Hexo+GitHub，新手也可以快速建立部落格
Hexo 官方文件(含API)
解决hexo博客的乱码问题