
生日這天過得如日常般幸福,但很想分享個人網站作為成果發表。我終於順利把網站從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工具,文組麻瓜也能寫網頁呢!
我的網站學習歷程:
用Obsidian來整理與書寫
安裝Git環境
GitHub設定自動化Workflow
Obsidian外掛實現一鍵更新網頁
從GitHub Pages搬家到Vercel
舊網址301重新導向設定
GSC site map更新
Hugo版本更新
學會用VS code開Hugo server
Waline留言板
Waline訪客留言統一頭像
Waline留言版自定義樣式微調
Gravatar註冊
Waline瀏覽次數功能
Console刷瀏覽次數
Node.js環境安裝
Pagefind搜尋功能
Pagefind搜尋優化
Grok教我寫API
再創一個Repo跟Vercel 專案
Neon新增database串起來
Vercel serverless閱讀次數
Vercel serverless按讚按鈕
按讚會噴兔子
調整兔子噴的方式
調整兔子變成毛生
Adobe express 配合Canva付費版,升級毛生透明背景Gif
Google免費API金鑰
AI自動抓文章關鍵字、推薦文章
毛生DVD動畫
手機版UX優化
利用Github Actions定時檢查死連結
Cloudflare買網域listenriver.com
wenyang.vercel.app設定跳轉新網址(vercel.json寫一條)
wenyang0223.github.io設定跳轉新網址(切到gh-pages設定舊網頁index.html)
終於成功在GSC變更網址,兩個網址都搬遷到listenriver.com