GitHub-Pages-base
基於 GitHub Pages 的 blog 基底 | Demo: https://tsy-and-cij.github.io/GitHub-Pages-base/
從這個專案開始自己的 blog
- 點擊此專案右上角的 Fork
- 到新專案的 Settings 將專案改成自己喜歡的名稱
- 修改專案描述
- 到
https://你的帳號.github.io/專案名稱/
看看成果 🙌🏻
更改網站樣式與資訊
顏色
你可以在 /src/assets/theme.scss
定義主副色與背景色,Color Tool - Material Design 或許能幫助你選擇
名稱 | 主要用途 |
---|---|
primary | 側邊欄 |
secondary | 主頁訊息 |
background | 頁面背景 |
網站資訊
網站標題與 GitHub 帳號預覽資訊寫在 src/config/sidebar.json
{
"title": "{你的網站標題}",
"author": {
"github_og_image": "{GitHub 帳號圖片網址}",
"github_og_url": "{GitHub 帳號網址}"
}
}
icon
請將你的 icon 放在 public/favicon.ico
網站內容
當你 fork 這個專案,裡頭包含一些預設內容可以供你熟悉內容的撰寫方式,你可以在你了解後刪掉它們
類別
定義於 src/articles/index.json
,並且每個類別要有其對應的資料夾
[
{
"title": "{類別名稱}",
"directory": "{對應資料夾名稱}",
"route": "{類別的路由}"
},
...
]
短篇
短篇內容直接撰寫於該類別的 index 檔案中,例如: src/articles/category1/index.json
*請將新的內容擺放在前面
[
{
"title": "{標題|必填}",
"image": {
"url": "{圖片網址|必填}",
"site": "{圖片來源網站名稱|選填}",
"link": "{圖片來源連結|選填}"
},
"star": {星等,0 ~ 5,支援.5|選填},
"short": "{簡短描述|選填}",
"tags": [
{
"color": "{標籤顏色,寫法同css <color>|tags 為選填,此項目為 tag item 中必填}",
"text": "{標籤名稱|tags 為選填,此項目為 tag item 中必填}"
},
...
],
"time": "{時間,格式符合 dateString 皆可|必填}",
"detail": {
"directory": "{文章的檔案位置|detail 為選填,此項目為 detail object 中必填}",
"route": "{文章的路由|detail 為選填,此項目為 detail object 中必填}"
}
},
...
]
詳細文章
文章請用 markdown 格式撰寫,檔案請擺放在所屬類別的資料夾內,並將此位置記錄於對應短篇的 detail.directory 欄位
主頁訊息與 Pin items
src/config/home.json
{
"message": "{主頁訊息,支援用<br>換行}",
"pin_items": [
{
"directory": "{短篇所屬類別的資料夾名稱}",
"title": "{短篇名稱}",
"message": "{對此短篇額外的訊息文字}"
},
...
]
}
本機開發
yarn )
初次 (你需要事先安裝好git clone https://github.com/{你的帳號}/{你的專案}.git
cd {你的專案}
yarn install
開啟 hot reload
yarn serve
部署到 GitHub Pages
我們利用 gh-pages
分支將網站部署到 GitHub Pages。你可以選擇手動部署,或是透過CI工具部署
手動部署
我們會建議你將 gh-pages
分支另外 clone 成為不同的資料夾來分開管理實際內容與打包後的檔案
初次
git clone https://github.com/{你的帳號}/{你的專案}.git -b gh-pages {你的專案}-deploy
後續部署
cd {你的專案}
yarn build
rm -rf {你的專案}-deploy/*
cp -r {你的專案}/dist/* {你的專案}-deploy/
cd {你的專案}-deploy
git add .
git commit -m 'Deploy'
git push
CI 部署
你可以參考我們目前的 .travis.yml
檔案,在 Travis CI 設置你的部署流程
*記得給你的 CI 一組 GitHub access token,好讓他可以替你更新 gh-pages
分支
持續追蹤本專案的更新
請參考 Syncing a fork