Github Pages With Hexo

發表於 更新於 分類於 Disqus： 文章字數： 2.1k 所需閱讀時間 ≈ 4 分鐘

Hexo 教學建立自己 Blog

建立自己的 Blog

首先在你想要放置 Blog 專案的地方建立資料夾，其資料夾名稱就是你的 Blog 想要的名稱，再來將終端機路徑移到該 Blog 路徑下，並進行 Hexo 初始化。

1
hexo init

接著利用 npm 安裝相關 hexo 套件。

1
npm install

這時候，其實已經完成本地端伺服器的架設了。利用以下指令即可開啟 server。

1
hexo s

你會看到網址是 localhost:4000，但是你打開來會發現一片空白，這就是我第一次遇到雷，沒有像其他網路上說的馬上就會看到預設網頁樣式 QQ


為什麼呢？這時候看一下終端機，應該會寫 miss index.html 等的錯誤訊息。這是因為似乎 hexo init 的時候裡面有預設樣式，但少了這個檔案。


我的建議是現在選擇一個樣式！

選擇網站樣式

那當然網路上最多人吹捧的就是 "next" 這個主題。


以下是他的 github 網址:https://github.com/theme-next/hexo-theme-next


當然你也可以選擇你想要的，但我就拿這個示範。那麼要怎麼裝樣式呢，在我們的 local 端的 Blog 資料夾裡面有一個 "themes" 資料夾，這就是樣式所存放的位置。


裡面會有預設的 landscape，那個可以爽快刪掉了！，接著再 themes 資料夾路徑下指令

1
git clone https://github.com/theme-next/hexo-theme-next next

就會建立一個 next 資料夾，裡面存放的就是該樣式！

接著先了解目前 Blog 的專案結構

_config.yml

在資料夾上可以看到該檔案，他是專案的設定檔

source

這個資料夾是用來放發文的內容，檔案皆為 Markdown 的形式，沒錯，這個的 Blog 是不用 database，而是用檔案管理的方式。

theme

這個資料夾剛才說了，就是用來放置網站的樣式。

設定_config.yml

裡面可以看到

1
2
3
4
5
6
7
title: <title>
subtitle: <subtitle>
description: <description> 
keywords: <keywords>
author: <author>
language: zh-TW
timezone: Asia/Taipei

這邊可以設定一些基本資訊，那像是最下面的語言跟時區可以跟我設的一樣，這字面的含意就不特別解釋了，可以自己去體會。

作者資訊設定

這邊我們可以設定作者的大頭貼，在 themes/next 這個資料夾中找到_config.yml 的設定檔，這代表是樣式的設定檔，接下來複製你要的大頭貼放置路徑在 source/uploads/image，並且我們可以命名為 avatar.jpg。

接著在 Blog 的_config.yml 中，設定如下

1
2
avatar:
	url: /uploads/images/avatar.jpg

部署到 Github-Pages

OK~ 終於完成了，接下來我們可以 deploy 到 github 上，首先先到 Github 上，建立一個新的 Repository，取名為剛剛建立的 blog 名稱，並在後面添加.github.io。接著進入該 Repository 的 setting 裡面，最下面有一個 GitHub Pages 的設定在 Source 那邊設定為 Master 的 branch。

安裝 hexo git deploy 套件

因為我們是透過 Github 去部署的，所以要先安裝一個套件

1
npm install hexo-deployer-git

開始 deploy

安裝完後，在 Bloglog 上的_config.yml 中添加以下設定

1
2
3
4
deploy:
  type: git
  repo: https://github.com/<username>/<repositoryName>.git
  branch: master

type 就是 git 形式，repo 就是 Blog 所處在的位置，branch 就是要 deploy 到哪個分支。

接著在 url 地方做設定

1
2
url: https://<username>.github.io
root: /<repositoryName>

url 就是你的 Github 網址，root 就是你的 blog 的位置，這個設定就是我踩到的第二個雷，務必按照這樣去設定，否則當你 deploy 上去後，會發現沒有網站樣式，就會搞到很賭爛！！

當前面都設定好後，使用終端機輸入以下指令 deploy

1
hexo deploy

完成後，去 Github 上找 blog 的 repository 的 setting 裡面的 Github Page 那邊就可以看到她說網頁位置在哪，點開就是囉！

關於如何發文、以及細節的雷，等待下一篇文囉。

以上為採雷全過程。真是機掰。

最後最後！請聽我一言！

如果你還沒有註冊 Like Coin，你可以在文章最下方看到 Like 的按鈕，點下去後即可申請帳號，透過申請帳號後可以幫我的文章按下 Like，而 Like 最多可以點五次，而你不用付出任何一塊錢，就能給我寫這篇文章的最大的回饋！