October 14, 2021

2021 年,西打藍個人網站總算完成!

詳述網站規劃、設計、實作、採用服務、優化


文 / 西打藍 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。其他方面還在規劃。

以上是此次網站製作的過程,歡迎到個人網站逛逛。




閱讀量




聯絡與合作


訂閱電子報,領「我當前 10+ 以上收入源有哪些」一文。

有文字採訪、網站開發,或是諮詢需求,皆可至個人網站參考作品,並聯繫 IG

或是想分享心情、聊聊天、交朋友,可以來秘密通道找我唷。

Email: frank@siddharam.com