【 Hexo網誌架設 1 】
使用 Hexo + GitHub Pages 架設個人網誌
我的設備
macOS Monterey 12.2
什麼是 Hexo
Hexo 是一個基於 Node.js 開發的網誌框架，具有下列幾項特點：
- 編譯速度快
- 支援 Markdown
- 支援一鍵部署到 GitHub Pages 或 Heroku 等支援靜態網頁的空間
前置作業
- Node.js
- 可以在終端機內輸入
node -v來查詢是否有安裝 - 如果沒有可到node.js 官網下載
- 可以在終端機內輸入
- npm
- npm 是一個線上套件庫，可以下載相當多的 JavaScript 套件來使用
- 可以在終端機內輸入
npm -v來查詢是否有安裝 - 如果沒有可到npm下載
- Git
- Git 為分散式版本控制系統
- 是一種工具
- 可以在終端機內輸入
git -v來查詢是否有安裝 - 如果沒有可到Git下載
- GitHub 帳號
- 是一個 Git Server（網站）
- 網站裡可以存放程式碼，也可以私存，但是私存超過一定數量是要收費的
- 如果沒有 GitHub 帳號可以到官網申請一個
開始…
一開始先在桌面上新增一個資料夾，專門用來放 Hexo 的資料，集中管理，以防意外造成資料四散。
在安裝的時候，也請注意你終端機所在的資料夾。
安裝 Hexo
利用終端機進入剛剛新增的資料夾裡，並輸入安裝指令：
$ npm install hexo-cli -g
成功後可以輸入 hexo -v 查詢是否 有安裝成功
初始化 Hexo
輸入指令：
$ hexo init <資料夾名稱>
我的資料夾名稱為：blog
在資料夾安裝所需檔案
接著進入剛剛 init 所產生的資料夾裡面，輸入指令：
$ npm install剛剛在 init 後，所產生的資料夾裡，也同時新增了一些檔案，有一個檔案名為 package.json 裡面有設定一些東西，而 npm install 就是安裝裡面的設定。
npm 真的很方便。
新增 repository
進入GitHub頁面，右上角有個 + ，可以新增 repository。
進入新增頁面之後，Repository name 的取名格式如下：
💡 如果
Repository name名字取錯，網頁的 .js 跟 .css 的路徑會找不到，網頁就不會有樣式出現。
如果新增成功，會出現這個畫面：
這個畫面先不要關閉
修改 _config.yml 檔案的 Deployment 設定
接著是修改 _config.yml 設定檔中，有關 deploy 的設定。
_config.yml檔案是根目錄的
我是使用 VSCode 做編輯。
進入程式後，在檔案的最下方，有一段程式碼：
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
type: git
repo: https://github.com/username/username.github.io.git
branch: main- type：選擇部署模式，這裡填 git
- repo：GitHub repository 的連結，記得將 username 修改成自己的帳號名稱
- branch：選擇分支，預設為 main
更改完記得要存檔
部署到 GitHub
輸入下列指令，將部署檔案到 GitHub 上：
$ hexo deploy第一次輸入可能會要求登入 GitHub 帳號密碼
是登入 GitHub 網頁版的密碼，非 token
通常在完成修改後，會依序輸入 clean -> generate -> deploy 三行指令，避免更新不完全。
指令也可以簡化如下：
$ hexo cl // 清除之前建立的靜態檔案
$ hexo g // 建立靜態頁面
$ hexo d // 部署至 GitHub第二行跟第三行可以再簡化：
$ hexo g -d接著預覽本地端是否正常：
$ hexo server
command 按著，鼠標移過去按一下，會打開一個視窗，那就是你的成果了。
這個主題是 Hexo 的預設主題。
不過這是本地端的，等一下還要去看 GitHub 上面是否有成功。
打開 GitHub Pages 設定
前面在新增完 repository 之後的畫面上方，有一個 Settings 的連結，點進去：
點進去後，左側會有一個 Pages 的選項，點進去：
進入 GitHub Pages 的頁面
Branch 的下拉式選單，選擇 main
然後按 Save
就會出現綠色框框的網址
這個網址就是你 blog 的網址
點進去看就會看到你的網站了