本站起源

來寫寫關於這個網站的一些事好了。

為何選擇個人網站

大概是從幾年前開始，就有建立個人網站的念頭。主要想提供一個窗口，讓我能隨意展示自己的作品，而免受現行社交平台的制約。社群平台擁有你的帳號、它們掌握著生殺大權。身為內容創作者，最不想發生的事有兩個：

• 辛苦耕耘的作品消失
• 創作思想受到箝制

很遺憾地，目前的社群平台正好在這兩點上，擁有接近絕對的管理權。像我這邊觀察，以繪師族群為主，很多有名的創作者都曾經發生過帳號被凍結或是限制。其中很多時候是被誤Ban的，並沒有貼真的露骨過激的圖，但他們還是被凍結了。當AI開始介入審查機制，我們以為這個現象能有緩解，但看起來是沒什麼變化，甚至造成了幾次大規模事件，連有名氣的創作者都遭到波及。

個人網站不需要服務任何人、任何平台，這才讓我不用提心吊膽，想著那些枷鎖會不會朝令夕改。這麼說來，我也好希望自己常看的知名創作者們，能夠自己出來經營個人網站。當然也是有創作者被鎖怕了，現在比較流行的是 Discord、Telegram 或是各種會員制訂閱服務(嗯？)。但這些地方，背後還是有公司在支撐。像是群組內也有留言審查機制，之前也曾發生訂閱平台政策轉向，大量創作者的心血被刪除或是被逼著改變服務內容的事件。

我基本上沒創作過R18向的作品，但想想一方面是能力不足色不起來，另一方面是我可能也在無形之中，被這些平台制約了。在清楚社群平台不樂見這些內容的狀況下，你還會往這方向前進嗎？

這是我第一次把作品發佈在沒有流量統計的地方，平常習慣看發出去的文有人按讚、轉貼，像這樣完全沒有數字回饋，多少還是感到有些不安。畢竟這種個人網站要算流量，肯定是不堪入目的吧。但我相信，也希望我能愛上這個模式。目前感受是好的，有個真正屬於自己的空間，還是自己打造的，帶來的成就感相當強烈。甚至在撰文的當下，我還沒有把這個網站的存在宣傳出去，僅僅藉 GitHub Pages 推送到公開網路上。光是如此，就已讓我十分滿足。

從何開始

這個網站是靠靜態網站產生引擎 11ty，並使用微軟的 VScode 編輯器編寫的。坦白說對於整個架站的觀念還是邊做邊學當中，這之中撞了不少牆。像是最近一次撞牆是要把整個專案丟上去 Github Pages。然後在自訂網域 DNS那邊繞了一陣子。那時候甚至想就這樣放下來，改用現成的部落格空間提供服務了。不過還好有撐過來，感謝 ChatGPT、Claude 的協助。

這個網站是真的簡陋，完完全全就是個網頁菜鳥寫出來的。剛好我喜歡極簡風格，所以起初就不打算使用華麗的程式碼與動畫，這樣簡單的樣式也頗符合我的審美。現在網路上有數不清的服務，自動化的程度從純靠手工到包套空間都有。你完全不需要像我一樣自虐，但其實現在AI輔助程式碼已經相當成熟。主要用於撰寫網頁的編輯器 VS Code，甚至將 AI Agent 包含在內，有問題、想加功能，整行反白選起來問AI就好。當然AI怎麼寫還是得花點功夫了解。

有興趣了解怎麼做的，這邊稍微名詞解釋(其實是寫給自己看)：
靜態網站（Static Website）是指網站中的每個頁面都是預先製作好的 HTML、CSS、JavaScript 檔案，使用者瀏覽時，伺服器直接傳送檔案，不需要即時從資料庫產生內容。它的優點是載入速度快、安全性高、成本低，適合公司形象網站、作品集、活動頁面或部落格等內容不常變動的網站。若需要會員登入、購物車、留言或即時更新等功能，通常會搭配外部服務，或改用動態網站。

Eleventy（11ty） 是一套開源的靜態網站產生器（Static Site Generator）。它可以把 Markdown、HTML 或其他模板檔案，自動轉換成靜態網站，不需要複雜的後端程式或資料庫。特色是簡單、速度快、彈性高，支援多種模板語言（如 Nunjucks、Liquid、Handlebars），常用於建立部落格、公司官網、文件網站和作品集。產生的網站可部署到 GitHub Pages、Netlify、Vercel 等平台，兼具高效能、安全性與低維護成本。

JavaScript 是一種事件驅動、物件導向的直譯式程式語言，為全球資訊網的核心技術之一。它主要用於為靜態網頁增添動態效果、控制多媒體與處理使用者互動，現今也廣泛應用於伺服器端（如 Node.js）等非瀏覽器環境。

Node.js 是一個基於 Chrome 引擎建構的開源、跨平台 JavaScript 執行環境。它讓開發者能跳脫網頁瀏覽器的限制，直接在電腦或伺服器上執行 JavaScript，廣泛用於開發後端伺服器、API 與現代化網頁開發工具。傳統的 JS 只能在瀏覽器（如 Chrome, Edge）裡操作網頁元素，Node.js 則賦予了 JS 訪問作業系統的能力，例如讀寫硬碟檔案、連接資料庫、進行網路通訊等。

Nunjucks 是一套模板引擎，使用最通用的 JavaScript 語言為基底，功能豐富且強大、快速且輕量。

Markdown 是一種輕量級的標記語言。你只需透過鍵盤輸入幾個簡單的符號（如 # 或 *），就能快速標示文字的粗體、標題或清單，而它最終能自動轉換為漂亮的排版或網頁格式。

GitHub Pages 是由 GitHub 提供的免費靜態網站託管服務。只要將網頁的 HTML、CSS 和 JavaScript 檔案上傳到 GitHub 儲存庫（Repository），它就能自動幫你把網站發布到網路上，並提供免費的 github.io 網址。

自訂網域 能將平台預設的複雜網址或包含服務商名稱的子網址，轉換為專屬、簡短且具專業形象的個人化品牌網址。

VS Code （Visual Studio Code）是一款由微軟開發且跨平台的免費原始碼編輯器。

網站結構大概是這樣：

├_site # 11ty產生的成品，讀者看到的就是這裡面的HTML檔
├node_modules # node.js載入的模組都放這
├src
│ ├──_includes
│ │  ├──base.njk # 這個模板主要處理底部導覽列
│ │  ├──work.njk # 作品集單頁面的模板，會讀取works資料夾內的md檔案
│ │  └──post.njk # 部落格單頁面的模板，會讀取posts資料夾內的md檔案
│ ├──posts
│ │  ├──貼文1.md # 使用Markdown語言撰寫，比用HTML快速
│ │  └──貼文2.md
│ ├──works
│ │  ├──作品1.md
│ │  └──作品2.md
│ ├──photos
│ │  ├──圖片1.webp
│ │  └──圖片2.webp
│ ├──index.njk # 首頁的模板
│ ├──works.njk # 作品集總頁面的模板
│ ├──posts.njk # 部落格總頁面的模板
│ └──styles.css # CSS決定網站外觀
├.eleventy.js # 11ty配置
├.gitignore # GitHub版本更新忽略項目
├CNAME # 自訂網域
├package-lock.json
├package.json # Node.js 專案的核心設定檔
└updateLog.md # 寫給自己看的更新記錄，但後來忘記更新了

其他細節

關於網站的標題： Anchor，也就是船錨。在平面設計軟體 Adoebe Illustrator 中， Anchor 一詞被譯作「錨點」，用來規範形狀。在向量繪圖的世界中，每個圖形都是由無數個錨點構成的。這邊拿來做為網站的名字，也是希望大家能從這個網站來定義我。

啊，不過我目前已轉為反 Adobe 生態系的立場了，而開源的替代軟體 Inkscape 中，使用的是「節點 Node」一詞。

難不成要改名 Namitz's Node？

你可以注意到字體都是以明體為主。我非常喜歡好看的明體，橫細豎粗撇如刀，點如瓜子捺如掃。明體的各種細節能在正式中帶來一絲工匠的韻味。我彷彿能感受到排字的工匠幫我一字一字排出這篇文章。本網站優先使用開源的 Noto Serif，但沒有強制安裝。所以你有機會看到系統自帶的明體。

目前觀察下來，在 Ubuntu 上看起來最舒適。而最醜的是我的三星手機，粗的明體看起來怪怪的，感覺是程式自動加粗而已。