只要五天透過 Hexo + GitLab 打造完全免費的部落格網站 Day2

恭喜你已經完成第一天的製作,有ˇ了一個初版的網站內容!今天來到第二天,認識一下 Hexo 網站的結構,讓自己調整設定時更有條理!

#1 結構介紹

如果你已經順利完成第一天的課程,那麼你的網站資料夾目錄下應該會有三個資料夾:scaffolds、source、themes,以及一個檔案:_config.yml。接著就來一一說明每個資料夾及檔案的作用。

scaffolds

存放頁面及文章的 模板 的資料夾,每當用指令創建一個新的頁面 (page) 或文章 (post) 時,都會根據這裡面模板的設定來創建一個新的頁面或是文章的檔案。在第三天我們會教到怎麼客製化自己的模板!

source

存放網站實際的頁面及文章的地方,你的每一篇文章都會被記錄在這個資料夾下的 _post 資料夾內。

themes

存放主題的資料夾,hexo 有超過 300 多種主題可以供使用,而下載下來的主題就會丟在這個資料夾內做統一的整理及設定。而本課程使用的主題是 hexo 上最廣泛使用的主題 NexT來進行教學。當你熟悉後,可以隨時替換成自己喜歡的主題做設置!

_config.yml

設定網站的基本屬性的檔案:網站標題、網站副標題、作者名稱、網址、sitemap、etc.。
打開 _config.yml 從上開始往下看:

網站基本設定 (# Site)
1
2
3
4
5
6
7
title: '' # 網站的標題
subtitle: '' # 網站的副標題
description: '' # 網站的描述,介紹你的網站在做什麼
keywords: # 設定你的網站的關鍵字以利搜尋
author: '' # 作者名稱
language: en # 如果你的主要語言是繁體中文,建議修改成 zh-TW
timezone: '' # 如果你的時區是在台灣,建議修改成 Asia/Taipei
網站的網址與永久連結設定 (# URL)
1
2
url: http://example.com # 替換成你的網站的網址
permalink: :year/:month/:day/:title/ # 你的文章的永久連結設定,現在的設定就是你的文章網址會變成 url/年/月/日/文章標題

#2 安裝 NexT 主題

hexo 要替換主題非常的簡單,以 NexT 為例:

  1. 進入 NexT 主題的 GitHub 頁面 複製 clone 的網址
  2. 打開電腦的網站資料夾並進入到 themes 目錄內,在路徑列輸入 CMD 打開該路徑的終端機
  3. 輸入下列指令 git clone "clone的網址" 就會開始在該路徑開始下載 NexT 主題的檔案
  4. 將資料夾修改成 next
  5. 打開 _config.yml 搜尋 themes 將預設的主題 landscape 改成 next 即可完成
  6. 輸入 hexo g hexo s前往在本地建置的網站看看是否成功!

#3 設定 NexT 主題

主題安裝完成後,可以打開 ..\themes\next\_config.yml 檔案,這個檔案是關於這個主題本身自己的的設定檔案。裡面有很多可以設定的東西,並且也有很詳細的說明該怎麼使用,今天教學只會帶大家設定一些基本的東西。

以下設定排序從 _config.yml 檔案的上到下排序,另外你也可以透過搜尋括號內的英文字找到該設定的位置

子主題 (Schemes)

NexT 這套主題有四種子主題可以選擇,分別是:💟 Muse | 🔯 Mist | ♓️ Pisces | ♊️ Gemini,你可以打開不同的子主題 demo link 看看哪一種主題是你喜歡的,並透過 ‘#’ 字號在設定中開啟/關閉。

黑暗模式 (Dark Mode)

NexT 主題可以切換是否使用黑暗模式,只需要設定 true 或是 false 就可以開啟/關閉

1
2
# Dark Mode
darkmode: true # 開啟
1
2
# Dark Mode
darkmode: false # 關閉
網站圖示 (favicon)

favicon 是用來設定網站在瀏覽器顯示名稱前的小圖示,通常如果沒有設定就會是一個黑白的小地球,好記清晰的小圖示有助於他人辨識你的網站!
可以在 ..\themes\next\source\images 內放入你為你的網站所設計的 ICON,並在 _config.yml 中設定你的圖示相對路徑

在網站初期還沒有收入時,可以透過像 DesignEvo 這種提供有設計感的模板的網站加以調整就會是一個很有 sense 的 ICON & LOGO
DESIGNEVO 教學,免費設計高質感 LOGO 不求人!網站 LOGO 的好夥伴

1
2
3
4
5
6
favicon:
small: /images/favicon-16x16-next.png
medium: /images/favicon-32x32-next.png
apple_touch_icon: /images/apple-touch-icon-next.png
safari_pinned_tab: /images/logo.svg
#android_manifest: /manifest.json
社群媒體以及聯絡方式 (social)
網站瀏覽人次及訪客人數 (busuanzi_count)

那麼以上就是我們 五天打造完全免費的部落格網站 第二天!
如果沒有問題,恭喜你已經完成 40% 囉!
我們往 第三天 邁進!


Bonus

頁面 (page) 跟文章 (post) 的差別?
其實頁面跟文章在網站中都一樣是以圖文的方式呈現的內容,那頁面跟文章有什麼區別呢?
我自己個人的分法是:頁面是有專門的目的,且內容固定不經常變動;文章則是持續產出並不斷優化的內容。
e.g.
頁面|首頁、關於自己、隱私權政策、免責聲明、etc.
文章|每一篇有分類的網站的內文



✏以上就是本次的內容,
💡希望對正在閱讀的你也有幫助,若有誤的地方也歡迎指教。
❓若有什麼疑問歡迎下方留言,我會盡速回復您!


支持|不只是個工程師

如果這篇文章對你有幫助,請幫我
拍拍手|LikeCoin基金將會分發LikeCoin獎勵創作者
追蹤| Facebook & Instagram
也歡迎點我小額訂閱【不只是個工程師】

歡迎關注我的其它發布渠道