前一陣子想建立一個自己的網誌，而且想用新的方法，而不是架設wordpress之類的系統，所以嘗試使用流行的hexo來架設。

本文將以Windows的環境，使用Hexo + Gitpages來架設網誌。

Hexo?

快速、簡單且強大的網誌框架

  • 以makedown寫文章
  • 以命令列方式操作
  • 快速佈署至GitPages

安裝Hexo

hexo由node.js編寫而成，可以使用npm或者yarn來安裝，本文以yarn舉例。

安裝yarn

安裝yran之前需先安裝Chocolatey，輸入以下指令安裝 

Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

接著安裝yarn 

$ choco install yarn

再來安裝hexo 

$ yarn global add hexo

安裝完成後，可以建立一個hexo的網誌

$ hexo init blog

hexo本身有提供server，在blog目錄下啟動終端機並輸入

$ hexo server

完成後瀏覽localhost:4000 就可以看到建立好的網誌了

hexo的目錄結構

blog/
_config.yml            -> hexo的主設定檔
package.json           -> 相依套件列表
node_modules/          -> 相依套件
public/                -> 生成的靜態網站檔案
source/
    _posts               -> 文章資料夾
    hello-world.md     -> 文章
themes/                -> 主題面
    landscape/
    _config.yml        -> 主題設定檔
scaffolds/
    draft.md
    page.md
    post.md

設定檔

Hexo設定檔

  • 網誌名稱 - title、網誌的作者、網誌描述、時區、時間格式等
  • 語法高亮(highlight)
  • 語系設定
  • 是否產生assets資料夾
  • 主題設定
  • 主題設定檔

主題設定檔依照不同的主題有所不同，大致可以設定:

  • 作者頭貼、網站圖標
  • 社群網站連結
  • 導航管理
  • 其他客製化選項
  • disqus等留言外掛(部分主題有)

更換網誌主題

我選擇使用polarbear 這個主題，主要是非常的簡潔也非常容易設定，也包含了回覆留言的插件。

以git安裝主題
$ git clone https://github.com/frostfan/hexo-theme-polarbear themes/polarbear

如果看過主題官方文件，你會發現他還要安裝另外一個東西，這是用來編譯裡面的sass樣式檔，將其編譯為CSS，但並不是每個主題都需要。

$ npm install hexo-renderer-scss --save

並修改_config.yml網站設定檔，將主題設定為polarbear
theme: polarbear

這樣就完成主題的套用，如果要在本地server看到記得重新啟動server。

關於其他主題的設定與使用，請參考官方文件說明。

建立網誌頁面

建立about頁面

$ hexo new page "about"

編輯主題設定檔的menu部分，預設有about就無須理會，如果沒有就加入至選單當中

menu:
    首頁: /
    歸檔: /archives
    Tags: /tags
    關於: /about

建立後，會以source/頁面名稱/index.md來建立檔案，若要更改葉面內容修改目錄中的index.md即可。

這是我的about頁面的md檔案內容

---
title: 關於
date: 2018-10-13 15:03:44
---

# 長也實驗室
> 長也實驗室是一個發無聊東西的地方
> 可能包含了PHP、notes-hz.com的開發日記、一些有關程式的東西

# 長也 - 年少無為
## 程式技能
* 比較常用：PHP、Java、HTML/CSS
* 只會基本：C#、C
* 學習ING：JavaScript、python

## 閱讀書目
### 程式相關
* Dreamweaver 與 PHP + Mysql + jQuery Mobile互動式網站程式設計（ 林梓涵, 謝雨辰　著）
* 資料結構－使用JAVA (  蔡明志   著    )
* JAVA程式設計藝術    (   張子庭   著    )
* JavaScript 網頁程式設計超入門（　狩野祐東  著 ,  陳禹豪  譯 　）
* 現代PHP （Josh Lockhart 著、張正豪 譯）

### 其他
* 我死過，所以知道怎麼活  - 與死神相遇的11分鐘（  鐘灼輝  著  ）

## 興趣
* 網頁、程式
* 棒球與排球（雖然都打一下就沒了也很弱、慢跑
* 底特律：變人、惡靈古堡、刺客教條、osu!

* Angel Beats!、驚爆遊戲、鑽石王牌、王牌投手、排球少年、坂道上的阿波羅、3月的獅子、青之驅魔師、花牌情緣、博多豚骨拉麵團、學園奶爸……

* 機車路權

* 你的孩子不是你的孩子、他們在畢業的前一天爆炸

結果在這裡：https://nnwa1689.github.io/about/

建立一篇文章

預設已經有helloWorld文章，再新增一篇我們自己的

設定

新增以前，可以將網站設定檔中的post_asset_folder改為true，每次在建立文章時都會建立一個資料夾，可以用來存放圖片等

post_asset_folder: true

新增一篇名為長也實驗室開張的文章
$ hexo new post 長也實驗室開張

新增完成的文章會被放在source/_posts/中，一樣是.md檔；若有開啟自動建立資料夾也會同時建立一個與文章相同名稱的資料夾。

插入圖片

插入圖片的格式 

{% asset_img [image-name] %}
{% asset_img [image-name] [title] %}

記得先將圖片丟入與文章同名的資料夾，例如要插入名為im.jpg的圖片，將im.jpg放入同名資料夾後，編輯md檔

{% asset_img im.jpg %}

佈署至GitPages

佈署方式不只一種，我以目前很常見的Github Page來示範

建立專案

先建立一個Github專案，名稱為username.github.io。例如說我的帳號叫做nnwa1689，那我就創建一個nnwa1689.github.io的專案。(因為我已經建立過了所以會被報錯)

安裝git佈署套件

$ yarn add hexo-deployer-git

修改網站設定檔

找到deploy的部分，修改為:

deploy:
    type: git
    repo: https://github.com/<你的帳號>/<專案名稱>
    branch: <分支，通常是master>

最後以指令部署

$ hexo deploy

接著訪問剛剛建立好的yourname.github.io看看吧

其他

文章預覽

我建議在文章內以標記來決定文章預覽的長度

預覽看得到我
<!--more-->
預覽看不到我

Hexo指令一覽

$ hexo init
$ hexo clean
$ hexo generate
$ hexo new post

本文章同步發於筆記長也:https://www.notes-hz.com/blog?id=183