iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 4
0
Modern Web

Hugo 貼身打造個人部落格系列 第 4

Day 04. Hugo New Site

hugo new

在你安裝完 Hugo 指令後,可透過以下指令建置新專案:

hugo new site myblog

結果如下:

https://ithelp.ithome.com.tw/upload/images/20200917/20106430DdTeEqpbUk.png

cd 進入到目錄中我們可以看到最初的專案資料夾有以下這幾個:

https://ithelp.ithome.com.tw/upload/images/20200917/201064300G8Gg3VGV5.png

透過 git 安裝佈景

根據官網指引安裝佈景,在安裝前你必須先有 git,我的建議是若你還沒有 git cli,先安裝 git,之後我也會建議你把整個專案做版本控制,若是你打算部署到 GitHub Pages,那你就更需要先裝好他。

# 在專案目錄底下 ./myblog
git init
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke

編輯 config.toml 指定佈景名稱為 ananke

echo 'theme = "ananke"' >> config.toml

為了在本地跑起來時可以看到點內容,我們先新增一篇文章

hugo new posts/my-first-post.md

檔案會被建立在 ./content/posts/my-first-post.md 底下。請注意,省略 .md 的話,你的文件就不會被渲染到頁面上。

執行以下指令,在本地運行 hugo 專案:

hugo server -D

訪問 http://localhost:1313/,huuuuuuugo!網站已經在本地跑起來了

https://ithelp.ithome.com.tw/upload/images/20200917/201064300HymhZwJBX.png

小結

今天帶過官方提供的 Hugo - Quick Start 的部分,讓我們只要透過極簡的步驟,就可以在本地運行一個 hugo 專案,明天會講專案資料結構的部分。

參考連結


上一篇
Day 03. Hugo CLI 安裝與介紹
下一篇
Day 05. Hugo Site 資料夾
系列文
Hugo 貼身打造個人部落格30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言