时间:2021-07-01 10:21:17 帮助过:9人阅读
很久沒來版上 PO 文章了 >"<
最近忙著幫忙我們家鄉的活動製作網站,基本上我是屬於義務性幫忙、非官方、沒盈利的自主服務 (XD),每一年的製作這個網站我算是不斷自我突破吧 (疑?),從後端、系統、設計、切版、上稿,我嘗試一個人完成!
話題扯遠了,回到正題,這個網站我要分享的是前、後端以及系統部分,
如果內容不 OK 可以跟我講一下喔!
《 笨港迎媽祖 》網站
從設計開始,我參考了 Material Design 的角度去設計版面以及流程,不過當然的,手機與網頁的表現還是會有些許的差異,但是整體我仍然盡量參考規範XD
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 資源 ,圖片來源:,未經授權請勿轉載。)