文 / 西打藍 Siddharam
接案一年半後，我總算完成個人網站。我再也不必私傳作品連結給合作對象，僅需一串網址，即能開始談生意。
網站連結，我放在第一則留言中。可以體驗網站後，再回頭看這篇文章。
本文，我會從網站規劃、設計、實作、採用服務、優化，詳述網站製作過程。
補充一句，我並非使用模板，而是自己寫程式。從這篇文章中，你會從軟體工程師的角度，看見另一種網站製作思維。
首先，我從網站初步規劃開始：
1. 網站初步規劃
製作網站的步驟，粗分可能有幾十步，細分下則會有上百步。我製作網站第一步，是先釐清思緒，寫下未來幾個月的工作步驟。
我在 Google Docs 上，寫下頁面數、工作流程、其他發想：
頁面數：首頁、關於、聯絡、網站建置服務、文字書寫服務、一刻對談室。
工程流程：蒐集各頁排版、規劃各頁設計、撰寫文案、整理素材圖片、設計稿、工程施作、網站工具安排、SEO 優化、行銷。
其他發想：動畫、表單蒐集、其他服務。
我寫下頁數與流程後，就不再需要思考「該做什麼」，只需跟著步驟照實做。
當我有新發想時，就將發想放入流程中，給走到那一步的自己驚喜。
簡言之，有了規劃，就不再是無頭蒼蠅。只需要在空檔時間，執行當前任務，大大節省腦力。
2. 網站設計
規劃好流程後，便進入正式工作。在工程施作前，需要先蒐集各頁排版、規劃各頁設計、撰寫文案、整理素材圖片、設計稿。
我並非設計專業，於是我參考大量網站，思索網站配色、排版方式、氛圍、文案、字型。
有了參考範例後，我在 Docs 上寫下每一頁面的參考連結、區塊截圖、粗略文案。
網站設計的一大重點，是要確定整體網站的風格基調，例如專業、科技、華麗、低調。選定後，在擷取範例設計時，都得回歸自己的風格，而非照搬使用。
例如我網站走專業風格，頁面中就不該有誇張動態、可愛元素、高彩度配色。
設計完畢後，我開始一頁頁撰寫文案，整理各頁圖檔、作品連結、截圖。
做完上述前置作業，下一步進入實作。
3. 實作
實作方面，會有不常見專業名詞。
我使用的程式語言是 Nuxt，它是前端程式語言 Vue，用來處理 SSR 的框架。選擇 Nuxt 的原因，是它擁有 Vue 快速開發優點，以及 SSR 處理 SEO 的優勢。
選擇好程式語言後，我開始將頁面切割成組件，包含 header、footer、button、輪播、作品介紹。組件化開發能節省時間，易於維護。
例如當 header 需要修改時，我只需要調整組件程式碼，就會同步修改每一頁畫面。不需要一頁頁複製貼上。
專業名詞告一段落。我照著規劃好設計稿，分別製作桌面、手機版，放入圖片、文案、連結，即完成網站雛形。
4. 網站採用服務、優化
寫完程式後，我手上只有程式碼，還需要規劃儲存空間、DNS、網址、網站監控。而我選用的服務是：
儲存空間：GitHub Page
DNS：Cloudflare
網址：Godaddy
網站監控：Google Analytics、Google Search Console
在 SEO 優化上，我設定 Title、Description、og、Keywords、Sitemap。
其他還有轉圖片格式 Webp、壓縮圖檔、minify 程式碼、lazyload、第一屏渲染優化。
網站上，還有許多優化空間。
看到這裡，你會不會認為，將網站交給專業工作者執行，輕鬆許多？
像我不熟網站設計，每當有網站案，幾乎都會請專業設計師協助，我只負責執行自己擅長的程式，省時省力。
下一步？
在 Docs 上，我規劃下一階段的網站，會有最新消息與文章頁。
文章頁中，我會集結這一年多來寫的文章，寫成一篇篇完整文，經營好 SEO。其他方面還在規劃。
以上是此次網站製作的過程，歡迎到個人網站逛逛。
閱讀量次
聯絡與合作
有文字採訪、網站開發，或是諮詢需求，皆可至個人網站參考作品，並聯繫 IG。
或是想分享心情、聊聊天、交朋友，可以來秘密通道找我唷。
Email: frank@siddharam.com
訂閱：