北港媽祖也懂 Material Design！手機就能跟著媽祖遶境 Live 齊步走_html/css_WEB-ITnose

《TO 導讀》：一個工程師的成就感未必來自於工作，而是能將專業所學投入生活相互呼應，有所貢獻。媽祖繞境在北港人心中不只是民俗活動，而是從小看到大的成長記憶。一位來自北港的工程師便運用所學，為媽祖繞境架設網站，只要透過手機就能參與媽祖遶境盛事。以下是為作者第一人稱描述。

很久沒來版上 PO 文章了 >"

最近忙著幫忙我們家鄉的活動製作網站，基本上我是屬於義務性幫忙、非官方、沒盈利的自主服務 (XD)，每一年的製作這個網站我算是不斷自我突破吧 (疑？)，從後端、系統、設計、切版、上稿，我嘗試一個人完成！

話題扯遠了，回到正題，這個網站我要分享的是前、後端以及系統部分，

如果內容不 OK 可以跟我講一下喔！

《 笨港迎媽祖 》網站

從設計開始，我參考了 Material Design 的角度去設計版面以及流程，不過當然的，手機與網頁的表現還是會有些許的差異，但是整體我仍然盡量參考規範ＸＤ

PHP 這次我就使用了很潮的 php7，跑起來貌似有變快，因為我的爬蟲變快了，所以整體來說算是很滿意，只是有些 function 需要稍做調整，不過大致上都很健康！

JavaScript 這次主力都在 Google Maps API 的運用。因為三年前我將此地圖資訊與廟會遶境路線做了結合，開啟了我對 Google Maps 運用的熱愛，所以今年也是把他當主力，活動當天沒意外的話，我會結合 GPS 線上定位！

CSS 的部分，我則是使用 compass scss 去實作，javascript 的話則是使用 jQuery 以及一些其他的 lib 實作！因為前後端都自己包辦，所以 Framework（CodeIgniter）我做了一些修改，讓這些靜態 css、javascript code 上 production 時候自動的 merge 以及 minify。

在靜態檔案的處理，我利用 S3 強大的空間功能，將網站的圖檔資源、js、css 都上到 S3 以減少 EC2 的 Loading，所以說，S3 上的 js、css 都是已經 minify 的了，而圖片檔若是遇到大檔案，則利用 TinyPNG 去對圖片做壓縮，然後再上傳到 S3，

對了，以上當然是用程式跑的：）

再來則是 HTML，基本上網站前台都是使用大量的文章以及簡介，所以可以做大量的 cache，然後這部分採用 file cache 而已，雖然我有原本打算使用 Redis 去實作，但是我把記憶體留給 MySQL 了..（我沒開 RDS，MySQL 是上在與 Server 同一台的 EC2）

因為有作 output 的 cache，所以我也順便將 HTML minify 囉，因為做 HTML 的 output cache，所以瀏覽人數的紀錄就不能跑 php 做 +1，所以這部分我使用 Ajax 去實作回傳人氣的紀錄！

最後 SEO，以及相關搜尋的設定，robots.txt、Sitemap 不用講，一定會做，這次我還加入了一點點的 schema、Google AMP、JSON-LD 的結構，這些都是去餵 Search Engine 想吃的菜！

其實過程中我學到很多經驗，也嘗試很多架構，這次我使用 AWS 的服務，主要開了一台東京 t2.micro 的 EC2，以及使用 S3 的服務而已，網頁流量，據我看 GA 的即時人數，最高曾經落在 1900 多人，可能有些頁面是使用 S3 吧，所以都撐得住！

這是目前我個人做過最高流量的網站，相對的也是個人里程碑！

以上是我的經驗、心得分享， 回到做網站初衷，我只是個熱愛故鄉的鄉土文化，想為家鄉盡一分力，利用自己的專長技術，支援這個從小的信仰，如此簡單。

文章有點太長，如果看到這裡的朋友，非常感謝您將它看完，如果大家有想要來北港玩的，倒是可以看看網站內容喔！

若是文章不適合再版上討論的話，可以跟我說一下 >"

有問題或疑問的話，非常歡迎各位討論喔：）

（本文發布於 PTT_Soft Job 版，獲作者 吳政賢 授權刊登轉載， 相關作品 ， GitHub 資源 ，圖片來源：，未經授權請勿轉載。）