因為想做學習筆記, 經過一些評估後,
決定透過 Github + Hexo 的方式架設個人部落格; 這個方案雖然有幾點限制:

GitHub Pages source repositories have a recommended limit of 1GB.
Published GitHub Pages sites may be no larger than 1 GB.
GitHub Pages sites have a soft limit of 10 builds per hour.
GitHub Pages sites have a soft bandwidth limit of 100GB per month.

總結來說, 網站的上限不能超過 1GB, 一個小時內的網站更新不得高於 10 次以及每月流量不能大於 100GB! 但對於記錄學習筆記, 瑕不掩瑜!

一、前言

使用 Github 的靜態網頁服務架設個人的 BLOG, 從本地端運行的 Hexo 後台服務編輯文章; 等到離線編輯完成後, 再佈署上去即可 (如本站: https://blavince.github.io).

免費、可離線編輯文章和佈署方便的特性是選擇這個解決方案的主因.

二、總覽

申請 Github 帳號, 創建 repository, 設定 GitHub Pages.
安裝軟體: Git、Node.js
部署本地資料夾 (用來放整個網站的資料)
本地編輯文章.
部署到 Github 上.

三、實現

這裡是 Windows 10 環境的實現.

申請 Github 帳號, 創建 repository, 設定 GitHub Pages.
1.1. 建立 GitHub repository, Repository name 填入: blavince.github.io , Create repository.

1.2. 接著到 repository 的 Settings 頁面並往下滑找到「GitHub Pages」點一下「Choose a theme」然後隨便選一個就好. (後續 Hexo 佈署後會蓋掉.)
安裝軟體: Git 及 Node.js, 安裝完 Node.js 後就會自帶 npm, 輸入以下指令安裝 Hexo:
1
npm install -g hexo-cli #安裝 Hexo

部署本地資料夾 (用來放整個網站的資料), 這裡指定 E: 底下

e:
hexo init blavince  #初始化新的 Hexo
cd blavince         
npm install         #安裝 Hexo
npm install hexo-deployer-git --save  #安裝 git 部署套件
npm install hexo-admin --save  #安裝 hexo-admin 文章管理的後台插件

完成安裝後, 打開 _config.yml, 修改第 6~12 行資訊,

title:   #輸入部落格標題
subtitle:  #輸入副標題
description:  #輸入網站描述 
keywords:  #輸入網站關鍵字(以逗號隔開)，方便 SEO 
author:   #輸入姓名或暱稱
language: zh-TW  #輸入您所使用的語言
timezone:  #留空以使用系統時間

接著第 16 行的地方，url 換成自己網站的連結 https://blavince.github.io/,

1	url: https://blavince.github.io/

最後找到文件的底部修改,

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

到此完成本地資料夾部署了!

本地編輯文章
第一件事就是先在本地驗證是否部署正確,
1
2
hexo cl #清除之前建立的靜態檔案，也可以輸入 hexo clean
hexo g #建立靜態檔案，也可以輸入 hexo generate
然後輸入:
1
hexo s #架設本地端伺服器，也可以輸入 hexo server
在瀏覽器輸入 http://localhost:4000 就能看到該部落格,
網址尾端加入 /admin (例如 http://localhost:4000/admin )就能進入後台開始編輯文章.

四、個人化修改

很多客製化功能在網路上都可以找得到, 在此列出我自己的修改:

套用主題 NexT:

1 2	cd blavince git clone https://github.com/next-theme/hexo-theme-next themes/next

將根目錄 /blavince/_config.yml 下的 theme 從預設的 landscape 改成 next:

1	theme: next

再將 /blavince/themes/next/_config.yml 下的 theme 修改成:

# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

最後修改,

codeblock:
  # Code Highlight theme
  # See: https://github.com/highlightjs/highlight.js/tree/master/src/styles
  theme:
    light: dark
    dark: default

修改頭像(avatar)及 sidebar
修改 /blavince/themes/next/_config.yml 下的

sidebar:
  # Sidebar Position.
  #position: left
  position: right

將它固定在右側, 然後在 \blavince\themes\next\source\images\avatar.jpg 底下放入頭像照, 並修改路徑

# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: /images/avatar.jpg

然後啟用和修改 social 的連結:

social:
  GitHub: https://www.github.com || fab fa-github
  #E-Mail: mailto:blanc131@gmail.com || fa fa-envelope
  Google: https://www.google.com/ || fab fa-google
  #Weibo: https://weibo.com/yourname || fab fa-weibo
  #Twitter: https://twitter.com/ || fab fa-twitter
  FB Page: https://www.facebook.com/ || fab fa-facebook
  #StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow
  YouTube: https://www.youtube.com/ || fab fa-youtube
  #Instagram: https://instagram.com/yourname || fab fa-instagram
  #Skype: skype:yourname?call|chat || fab fa-skype
  blavince's BLOG: https://blavince.github.io ||

social_icons:
  enable: true
  icons_only: false
  transition: false

修改背景顏色
可以到常用顏色表, 查詢顏色的編號, 再到
\blavince\themes\next\source\css\_variables, 修改:
1
$body-bg-color = #c8c9cb;

開啟留言板功能 (gittalk)
登入 Github 到右上角的 Settings → 左下角的 Developer settings → 左邊的 OAuth Apps → 右上角的 New OAuth Apps , 分別填入:

Application name - blavince BLOG #應用程式名稱
Homepage URL - https://blavince.github.io/ #應用程式網域 → 填你部落格網址
Application description - OAuth for BLOG #應用程式描述
Authorization callback URL - https://blavince.github.io/ #授權回應網址 → 填你部落格網址

申請完會獲得 Client ID、 Client Secret, 不要外流, 重新打開
/blavince/themes/next/_config.yml 找到 gittalk 填入:

gitalk:
  enable: true
  github_id:  blavince # GitHub 作者帳號
  repo: blavince.github.io # 你的 Repo 名稱，通常就是網域
  client_id: xxxxxxxx # 剛剛申請的 Client ID
  client_secret: xxxxxxxx # 剛剛申請的 Client Secret
  admin_user: blavince # 管理者的帳號
  distraction_free_mode: true # 無干擾模式
  language: zh-TW ## 語系

添加分類(Categories)及標籤(Tags)
5-1. 在 hexo 的根目錄下添加分類, 輸入:
1
hexo new page categories
然後會顯示:
1
INFO Created: ~/blavince/source/categories/index.md
然後根據顯示的路徑將文檔修改成:
1
2
3
4
5
---
title: categories
date: 2020-05-29 13:24:29
type: "categories"
---
5-2. 同理, 標籤也是這樣:
1
hexo new page tags
根據顯示的路徑將文檔修改成:
1
2
3
4
5
---
title: tags
date: 2020-05-29 13:24:51
type: "tags"
---
5-3. 最後把 \blavince\themes\next\_config.yml 的 menu 啟用:
1
2
3
4
5
6
menu:
home: / || fa fa-home
archives: /archives/ || fa fa-archive
#about: /about/ || fa fa-user
tags: /tags/ || fa fa-tags
categories: /categories/ || fa fa-th
使用 hexo-admin 後台編寫文章時, 右上角的設定可以添加分類及標籤, 一篇文章只能有一個分類 (其餘為次分類), 但可以有很多標籤!

開啟書籤功能

1
2
3

# Bookmark Support
bookmark:
  enable: true

五、部署到Github

最後部署到 Github 上.

先按 Ctrl+c, 再按 Y 或者 Ctrl+c 再按 Ctrl+c 停止本地伺服器
然後輸入:

1 2	hexo cl #清除之前建立的靜態檔案，也可以輸入 hexo clean hexo g #建立靜態檔案，也可以輸入 hexo generate

將個人部落格佈署至 Github Pages
1
hexo d #部署至 Github Pages，也可以輸入 hexo deploy
~~3. 輸入 Github 帳號、密碼並等待 push 完成!~~
輸入 Github 帳號密碼授權已經於 2021 Aug 取消了, 可以參考 Personal access tokens 的方式完成授權部屬, 由設定頁面取得的 tokens, 於 hexo d 部署時輸入.
測試是否部署成功 blavince’s BLOG.

*注意: 本地資料夾很重要!!! 如同原始碼, 而 clone 下來的僅是被編譯的檔案, 無法修改! 要好好保存!

引用文章: 瑪利歐的部落格