用 Hexo 和 Github Pages 建立部落格吧 從把妹角度理解前後端如何和平相處

前幾年在小編當工程師時常常逛 Github，發現有些人會利用這個空間來開部落格，於是稍微研究後就決定動手做一個，也就是大家現在所看到的前端三分鐘。

在另外一篇文章小編介紹過想架站不會寫網頁，那就用 WordPress 吧，這篇文章就來推薦對於網站技術略懂略懂的工程師們另外一個架站選擇 Hexo。

同樣的以男女交往首先還是外在的條件、談吐等等要超過可交往的門檻，而 Hexo 的佈景主題跟外掛系統已架站來說在小編看來是相當有幫助的。

Github Pages

Github 本來就有提供專案放置解說 (README.md) 頁面的功能，利用 GitHub Pages + Jekyll 就可以快速產生，不過樣式就像是大家看到的稍微單調和基礎一點。

除了使用內建的 Jekyll 協助將 markdown 語法轉換成網頁，當然也提供直接使用 html 的方式。

延伸閱讀: 怎麼用 LinkFree 製作一個 Github Pages 取代 LinkTree，一起來試看看吧!

什麼是 Hexo

Hexo: A fast, simple & powerful blog framework

• 支援佈景主題
• 支援外掛系統
• 支援 Markdown 語法，提升寫作速度
• 提供將程式碼內嵌的功能，適合工程師使用

1
2
3

function autoDetect() {
  console.log("ye, it is written in JavaScript!");
}

小編使用幾年下來的心得是其實真的蠻簡單的，也沒什麼大問題，搭配已經設計好的佈景主題，簡單修改後就可以開始進入寫部落格的階段了。

底下是官方寫的 Quick Start，只需要短短五行指令就可以讓部落格跑起來。

1
2
3
4
5

npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server

Hexo 配置

所有相關的基礎配置都會在 _config.yml，透過外掛系統安裝進來的外掛也會在這裡進行設定。

官方已經有提供了教學影片，提供傳送門在此給大家:

Hexo 佈景主題

Hexo 打開會有預設的主題，社群也提供了大量客製化的佈景主題供大家選擇:

https://hexo.io/themes/

每個主題的安裝方式略有不同，不過大致上安裝步驟如下:

1. 將套件執行指令安裝或下載
2. 在 themes 資料夾中確認有加入模板
3. _config.yml 中指定並設定主題相關配置

Hexo 外掛

Hexo 除了佈景主題外也擁外掛系統，因此能夠輕鬆擴展功能而不用修改核心模組的原始碼。

在 Hexo 中有兩種形式的外掛：

腳本 (Scripts): 只需要把 JavaScript 檔案放到 scripts 資料夾，在啟動時就會自動載入一次，像小編會把 google tag manager 相關的服務都寫在腳本裡。
套件 (Packages): 較複雜且需要透過 npm 管理

https://hexo.io/plugins/

Hexo Packages

• 網站地圖
  • hexo-generator-sitemap
  • hexo-generator-seo-friendly-sitemap
• 標籤 (Tag)
  • hexo-generator-tag
• 分類
  • hexo-generator-category
• 閱讀時間
  • hexo-reading-time
• 相關、熱門文章
  • hexo-related-popular-posts
• 產生 RSS
  • hexo-generator-feed
• 發佈網站到 Github Page
  • hexo-deployer-git
• PWA
  • hexo-pwa
• 網站內容轉換成投影片
  • hexo-generator-slidehtml

Hexo 文章撰寫

Hexo 的資料夾結構中分成

• _draft: 撰寫草稿
• _post: 撰寫正式貼文

撰寫文章可以透過兩個方式

• 執行指令 npx hexo new test
  • 產生 test.md 到 _post
  • 產生 test 資料夾到 _post 給文章存取圖片等靜態檔案
• 直接透過習慣的編輯器建立檔案

記得產生的 markdown 最上面會需要文章的基本資訊，最基本的格式如下:

1
2
3
4
5

---
title: test-test
date: 2022-09-18 09:44:05
tags:
---

Hexo 產生靜態 HTML 檔案

hexo generate

透過一行指令即可完成。

網域設定

如果有購買網域，則需要讓網域指向我們剛剛設定好的主機。

• DNS 代管設定 (主網域、子網域)
• 測試工具

如果是需要使用 Github Page 只需要開好 Repository。

舉我的帳號為例如果是 Root 的專案，Repository 的名稱要叫做 linyencheng.github.io。

網站連結就會是: https://linyencheng.github.io/

網站地圖 (sitemap.xml)

檔名一般會是叫 sitemap.xml，搜尋引擎會透過爬蟲依照網站地圖的資訊來對網站進行檢索。

robots.txt

除了網站地圖也可以設定 robots.txt，主要是告訴搜尋引擎哪些路徑不需要被檢索及公開。

1
2
3
4
5

User-agent: *
Disallow: /cgi-bin/
Disallow: /images/
Disallow: /tmp/
Disallow: /private/

• ← 上一篇
• 下一篇 →