網頁架設學習歷程

網頁架設學習歷程

By 文揚 Wen-Yang 23 February 2026
網頁架設學習歷程

生日這天過得如日常般幸福,但很想分享個人網站作為成果發表。我終於順利把網站從wenyang0223.github.io搬家到 http://listenriver.com ,並且建立Waline 的留言板還有毛生按讚按鈕。


這陣子,下班後都投入另一項興趣是網頁設計,延續之前疫情期間學習到Github架設部落格,現在我透過各大AI的幫助,更進一步優化成我想要的樣子,例如:模仿Medium的拍手按讚按鈕,我的網站可以按讚噴出毛生。


身為完全不會寫程式的人,都是依靠AI給的code去複製貼上,但過程中多少也學習到基本的CSS跟JS。

不知道為何,我就開始沉浸在這種樂趣裡面,像是設計每個地方的CSS樣式,或是debug超久終於發現錯誤,成功的那一刻讓人開心到跳起來!而且當我想要發揮創意時,AI就可以協助我去實現,那種感覺很有趣。

中間還接觸越來越多工具。例如:Vervel、Neon database、VS code開各種終端機。


雖然身為社工還不知道架設網站可以如何協助工作,目前就是把一些閱讀心得或工作的想法放上去。

許多進步都源自於想要更方便而開始。從原本要複製public資料夾,到現在學會用Obsidian一鍵上傳文章非常方便。靠著強大的AI工具,文組麻瓜也能寫網頁呢!


我的網站學習歷程:

  1. 用Obsidian來整理與書寫

  2. 安裝Git環境

  3. GitHub設定自動化Workflow

  4. Obsidian外掛實現一鍵更新網頁

  5. 從GitHub Pages搬家到Vercel

  6. 舊網址301重新導向設定

  7. GSC site map更新

  8. Hugo版本更新

  9. 學會用VS code開Hugo server

  10. Waline留言板

  11. Waline訪客留言統一頭像

  12. Waline留言版自定義樣式微調

  13. Gravatar註冊

  14. Waline瀏覽次數功能

  15. Console刷瀏覽次數

  16. Node.js環境安裝

  17. Pagefind搜尋功能

  18. Pagefind搜尋優化

  19. Grok教我寫API

  20. 再創一個Repo跟Vercel 專案

  21. Neon新增database串起來

  22. Vercel serverless閱讀次數

  23. Vercel serverless按讚按鈕

  24. 按讚會噴兔子

  25. 調整兔子噴的方式

  26. 調整兔子變成毛生

  27. Adobe express 配合Canva付費版,升級毛生透明背景Gif

  28. Google免費API金鑰

  29. AI自動抓文章關鍵字、推薦文章

  30. 毛生DVD動畫

  31. 手機版UX優化

  32. 利用Github Actions定時檢查死連結

  33. Cloudflare買網域listenriver.com

  34. wenyang.vercel.app設定跳轉新網址(vercel.json寫一條)

  35. wenyang0223.github.io設定跳轉新網址(切到gh-pages設定舊網頁index.html)

  36. 終於成功在GSC變更網址,兩個網址都搬遷到listenriver.com


👀 本頁瀏覽量 0