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

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

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

話題扯遠(yuǎn)了，回到正題，這個(gè)網(wǎng)站我要分享的是前、後端以及系統(tǒng)部分，

如果內(nèi)容不 OK 可以跟我講一下喔！

《 笨港迎媽祖 》網(wǎng)站

從設(shè)計(jì)開始，我參考了 Material Design 的角度去設(shè)計(jì)版面以及流程，不過當(dāng)然的，手機(jī)與網(wǎng)頁的表現(xiàn)還是會(huì)有些許的差異，但是整體我仍然盡量參考規(guī)範(fàn)ＸＤ

PHP 這次我就使用了很潮的 php7，跑起來貌似有變快，因?yàn)槲业呐老x變快了，所以整體來說算是很滿意，只是有些 function 需要稍做調(diào)整，不過大致上都很健康！

JavaScript 這次主力都在 Google Maps API 的運(yùn)用。因?yàn)槿昵拔覍⒋说貓D資訊與廟會(huì)遶境路線做了結(jié)合，開啟了我對 Google Maps 運(yùn)用的熱愛，所以今年也是把他當(dāng)主力，活動(dòng)當(dāng)天沒意外的話，我會(huì)結(jié)合 GPS 線上定位！

CSS 的部分，我則是使用 compass scss 去實(shí)作，javascript 的話則是使用 jQuery 以及一些其他的 lib 實(shí)作！因?yàn)榍搬岫硕甲约喊k，所以 Framework（CodeIgniter）我做了一些修改，讓這些靜態(tài) css、javascript code 上 production 時(shí)候自動(dòng)的 merge 以及 minify。

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

對了，以上當(dāng)然是用程式跑的：）

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

因?yàn)橛凶?output 的 cache，所以我也順便將 HTML minify 囉，因?yàn)樽?HTML 的 output cache，所以瀏覽人數(shù)的紀(jì)錄就不能跑 php 做 +1，所以這部分我使用 Ajax 去實(shí)作回傳人氣的紀(jì)錄！

最後 SEO，以及相關(guān)搜尋的設(shè)定，robots.txt、Sitemap 不用講，一定會(huì)做，這次我還加入了一點(diǎn)點(diǎn)的 schema、Google AMP、JSON-LD 的結(jié)構(gòu)，這些都是去餵 Search Engine 想吃的菜！

其實(shí)過程中我學(xué)到很多經(jīng)驗(yàn)，也嘗試很多架構(gòu)，這次我使用 AWS 的服務(wù)，主要開了一臺東京 t2.micro 的 EC2，以及使用 S3 的服務(wù)而已，網(wǎng)頁流量，據(jù)我看 GA 的即時(shí)人數(shù)，最高曾經(jīng)落在 1900 多人，可能有些頁面是使用 S3 吧，所以都撐得?。?/p>

這是目前我個(gè)人做過最高流量的網(wǎng)站，相對的也是個(gè)人里程碑！

以上是我的經(jīng)驗(yàn)、心得分享， 回到做網(wǎng)站初衷，我只是個(gè)熱愛故鄉(xiāng)的鄉(xiāng)土文化，想為家鄉(xiāng)盡一分力，利用自己的專長技術(shù)，支援這個(gè)從小的信仰，如此簡單。

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

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

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

（本文發(fā)布於 PTT_Soft Job 版，獲作者 吳政賢 授權(quán)刊登轉(zhuǎn)載， 相關(guān)作品 ， GitHub 資源 ，圖片來源：，未經(jīng)授權(quán)請勿轉(zhuǎn)載。）