Back

Hugo + github 個人blog 建立

how to build a blog

Hugo + github 個人blog 建立

之前是使用免費的網域 用wordpress 建立blog 想找個容易的模板 建立blog


Mac 安装 Hugo

可以使用 HomeBrew 安裝 https://brew.sh/ 下載

brew install hugo 

一個 Hugo 項目就是一個網站,創建命令如下

hugo new site [project-name]

例如我的網站名稱是 blog,創建命令如下:

hugo new site blog

創建完成後,在 blog 資料夾下會生成以下檔結構:


├── archetypes 
├── assets 
├── config
├── content 
├── data 
├── layouts 
├── static 
└── themes 


添加主題 (theme) 此處以 zozo 為例

為了快速搭建博客,可以使用主題。使用主題後,只需要向 content 資料夾添加 Markdown 檔即可。

cd blog
git clone https://github.com/olOwOlo/hugo-theme-even themes/zozo

你也可以選其他主題,進到該主題的 GitHub repo,將上面的網址改成 repo的網址、themes/zozo 改成 themes/你的主題名稱。

將 /themes/zozo 中的 static 和 layouts 資料夾複製,取代根目錄中的 static 和 layouts 資料夾

或是會有一些theme 供了頁面的 sample 給你,有個 exampleSite 資料夾,首先進入到 exampleSite 把 content 資料夾以及 config.toml 複製出來到根目錄下。

建立新文章

hugo new posts/my-first-post.md

此指令會在 /content/posts 資料夾中建立 my-first-post.md。使用任意文字編輯器打開此 markdown 文件,將 draft 改成 false,文件內容任意。以後建立文章都是以此方式。

編輯 config.toml

baseURL = "https://chswei.github.io/"    #改成你的GitHub帳號名稱
languageCode = "zh-tw"
title = " Blog"    #自由命名

本地測試

hugo server -D 執行完後,在瀏覽器中輸入網址 http://localhost:1313,就可以看到網站的雛形。

部署到 GitHub

comments powered by Disqus