Node.js + hexo + Github 快速建立部落格

為了即將轉職為前端工程師的我，好紀錄一些學習上的心得，所以想當然爾自然是要學習開個部落格來玩玩囉(其實是自己的一個執念，身為前端工程師怎麼可以不會建部落格XD)。

所以在這邊紀錄一下建立這個部落格的過程。

系統環境

• Windows 10

安裝所需的工具

1. Node.js
2. Git
3. Hexo

安裝Node.js

首先到Node.js官網下載並安裝node.js，下載建議的版本(下圖綠色格子左方)

打開”命令提示字元”輸入node -v及npm -v會顯示版本號，代表安裝成功

npm（全稱 Node Package Manager，即「node包管理器」）是Node.js預設的、以JavaScript編寫的軟體套件管理系統。

安裝Git

安裝Git點我，進入後會自動下載安裝程式，基本上只要一直Next就可以了，只是到以下畫面時我是選擇第二個選項(使用Windows命令提示字元)。

安裝完成後，打開”命令提示字元”輸入”git –version”會顯示版本號，代表安裝成功

安裝Hexo

安裝Hexo 可以參考Hexo官網。
打開”命令提示字元”輸入”npm install -g hexo-cli”，當完成安裝後，你也可以執行”hexo -v”，會列出一些套件的版本號，至此也就代表安裝成功。
欲建立hexo需先建立專案資料夾，如本專案欲建立在本機D:\myblog下，可以按以下步驟執行

cd /d d:\ 			//移動到D槽
mkdir myblog 			//建立資料夾myblog
cd myblog			//移動到myblog

此時終端機上所在的位置應為”D:\myblog”，接下來輸入

hexo init			//建立hexo相關檔案

npm install			//安裝hexo 相關套件

至此hexo已經建置完成，接下來可以輸入以下指令查看網站建置是否完成

hexo g 				//產生靜態檔案，就是把網站相關文件都產生出來

hexo s 				//啟動web server，此時可以打開瀏覽器查看localhost:4000

Github

註冊Github帳號

前往Github官網註冊一個帳號並登入

建立儲存庫(repositores)

建立一個新的儲存庫，依序輸入如圖例，repositores name必須輸入”帳號.github.io”，每個github帳號只會有一個

佈署網站

在存放網站資料夾內找到”_config.yml”(網站相關設定的文件)，並找到deploy設定，將文件設定如下

deploy:
  type: git
  repository: http://github.com/username/username.github.io.git        //username替換成你的
  branch: master

之後在”命令提示字元”於專案路徑下，輸入以下

hexo clean			//清除緩存檔案
hexo g				  //建立靜態網站
hexo d 				  //將網站佈署到github

之後打開瀏覽器輸入”username.github.io”，就出現你的網站啦