軟體 on Parker Chang's Web

我如何架設 WordPress 網站

Sun, 13 Apr 2025 00:00:00 +0000

去年在工作上有處理幾個大型的 WordPress 的網站，來記錄跟分享一下學到的 WordPress 架站策略。

這裡之後也會改成 WordPress，改完會再跟上來分享為什麼跟怎麼做的。

WordPress.com vs WordPress.org #

首先來帶一下官方的兩種方案。我身為工程師其實一直都只知道 WordPress.org，前陣子有朋友來問我才知道原來還有 WordPress.com。

WordPress.com 是由 Automattic 公司提供的全方位託管服務，在網頁上點一點就能建立網站。但相對地自由度極低，主題客製化困難，很多外掛不能用，免費版陽春到一定得付費。

WordPress.org 是可以下載開源的 WordPress 軟體。可以依照自己的需求部署，幾乎沒有任何限制——安裝外掛、修改主題，或進行各種神奇的客製化都很自由。但就是要自己管理伺服器、更新跟備份。

不過 WordPress.org 在市場上也有許多整合方案能簡化流程，也不是一定得要找工程師才能弄，而且我有預感用 WordPress.com 的人遲早也是得跳槽，因為限制真的太多又不便宜。

本篇也是使用 WordPress.org，是需要懂一點技術，但我會盡量把流程講清楚一點。

WordPress.org 市面上的託管方案 #

這邊介紹的我都沒有用過，但可以分析一下價格和一些初步的觀察。

1. 傳統虛擬主機（如 BlueHost） #

基本費用是每月 2.95 美金（新台幣 95/月），可以很快地把網站架起來，也可以直接在裡面額外去購買網站的域名。

個人網站

Sun, 03 Mar 2024 00:00:00 +0000

這個網站本身就是一個作品。以下是技術選型與功能概覽。

技術棧 #

項目	選擇
靜態生成器	Hugo 0.161
主題	Congo v2
CMS	Decap CMS
留言	Cusdis
部署	Cloudflare Pages

功能 #

多語系：繁體中文（預設）、英文、日文
深色模式：跟隨系統自動切換
目錄：長文章自動產生 TOC
留言：Cusdis 輕量留言系統，深色模式同步
訂閱：文章頁底嵌入 Substack 訂閱框
CMS：Decap CMS 提供視覺化編輯介面

原始碼 #

原始碼存放於 GitHub，透過 Cloudflare Pages 自動部署。推送至 main 觸發正式環境建置；其他分支觸發預覽環境建置。

用 Hugo 建立靜態網站

Sat, 02 Mar 2024 00:00:00 +0000

Hugo 是目前速度最快的靜態網站生成器之一，搭配 Congo 主題可以快速建立一個功能完整的個人網站。

為什麼選擇 Hugo #

速度快：毫秒級建置時間
無依賴：單一執行檔，不需 Node.js
彈性高：豐富的主題與模板系統

安裝步驟 #

brew install hugo
hugo new site my-site
cd my-site
git init
git submodule add https://github.com/jpanther/congo themes/congo

設定 hugo.toml #

baseURL = 'https://example.org/'
title = 'My Site'
theme = 'congo'
defaultContentLanguage = 'zh-TW'

小結 #

只需幾分鐘，你就能在本機跑起一個完整的靜態網站，再透過 Cloudflare Pages 免費部署到全球 CDN。

談談 JavaScript 中的 eval、風險及替代方案

Sat, 30 Sep 2023 00:00:00 +0000

前言 #

最近用 Google Sheets 提供的 App Script 幫朋友寫了個小爬蟲，來自動化搬運跟整理網頁上資訊，發現 HTML Source 裡<script /> 的資訊無法直接被讀取，在問 ChatGPT 時，它突然給了我一個有用到 eval 的實作，之前只知道不要用它，這次決定來認真理解一下 什麼時候可能用到 ， 為什麼不要用 ，以及 有什麼替代方案 。

這篇文章會簡單介紹 eval 後，並帶上一個使用情境跟一個面試考題。

`eval` 基本介紹 #

eval(script); 是一個 JavaScript 內建函數。

它可以將傳入的 script String 視為 JavaScript 表達式（Expression）或語句（Statement）來執行。

使用情境：「你信任你要執行的 script 以及想把 String 當 JS Code 來執行」

Return value #

若參數為 String，則會回應 JS 實際執行的結果，如果該 String 不是可執行的 JS Code，則回傳 Error: {script} is not defined

從 Callback 到 Async/Await：以次序淡入動畫為例

Mon, 21 Aug 2023 00:00:00 +0000

Foreword #

這篇文章寫給聽過 Callback Hell, Promise 和 Async/Await 但實務上沒碰過，或是仍不清楚演進的人，我會透過「點擊之後元素要一個個漸入」的功能一步步帶大家看怎麼這三種方式會怎麼實作這功能。

功能 MVP 會是這樣：

直覺想法：

漸入在元素上放個 transition 然後點擊時改變 opacity 就好
一個個漸入？代表後面的元素漸入需要「等」前面的元素先漸入完畢？
在 JS 中要「等」首選就是 setTimeout，一個個等的話，就是一個 setTimeout 結束，再去呼叫另一個 setTimeout 就好。

於是就寫出了類似這樣的程式碼：

const startBtn = document.getElementById('startBtn');
const container = document.getElementById('container');
const first = document.getElementById('first');
const second = document.getElementById('second');
const third = document.getElementById('third');
const forth = document.getElementById('forth');
const fifth = document.getElementById('fifth');
const resetBtn = document.getElementById('reset');

startBtn.addEventListener('click', function () {
  this.style.display = 'none';
  container.classList.remove('hidden');
  setTimeout(() => {
    first.classList.remove('hidden');
    setTimeout(() => {
      second.classList.remove('hidden');
      setTimeout(() => {
        third.classList.remove('hidden');
        setTimeout(() => {
          forth.classList.remove('hidden');
          setTimeout(() => {
            fifth.classList.remove('hidden');
            setTimeout(() => {
              resetBtn.classList.remove('hidden');
            }, 500);
          }, 500);
        }, 500);
      }, 500);
    }, 500);
  }, 500);
});

寫完了，各個元素可以每 0.5 秒依序漸入了，可以收工了…嗎？

實作 Google 第三方登入（Vue / Express）

Sun, 23 Oct 2022 00:00:00 +0000

前言 #

最近公司需要串接第三方登入，因為第一次做，踩了不少坑，也發現 Google 又改版了，爬到的許多文都已經不堪用的，於是來分享紀錄一下串接的流程。

基本上，如果你是用 Google Sign-in JavaScript library 串接的話，Google 已經棄用（deprecated）了，並且將在 2023/03/31 完全捨棄，也就是不讓人下載跟使用，所以之前按照這個流程實作的要趕快重構啦！

這篇文章會用 Vue3 和 Express 來帶大家來手把手實作簡易的 Google 第三方登入！

（除了使用新版的 Sign In With Google button ，也會有新的 Google One Tap 功能）

因為我只有使用 Google 原生的 Library，而沒有使用別人包過的，所以如果是 React 的話語法稍微改一下就也可以用囉！

現在 Google 登入越來越好串，建議不要用別人包裝過的 library 來減少耦合度，因為敝司最近就是因為之前用的 library 沒在維護了才重新串了一遍。

Overview #

串接的流程會分成四個步驟：

談談網頁中的字體 — 設計、檔案格式與前端載入

Thu, 28 Oct 2021 00:00:00 +0000

前陣子設事未深的字型大補帖引起了一波領取字體的熱潮，除了在簡報、海報、社群貼文之外，你有想過在網頁上是如何使用字體的嗎？

photo by David Klein on Unsplash

之前設事未深的字型大補帖引起了一波字體的熱潮，那除了在簡報、海報、社群貼文之外，你有想過在網頁上是如何使用字體的嗎？

於是今天就來先分享一些關於在網頁上使用字體的知識和技術細節，前半算是科普，後半關於網頁如何使用字體的部分談比較多技術，不是前端工程師的就斟酌觀看囉！

藉由這篇文章，我將會告訴你 👇

一個字體的誕生（不專業版）
字體的檔案有哪些
網頁如何使用字體

字體設計流程 #

在開始介紹之前，因為實在太好奇字體如何被設計出來的，於是就問了一下身為設計師的朋友一些關於字體設計的問題，在這邊簡短介紹一下流程開個頭。

以繁體中文來說，會先做幾個固定的字，這些字做完就能大概涵蓋到中文字的筆畫規律，像是「永」就包括了所有不同筆劃，「鷹」則是可以測試有很多橫筆的情況等等。

https://www.easyatm.com.tw/wiki/%E6%B0%B8%E5%AD%97%E5%85%AB%E6%B3%95

接著可能會使用 Glyphs 或 FontForge 等軟體來調整各項細節，把大部分中文字做出來後，擺在一起確認一致性，最後就是一股作把剩下的中文字都做完。

網頁中的繁體中文有多少字要設計？ #

關於中文字的總量，在教育部的異體字字典收錄了十萬多字，而根據 Google Font 有提供的思源黑體檔案來看，網頁上會需要載入的字數大概是一萬五千字左右。

不專業地介紹完大致上的流程後，設計的細節就不再這邊誤人子弟了，有興趣的可以去看 justfont blog 會有更多關於字體的好文可以看。

字體一般來說都以怎樣的檔案格式儲存呢？ #

起初電腦的文字都是以點陣圖的方式呈現，這階段與印刷文字還是有很大的落差，因而字體就算設計出來了，也很難在電腦上完整呈現其美感。

Design System — 前端工程師也該知道的那些事

Wed, 22 Sep 2021 00:00:00 +0000

在講 Design System 之前想要先提到一個觀念：「前期規劃 > 實作」。

軟體工程師的本質其實跟建築師很接近，只是他們是建造房屋，我們是建造系統。

一個好的房子，它需要良好的架構設計，會需要規劃藍圖、理解整個建物的結構，在前期規劃設計上會花很多的時間。

而這概念對應到網頁來說，就是 Design System！

Design System 的前身 — Atomic Design #

講 Design System 之前要先來講講 Atomic Design 這個概念。

畢竟整個網頁架構的設計的先驅可以是說由 2013 年 Brad Forst 提出的 Atomic Design 開了第一槍。

後續 Google 才在 2014 年做了 Material Design，再到 2016 年由 Airbnb 進而提出了更完整的 Design System，更多細節可以參考 Karri Saarinen, Principle Designer at Airbnb 的演講。

那 Atomic Design 是什麼呢？ #

那我們先來看看張圖：

前端框架第 0 課：學習框架前該知道的事

Sun, 11 Jul 2021 00:00:00 +0000

前端框架的選擇一直是很多新手（包括我）的大哉問，我當初是因為公司在用 React 就也只能先寫 React 了，前陣子因緣際會開始碰了一下 Angular ，進而啟發我對於「前端框架」進行更多思考，像是「框架」到底是指什麼？什麼東西可以被稱為「框架」？為何前端需要去使用它？不用它會怎麼樣？聽說 Vue3 很猛，我該去學嗎？等等的問題。

而這篇文章就算是我在解決上述一些問題的思考，也是我認為在我們跳下去學一個框架之前，該先知道的一些基本觀念。

簡短講一下網頁發展史 #

技術發展日新月異，但其實技術的本質都是在「解決問題」。

藉由理解技術的脈絡，我相信對於理解眼前的技術跟想像未來的發展都是很有幫助的。

1990 年代：網頁誕生

1990 年 12 月 20 日 Tim Berners Lee 寫出了第一個網站並設計了 World Wide Web
這時期以靜態網頁為主，頂多有一些動態的選單和圖片特效

2000 年代：Web 2.0 ＋ Ajax

2004 年 Web 2.0 的誕生，使得網頁互動性開始提升，像 Facebook (2004)、Youtube (2005) 都是在這時期出來的
Ajax 非同步的應用，是讓網頁透過 JS 而不是瀏覽器來發送請求，因而不用重新載入來更新資料

2010 年代：網頁應用程式（Web Application ）概念出現

從這時候開始，Web 的複雜度跟互動性已經大幅提升，逐漸能做到原先桌面應用程式 ( Desktop Application）才能做到的事

為了因應這種高互動性的網站都會需要有的一些基本處理，前端框架就此誕生。

軟體 on Parker Chang's Web

我如何架設 WordPress 網站

WordPress.com vs WordPress.org #

WordPress.org 市面上的託管方案 #

1. 傳統虛擬主機（如 BlueHost） #

個人網站

技術棧 #

功能 #

原始碼 #

用 Hugo 建立靜態網站

為什麼選擇 Hugo #

安裝步驟 #

設定 hugo.toml #

小結 #

談談 JavaScript 中的 eval、風險及替代方案

前言 #

eval 基本介紹 #

Return value #

從 Callback 到 Async/Await：以次序淡入動畫為例

Foreword #

實作 Google 第三方登入（Vue / Express）

前言 #

Overview #

談談網頁中的字體 — 設計、檔案格式與前端載入

字體設計流程 #

網頁中的繁體中文有多少字要設計？ #

字體一般來說都以怎樣的檔案格式儲存呢？ #

Design System — 前端工程師也該知道的那些事

Design System 的前身 — Atomic Design #

那 Atomic Design 是什麼呢？ #

前端框架第 0 課：學習框架前該知道的事

簡短講一下網頁發展史 #

`eval` 基本介紹 #