生日這天過得如日常般幸福,但很想分享個人網站作為成果發表。我終於順利把網站從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