2020-05-06軟體與系統10 分鐘閱讀文 (大約 1533 個字)

[教學]使用Hexo+GitPage+自訂網域建立專屬自己的Blog（一）

JaoJaoLin 的天地第一篇貼文，也就是剛架設完 Blog，趁著記憶猶新，馬上來撰寫此篇教學。

前言

正值大學的我，平時撰寫程式與學習，並無一個能真正展現自己能力的平台，那就透過寫部落格來搭建吧！順便增加自己的知名度。

做下決定後，思考著自己製作部落格，可行，但太耗時間了，還有好多報告要趕 RRR。然而，從茫茫大 Google 中旬找到了 Hexo 這個部落格靜態網頁框架，也因為他是靜態的，省去了後端與資料庫的需要，也因此我們能透過簡單的 GitHub Pages 來部屬他，真是撒花阿，開始動作吧！

本篇步驟

本次將會依照下述步驟進行。

建立 GitPage 專案
安裝與建立 Hexo 專案
部屬至 GitPage

教學

建立 GitPage 專案

為了可以讓自己的部落格部屬在網路上，有很多種方法，但今天使用每個人都能使用的 GitHub Pages 來部屬，並且有免費的 SSL 憑證。

若對於 GitHub Repository 還不熟的話需要先了解哦~之後也會撰寫相關文章

在 GitHub 建立名為<username>.github.io的公開 Repository
<username>: 自己 GitHub 的帳號
建立成功後，我們就能夠先進行下個步驟來安裝 Hexo

安裝與建立 Hexo 專案

環境需求

安裝詳見官網教學

Node.js (Node.js 版本需不低於 8.10，建議使用 Node.js 10.0 及以上版本)
Git

若尚未了解 Node.js 與 npm 建議也能先行理解在進行下一步，以免造成不懂。

安裝 Hexo

在終端機中輸入下列指令以安裝 Hexo-cli，Hexo-cli 是一套能透過命令列介面來操作 Hexo 的套件。下述命令中-g代表為在全域環境中安裝，可在電腦任何地方使用，並非指定專案環境。

1	$ npm install -g hexo-cli

建立專案

我們可以透過 init 在現在目錄下建立專案。
<project>: 專案資料夾名稱，自行命名。

1	$ hexo init <project>

建立完成後，可以利用ls(Windows 使用者請用dir指令)指令來查看，應該會有出現自己的專案資料夾，此時我們透過下述指令將工作區塊切換至專案資料夾。

1	$ cd <project>

此時你的專案結構應該長成這樣

<project>
├ node_modules/          ## npm套件
├ scaffolds/             ## 新增頁面、貼文的模板檔案
├ source/                ## 放置頁面、貼文原始碼的地方
├ themes/                ## 主題資料夾
├ .gitignore             ## Git忽略追蹤檔案列表
├ _config.yml            ## 設定檔
├ package-lock.json      ## nodejs套件版本資訊
└ package.json           ## nodejs之應用程式資訊黨

接著來講解幾個常用指令與教學。

產生靜態檔案

將整份專案編譯為靜態檔案，編譯完後將會存放在<project>/public/目錄下。

1	$ hexo generate

$ hexo g

伺服器運行

在本機啟動伺服器服務，預設會在4000Port 上運行，本機網址為http://localhost:4000。

1	$ hexo server

$ hexo s

以下此指令為啟動服務前先產生靜態檔案。

1	$ hexo s -g

此時打開網址就會看到 Hexo 已經運行起來了~
hexo

新增文章

透過下列指令以新增文章，文章會以 Markdown 格式來撰寫，並且檔案存放在<project>/source/_posts/目錄下。

若對於 Markdown 語法不熟需先行理解。

<title>: 文章標題

1	$ hexo new "<title>"

新增完後在上述目錄下找到<title>.md檔案，內容應該會如下。

---
title: <title>
date: 2020-05-05 13:24:24
tags:
---

此檔案之檔名為網址會顯示之連結，而上述檔案內容之title欄位為文章標題。
date: 發佈時間
tags: 文章標籤，可以設置多個
其他標籤
categories: 分類，每篇文章可以設置一個分類
以下為範例文章Hexo-GitHub-Pages-搭建-Blog-教學.md

---
title: "[教學]使用Hexo+GitPage+自訂網域建立專屬自己的Blog"
date: 2020-05-06 20:00:44
tags:
  - Hexo
  - GitHub Pages
  - Blog
  - Nodejs
categories: 軟體與系統
---

## 我的第一支程式

測試貼文

此時進入網頁點進我們的新貼文，我們則可以看到各個項目的對應關係。
preview

修改_config.yml 檔

在此僅會講解常用設定，更多設定資訊可以參考Hexo 文件

做完上述動作，雖然部落格已經運行成功，但總是哪裡怪怪的，都沒有自己的站名、圖片等等，因此要來修改設定檔。打開<project>/_config.yml檔案。
我們看到 Site 的部分

# Site
title: Hexo
subtitle: ""
description: ""
keywords:
author: John Doe
language: en
timezone: ""

title: 網站標題
subtitle: 副標題
description: 網站敘述
keywords: 關鍵字
author: 作者
language: 語言
timezone: 時區

以上則依照自己需求修改。

部屬至 GitPage

接著就是重頭戲拉，要把網站部屬到 GitHub Pages 上拉!
首先，打開_config.yml設定檔找到 Deployment 部分，並將其改為下述內容。
<username>: 你的 GitHub 使用者帳號

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: "git"
  repo:
    github: https://github.com/<username>/<username>.github.io.git

修改完後我們就能進行部屬指令，如下

$ hexo d

等待運行結束，就可以到<username>.github.io查看自己的部落格嘍!

總結

恭喜完成基本的 Hexo 建置，本篇到此一段落，第一次撰寫部落格教學，若有凌亂請見諒，若有任何問題也歡迎留言告訴我!

下篇將會針對修改自訂網域、更換主題、連結 Google Analytics、留言板來教學，敬請期待!

參考資料

Hexo