紀錄這個site的創建過程
使用的作業系統是Mac OSX 步驟大概可以分成三個部分:
1.建立GitHub repo
2.terminal Hugo 設定
3.將Hugo部署至GitHub Page
Step1:建立GitHub repo
如果已經有github帳號的,可以直接新建一個repo
repo的名稱要叫<username>.github.io
//這裡的username請自行帶入你的帳號名稱
或是直接拿任何一個repo
創建好了之後到repo設定,將GitHub Page的功能打開~
舉例來說,我的username是yilianwu
之後我的網址就會是 https://yilianwu.github.io
如果有自己的domain name也可以直接在這邊改好哦
Step2:打開Terminal終端機
1.安裝Homebrew
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
2.安裝Hugo
brew install hugo
3.建立Hugo網站
#創一個資料夾 他的路徑是 ~/site-hugo
hugo new site site-hugo
#進到資料夾中
cd site-hugo
這裡的site-hugo可以是任意名稱
4.新增Hugo Site Theme(主題)
這邊以Hugo Grapes舉例
- 新創一個資料夾themes
mkdir themes
#進到themes資料夾中
cd themes
#將github上的hugo grapes給clone下來你的themes資料夾
git clone git@github.com:shankar/hugo-grapes.git hugo-grapes
- 將
/themes/hugo-grapes
中的/static
、/layouts
、/content
與config.toml
複製到site-hugo
中 原本的檔案會被覆蓋掉
5.建立新文章
再打開terminal 輸入以下指令
cd ..
hugo new posts/my-first-post.md
此指令會在 /content/posts
資料夾中建立my-first-post.md
。
使用任意文字編輯器打開my-first-post.md
,將 draft 的true 改成 false //將草稿的功能關掉 才發布的出去
內容任意,以後如果要編輯文章(MarkDown文件)的話可以用Atom
6.編輯config.toml
檔
用文字編輯器打開config.toml
修改:
#<username>改成你的GitHub帳號名稱
URL = "https://<username>.github.io"
languageCode = "zh-tw"
#自由命名
title = "No Title Needed"
7.偷看一下
cd ~/site-hugo
hugo server -D
這時候在瀏覽器輸入http://localhost:1313/
就可以預覽網站的樣子囉
按Ctrl+C可退出預覽
Step3:將Hugo部署到GitHub
1.hugo連結github Page
cd ~/site-hugo #進到網站資料夾
hugo #此指令會產生一個 /public 資料夾 就是網站發佈出去的樣子
接著,進到/public
建立git連結
cd public
git init
git remote add origin https://github.com/<username>/<username>.github.io.git
可以到repo頁面直接獲得連結
如果是github上已經有東西了 可以直接clone下來
git clone https://github.com/<username>/<username>.github.io.git public
2.部署
# push 上 GitHub
git add .
git commit -m "<msg>" #<msg>可以填你要commit的東西
git push -u origin master
若push失敗,可以將git push -u origin master
改成強制push
git push -f origin master
這時候就可以到https://<username>.github.io
查看網站
3.自動部署
將上面的流程寫成一個shell script 以後做完更改只要一鍵就可以完成部署網站!
- 在
~/
本地裡面建立一個deploy.sh
cd ~
touch deploy.sh
- 到切換回finder找到剛創的
deploy.sh
,並用文字編輯器打開它
新增內容:
#!/bin/sh
echo -e "\033[0;32mDeploying updates to GitHub...\033[0m"
#生成靜態網頁至 public
cd site-hugo
hugo
#部署至github
cd public
git add .
msg="rebuilding site `date`" #以時間作為 commit message
git commit -m "$msg"
git push origin master
cd ..
之後只要執行
./deploy.sh
如果出現Error:bash Permission denied 到表你沒有權限執行這個檔案 這時候可以透過,來得到權限
chmod u+x deploy.sh
就會直接發佈到github