前言
在《為什麼要有自己的部落格?》中交代了建部落格的原因,想必你各位點進來就是做好建立部落格的覺悟了!
那就讓我們開始吧~
為什麼選 Hugo
- 既然官網 都說他是全世界最快的框架,捨他其誰?
The world’s fastest framework for building websites
- 完全免費的 open-source Go 專案。
- 身為一個 Gopher 當然就要支持一下呀,說不定之後用一用覺得哪裡可以優化,還有機會可以貢獻一下。
用 Hugo 在本地建立網站
1. 安裝 Hugo
身為 macOS 使用者,這邊就用 homebrew 安裝
打開終端機 Terminal
command + space
終端機輸入(以下皆為終端機輸入)
brew install hugo
其他安裝方式可以參考這裡
2. 安裝 Git
一樣打開終端機用 homebrew 安裝
brew install git
其他安裝方式可以參考這裡
3. 建立網頁
建立網頁
hugo new site <你的網站名稱>
這邊以 cyanSky 為例,你會看到 cyanSky 資料夾,架構如下
cyanSky ├── archetypes │ └── default.md ├── assets ├── content ├── data ├── hugo.toml ├── i18n ├── layouts ├── static └── themes 8 directories, 2 files
進入資料夾啟動 git
cd cyanSky # 把 cyanSky 改成 <你的網站名稱> git init
套上 PaperMod 的 Hugo Theme (網頁主題)
git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod
把 PaperMod 主題加入
hugo.toml
檔案echo "theme = 'PaperMod'" >> hugo.toml
啟動網頁
hugo server
登愣!恭喜你的本地網頁跑起來拉~
如果要關掉,就回到執行 hugo server 的地方按下
Ctrl+C
即可
4. 建立內容
建立內容
hugo new content content/posts/my-first-post.md
會看到在 contents 底下多了一個 posts 資料夾,資料夾內有
my-first-post.md
檔案. ├── archetypes │ └── default.md ├── assets ├── content │ └── posts │ └── my-first-post.md --> 剛創建的檔案 ├── data ├── hugo.toml
用你的編輯器(VSCode)打開
my-first-post.md
會看到以下內容+++ title = 'My First Post' date = 2024-01-14T07:07:07+01:00 draft = true +++
接著可以在 +++ 底下開始用 markdown 語法輸入內容
+++ date = '2024-12-29T14:02:12+08:00' draft = true title = 'My First Post' +++ This is **bold** text, and this is _emphasized_ text. Visit the [Hugo](https://gohugo.io) website!
再 run 一次你的網站
這次要加上
-D
參數,這樣才會把 front matter 設定draft=true
的文章也一併顯示出來,有興趣可以參考官網文件 command line flagshugo server -D
登愣~恭喜你的第一篇文章就出來拉 🎉
5. 客製化你的網頁成自己喜歡的樣子 ⭐
這超重要拉~東西很多很雜,慢慢調整成你們自己喜歡的樣子吧!
刪掉
hugo.toml
這能調整的東西太少惹新增
config.yaml
這份文件是從 PaperMod 的範例 來的config.yaml
baseURL: "https://examplesite.com/" title: ExampleSite paginate: 5 theme: PaperMod enableRobotsTXT: true buildDrafts: false buildFuture: false buildExpired: false minify: disableXML: true minifyOutput: true params: env: production # to enable google analytics, opengraph, twitter-cards and schema. title: ExampleSite description: "ExampleSite description" keywords: [Blog, Portfolio, PaperMod] author: Me # author: ["Me", "You"] # multiple authors images: ["<link or path of image for opengraph, twitter-cards>"] DateFormat: "January 2, 2006" defaultTheme: auto # dark, light disableThemeToggle: false ShowReadingTime: true ShowShareButtons: true ShowPostNavLinks: true ShowBreadCrumbs: true ShowCodeCopyButtons: false ShowWordCount: true ShowRssButtonInSectionTermList: true UseHugoToc: true disableSpecial1stPost: false disableScrollToTop: false comments: false hidemeta: false hideSummary: false showtoc: false tocopen: false assets: # disableHLJS: true # to disable highlight.js # disableFingerprinting: true favicon: "<link / abs url>" favicon16x16: "<link / abs url>" favicon32x32: "<link / abs url>" apple_touch_icon: "<link / abs url>" safari_pinned_tab: "<link / abs url>" label: text: "Home" icon: /apple-touch-icon.png iconHeight: 35 # profile-mode profileMode: enabled: false # needs to be explicitly set title: ExampleSite subtitle: "This is subtitle" imageUrl: "<img location>" imageWidth: 120 imageHeight: 120 imageTitle: my image buttons: - name: Posts url: posts - name: Tags url: tags # home-info mode homeInfoParams: Title: "Hi there \U0001F44B" Content: Welcome to my blog socialIcons: - name: x url: "https://x.com/" - name: stackoverflow url: "https://stackoverflow.com" - name: github url: "https://github.com/" analytics: google: SiteVerificationTag: "XYZabc" bing: SiteVerificationTag: "XYZabc" yandex: SiteVerificationTag: "XYZabc" cover: hidden: true # hide everywhere but not in structured data hiddenInList: true # hide on list pages and home hiddenInSingle: true # hide on single page editPost: URL: "https://github.com/<path_to_repo>/content" Text: "Suggest Changes" # edit text appendFilePath: true # to append file path to Edit link # for search # https://fusejs.io/api/options.html fuseOpts: isCaseSensitive: false shouldSort: true location: 0 distance: 1000 threshold: 0.4 minMatchCharLength: 0 limit: 10 # refer: https://www.fusejs.io/api/methods.html#search keys: ["title", "permalink", "summary", "content"] menu: main: - identifier: categories name: categories url: /categories/ weight: 10 - identifier: tags name: tags url: /tags/ weight: 20 - identifier: example name: example.org url: https://example.org weight: 30 # Read: https://github.com/adityatelange/hugo-PaperMod/wiki/FAQs#using-hugos-syntax-highlighter-chroma pygmentsUseClasses: true markup: highlight: noClasses: false # anchorLineNos: true # codeFences: true # guessSyntax: true # lineNos: true # style: monokai
換完後網頁瞬間變了一個樣
PaperMod 有三種模式:
我們就還換看看 Profile Mode
打開
config.yaml
,找到profileMode: enabled: false
把
false
改成true
然後你又會再次驚艷
後面還有很多可以調整,這邊就不贅述,留給你們慢慢玩
接著來看看,怎麼把網頁伺服器,從地端送上雲端《手把手打造你的專屬部落格之二 — Hugo 網站上雲伺服器 CloudFlare Pages》 或 《手把手打造你的專屬部落格番外篇 — Hugo 網站上雲伺服器 Netlify vs CloudFlare》