前幾年在小編當工程師時常常逛 Github,發現有些人會利用這個空間來開部落格,於是稍微研究後就決定動手做一個,也就是大家現在所看到的前端三分鐘。
在另外一篇文章小編介紹過想架站不會寫網頁,那就用 WordPress 吧,這篇文章就來推薦對於網站技術略懂略懂的工程師們另外一個架站選擇 Hexo。
同樣的以男女交往首先還是外在的條件、談吐等等要超過可交往的門檻,而 Hexo 的佈景主題跟外掛系統已架站來說在小編看來是相當有幫助的。
Github 本來就有提供專案放置解說 (README.md) 頁面的功能,利用 GitHub Pages + Jekyll 就可以快速產生,不過樣式就像是大家看到的稍微單調和基礎一點。
除了使用內建的 Jekyll 協助將 markdown 語法轉換成網頁,當然也提供直接使用 html 的方式。
延伸閱讀: 怎麼用 LinkFree 製作一個 Github Pages 取代 LinkTree,一起來試看看吧!
Hexo: A fast, simple & powerful blog framework
function autoDetect() {
console.log("ye, it is written in JavaScript!");
}
小編使用幾年下來的心得是其實真的蠻簡單的,也沒什麼大問題,搭配已經設計好的佈景主題,簡單修改後就可以開始進入寫部落格的階段了。
底下是官方寫的 Quick Start,只需要短短五行指令就可以讓部落格跑起來。
npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server
所有相關的基礎配置都會在 _config.yml,透過外掛系統安裝進來的外掛也會在這裡進行設定。
官方已經有提供了教學影片,提供傳送門在此給大家:
Hexo 打開會有預設的主題,社群也提供了大量客製化的佈景主題供大家選擇:
每個主題的安裝方式略有不同,不過大致上安裝步驟如下:
_config.yml
中指定並設定主題相關配置Hexo 除了佈景主題外也擁外掛系統,因此能夠輕鬆擴展功能而不用修改核心模組的原始碼。
在 Hexo 中有兩種形式的外掛:
腳本 (Scripts): 只需要把 JavaScript 檔案放到 scripts 資料夾,在啟動時就會自動載入一次,像小編會把 google tag manager 相關的服務都寫在腳本裡。
套件 (Packages): 較複雜且需要透過 npm 管理
Hexo 的資料夾結構中分成
_draft
: 撰寫草稿_post
: 撰寫正式貼文撰寫文章可以透過兩個方式
npx hexo new test
記得產生的 markdown 最上面會需要文章的基本資訊,最基本的格式如下:
---
title: test-test
date: 2022-09-18 09:44:05
tags:
---
hexo generate
透過一行指令即可完成。
如果有購買網域,則需要讓網域指向我們剛剛設定好的主機。
如果是需要使用 Github Page 只需要開好 Repository。
舉我的帳號為例如果是 Root 的專案,Repository 的名稱要叫做 linyencheng.github.io
。
網站連結就會是: https://linyencheng.github.io/
檔名一般會是叫 sitemap.xml
,搜尋引擎會透過爬蟲依照網站地圖的資訊來對網站進行檢索。
除了網站地圖也可以設定 robots.txt
,主要是告訴搜尋引擎哪些路徑不需要被檢索及公開。
User-agent: *
Disallow: /cgi-bin/
Disallow: /images/
Disallow: /tmp/
Disallow: /private/