Pagefind 教學:如何為 Eleventy 靜態網站加入純前端搜尋
用 Pagefind 為 Eleventy 靜態網站加入站內搜尋:從建立索引、整合搜尋元件,到繁體中文搜尋與部署驗收,一次完成設定。
11ty 與 Hostinger 快取怎麼設定?從 .htaccess 到更新驗收
用 11ty 建站後,如何在 Hostinger 設定 HTML、CSS、JavaScript、圖片與 Pagefind 快取?本文用 .htaccess、hPanel 和 curl 帶你完成設定與排錯。
字型子集化:2026 中文網站如何減少字型載入、改善首屏速度
繁中網站不一定要載入 10MB 以上的完整字型。本文比較系統字體、自架子集化與 Google Fonts CDN,示範用 cn-font-split 或 subset-font 產生 WOFF2,並說明 font-display、缺字 fallback 與維護取捨。
LCP 優化實戰:首屏別 lazy-load,用 fetchpriority 把關鍵資源拉上來
靜態站 LCP 優化實戰:找出真正的 LCP 元素、避免主視覺圖被 lazy-load,並用 fetchpriority 與 preload 提升關鍵資源優先級,同時排除 render-blocking 造成的延遲。
GTM 延遲載入:用 requestIdleCallback 降低 PSI 的 TBT
Google Tag Manager 會和首屏資源搶頻寬,也可能增加 TBT 與 INP。本文用 requestIdleCallback、互動觸發與 timeout,示範如何延遲載入 GTM,並驗證效能與轉換資料的取捨。
圖片最佳化與 CLS 解決方案:用 width、height 預防網頁版面跳動
靜態網站圖片最佳化實戰:用 width、height 或 aspect-ratio 預留版面,降低 CLS 版面跳動;同時符合顯示寬、壓縮檔案大小,並介紹如何用 Eleventy Image 自動產生多種尺寸。
Proton VPN 值得買嗎?免費版與付費版功能完整解析
Proton VPN 免費版真的值得用嗎?本文比較免費版與 Plus 付費方案的速度、伺服器、隱私功能與限制,幫你依照實際需求選擇適合的方案。
AI 時代還需要學習 CSS 嗎?從「語法背誦」到「架構審查」的思維轉向
AI 都能幫你寫 CSS 了,還要自己學嗎?要,但學法不一樣。教你用幽默又實用的方式理解 CSS 心智模型、引導 AI 產碼,並顧好 Core Web Vitals。
Pi Coding Agent 完整指南:極簡終端 AI 程式助手入門與實戰工作流
厭倦沉重 AI 工具?Pi Coding Agent 用四個工具 + 可擴充設計,讓終端 AI 融入你的既有流程。含安裝、上下文工程、套件選型與 Cursor 分工決策表。
PageSpeed Insights 與 Core Web Vitals 2026 完全指南
解讀 PSI 實地數據與 Lighthouse 差異、LCP/INP/CLS 門檻、WordPress 優化 Checklist,取代已過時的 FID 指標
把文章從 WordPress 搬出來:eleventy-import 的匯出方式
WordPress 匯出到 11ty:eleventy-import 用法、圖片路徑、踩坑與 Markdown 結構整理
WordPress vs Eleventy:我為什麼把部落格遷到 11ty
從 WordPress 遷移到 11ty 的實戰經驗:效能、維護成本、SEO、遷移步驟
YouTube 批量取消訂閱:一鍵清理訂閱清單教學
快速取消大量 YouTube 頻道訂閱:瀏覽器擴充與腳本方法、注意事項
TypeScript 入門 5 分鐘:零基礎快速上手指南
TypeScript 完整入門指南:5 分鐘快速上手、類型系統、實戰範例
PHP 新手入門:10 個實戰練習題快速上手
PHP 零基礎快速上手:10 個實用練習、常見錯誤、進階資源推薦
免費 SSL 憑證完全指南:Let's Encrypt vs ZeroSSL 2026 對比
免費 SSL 申請教學:Let's Encrypt、ZeroSSL、cPanel AutoSSL 對比、自動更新、常見錯誤排解
PHP 例外處理,幫你抓住所有例外錯誤
PHP try/catch/finally、自訂 Exception、實務錯誤處理與常見陷阱
PHP static vs const:何時用哪個?完整對比
static 與 const 的區別、使用場景、性能對比、最佳實踐
PHP Composer 完全指南:依賴管理不再複雜
Composer 教學:安裝、composer.json、autoload、常用指令、套件發佈
Public vs Private vs Protected,PHP 存取修飾符解析
PHP public/private/protected 差異、封裝原則、繼承可見性與實戰範例
PHP 物件導向的基礎,從類別 (Class) 與物件 (Object) 開始
PHP OOP 入門:Class/Object 概念、屬性與方法、為什麼要學物件導向
CSS Grid 實戰範例,快速打造網頁儀表板
CSS Grid 儀表板實作:grid-template、響應式版面、常見坑與完整範例程式碼
SOLID 原則 PHP 實戰:設計模式對照指南
SOLID 五大原則詳解、vs Factory/Singleton 模式對比、實戰範例
Statamic 入門:檔案型 CMS 與靜態網站實戰
Statamic 安裝、flat-file CMS 概念、與 WordPress/11ty 差異、適合誰用
Eleventy (11ty) 入門:從零架設靜態網站
11ty 靜態網站生成器教學:安裝、目錄結構、模板、部署、vs Hugo 對比
靜態網站生成器比較:Hugo vs 11ty vs Next.js 2026
SSG 完整對比:效能、學習曲線、WordPress 遷移、適用場景與選型建議
Fira Code 連字體教學:VS Code 與終端機最佳設定
Fira Code 安裝、ligature 設定、VS Code / iTerm2 配置、替代字體推薦
如何使用 Herd 在本機架設 WordPress 網站
Laravel Herd 本機架 WordPress:安裝、站點建立、SSL、與 MAMP/Valet 差異
Laravel Herd 完全指南:從 MAMP/Valet 輕鬆遷移
Herd 本地開發環境教學、vs MAMP/Valet 對比、WordPress/PHP 專案設定
TOC 目錄完全指南:SEO 最佳實踐 + 3 種實現方式
文章目錄(TOC)怎麼做才對 SEO 有幫助?原生錨點、JS 動態、WordPress/11ty 三種做法與 2026 注意事項
npm vs yarn vs pnpm:2026 套件管理器完整對比
三大 Node.js 套件管理器效能實測、monorepo 支援、安裝速度與磁碟佔用對照表
瀏覽器分頁管理:Tab Manager Plus 與 Auto 實用教學
大量分頁怎麼找、怎麼整理?Tab Manager Plus/Auto 功能對比、使用場景與設定建議
Warp 終端機教學:10 倍加速你的命令行工作流
Warp 終端機完全指南:安裝、設置、快捷鍵、與 Git 整合、提升開發效率
常用的 14 種瀏覽器擴充功能推薦,網站開發一定要試試
好的瀏覽器擴充功能,讓你增加效率,不好的擴充功能,就只是在那佔空間,浪費記憶體,本篇分享目前還掛在我瀏覽器上的擴充功能,不完全是開發用途,適合網站開發者,對一般用途也有幫助。#1 Tab Manager Plus。
Homebrew 完全教學:Mac 套件管理與 curl/MacPorts 對比
Homebrew 安裝、PATH 設定、常用指令、vs curl/MacPorts 對比、2026 推薦套件與常見問題
ZeroSSL 免費憑證教學:自動更新 + Let's Encrypt 對比
ZeroSSL 申請教學、自動更新腳本、cron 設定、常見錯誤排解、TLS 1.3
PHP 架站全指南:2026 開發者必知的 5 個核心概念
什麼是 PHP?2026 市占、vs Node.js/Python、PHP 8.5 新特性、本機環境與學習路徑一次搞懂
Mac 開發者必裝工具清單:2026 年度精選 20+
Mac 生產力與開發工具推薦:終端機、視窗管理、剪貼簿、效率提升必備
查看 所有標籤。






































