Jing's 技術筆記

如何用hexo搭建部落格並連結GitHub Pages

2018/05/25 Share

如何用hexo搭建部落格並連結GitHub Pages

Hexo 簡介與安裝

什麼是 Hexo

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

安裝

首先電腦必須安裝下列軟體:

安裝完成後透過終端機執行以下指令,藉由npm即可完成 Hexo 的安裝。

1
$ npm install -g hexo-cli

建立

創建我的部落格:

1
2
3
4
$ hexo init blog        //創建一個名為blog的資料夾
$ cd blog //切換到剛創建的資料夾路徑
$ npm install //執行npm install
$ npm install hexo-deployer-git --save //git部署插件

建立完成後資料夾內會有以下檔案:

1
2
3
4
5
6
7
8
9
.
├── _config.yml //主要設定檔
├── package.json
├── node_modules //相依套件
├── scaffolds
├── source
| ├── _drafts
| └── _posts //撰寫的所有文章都放在這個資料夾
└── themes //主題

_config.yml 是 Hexo 主要設定檔 可修改網站配置

此時在 blog 資料夾下執行:

1
$ hexo server

這時打開瀏覽器在網址列輸入 localhost:4000 就可以看到自己剛創建好的部落格啦。


用 GitHub Pages 與 Hexo 相聯

創建新的倉庫並與 Hexo 關聯

首先,先創建一個 GitHub 的帳號,然後創建一個新的倉庫。

接著在站點配置文件_config.yml找到deploy這個欄位。

這裡配置文件的設定就是給hexo d這個指令做相對應的配置,讓hexo知道你要把blog部屬到哪個位置。

接著執行以下2個指令:

1
2
$ hexo g        //生成靜態檔案
$ hexo d //佈署至關聯的GitHub

此時在GitHub的新倉庫裡應該會看到剛剛所佈署的靜態文件。

GitHub Pages

在GitHub倉庫中找到Settings選項。

將畫面往下拉找到GitHub Pages,選擇master branch,選擇好後點擊save,這時重新整理頁面,就能看到自己GitHub Pages的網址了,點擊聯結進去後就是一個自己新創好的部落格囉!

之後發表完新的文章後一樣是hexo g轉成靜態文件,然後再hexo d佈署到GitHub就可以在GitHub Pages看到自己所發表的文章囉!


相關連結

CATALOG
  1. 1. 如何用hexo搭建部落格並連結GitHub Pages
  2. 2. Hexo 簡介與安裝
    1. 2.1. 什麼是 Hexo
    2. 2.2. 安裝
    3. 2.3. 建立
  3. 3. 用 GitHub Pages 與 Hexo 相聯
    1. 3.1. 創建新的倉庫並與 Hexo 關聯
    2. 3.2. GitHub Pages
  4. 4. 相關連結