hawks.tw 是我記錄學習與生活的地方。這裡有程式開發、機器學習與資安的學習筆記,參與營隊、競賽和社群活動的心得,也有管樂生活,以及喜歡的動畫、電影、音樂與遊戲。
這個儲存庫包含網站原始碼、Markdown 文章、作品收藏和寫作工具。內容可以用一般文字編輯器或 Obsidian 維護;網站以 Next.js 建置成靜態檔,再透過 GitHub Actions 發布到 GitHub Pages。
| 入口 | 內容 |
|---|---|
| 首頁 | 個人簡介、最新文章與短筆記、精選作品和近期經歷。 |
| Blog | 學習筆記、活動心得與生活紀錄,同時收錄長文和短近況。 |
| Talk | 獨立的短筆記與分享紀錄入口;內容也會出現在 Blog。 |
| Library | 動畫、電影、音樂人與遊戲收藏,包含個人評分、心得及推薦作品。 |
| Project | 程式作品與個人專案。 |
| Timeline | 學習、社團、活動與競賽經歷。 |
| Search | 搜尋文章、短筆記與收藏,或透過標籤找相關內容。 |
| 訂閱 | 透過 RSS 追蹤文章、短筆記與作品評論。 |
| 聯絡 | 聯絡方式與社群入口。 |
舊的 /now/ 入口目前會導向 Blog,近況不需要另外維護一份。網站支援淺色與深色佈景,首次瀏覽預設使用淺色。
使用 Node.js 20 與 npm,與目前部署流程一致。在專案根目錄執行:
npm install
npm run dev接著開啟 http://localhost:3000。一般網站預覽不需要啟動 Discord 寫作工具。
| 指令 | 用途 |
|---|---|
npm run dev |
啟動本機開發伺服器,修改內容後可預覽結果。 |
npm run now |
依台北日期,在 content/talks/ 建立一篇短筆記草稿。 |
npm run now -- "今天想記下的內容" |
建立已標記為 published 的短筆記;仍需提交與部署才會更新線上網站。 |
npm run lint |
檢查程式碼;建置流程本身不會執行 ESLint。 |
npm run og |
單獨產生網站、Blog 與 Talk 的分享預覽圖片,輸出至 public/og/。 |
npm run build |
自動產生分享圖片、建置網站,並將可部署的靜態檔輸出至 out/。 |
本專案使用靜態匯出。日常預覽使用 npm run dev;package.json 中的 npm run start 執行的是 next start,不適用於這份靜態輸出。
Markdown 檔案開頭的 --- 區塊是 frontmatter,用來設定標題、日期、網址與發布狀態;區塊下方則是正文。現成範本放在 content/templates/。
在 content/posts/ 新增 .md 檔案,可從 post-template.md 複製,或使用以下格式:
---
title: "我的學習筆記"
date: "2026-09-09"
desc: "整理這次學到的方法、遇到的問題,以及下一步想做的事。"
slug: "my-learning-notes"
tags:
- "#notes"
- "#web"
status: draft
---
從這裡開始寫正文。desc是列表與分享時使用的摘要,建議用一兩句話說明重點。slug決定網址,例如/blog/my-learning-notes/。省略時會由檔名轉換;中文檔名建議明確填寫不重複的英文slug,發布後保持固定。tags用於搜尋與標籤索引,可依文章主題填寫。- 寫完後將
status: draft改成status: published。
在 content/talks/ 新增 .md,或執行 npm run now 建立草稿:
---
title: "今天的小進展"
date: "2026-09-09"
status: draft
---
記下今天做了什麼、想到什麼,或想分享的連結。Talk 使用檔名作為網址識別,例如 2026-09-09.md 對應 /talk/2026-09-09/。也可以使用 talk-template.md 補上活動名稱、封面、投影片或影片。
Blog 可透過 relatedTalks 指定相關 Talk 的檔名(不含 .md);Talk 可透過 relatedPosts 指定 Blog 的 slug。未指定時,網站會依內容比對相關文章。
複製 library-template.md 到 content/library/,填寫作品資訊:
---
title: "作品名稱"
category: anime
status: watched
rating: 8.5
note: "一句話說明喜歡這部作品的原因。"
featured: false
image:
src: "/images/library/example.jpg"
alt: "作品封面"
statusVisibility: draft
---category支援anime、movie、artist、game。status表示觀看或遊玩狀態:watched、listened、watching、playing、played、planned、recommended。- Library 的公開狀態使用
statusVisibility,準備好後改成published;它與觀看狀態status是不同欄位。 rating是個人評分,推薦等級由分數推導:9.5 起為 Brilliant、9.0 起為 Favorite、8.5 起為 Recommended,其餘為 Casual。featured: true將作品加入精選候選,featuredOrder可指定排列順序。- 正文可寫完整評論;音樂人也可透過
recommendations列出推薦歌曲或作品,支援純標題或含title、image、link、source、note的物件。 - 有評論或推薦作品時,才會提供
/library/<category>/<slug>/詳細頁;只有基本資料的收藏顯示在分類列表。
圖片放在 public/images/,文章內使用 /images/檔名 引用;作品封面集中在 public/images/library/。也支援 Obsidian 的 ![[圖片檔名.jpg]] 寫法。
Blog 與 Talk 的 status: draft、status: private,以及 Library 的對應 statusVisibility 值,會讓內容排除於公開頁面。省略公開狀態的內容會視為公開。這些欄位只控制網站顯示,不會隱藏 Git 儲存庫中的原始檔;public/ 下的檔案也會隨網站發布。
- 直接編輯 Markdown:修改
content/下的檔案,在本機預覽後提交。 - Obsidian:使用草稿、Daily Notes 與範本整理內容。資料夾與設定方式見 Obsidian 寫作流程。
- Discord:選用 Hawks Agent 寫作工具,在 Discord 建立、編輯、搜尋與匯出草稿,確認後發布 Blog 或 Talk。它是需要獨立設定與執行的服務。
app/
components/ 首頁、導覽與共用介面
data/ 個人經歷、專案與其他靜態資料
lib/ Markdown 讀取、搜尋與相關內容邏輯
blog/ 文章與近況列表、文章詳細頁、標籤頁
talk/ 短筆記列表與詳細頁
library/ 作品收藏分類與評論頁
project/ 專案列表
timeline/ 經歷時間軸
search/ 全站搜尋
rss.xml/ RSS 訂閱內容
content/
posts/ Blog 原稿
talks/ Talk 原稿
library/ 收藏資訊與評論
templates/ Markdown 與 Obsidian 範本
public/ 隨網站發布的圖片、分享預覽圖與其他靜態檔
scripts/ 建立短筆記、產生分享圖片與建置後處理
docs/ 寫作與網域設定說明
agent/ Discord 寫作工具(獨立服務)
.github/workflows/ GitHub Actions 部署流程
網站使用 Next.js 15 App Router、React 19、TypeScript 與 Tailwind CSS 4。Markdown 由 gray-matter、react-markdown、remark-gfm 和 remark-directive 等套件處理。所有公開內容在建置時產生,不依賴執行中的 Next.js 伺服器。
發布前在專案根目錄執行:
npm run lint
npm run buildbuild 已包含分享圖片產生步驟,不需要再另外執行 npm run og。確認結果後提交需要發布的變更並推送至 main,由 .github/workflows/deploy.yml 建置 out/ 並部署至 GitHub Pages。另一份 nextjs.yml 僅保留為手動備援。
- 部署指南:靜態輸出、GitHub Pages 與自訂網域設定。
- Discord 網域設定:邀請頁及
discord.hawks.tw、dc.hawks.tw的設定。