Special Thanks

感謝文

我是 Eric, 負責維護更新南觀×難關×喃倌部落格的架構文件。對於沒有架站經驗也不懂程式的我能夠完成網頁的建立，十分感謝PJ Wu 吳秉儒大方分享使用 Zola 的經驗以及慷慨同意讓我使用 Pin 起來 的 Zola 文件作為範本進行修改。建立過程中，遇到問題，PJ 不吝提供他的解決方式。讓我卡關的問題，迎刃而解。

零經驗架站

我沒有網頁設計背景，對於架設網站零經驗。2023 年 9 月，有個朋友 Jerry 軍官退伍之後，結合學歷與自己實務經驗提供生涯探索的服務，於是架設了網站職嚮生涯設計事務所 並且開始寫文章。同樣沒有網站架設經驗的 Jerry 讓我看他跟朋友一起設計的網頁，簡潔精美的介面跟舒服的閱讀體驗，竟然不用太多網站架設經驗就可以完成。詢問之後知道 Jerry 他們是用類似 WordPress, Strikingly 建站工具完成。當時稍微看了一下這類的服務，雖然標榜免費，不過最終還是要收費。我並沒有打算經營網站所以就當做一種知識的增長。

過去嘗試使用 blog 網站，然而不斷增加的廣告帶來不舒服的閱讀體驗，我在嘗試與放棄之間來回。這回家人提出開始寫部落格，上網尋找適合的平台。去年開始接觸 markdown 語法跟使用 Obsidian 作為筆記工具。對於能夠使用簡單的符號呈現一篇具備樣式的文章感到不可思議。這是什麼黑科技? 明明就是的純文字檔卻能夠呈現整齊容易閱讀的樣貌。Markdown 文件本質是文字檔，任何文字編輯器都能開啟。再不用擔心被軟體公司綁架，多年累積的資料拿不回來。

Podcast 串連知識的管道

接送家人孩子經常需要待在車上，從 2019 年收聽 Podcast 成為車上吸收各類訊息的重要媒介。 閱讀前哨站站長瓦基在「 下一本讀什麼？ 」Podcast EP.301 專訪 Heptabase 創辦人詹雨安，他如何閱讀、學習和管理知識？) ， 自從 2021 年星箭廣播專訪詹雨安談筆記軟體「Meta」（2021 年 11 月 17 日更新：現更名為「Heptabase」）已經過了兩年。這位年輕的創辦人持續的進化自己的產品，我從來沒有用過 Heptabase，除了當時沒有試用的機會，更多的原因是對於初創公司穩定度的不安。在瓦基的專訪中，詹雨安提到公司營運能夠靠營收來持續精進軟體的各項功能，於是上網搜尋其他人使用 Heptabase 的心得分享。

搜尋過程中有篇 2022 年我不再使用的工具- 還是喜歡，但用不到了吸引了我的注意。對於喜歡嘗試各種軟體工具的我，喜歡知道其他人怎樣使用工具。即使我不一定會被推坑，但是看別人分享使用的心得仍會讓我感覺到拓展眼界的滿足感。這篇文章是PJ Wu 吳秉儒分享曾經使用過的工具以及為何現在不再使用。文中的工具大多是 Mac 使用，讓我想起星箭廣播的主持人 Titan 也曾在節目中分享其中幾個工具。這份熟悉感驅使著我繼續閱讀下一篇文2022 年開始進入我工作流的好工具們。文中吸引我的關鍵字是『個人知識管理』跟『內容輸出與分享』。我像是在尋找認同與不同的工具使用閱讀著，PJ 的文字用結構條理的方式呈現自我對話，讀起來易懂也舒心。讀來舒心的文字就跟享受一頓美食一樣讓人愉悅。

如果沒有聽到瓦基再次提到 Heptabase，我是不會動起要去搜尋的念頭。更不會遇到 Pin 起來的好文章。Podcast 串連了各個領域努力的人士，讓我這個吃瓜民眾增加對這世界的認識與好奇。

萬事起頭難

11 月家人希望寫些部落格文章，想起 PJ 寫過Pin 起來改版了！從 Wordpress 搬家到 Zola！。裡面提到搬家的理由跟方式，其中一個重點是『免費』。使用 Zola 感覺好像沒有很難，只要下載 theme 放到 github 就可以有個自己的網站。太棒了免費又簡單的方式怎能不用用看。於是開始著手嘗試建立網頁，第一步要安裝 Zola。上網找教學[Zola] 開始架自己的部落格-使用Zola建置專案，安裝 Zola 要用套件管理工具Scoop或是Chocolatey。等等等等，為什麼安裝軟體還要用什麼套件管理工具？不是點兩下執行安裝就好嗎？ 好吧，來安裝 Scoop 或是 Chocolatey (這到底是什麼阿?) 首先下載 Chocolatey, 好像比較多人分享. 連到 Install 頁面。下載了 Chocolatey package 文件。怎麼還是沒有 .msi, .exe之類的安裝文件阿? 一開始就遇到了不知道怎樣開始的困難。於是開始爬文找線索，[軟體操作] chocolatey 好用的軟體安裝工具 on windows。Win7可以安裝,太好了。在 Powershell 輸入指令安裝，出現錯誤。

PS C:\Users\ERic> Set-ExecutionPolicy Bypass -Scope g('https://chocolatey.org/install.ps1')) Exception calling "DownloadString" with "1" argument urred on a send." At line:1 char:104

• Set-ExecutionPolicy Bypass -Scope Process -Force; //chocolatey.org/install.ps1'))
  • CategoryInfo : NotSpecified: (:) [],
  • FullyQualifiedErrorId : DotNetMethodException

看不懂這是什麼錯誤。沒有安裝 Chocolatey 就沒法安裝 Zola。嘗試用 Scoop 也是錯誤訊息。怎麼可能一定要安裝別的工具來安裝 Zola。這時候就知道不知道如何開始的困頓是多麼揪心。開始胡亂嘗試。例如搜尋 Zola 出現的是婚禮網站。Zola install 只出現兩個中文連結。PJ 提到過 Hugo 也是很多人使用，換換方向試試Hugo on Github 自架全紀錄 - Hugo環境安裝(一)。

創建我們的Blog第一步，怎麼就卡關了呢？很開心寫了腳本，想透過git直接更新我們的Blog，指令一下就GG。

太好了，我不是第一個卡關的。文件提到可以自己把 Hugo 文件放在指定路徑，然後設定好環境變數。那 Zola 是不是也可以呢? 經過嘗試之後的確是可行。

[檔案總管]>[我的電腦]>[內容]進入以下畫面。

點選[環境變數]，點擊 「Path」進行編輯，把自己設定位置的路徑貼入。

在搜尋中輸入CMD進入命令列。之後輸入Zola 能看到以下畫面就表示可以開始建置網頁了。（終於阿...）

不過我之後因為使用 git 上傳文件，所以都是使用 Git Bash 進行 Zola 編譯。

這篇不是教學文，所以你真的有興趣要建置網頁可以爬文參考其他更專業的說明。我是個程式架站都不會的新手，只能分享粗淺的學習過程。我的作業系統是 Windows 7。

終於像是要開始架設網站了

我的下個卡關就是 github。我知道這是版本控制工具，最初以為下載了GitHub Desktop 就把文件放在本機上傳到 github的空間就可以建構一個網站。我參考這篇使用 Zola 和 Github Pages 搭建网站 這內容沒有詳細的步驟，但是有架構讓我大概知道要做哪些事情。

1. Zola ：產生靜態網頁文件的核心工具。使用到的指令:

   1. Zola init: 在空的資料夾初始化一個網站的文件。需要詳細步驟就參考靜態網站產生器 Zola
   2. Zola serve: 進行本地網頁的編譯，讓你在瀏覽器可以預先看到網頁的成果。等沒問題在來上傳文件到 github。產生的頁面通常會在 http://127.0.0.1:1111/。但是有幾次 port 的數字會變化。如果進不去網頁可以看一下是不是網址有變化。
   3. Zola build: 主要是把 md 文件內容轉為 Html 以及整個網頁的設定進行編譯。如果使用 Netlify進行佈署 (deploy)。就不一定需要使用 Zola build。可以直接讓 Netlify 幫你佈署產生頁面。

2. 在自己的電腦確認自己建立的網頁沒問題就可以上傳到 github。要使用 Netlify 或是 github 的 pages 的話就要把 repo 設定為公開。

3. 設定 Netlify 就指定自己 github 帳號內放網頁的 repo （類似資料庫的概念）。只要是公開(Public)的 repo 就可以指定作為網站的 build 跟 deploy。如果要使用 github pages 的話可以參考 從零開始: 用github pages 上傳靜態網站 這裡面有詳細的步驟。

大致上以上三個步驟就能建立一個blog 網站。

以上三步驟我先是在第一步驟卡關了好幾天

Zola 到底是什麼，template, html, scss文件, js, md 文件一堆文件怎麼湊出一個網站。沒概念就需要重新整理自己的思考方式，在各種錯誤訊息裡找出自己搞不懂的地方。除了爬文，ChatGPT 給了我不少幫助。釐清我很多觀念上模糊的思考。

我自己的理解就是：

1. templates 資料夾內的 html 文件用來管理版面架構
2. static 資料夾的文件管理樣式。可能有scss/css/js文件都放在這。
3. context 的 md 文件要管理內容。寫好的文章都是用 md 文件儲存。其中有個文件是 _index.md。這可以針對不同的主題分別進行頁面的設定。例如 Blog, PicStory, Thoughts 這三個主題都會有自己的頁面，每個頁面也可以分別設定版面的形式。像是要不要有側邊欄，或是增加更多的資訊在不同的側邊欄。

第二步驟就是使用 github 上傳網頁

直覺 github 就是個免費的空間。以為跟雲端硬碟或是 Dropbox 一樣簡單使用。最經常用的就是到設定裡面刪除 repo，然後重新新增一個 repo, 刪除 repo 不斷輪迴。卡關在怎樣使用 Git Bash 以及跟 GitHub Desktop 之間到底誰先誰後。這裡又過了 8 天，我大概有點知道這些指令跟工具的功能。終於成功上傳了最初的網站， Even theme 的南觀×難關×喃倌。選擇 Even這個 Zola themes 作為範本。除了因為簡潔之外，就是比較容易維護。其他範本太過複雜，一個修改就開始報錯。經過幾次嘗試之後，決定讓網頁至少要有個開始。卡關太久心很累。

想換字體又走心了幾天

放了幾篇文章之後，這網站簡潔之餘有點簡陋。很想加上些什麼。PJ 用了金萱那提，這字體讀起來很舒服，我很喜歡，不過要付年費。不是很確定文章會不會一直寫下去，就先考慮免費方案。免費字體 Google font,嘗試之後沒問題。可是想要更特別的，所以就找了可以免費使用的字體打算自己掛上字體。就算字體掛上了,不知道為何就是看不到設定的免費字體。

我找的字體是兩位高中生在自主學習計畫做的字體。雖然後來搞不定就沒使用,但是我很認同這兩位年輕人的行動力跟想法。以後有機會再來使用。【辰宇落雁體】── 複寫呢喃，為你成篇。

以下是我目前維護網站執行的順序

1. Visual Studio Code 新增文件跟進行 md 文章的編輯。這是我第一次使用這工具，之前大多是使用 markdown 編輯器或是 Obsidian 編輯。不過 VSC 能夠用樹狀圖的方式管理所有網站的文件，隨點隨改。實在太方便，感謝 PJ 介紹的好工具2022 年開始進入我工作流的好工具們。
2. 使用 Git Bash 命令列進入網站的根目錄。執行 Zola serve: 確認新增的頁面有沒有問題。
3. GitHub Desktop: Commit 修改的內容之後，Push 文件到 github.
4. 等過幾分鐘等 Netlify 把 Build 跟 Deploy 完成佈署就能看到更新的網站。

改版

經過將近一個月的燒腦奮戰，不知又多了幾根白髮。追求更好的閱讀體驗的想法讓我起心動念想使用 Pin 起來 的網頁樣式。每次遇到網站問題進行搜尋的時候，在各個網站部落格穿梭，能讓我不小心讀完一篇又跟著讀其他內容的就是 Pin 起來的文章。有被「Pin」到的感覺吧。讀來舒服的文字跟想法，忍不住想繼續。這想法過了幾天，決定先開始進行些研究。先是到 github 找 PJ 用來放網站的 repo。下載之後進行結構的理解以及測試每個文件背後影響的功能。經過幾天的測試，大致理解需要怎樣設定。自己跌跌撞撞的架站經驗，讓我體會到每個程式碼，每個功能的增加修改都是心血跟心力。對於拾人牙慧，我是有所顧慮。最終我理解到現階段我是不可能寫出這麼簡潔易讀又好用的網站。我還是發一個稍長的訊息徵得 PJ 同意使用在 github 的Zola文件作為網頁範本，進行修改。感謝 PJ 大方的同意並且分享他自己架站的經驗。如同 PJ 分享的，Zola 的使用分享真的不多，但是有前輩慷慨分享架設過程，讓我覺得不用怕，步步為營總能找到出路。

修改側邊欄文件，用分類跟標籤方式呈現

Pin 起來的站內搜尋 側邊欄位有個「看更多」區塊的連結是失效的。這部份我嘗試詢問 GPT 也沒有得到答案。但是 templates 資料夾內有個 404.html 有寫出依照標籤 Tags 或是類別 Categories呈現的 code。

於是我把以上兩行 code 加入到 templates 資料夾內的 search.html內。 原本的 code 是：

現在改成

   <li class="no-underline">
    <a href="{{ config.base_url }}/categories" class="btn btn-info" role="button">By Categories</a>
   </li>
   <li class="no-underline">
     <a href="{{ config.base_url }}/tags" class="btn btn-info" role="button">By Tags</a>
   </li>

這樣就能依照類別跟標籤顯示文章。

目前網站的建置已經告個段落。對於「分享」的理解，是在接受他人的分享中得到更深的認識。原本，只打算寫個短文感謝 PJ 的分享。最後的結果變成一個阿伯流水帳式的碎碎唸。為這段跌跌撞撞的網站建置歷程留下一個記錄。