iT邦幫忙

2021 iThome 鐵人賽

DAY 8
0
Software Development

Let's blogggggggggg系列 第 8

[Day08] Let's Build!

接續昨天提到的,我們今天將會實際跑一次指令,如果看到這裡的你還在猶豫的話,別猶豫了,跟我一起開始吧!

Step 1. Create a New Site

hugo new site ithelp_2021_hugo

你可以把 ithelp_2021_hugo 替換成你想要的名稱,如果成功的話,你應該會看到:

這樣的回應。

Step 2. Add a Theme

因為 Hugo 沒有預設的主題,所以這一步我們必須選擇一個主題,這邊會先用 Ananke 這個主題來作為例子。

首先先進入專案內部:

cd ithelp_2021_hugo

接著再將 git 初始化:

git init

這邊就不展開解釋 Git 是什麼以及他的用法了,Google 一下有大把大把的教材,不嫌棄的話也可以閱讀我的 Git 簡單介紹與常用指令 以及 Git 常見問題,比較偏向閱讀筆記的兩篇心得。

再將主題以 submodule 的方式匯入:

git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

並修改 config.toml 中的主題名稱:

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

Step 3: Add Some Content

為了測試,我們先隨便新增一篇文章:

hugo new posts/test-post.md

這個指令會在 ithelp_2021_hugo/content/posts 底下建立一個 test-post.md,你會看到裡面有一些初始的設定檔,先不用去改它,我們之後會再說明。

Step 4: Start the Hugo server

到了振奮人心的一步了,輸入:

hugo server -D

-D 代表 include content marked as draft,因為初始的設定檔裡面預設 drafttrue,如果成功的話會看到:

接著從瀏覽器前往 http://localhost:1313/,就會看到:

沒錯,大功告成!

這個時候去修改 ithelp_2021_hugo/content/posts/test-post.md 你會看到這個頁面是會 hot reload 的。

總結

今天的進度是靠昨天介紹的指令,並依照官方文件初步的把 Hugo 在 Local 上 run 起來。

雖然我們今天先選了一個主題,但其實有非常多的主題可以選,明天讓我們來做一個艱難的決定——那麼多的主題,要選哪一個好?

Reference

  1. Hugo - Quick Start

上一篇
[Day07] Let's Hugo!
下一篇
[Day09] 選擇困難再度發作之主題挑選
系列文
Let's blogggggggggg11
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言