工程師的 Blog 神器 - Hexo

以前就一直想要找一個可以讓我來寫 Blog 的地方，直到發現了 git 上面的 Hexo 框架，使用適合工程師的 Markdown 語法，還可以將 Blog 直接託管在 Github 或是 Gitlab 上，對美術不擅長的我，又有多個 Theme 可以在網路上找來選用。今天就來好好跟大家介紹這個寫 Blog 的神器吧！

Quick Start

Hexo官網上是怎樣介紹他自己的呢？

Hexo 是一個快速、簡單且強大的網誌框架。Hexo 使用 Markdown（或其他渲染引擎）解析您的文章，並在幾秒鐘內，透過漂亮的主題產生靜態檔案。

我們就一起來看看吧！

安裝

  • 需要先安裝 Node.js 與 Git

  • 安裝 Hexo ，在 command line 上輸入

1
$ npm install -g hexo-cli

Mac 使用者
您在編譯時可能會碰到問題，請先至 App Store 安裝 Xcode，一旦 Xcode 安裝完成後，開啟它並前往 Preferences -> Download -> Command Line Tools -> Install 安裝命令列工具。

初始化 Hexo

  • 初始化一個資料夾 blog 當作工作區
1
$ hexo init blog

  • 進入blog資料夾後，執行npm install
1
2
$ cd blog
$ npm install

  • 啟動 local server
1
$ hexo s

修改 Themes

Hexo 官方網站提供許多Themes，我們可以選擇自己喜歡的樣式套用。
今天要跟大家介紹的是最多人推薦的 NexT

  • 下載解壓縮後，將資料夾修改名稱next並放置theme資料夾下

  • 編輯 _config.yml 檔案
1
theme: next
  • 重新生成 Hexo 設定
1
$ hexo g

  • 啟動 server
1
$ hexo s

發佈新文章

程式啟起來之後，我們要開始進入寫文章囉！

  • 在 blog 資料夾下，建立新文章
1
$ hexo new "Fisrt Post"

  • 我們可以在 blog/source/_posts 中找到剛剛產生的 md 檔位置，我們的文章撰寫也是在這檔案內容裡面

  • 參考上圖，這邊先簡單介紹一個基本的 blog 文章，會有的基本格式
類別 說明
title 文章名稱
date 文章撰寫日期
categories 類別
tags 標籤
  • 整個文章撰寫範例，大家可以參考 hello-world.md

將程式部署至 gitlab 上

最後，我們要使用 gitlab 上面的免費空間，讓我們可以將我們的 blog 免費放到網路上，省去管理服務器的麻煩事。

  • 在 gitlab 上建立一個 public 的 project

  • 在 blog 資料夾底下，建立 _gitlab-ci.yml 檔案
  • 增加 .gitignore 檔案
1
2
3
4
5
6
node_modules/
.DS_Store
db.json
package-lock.json
thumbs.db
public/
  • 最後，將 blog project push 至 gitlab 上，並可至 Setting -> Pages 中找到自己 blog 的 Url 如下圖

今天先介紹大家到這邊，下次有機會再跟大家介紹更多的 Hexo 的插件喔！

謝謝您的支持與鼓勵

Ads