紀錄這個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也可以直接在這邊改好哦

Imgur

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舉例

  1. 新創一個資料夾themes
mkdir themes

#進到themes資料夾中
cd themes

#將github上的hugo grapes給clone下來你的themes資料夾
git clone git@github.com:shankar/hugo-grapes.git hugo-grapes
  1. /themes/hugo-grapes中的/static/layouts/contentconfig.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

Imgur

這時候在瀏覽器輸入http://localhost:1313/ 就可以預覽網站的樣子囉 Imgur 按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頁面直接獲得連結 Imgur

如果是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 以後做完更改只要一鍵就可以完成部署網站!

  1. ~/本地裡面建立一個deploy.sh
cd ~
touch deploy.sh
  1. 到切換回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

Imgur

就會直接發佈到github Imgur

Reference