博客系統開發 (28 篇文章)

個人項目展示 (1)開源貢獻 (18)博客系統開發 (28)技術實踐總結 (6)

←返回到項目案例

Astro 是什麼？專為內容驅動網站設計的高效前端框架

Astro 是專為內容導向型網站而生的超輕量框架，兼具極速效能與自由整合力，本文將從實戰角度出發，帶你深入理解為何我從 GatsbyJS 遷移至 Astro。

2025年4月1日722 次分享

淺談單一功能原則：編寫更易讀技術文章的關鍵

當我寫過八十篇技術文章之後，我發現技術文章越是簡單，越有效地傳播知識。這裡分享一下如何運用單一功能原則寫出更加容易理解的技術文章。

2023年12月6日

給過去的的自己的一封信：如何自學轉行成爲前端工程師？

最近，一些朋友向我詢問如何自學成為前端工程師，這讓我回想起五年前我自己曾經處於迷茫的交叉路口。當時，我正面臨著轉行的艱鉅挑戰，但我絕不願意放棄。我開始執筆技術文章，並積極參加各種技術競賽。我希望這封信能夠超越時間的限制，給予過去的自己對未來的期望：

2023年12月4日922 次分享

如何使用 Astro 404 頁面重定向正確的文章頁面？

例如【【翻譯】前端性能優化必備工具清單】，這是我在2017年翻譯的文章：https://calpa.me/2017/06/19/front-end-performance-check-list-for-production-in-chinese/應該重導向到https://calpa.me/blog/front-end-performance-check-list-for-produc…

2023年11月30日3 次分享

Cloudflare Pages、Worker 和 KV：實現伺服器端渲染的強大組合

在經營技術博客的過去五年，儘管靜態網站生成方法在某些方面具有優勢，但它們也帶來了一些困難和挑戰。

2023年11月23日567 次分享

Astro、Tailwind CSS 和 Animate.css：提升網站性能和設計風格的關鍵工具

Astro融合了多種不同的前端開發概念和技術，使得開發者可以根據項目的需求靈活地選擇最適合的方式來構建網站。

2023年11月20日672 次分享

回顧我的 2023 開發者生涯：前端、後端、雲端、到 Web3

前端開發領域一直都處於不斷變化的前緣，2023年也同樣如此。我一直追求最新的技術趨勢和工具，以確保我能夠在這個競爭激烈的領域中保持競爭力。在不斷追求創新和學習的過程中，我深深體會到前端技術的重要性。

2023年10月13日2167 次分享

如何透過 ZEIT 方便快捷地部署免費的 Node.js 項目？

如果你沒有註冊過ZEIT的話，那麼你可以到https://zeit.co/註冊一下。

2019年3月4日2 次分享

超好用的全棧項目部署構建平台 - Netlify, ZEIT

Netlify提供一站式的構建，部署靜態網站。它可以實現秒級部署項目，只需要完成以下三步驟：

2019年2月17日125 次分享

GatsbyJS 入門（三）：從零開始架構 React 靜態網站

GatsbyJS 提供了一個簡單易用的命令行工具，我們可以透過它來構建一個基本的 React 網站，並實時看到修改代碼所帶來的變化。

2019年1月16日

從博客系統回顧我的 2018 年前端生涯

時光飛逝，我已從大學畢業成為前端工程師。回想這一年，我完成了三件事情：改版博客系統，讓不同用戶可以快速啟動項目，它是我第一個過百Star數的項目；翻譯並校對技術文章，學習了不少前端實用的技術；對博客系統框架的GatsbyJS，ReactJS技術研究。

2018年12月24日

基於 GatsbyJS 的博客系統正式開源：gatsby-starter-calpa-blog，及其使用方法

感謝各位這些年來閱讀我的博客文章，以及優化博客系統框架，現在，我將為你帶來一個前後端徹底分離，而且可以一鍵啟動的博客框架。

2018年12月3日1 次分享

GatsbyJS 入門（二）：如何以 Starter 快速架構網站

上次我們提到 GatsbyJS，它是一個可以獲取任意數據，並生成靜態化網站的系統。這一次，就讓我們以 Calpa 的技術博客作為例子來開始架構網站吧

2018年11月23日

GatsbyJS 入門（一）：打造開箱即用的現代化前端網站

GatsbyJS是一個擁有超過2萬Stars，3500forks的React網站生成系統。

2018年11月16日1 次分享

前端工程師的日常修煉清單

學習如逆水行舟，不進則退。透過這個清單，我可以不斷學習前端知識，掌握更新的技能，天天進化。

2018年11月5日13 次分享

Hacktoberfest 2018 ﹣ 面向所有人群的開源社區最大活動

Hacktoberfest是一個由DigtialOcean,Github,Twilio共同打造的一年一度全球開源活動。參與者只需在十月一日到十月三十一日期間，在Github上五個遞交Pullrequests，就可以獲得活動的衣服。

2018年10月9日

關於 2018 年的 Calpa Liu

你好，歡迎來到我的博客。我是 Calpa，一個喜歡寫技術文章的前端程序員。

2018年5月1日1 次分享

Gatsbyjs async/await 更新報錯解決方法

SyntaxError:Unexpectedtokenoperator«*»,expectedpunc«(»「component---src-templates-blog-post-js-42473b53655caf4635a2.js:18311,43」

2018年3月21日

美化 console.log 輸出

簡單來說就是插入這一個替換符，之後的句子便會加上相對應的樣式。

2018年3月4日3 次分享

又到了年度總結的季節 ﹣ 我的 2017 前端開發回顧

從最初的失望與後悔，到最後的興奮與感動，2017 年可以算是充滿挑戰與機遇的一年。雖然我依然是一個非科班學生，但是這沒有阻止我轉行成為前端工程師，反而成為向前邁進的動力之一。如果沒有這些經歷，我也不會發現自己對於編程的那份熱愛。在此，就讓我回顧一下這一年在自學編程轉行的經歷吧。在開始這篇文章之前，我先戴上頭盔，以防意外。

2017年12月31日8 次分享

參加八次黑客馬拉松的個人體會與總結

一開始，我沒有想那麼多。無論是取得勝利，或者是獲取經驗，都能夠幫助我成長。如果是取得名次的話，那就可以跟人家分享一下喜悅。如果是取得經驗的話，那也能從一個短時間試驗自己對於不同技術的掌握程度。…

2017年11月6日2 次分享

【圖多】《遠征成功﹣﹣一個香港人北上杭州豬場的前端面試之路》

首先，我要感謝網易。作為一個香港人，能夠拿到杭州的面試機會，實屬機會難得。這次的兩輪技術面試，考察點廣泛而深入。雖然問題比較深入，但這讓我感覺對於技術要求比較高，這是一件好事，因為可以反映公司對於技術的重視。在大四的這一年裡，我會繼續努力，爭取時間學習一個。本文將會記錄我面試時遇過的問題，以及作為一個香港人在杭州遇到的困難。

2017年9月30日

項目代碼調試：提問前要做的六個步驟

上天對於每個地球人都是公平的，每個人都一天只有24小時。為什麼有的人會停留不前，有的人卻會不斷有所成長？其中一個原因是當遇到問題時，他們解決問題的方法是非常不同的。同樣是遇到問題，與其伸手，等其他程序員幫助去解決問題，倒不如自己先嘗試各種方法，然後才問人家。我會在這篇文章簡單說一下在你提問之前，你可以做的六個步驟。

2017年7月24日

【翻譯】前端性能優化必備工具清單

請不要忘記為你的網站加上它，它就好像是你的網站的ID。無論你有沒有favicon.ico，用戶的瀏覽器依然會請求它。如果你忘記加上這個檔案，你的網站就會返回404NotFound，這會讓瀏覽器面紅。所以你要小心一點，避免給予用戶負面的第一印象。要解決這個問題，你可以透過FaviconGenerator生成favicon和manifest檔案。

2017年6月19日5 次分享

2017 年香港開源年會後記

大約兩個星期之前，我在Facebook上看到2017年的香港開源年會的消息。我想，我是不是可以透過這個機會，認識一下不同領域的程序員呢。於是，我在EventBrite上面買了學生票。但最終我拿到VIP票了，感覺有點激動。我把這一次的會議做了幾點筆記，也許，每一個人都應該參加最少一次如此有規模的大會。我會在這裡說說我參與這次會議所發生的一些事。

2017年6月14日