Like Share Discussion Bookmark Smile

J.J. Huang   2019-03-12   Hexo   瀏覽次數:

技術人的 Blog - Hexo

從前就想要寫 Blog ,使用過免費、自己架設…後來發現了 git 上面的 Hexo 框架,使用適合工程師的 Markdown 語法,而且可以將 Blog 直接託管在 Github 或是 Gitlab 上,相當的直覺,並且有多種 Hexo Theme 可以選用。這邊做Mac上簡單的安裝及介紹!

Quick Start

Hexo官方特別強調的幾點:

超級快速:Node.js 帶給你超級快的檔案產生速度,上百個檔案只需幾秒就能建立完成。
Markdown 支援:支援所有 GitHub Flavored Markdown 的功能,甚至能在 Hexo 使用大部份的 Octopress 外掛。
一鍵部署:你只需要一個指令就能把網站部署到 GitHub Pages, Heroku 或其他網站。
豐富的外掛:Hexo 有強大的外掛系統,你可安裝外掛讓 Hexo 支援 Jade, CoffeeScript。

安裝

  • 首先必須安裝 Node.jsGit

  • 安裝 Hexo ,在 command line 上輸入

1
$ sudo npm install -g hexo-cli

初始化 Hexo

  • 首先建立一個資料夾 blog

註:建立一個新的網站。如果沒有設定 folder 的話,Hexo 會在目前的資料夾建立網站。


  • 然後指到 blog 目錄下
1
$ cd /Users/morose/Documents/Temp/blog
  • 初始化 blog 當作工作區
1
$ hexo init

  • 產生靜態檔案
1
$ hexo generate

1
$ hexo server

Change Theme

這邊要教學如何套上自己喜歡的Theme,官方已經提供很多的Hexo Theme,歡迎大家找尋適合自己的Theme來做使用。

下載 Theme

註:此範例使用的Theme為Replica

  • 基本上每位Theme作者都會提供相關的使用教學

  • 將Replica克隆一份到你的themes下
1
$ git clone https://github.com/sabrinaluo/hexo-theme-replica.git themes/replica

  • 修改Blog/_config.yml
1
theme: replica

  • 重新啟動hexo server

  • 恭喜你Theme更換完畢

部署 Gitlab Pages

GitLab Pages是一項功能,允許你直接從GitLab中的存儲庫發布靜態網站。
你可以將其用於個人或商業網站,例如投資組合,文件,宣言和業務演示。你還可以將任何許可歸因於你的內容。

準備

相關設定

  • 設定.gitignore排除不需上傳的檔案
1
2
3
4
5
6
7
.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
  • 設定.gitlab-ci.yml用於自動部署
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# Full project: https://gitlab.com/pages/hexo
image: node:6.10.0

pages:
script:
- npm install
- ./node_modules/hexo/bin/hexo generate
artifacts:
paths:
- public
cache:
paths:
- node_modules
key: project
only:
- master
  • 修改_congig.yml配置
1
2
3
4
url: https://<<你的帳號>>.gitlab.io/xxxblogs/
root: /xxx.blogs
permalink: :year/:month/:day/:title/
permalink_defaults:
  • 移除theme中的.git資料夾
1
rm -rf ./themes/replica/.git

註:.gitignore.gitlab-ci.yml都是建立在Blog根目錄下。

建立專案

  • 登入gitlab並且建立xxxblogs專案

  • push 專案
1
2
3
4
5
6
cd existing_folder
git init
git remote add origin https://gitlab.com/<<你的帳號>>/xxxblogs.git
git add .
git commit -m "Initial commit"
git push -u origin master

  • 靜待幾分鐘網址列輸入https://<<你的帳號>>.gitlab.io/xxxblogs