第一次架網站的心得
第一次架網站的心得
伊藤蒼太此為隔壁開發心得
C++到前端的跨界初體驗
我開始寫程式和其他電神比已經算很晚了，約莫是高一上第一學期開始學C++，並決定用這條路走特選上大學，雖然目標是資安競程領域（主要是怕走前端會吃土）但我還是決定挑戰自己，嘗試學習網站開發（升學需要），不過，這次的網站製作並不是從零開始，而是使用了Hexo框架並套用了現成的模板。（技術不夠）雖然過程相對簡單，但仍然讓我對網站架構有了初步的了解（高二再來全部重寫）
Hexo框架的選擇與準備
為什麼選擇Hexo？
剛開始接觸網站開發時，我面臨了一個問題：應該從哪裡開始？在看了很多電神的網站後，我發現了Hexo這個框架。Hexo是一個快速、簡單且高效的靜態網站生成器，特別適合像我這樣沒有技術的人。它的優勢在於：
簡單易用：只需要安裝Node.js和npm(
對linux相對友善)，就可以快速搭建網站。
支持Markdown：對於不熟悉HTML的初學者來說，用Markdown撰寫內容非常友好。
模板豐富：有大量現成的模板可供選擇，能輕鬆打造一個美觀的網站。
此外，用Hexo可以讓我專注於創作，而不花太多時間在技術細節上。這對於剛開始探索網站開發的我來說，是一個理想的選擇。
套模板的過程
在決定要用Hexo當下我就已經找好要用的模板了，在茫茫模板中D-Sketon大大所製作的Reimu模板風格一下就吸引到了我（我只是看到東方就進來了）的注意。但此時的我並不知道接下來才是地獄的開始….
實際操作與心得
大卡關
首先我遇到的第一個問題是：「要怎麼在 Linux 上寫 Hexo 網站？」
由於我的電腦是 Linux 系統，而我過去從來沒在 Linux 上從 GitHub 抓過東西、也沒用過 Hexo，光是環境安裝就讓我摸了好一陣子。什麼 Node.js、npm、Hexo CLI、權限設定……全都要自己慢慢爬文摸索。
但真正的問題是，是部署到 GitHub Pages 的時候，後台一直報錯「找不到 Reimu 模板」。我反覆確認檔案都有傳上去、路徑也正確,但就是怎麼都過不了。當時的我顯然不知道GitHub Pages 預設會啟用 Jekyll 處理器，而我寫的是hexo架構....能跑才有鬼。
我在這個問題上卡了快一個月，試了各種方法都沒用。直到有一天我腦袋突然清醒去問AI，對方建議我：「在根目錄放一個名為 .nojekyll 的空檔案。」
雖然我也不清楚為什麼這樣可以跑，但至少他過了(◉３◉)
AI的影響
最近引起討論的Vibe Coding強調的是 「完全順應感覺（vibes）、擁抱AI帶來的進步，並忘記程式碼本身的存在」 這種寫法某種程度上解放了開發者的思維，讓創作過程更像是在畫畫、作曲，而不是一行一行的尻程式碼( ´•̥̥̥ω•̥̥̥` )
雖然這次開發還算不上真正的vibe coding，但實際上，大約有將近4成以上的問題，都是透過人工智慧幫我發現與排除的。例如 CSS 的語法錯誤、 YAML 格式錯誤、甚至是 Hexo 設定檔的小細節，很多我根本還沒注意到的 bug，AI 都能即時提醒我，甚至提供修正建議。
雖然在很多情境下它能提供即時且精準的協助，但在某些複雜或需要細膩判斷的地方，它反而會越走越偏。
例如有幾次我遇到 YAML 語法錯誤時，AI 給的建議看起來正確，但實際上只是 「表面正確」 —— 縮排雖然對了，邏輯卻錯了，導致 Hexo 仍然無法正確運作。此外，它有時候會給出 「過時」 的解法或是 「看似合理但根本不存在的語法」 ，特別是在處理一些偏門功能或自定義元件時。
還有一個問題，就是 「太依賴 AI」。一旦開始習慣問 AI，自己動手查資料、查文件的機會就會變少，也容易讓自己的 debugging 能力退化。尤其是當 AI 的回答沒有命中問題時，如果自己也不知道該怎麼 debug，就會卡得更久。
(現在有一堆人甚至連git都不會用)
英文的重要性
在AI的浪潮之下，我常常忽視了英文的重要性，總覺得只要程式寫得好，就可以輕鬆應對所有挑戰。但從這次的開發過程中github它們的介面和文檔幾乎全是英文。每當遇到問題時，我不得不花大量時間研讀英文說明和錯誤訊息，試圖理解它們的意思（真的看不懂阿….）
這些經歷讓我深刻意識到，英文對於資工科系學生的重要性不僅僅是「加分項」，而是 「必備技能」。從技術文檔到程式語言的關鍵字，再到國際開發者社群的交流，英文無處不在。如果沒有基本的英文能力，不僅學習進度會被拖慢，甚至可能錯失許多寶貴的資源與機會。
這次開發告訴我：之後英文課再也不敢睡覺了~~(´◓Д◔`)
反思與未來
成就感與不足之處
這次使用Hexo框架搭建網站並套用模板的過程，讓我感受到了一種前所未有的成就感(膨脹)。從無到有的過程中，每一步都充滿了樂趣(和痛苦)。尤其是在LLM的幫助下，我能快速解決問題，並完成一些之前認為很複雜的功能。
然而，這次的開發過程仍有許多不足之處：
依賴模板與AI：由於主要是套用模板和使用AI輔助，我對網站的底層架構和程式邏輯的理解還不夠深入。
缺乏自主性：雖然AI幫助我解決了許多問題，但有些代碼是由AI生成的，自己並未完全掌握其邏輯，這可能導致未來的維護困難(
大不了在重寫一個)。
未來計劃
這次經驗讓我對網站開發產生了興趣(離吃土進了一步)，也為我未來的學習指明了一些方向。我希望能在以下幾個方面來提升自己的能力：
從零開始撰寫網站 :
下一次，我計劃從頭學HTML、CSS和JavaScript，嘗試從零開始寫一個簡單的靜態網站(or 動態?)。這將幫我更深入地理解網站開發的基礎知識，並提升我的自主開發能力。
探索後端技術 :
除了前端開發，我也希望學習後端技術(反正都學一點就對了)，如Node.js或Python Flask，了解如何處理伺服器端邏輯和數據庫操作。
結合資安與競程背景 :
作為一名熟悉C++且對資安和競程感興趣的學生，我希望能將這些技能結合起來。例如，在學習網站開發時，嘗試了解常見漏洞（如XSS、SQL注入）以及如何防範它們。同時，也可以研究如何將高效算法應用於網站功能中。
減少對AI工具的依賴 :
雖然AI提供了極大的便利，但我希望能逐步減少對它的依賴，更多地依靠自己的能力完成開發工作。
結尾
這次開發讓我認識了很多人，學會了很多事，也讓我第一次體會到把一個想法慢慢實現出來的過程。
從架設部落格、學習 Hexo、改主題、調整樣式，到後來研究部署、踩坑除錯、學著寫 Markdown，我發現其實做網站並不只是寫程式而已，更是一種表達、整理與分享的方式。雖然這個部落格還有很多可以改進的地方，但它代表了我這段時間的努力與成長。未來我會繼續更新內容，記錄學習歷程，也希望能認識更多志同道合的朋友，一起寫、一起分享、一起進步。
最後，我想鼓勵所有初學者，不要害怕嘗試新事物。即使一開始只是套用模板或依賴AI輔助，每一次努力都是成長的一部分。未來，我期待自己能創造出完全屬於自己的網站，並結合資安與競程背景，實現更多可能性。
主頁截圖(截自2025/8/21)
