從Camp結束也一週了,這幾天除了整理履歷之外,花最多心力的大概是在部落格上了,實際完成後,才知道現在打造一個部落格到買domain(也有免費提供的)部署實在很快又很方便,而且網站框架五花八門(Jekyll、 Hexo、Gatsby、Hugo、Middleman等等),其中Jekyll與Middleman都是基於Ruby環境,也有提供Ruby Gems喔。

這裡提供了許多選擇: (https://jamstackthemes.dev/)

Hugo

不過最終我選擇了Hugo,除了網站打造快速外,提供的themes也多,也剛好找到與自己符合的(其實這才是主因(誤?)

實際操作

  • 安裝Hugo > brew install hugo

  • 確認是否安裝成功與檢查版本號 > which hugo hugo version

(本文撰寫時間所使用版本為0.72.0)

  • 建立網站 > hugo new site first_site > 此時,剛才建立的first_site便會在你所建立的path下

  • 切換至first_site資料夾,並開啟編輯器 > cd first_site

可以看到Hugo所產生的內建檔案


  • 將網站初始化,為稍後推上github做準備 > git init

  • 由於內建所產生的Hugo檔內layouts並未有templates,打開 hugo server 後會是一片空白,這時便可以自選主題做引入,而在官網提供了眾多的themes可供選擇。

挑選themes: (https://themes.gohugo.io/)

  • 選擇自己喜歡的主題後,可以先點選Demo做為預覽該主題的樣子,而DownloadHomepage則可以直接到該作者的github。

>git clone https://github.com/yanlinlin82/simple-style.git themes/SimpleStyle

(直接在themes裡建立SimpleStyle的主題)

  • 確認themes裡有SimpleStyle的資料夾

  • 修改配置文件,實際上要以作者提供的configuration格式作修改,並選擇主題 > echo 'theme = "SimpleStyle"' >> config.toml

  • 創建第一篇文章 > hugo new posts/my-first-post.md

  • 開啟hugo server > hugo server -D

進到http://localhost:1313/ctrl+c則可以退出


接下來就可以自行針對內容做客製化修改。

Hugo網站建立介紹大致上就到這,下一篇將會介紹除了在終端機與編輯器裡寫文章之外,還可以在其他網站上撰寫,與透過netlify做部署。