小白也能用hugo架設自己的網站-2 用hugo建立網站專案和下載網站主題模板
用hugo建立一個網站專案
接下來,我們需要用hugo建立網站的專案資料夾。
- 瀏覽到你想建立專案的資料夾,哪裡都可以,但建議不要在有中文的資料夾下,
例如我就把資料夾放在c槽的跟目錄 - 按
alt+d
跳到網址列,按home鍵到行首,輸入
cmd空格
注意 cmd後面要有一個空格,例如我輸入完會像這樣
cmd C:
然後按enter,之後就會打開cmd視窗
p.s 這樣做的目的是,讓cmd指向目前資料夾的路徑,而不是指向預設路徑,
預設路徑是c槽使用者目錄下,當前使用者帳戶的資料夾,
cmd跳到不同的路徑當然有其他的方法,不過我覺得目前這種方法是最簡單的,不用自己打路徑 - 接著在cmd視窗內輸入
hugo new site 名稱
名稱可以替換為自己想給網站專案取的名稱,該名稱也是資料夾的名稱,也建議不要用中文,
例如我輸入了
hugo new site lamb_home
按enter,這就是我將專案取名為lamb_home的意思 - 之後按7或9看一下,會看到有類似下面這串內容,代表新建成功
Congratulations! Your new Hugo site is created in C:\lamb_home.
Just a few more steps and you're ready to go: - Download a theme into the same-named folder.
Choose a theme from https://themes.gohugo.io/ or
create your own with the "hugo new theme " command.
....後面省略 - alt+f4關閉cmd視窗,回到剛剛的c槽視窗,tab幾下回到列表上,
找一找就能看到有名為專案名稱的資料夾,這樣就新建成功了
為自己的網站選擇一個主題模板
本文我會使用meme這個hugo主題來示範,當然,你也可以自己來挑選喜歡的主題,
可以到這裡看看→
hugo主題網頁
或是到github搜尋
hugo themes
都可以找到很多主題,多方嘗試,找到自己喜歡的吧!
之所以會用meme主題來示範,是因為meme主題支援中文的網頁介面,專案設定檔也有中文的註解,
再加上自訂空間很大,所以推薦大家嘗試看看,
唯一的缺點就是配製檔非常的長,大概有1200行,不過有個可以快速瀏覽大分類的技巧,之後會有介紹,
如果你只想單純的放文章,不想那麼麻煩,那我也會推薦另一個幾乎不用怎麼設定的主題。
下載meme網站主題模板(我推薦的主題)
- 打開你的專案資料夾,找到裡面的
themes
這個資料夾enter進入,這是用來放主題模板的資料夾 - alt+d到網址列,到行首打cmd空格,按enter,方法同上
- 在cmd視窗輸入下面這行指令
git clone https://github.com/reuixiy/hugo-theme-meme
按enter,此時就會開始下載,
完成時用7、9可以看到100%的文字提示,像這樣
Resolving deltas: 100% (2967/2967), done. - alt+f4關閉cmd,回到themes 資料夾的視窗,tab幾下回到列表上,
按左、右動一動,你會聽到這個資料夾的名字
hugo-theme-meme
這個就是剛下載的meme主題資料夾 - 接下來,我們要用meme主題的專案設定檔取代網站專案本來的專案設定檔,
進入hugo-theme-meme這個資料夾,依序找
config-examples 16 之 3
zh-tw 3 之 3
最後會看到這個檔案
config.toml 1 之 1
按ctrl+c複製 - 接著一直退到專案資料夾的目錄,也就是可以看到themes這個資料夾的目錄下
- 按ctrl+v貼上剛複製的檔案,會彈出是否取代的對話框,按
alt+r
即可取代 - 到這裡就完成了meme主題模板的下載
下載tokiwa網站主題模板
這是一個幾乎不用怎麼設定的主題,只需在專案設定檔指定好這個主題的資料夾名稱即可,後續文章會介紹如何修改專案設定檔。
- 按照下載meme的前兩個步驟,只需把指令改為下方的這行
git clone https://github.com/heyeshuang/hugo-theme-tokiwa
按enter,就完成下載了,這個主題不必替換專案本來的專案設定檔
補充
上文中我們使用的
git clone XXX
就是第一篇我們所安裝的git工具的指令,
這個指令的意思是複製github上面指定網址儲存庫的資料,當我們在github上找到hugo的主題,就能用git clone 網址,來把github上的主題下載回來。
下篇待續