使用hexo在github上建立個人網頁website

發表於 更新於 分類於

事前作業軟體安裝

  • 註冊申請好github帳號
  • 安裝Node.js(可以選擇安裝LTS版本即可)
  • 安裝Git(以下提供兩種安裝方法)

1.第一種安裝方法到git官網下載安裝包
2.第二種裝好hexo-cli後用指令安裝npm install hexo-deployer-git –save

安裝 Hexo

使用 npm 來安裝 hexo-cli (須先安裝 Node.js)

npm install hexo-cli -g

安裝完後，可輸入 hexo version 或 hexo -v 查看 Hexo 版本，確認是否有安裝成功。
之後執行下列指令，Hexo 會在指定資料夾中建立所有您需要的檔案。

hexo init <資料夾名稱> # 初始化 cd <資料夾名稱 or 資料夾路徑> # 切換到資料夾下 npm install # 安裝相關套件

啟動server測試

1
hexo c && hexo g && hexo s

在本地端啟動 Hexo 伺服器，預設路徑為：http://localhost:4000/
可在自己電腦上預覽設定結果，按 Ctrl + C 即可關閉

部署到 GitHub

建立 GitHub 專案

  1. 點選 New 新增一個 Repository
  2. 將專案名稱命名為 blog
    github-new-Repository

修改_config.yml

config.yml

_config.yml這個檔案路徑在剛剛在電腦上新增的資料夾裡

用編輯器打開，找到URL這段，並將修改成如下

1
2
3
4
# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://<username>.github.io
root: /blog/

找到Deployment這段，並將修改成如下

1
2
3
4
deploy:
  type: git   #發佈使用版控類別 使用git
  repo: https://github.com/<username>/<專案名稱>.git  #發佈到哪個Repository
  branch: master  #發佈使用的分支

更多說明請參考官方文件

部屬指令

(要先修改設定好_config.yml才能使用這個指令)

1
2
3
4
5
6
hexo clean 
#清除快取檔案 (db.json) 和已產生的靜態檔案 (public)。
hexo generate
#產生靜態檔案
hexo deploy
#部署網站。

上述指令一次輸入的打法

1
hexo clean && hexo generate && hexo deploy

懶人打法

1
hexo c && hexo g && hexo d

注意此處指令順序一定必須是 clean→generate→deploy
如果你出現這個錯誤訊息 Fatal: unable to auto-detect email address (got …….
代表這台電腦是第一次使用部屬請輸入用戶名稱和電子信箱 設定指令如下:

1
2
git config –global user.email “you@example.com”
git config –global user.name “Your Name”

更多指令請參考hexo 官方文件

deploy完後請回到github網頁所在的Repository，上方欄setting→page。
在這頁面裡將source選擇master，然後save
page-setting
綠色框框處為你的web網址

新增文章

建立一篇新的文章。

1
hexo new [layout] <title>

hexo new post "test" 或 hexo new "test"

如果沒有設定 layout 的話，則會使用 _config.yml 中的 default_layout設定代替。
如果標題包含空格的話，請使用引號括起來。
所有的新生成的文章都是存在 _post 之下，從scaffolds / post.md可以制定所要撰寫的文章有哪些參數是可以自訂的。
更多指令請參考hexo 官方文件

增加標籤 (tags)

hexo new page tags

增加文章分類 (Categories)

hexo new page categories

之後只要在每篇post打上tags、categories，就能讓文章有標籤和分類。
例如以此篇為例:

---
title: 使用hexo在github上建立個人網頁website
date: 2022-02-10 14:43:24
categories: Web網頁設計
tags:
    - Hexo
    - GitHub
    - website
    
---

如果要換一台電腦使用hexo，請備份以下檔案

_config.yml、 package.json、 scaffolds/、 source/、 themes/、

在按照上述安裝流程安裝，安裝完後執行到hexo init <資料夾名稱>這段。
再用上述的備份好的檔案覆蓋到剛剛初始化的資料夾即可。
(如果沒有備份上述檔案就沒辦法了)