為何要建立個人網站呢？當然純粹是~~因為這樣比較潮，~~為了有個地方能夠「分享生活中的觀察」以及「記錄個人所學及經歷」。所以需要類似部落格功能的網站，且又不想要使用現有的部落格平台 ~~(因為會和別人的都長一樣)~~，只好自己來建一個啦！

從計畫到執行一直到完成過了大概兩週（靠也太久了吧)…
上網找了許多方法，原本計畫使用 Jekyll，但是可能因為我的程式基礎太薄弱，不知道為何一直遇到環境上的 Bug，上網找不到解答、前端朋友也建議我直接換個方法重來…終於在中秋連假生出這個網站囉！回到正題：

如何使用 Hexo + Github Pages 建立個人部落格

這篇文章是給自己做記錄，也分享給和我一樣不太懂程式碼的朋友們。
以下的參考來源方法都大同小異，此文將以類似『懶人包』的方式記錄步驟，讓「懶得懂」以及像我一樣「一知半解」的朋友們可以快速建立個人部落格。

如果你是一位資訊人那可以直接參考以下資料來源實作：

零. 資料參考來源

除了資訊人以外的朋友們懶得看或看不懂沒關係，步驟從下正式開始：

一、找出你的終端機以及文字編輯器

終端機：用來使用『包括生成、建立、刪除、移動、上傳、下載、複製』等各種複雜的指令，Mac 使用者可以使用內建的終端機程式。~~我忘了說我用的是 Mac，Windows 的朋友慢走…。~~
而文字編輯器是用來編輯網站結構跟內容的，我使用的是 Sublime Text 2

二、先搞定 Github Pages

首先 Github Pages 是什麼呢？它是可以給用戶編寫、託管在 Github 上的靜態網頁 ~~(非資訊人用這個就很潮啊)~~。所以趕快去 Github 申請一個官方帳號吧！申請完畢之後按下登入，可以看到個人帳號頁面的右上角有一個 + 號，點下去後按 New repositary 建立新專案。如圖：

將專案名稱取名為 username.github.io 並按下最下方的 Create repository

username 就是指你自己的 Github帳號

恭喜你建立好 Github Pages 的專案了！接下來我們只要把網站所有程式碼丟到這專案裡面，你就可以在 http://username.github.io 看見你自己的網站囉！
（沒錯 Github Pages的預先設置就是這麼簡單）

三、搞定 Hexo 所需環境

而 Hexo 又是什麼呢？~~有點抽象我也不知怎麼解釋~~，就把它當作一種部落格網站框架吧！透過 Hexo 的指令，可以直接幫助我們生成網站及發布文章。支援 Markdown 語法（一種網路內容的寫作語言，讓你可以易讀易寫）。

而 Hexo 需要安裝以下系統環境來支援：

Node.js
Git
Xcode ( Mac用戶必須安裝 )

~~解釋以上三樣東西實在太麻煩了直接略過~~，裝好之後我們可以開啟我們的終端機 Terminal，並輸入以下指令安裝 Hexo：
$ npm install -g hexo-cli

安裝完之後我們便可以來建立網站了！

四、使用 Hexo 建立網站

接著開啟我們的終端機 Terminal ，依序使用以下指令：
$ hexo init yourname ( 意思就是產生一個叫做 yourname 的 hexo網站 )
$ cd yourname ( 移動到 yourname 的資料夾裡 )
$ npm install ( 安裝這個網站 )

yourname 就是指在電腦裡的檔案名稱，可以隨意取，例如「hexoproject」。

接著用文字編輯器 ~~(別跟我說你忘記這是什麼了)~~ 打開 yourname 資料夾中的 /_config.yml ，如果你找不到的話路徑應該會預設是 user/yourname/_config.yml。

開啟後先看到最上面

title: Sean.Life
subtitle: Sean.Life
description: This is Sean's personal blog for sharing his life.
author: Sean Huang
language: zh-tw
timezone:

這六點都是可以更改的個人資訊，趕快把網站名跟作者名稱等資訊打入吧！

接著可以直接滾輪到最下面或使用「搜尋」找出 deploy:

deploy:
   type: git
   repo: https://github.com/username/username.github.io.git
   branch: master

username 就是指你自己的github帳號，記得改對，然後按存檔。

然後再次回到你的終端機，並確立現在指令列是否在你的 yourname 資料夾
如果沒有的話先使用 cd 移動到 yourname 資料夾
$ cd yourname

並依序輸入以下指令：
$ hexo clean
$ hexo g
$ hexo d

這三個指令就是幫我們把網站自動生成並發佈到 http://username.github.io 上的指令，完成後應該就可以打開瀏覽器看看自己網站發布成功的樣子囉！

五、建立視覺化後台並PO文！！

網站成功上線後我們來試試看po文吧！
由於 Hexo 沒有內建的視覺化顯示後台，所以可以先安裝 Hey Hexo 作為外掛插件 ( 個人覺得這插件不會自動存檔~~很靠北，讓我的第一篇文差點葛屁~~，但目前還沒找到更好的方法 ) 。安裝步驟如下：
一樣打開你的終端機，確立是否在你的 yourname 資料夾，不然的話一樣先使用
$ cd yourname
然後安裝 Hey Hexo
$ npm install hexo-hey --save
接著打開文字編輯器，開啟 _config.yml，並滑到最下面新增下列幾行：

# Admin
admin:
    name: hexo
    password: hey
    secret: hey hexo
    expire: 60*1
    # cors: http://localhost:3000

這裡的 hexo 及 hey 分別為之後登入後台輸入的帳號跟密碼

按下存檔之後，接著我們可以來po文囉！先讓我們啟動本機端的伺服器
$ hexo server

開啟網頁並輸入 http://localhost:4000/admin 進入後台，接著輸入帳密！登登！就會看到像下面這樣子的視覺化後台囉！按下 NEW POST 便可以新增文章了！

如果你對 Markdown 的語法還不熟，可以一邊打一邊試試看各種標籤，這個後台的好處就是會即時顯示內容！不過切記切記，因為它不會自動儲存，打了一小段後就要記得定時存檔 (可以存成草稿就好)，等文章打完後再按下 PUBLISH 就大功告成啦！可以直接在本機端 http://localhost:4000/ 看看是否成功！

一開始可以先隨便打個abcd1234或是test測試就好！

接著我們要把本機端有修改的內容正式發佈到網站上，再次回到你的終端機並依序使用以下指令：
$ hexo generate
$ hexo deploy

沒錯，這兩個指令是每次發佈文章到網站上去都會使用到，可以使用縮寫
$ hexo g
$ hexo d

大功告成！趕快到自己的網站上 http://username.github.io 去看看吧！

六、挑選主題並採用

這時你一定會跟我說怎麼部落格…看起來這麼土，那是當然的，你還沒挑選你的主題呢！這時候你可以去 Hexo 官方主題樣式挑選，或是很沒品的學我用 NexT 這個主題。

每個主題的安裝方式或許略有不同，不過大致上都是以下步驟：

下載主題很簡單，開啟終端機，然後確立是否在 yourname 的資料夾，不然一樣使用指令cd移動到 yourname：
$ cd yourname

接著將你要的主題 git clone下來就完成下載囉！
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

什麼是 Git ? 只要記得我們有安裝這個系統就好！真的想知道請點這
至於後面那串網址就是每個 hexo主題放在 github 上給人下載用的網址囉！
開啟主題

所有 Hexo 主題啟用的方式都一樣。當下載完成後，用文字編輯器打開_config.yml，找到theme字段，並將值更改為主題名稱。
1
theme: next
next 是我使用的主題名稱，而 hexo 預設的主題名稱為 landscape
建立分類頁面、標籤頁面及關於頁面 ( 這個步驟是看個人需求 )：

Hexo 大部分的主題都只內建了首頁以及歸檔頁面，如果要建立分類、標籤和關於等頁面就得手動輸入一下指令產生。

可參考下列三個網址：
建立分類頁面
 建立標籤頁面
 建立關於頁面

分類及標籤頁面建好之後，只要開啟文字編輯器在文章本身的 Markdown 檔案之中加入不同的名稱分類或標籤，Hexo 就會幫我們在這兩個頁面直接生成此名稱的分類或標籤囉！

文章路徑應該為： /yourname資料夾/source/_posts/文章名稱.md

譬如這篇文章的分類及標籤就長這樣：
1
2
3
4
5
6
7
title: 使用 Hexo + Github Pages 建立個人部落格
tags:
- web
- blog
- life
categories:
- Skill
至於關於頁面，也是直接使用文字編輯器開啟關於頁面的 Markdown 檔案直接編寫就行囉！建議可以使用我們的 Hexo Hey 後台或是其他的 Markdown 編輯器 (例如 Mou ) 來編寫，這樣才可以體驗即時顯示的寫作感！

關於頁面的路徑應該為： /yourname資料夾/source/about/index.md

這樣就大功告成囉！一起架起自己的個人網站吧！

後記

做任何事都要有目標地做，花了很多時間架網站，並且花更多時間的寫部落格，究竟是為了什麼呢？或許可以開啟另一篇文章來討論 : 《為什麼要寫部落格？》

其實過程是非常有趣的，如果你有仔細閱讀這篇文章並實作，有沒有發現 Hexo 本身其實是一個非常中國人的框架呢？而在架這個網站的同時，我發現了許多中國人蠻夯的軟體：令我最印象深刻的是簡書，它可以讓人人都可以發布新的文章在上面，有點類似國外很夯的 Medium，是動態部落格的概念，而中國人的文件產生速度實在非常驚人，幾乎什麼樣的硬知識都可以在簡書上面找到高手寫的文章，~~讓我們英文不用太好~~就可以查到很多實用的知識，實在可怕啊！

然後其實還有許多該寫下來分享給大家的東西，像是解釋每個名詞、解釋網站生成的原因、如何購買並更改自己喜歡的網域名稱、如何將網站安全性升級https認證、如何串接第三方評論、第三方數據追蹤等第三方軟體或服務等等，~~但我實在太過懶惰而且解釋得可能還會有錯~~，由於我自己可能都還沒完成或是搞懂，所以如果這篇文章沒提到，還請有興趣的朋友們就自己參考我後續慢慢貼在這的資料來源以及上網 Google 囉！