Blog Cover Image

Inspire you to have New thinking, Walk out your unique Road.

有的時候,你無意間遇到的一些故事,會激發你的靈感,改變你的想法,接下來你會用與之前全然不同的觀念去創造屬於你獨特的故事。

Sign @MinaYu.

[BLOG] 如何在Github上架設Hugo網站

Posted on

趁記憶還猶新,趕緊來記錄起來

我才剛用hugo又產生了一個新的網站,並成功架在我的Github

之前我一直以為Github只能架一個網站,直到我同事跟我談話中提點,我才知道原來可以架很多個網站。

但這樣講其實也不太正確啦 ~

接著進入我們的主題吧


如何架設多個網站?

根據 Host on Github 的 Hugo 文件

提供了兩個做法:

1. User/Organization Pages (https://<USERNAME|ORGANIZATION>.github.io/)

2. Project Pages (https://<USERNAME|ORGANIZATION>.github.io/<PROJECT>/)

你現在看到我這個網站原先是 https://<USERNAME|ORGANIZATION>.github.io/ 這個方法,只是我有買網域。

但先前因為上述提及我的功力太弱,所以看不懂也沒有使用過第二個方案,也就完完全全的以為Github只能架一個網站

由於這個福音XD,我也就可以實現我之前夢寐以求想要架一個圖廊來放我拍的照片加上紀錄生活

那由於我認為先前的[BLOG] 從WORDPRESS 移動到 HUGO ,沒有很清楚明白地說明怎麼架設在Github上,所以我也就在介紹一次


第一個方法: https://<USERNAME|ORGANIZATION>.github.io/

備妥好你做的hugo網站後

我們先產生出最後要部署到Github上的資源

*請注意 config 的baseurl為 https://<USERNAME>.github.io/ username 是你在github的username

請打開Terminal 並在你的hugo網站資料夾跟目錄run

hugo

接著會產生出 public 的資料夾,這個是我們待會要部署上去的一大包html資源

若是這種方法,我們是將網站架在你的github的主頁

就是 https://<USERNAME>.github.io/ 代表的會是你的網站主網址 (也只有這個是主要網址,其他的就要加/repositories name)

在你的Github上開一個新的Repositiries,取名 <USERNAME>.github.io, <USERNAME> 是你在Github網址上出現的username

假設我的是 https://github.com/minayu416, 那我就要開 minayu416.github.io

接著回來Terminal, 切進剛剛產生的 public 資料夾

cd public

先commit 剛剛產生的內容

git add .

git commit -m “push public”

將產生的內容 remote 到剛剛產生的repositories

git remote add origin https://github.com//.github.io.git

git push -u origin master

那段remote 太長的話,你可以按照剛剛剛開的repositories 指令貼上執行

接著到剛剛創的repositories > Settings 將Github Page 打開

選擇 master branch

如果都執行沒問題的話,稍等會就能進 https://<USERNAME>.github.io/ 看看你剛剛產生的檔案囉!


第二個方法: https://<USERNAME|ORGANIZATION>.github.io//

其實跟上個方法差不多

這個方法會將你的網站放在: https://<USERNAME|ORGANIZATION>.github.io/<PROJECT>/

也是 https://<USERNAME|ORGANIZATION>.github.io/<REPOSITORIES NAME>/

那就開始吧!

一樣備妥好你做的hugo網站後

我們先產生出最後要部署到Github上的資源

*這次請特別注意 config 的baseurl為 https://<USERNAME>.github.io/<REPOSITORIES NAME>/ username 是你在github的username

要記得因為這次的網站網址是放在 /<PROJECT>/ 所以config的baseurl也要做更改

接著一樣打開Terminal 並在你的hugo網站資料夾跟目錄run

hugo

接著會產生出 public 的資料夾,這個是我們待會要部署上去的一大包html資源

那若是這第二種方法,是將網站用project的方式架在 project名稱的子網域(就是repositories name!)

此時 https://<USERNAME>.github.io/<REPOSITORIES NAME>/ 代表的會是你這個網站的網址

在你的Github上開一個新的Repositiries,取名就取你想要的名稱,這個名稱將會帶在 https://<USERNAME>.github.io/<這>/,一樣USERNAME是你在Github網址上出現的username

那我就假設我開了一個新的repositories 叫做 demo,我的username是 minayu416, 那網址就會是https://minayu416.github.io/demo/

接著回來Terminal, 切進剛剛產生的 public 資料夾

cd public

先commit 剛剛產生的內容

git add .

git commit -m “push public”

將產生的內容 remote 到剛剛產生的repositories

git remote add origin https://github.com/minayu416/demo.git

* 記得改成自己的

git push -u origin master

那段remote 太長的話,你可以按照剛剛剛開的repositories 指令貼上執行

接著到剛剛創的repositories > Settings 將Github Page 打開

選擇 master branch

如果都執行沒問題的話,一樣稍等會就能進 https://<USERNAME>.github.io/<REPOSITORIES NAME>/ 看看你剛剛產生的檔案囉!

依我的為例子的話,網址就是 https://minayu416.github.io/demo/

若有問題在麻煩問我喔!

祝福大家架設網站成功!