小白也能用hugo架設自己的網站-2 用hugo建立網站專案和下載網站主題模板

小白也能用hugo架設自己的網站-2 用hugo建立網站專案和下載網站主題模板

用hugo建立一個網站專案

接下來,我們需要用hugo建立網站的專案資料夾。

  1. 瀏覽到你想建立專案的資料夾,哪裡都可以,但建議不要在有中文的資料夾下,
    例如我就把資料夾放在c槽的跟目錄

  2. alt+d
    跳到網址列,按home鍵到行首,輸入
    cmd空格
    注意 cmd後面要有一個空格,例如我輸入完會像這樣
    cmd C:
    然後按enter,之後就會打開cmd視窗
    p.s 這樣做的目的是,讓cmd指向目前資料夾的路徑,而不是指向預設路徑,
    預設路徑是c槽使用者目錄下,當前使用者帳戶的資料夾,
    cmd跳到不同的路徑當然有其他的方法,不過我覺得目前這種方法是最簡單的,不用自己打路徑
  3. 接著在cmd視窗內輸入
    hugo new site 名稱
    名稱可以替換為自己想給網站專案取的名稱,該名稱也是資料夾的名稱,也建議不要用中文,
    例如我輸入了
    hugo new site lamb_home
    按enter,這就是我將專案取名為lamb_home的意思
  4. 之後按7或9看一下,會看到有類似下面這串內容,代表新建成功
    Congratulations! Your new Hugo site is created in C:\lamb_home.
    Just a few more steps and you're ready to go:
  5. 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.
    ....後面省略
  6. alt+f4關閉cmd視窗,回到剛剛的c槽視窗,tab幾下回到列表上,
    找一找就能看到有名為專案名稱的資料夾,這樣就新建成功了

為自己的網站選擇一個主題模板

本文我會使用meme這個hugo主題來示範,當然,你也可以自己來挑選喜歡的主題,
可以到這裡看看→
hugo主題網頁
或是到github搜尋
hugo themes
都可以找到很多主題,多方嘗試,找到自己喜歡的吧!


之所以會用meme主題來示範,是因為meme主題支援中文的網頁介面,專案設定檔也有中文的註解,
再加上自訂空間很大,所以推薦大家嘗試看看,
唯一的缺點就是配製檔非常的長,大概有1200行,不過有個可以快速瀏覽大分類的技巧,之後會有介紹,
如果你只想單純的放文章,不想那麼麻煩,那我也會推薦另一個幾乎不用怎麼設定的主題。

下載meme網站主題模板(我推薦的主題)

  1. 打開你的專案資料夾,找到裡面的
    themes
    這個資料夾enter進入,這是用來放主題模板的資料夾
  2. alt+d到網址列,到行首打cmd空格,按enter,方法同上
  3. 在cmd視窗輸入下面這行指令
    git clone https://github.com/reuixiy/hugo-theme-meme
    按enter,此時就會開始下載,
    完成時用7、9可以看到100%的文字提示,像這樣
    Resolving deltas: 100% (2967/2967), done.
  4. alt+f4關閉cmd,回到themes 資料夾的視窗,tab幾下回到列表上,
    按左、右動一動,你會聽到這個資料夾的名字
    hugo-theme-meme
    這個就是剛下載的meme主題資料夾
  5. 接下來,我們要用meme主題的專案設定檔取代網站專案本來的專案設定檔,
    進入hugo-theme-meme這個資料夾,依序找
    config-examples 16 之 3
    zh-tw 3 之 3
    最後會看到這個檔案
    config.toml 1 之 1
    按ctrl+c複製
  6. 接著一直退到專案資料夾的目錄,也就是可以看到themes這個資料夾的目錄下
  7. 按ctrl+v貼上剛複製的檔案,會彈出是否取代的對話框,按
    alt+r
    即可取代
  8. 到這裡就完成了meme主題模板的下載

下載tokiwa網站主題模板

這是一個幾乎不用怎麼設定的主題,只需在專案設定檔指定好這個主題的資料夾名稱即可,後續文章會介紹如何修改專案設定檔。

  1. 按照下載meme的前兩個步驟,只需把指令改為下方的這行
    git clone https://github.com/heyeshuang/hugo-theme-tokiwa
    按enter,就完成下載了,這個主題不必替換專案本來的專案設定檔

補充

上文中我們使用的
git clone XXX
就是第一篇我們所安裝的git工具的指令,
這個指令的意思是複製github上面指定網址儲存庫的資料,當我們在github上找到hugo的主題,就能用git clone 網址,來把github上的主題下載回來。

下篇待續