build_hexo_blog

本文最後更新於：2022年1月21日 晚上

緣起

剛放寒假心血來潮，一鼓作氣把拖了4個月的部落格弄得有模有樣了

因為這學期最深刻的體會之一就是我的大腦真的不好使，學沒多久就會變得模糊許多

所以趁現在還有一些記憶趕緊完整記錄一下建置過程

期待是，就算一年後的自己什麼都不會，只要重新照著這一篇教程來做也能成功!

主題:

如何使用github pages + Hexo建立自己的部落格

img

目錄

如果你是從零開始，基本上就三大步驟:

  1. 建立Github帳號
  2. 建立Hexo blog
  3. 選擇Hexo 主題並自訂設置

強烈建議搭配這篇文章服用，他已經把前兩項都說的很清楚XD

[教學] 使用 GitHub Pages + Hexo 來架設個人部落格 | 瑪利歐的部落格 (ed521.github.io)

因為實作不難，也就不重新造輪子了，下面會直接切入到主題設置

選擇Hexo 主題並自訂設置

過程用Hexo的主題Fluid作為範例

提醒一下，盡量挑選文檔完整的主題來建置，不然會弄到頭昏眼花的

Fluid的官方文檔:

Hello Fluid - Hexo Theme Fluid (fluid-dev.com)

開發文檔:

配置指南 | Hexo Fluid (fluid-dev.com)

基本上照著上面的資料做就可以了，不過還是會盡量拆解成可以理解的步驟來執行

如果看到這邊，我假設你已經成功建立一個最基礎的github page了，且套上Hexo的主題並成功修改部分內容

  • 網址列輸入 https://username.github.io/ (username 是自己的 GitHub 帳號)，能夠看到剛架好的 Github Pages
  • 了解如何在_config.yml中改動設定

如何安裝Fluid 主題?

開始前，我們有幾個重要前提，多節錄自官方的配置指南:

  1. 務必在_config.yml所在的資料夾開啟git bash或cmd執行以下操作
  2. “部落格配置“ 指的 Hexo 部落格目錄下的 _config.yml，”主題配置“ 指的是 theme/fluid/_config.yml 或者 _config.fluid.yml ，必須小心區分；
  3. 提到的 source 目錄都指的是部落格目錄下的 source 文件夹，不建議修改主题内 source 目錄
  4. 每次無論 hexo g 或 hexo s，都最好先使用 hexo clean；
  5. 頁面结果以本地 hexo s 為準，部署後的異常大部分是缓存原因，在確認没有報錯的情况下，等待若干時間後即會顯示正常

方式一:

npm install --save hexo-theme-fluid

方式二:

用方式一或方式二後，要修改Hexo部落格目錄中的_config.yml

1
2
theme: fluid  # 指定主題
language: zh-TW  # 指定語言

這邊比較複雜

如果前面使用方式一(跟我一樣)，若想要把語言修改成繁體中文(zh_TW)，

因為沒有壓縮下來的文件夾，會缺失一些內容，所以必須手動加上語言設定的文件

但也只有這邊不同，其他地方都不會影響到

步驟:

  1. 按照上面修改語言
  2. 在部落格目錄中，建立一個languages文件夾
  3. 裡面新增一個文件，命名為 zh-TW.yml
  4. 往裡面複製貼上以下內容，即可成功把頁面轉成繁體中文版:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
search:
  title: 搜尋
  keyword: 關鍵字
  status:
    success: v
    error: x

postTotal: 總共 %d 篇文章

paginator:
  pre: 上一頁
  next: 下一頁

post:
  toc: 目錄
  pre: 上一篇
  next: 下一篇

home:
  title: 首頁

archive:
  title: 封存
  subtitle: 封存

tag:
  title: 標籤
  subtitle: 標籤

category:
  title: 分類
  subtitle: 分類

about:
  title: 關於
  subtitle: 關於

page404:
  title: 頁面走丟啦!
  subtitle: 頁面走丟啦!

links:
  title: 交換連結
  subtitle: 交換連結

剩下的就是靜態設置都是在 _config.fluid.yml檔案裡調整

官方文檔說明的超~級清楚，以下節錄常用的功能

配置指南 | Hexo Fluid (fluid-dev.com)

  • 部落格名字，瀏覽器圖標

  • 頁面banner

  • Navbar設定

  • 創建頁面(pages)

    • about page
    • tag page
    • category page
    • 自定義頁面

  • 發表新文章(posts)

    • 文章的tags
    • 文章的categories
    • 文章配圖

  • 自定義css/html

    • 我有運用自定義的css設定反白的顏色，配合整體的色調!

小結:

雖然好像都把工作丟給別人，但是真的只要照著指南做，幾乎碰不到什麼問題

反而花比較多時間在美化上面

如果有問題…我再想想辦法xd

總之很開心2022寒假一兩天就能生出這個部落格，以後應該會固定放上學到的技術結晶

要去玩玩其他東西了，今年應該會是個非常有趣的一年d(`･∀･)b