Skip to content

Latest commit

 

History

26 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

s.g0v.tw

g0v 短網址服務(URL shortener),部署在 GitHub Pages,網域為 s.g0v.tw(見 CNAME)。

運作原理

這個服務沒有後端伺服器,是「靜態檔案 + 前端 JS」,不需要任何伺服器端程式碼或資料庫。轉址分成兩層:

1. 預設路徑:404 fallback

對於沒有專屬頁面的 id,利用 GitHub Pages 的 404 機制 搭配前端 JavaScript 做轉址:

  1. 使用者造訪 https://s.g0v.tw/<id>
  2. 由於這個路徑並不是實際存在的檔案,GitHub Pages 會回傳自訂的 404.html
  3. 404.html 用 jQuery 讀取同目錄下的 list.csv,並以 jquery-csv 套件解析成物件陣列
  4. 從網址路徑(location.pathname)取出最後一段當作 id,在 list.csv 的資料中尋找對應的 id
  5. 若找到,透過 document.location.href = url 轉址到對應網址;若找不到,顯示 404 Not Found

這個方式的缺點是:分享連結時,社群軟體(Facebook/LINE/Twitter 等)抓到的 OG title 永遠是固定的「g0v shorten url service」,而不是該活動/連結本身的名稱。

2. 進階路徑:專屬靜態頁面(正確的 OG 標籤)

對於想要分享時有正確標題/說明的 id,會額外產生一個實體的 <id>/index.html(例如 ly/index.html)。因為 GitHub Pages 對實際存在的檔案會直接回應,https://s.g0v.tw/<id> 會直接吃到這個檔案,根本不會落到 404.html,其餘沒有專屬頁面的 id 則完全不受影響。

這個 <id>/index.html 內含正確的 <title>og:titleog:descriptionog:url,並用 meta refresh + JS 轉址到目標網址,讓分享出去的預覽好看、有助於傳播。

這些頁面不是手動維護的,而是在 list.csv 該筆資料的 title/description 欄位都有填寫時,由 AI agent 依照 .claude/skills/generate-shorturl-pages/SKILL.md 的規則產生(詳見該檔案的模板與規則)。若兩欄留空,則該 id 就維持走 404 fallback。

檔案結構

檔案 說明
404.html GitHub Pages 的自訂 404 頁面,內含讀取 list.csv 並轉址的邏輯(fallback 用)
list.csv 短網址對照表,欄位為 id,maintainer,created_at,url,title,description
<id>/index.html list.csvtitle/description 產生的專屬轉址頁面(非必要,僅部分 id 有)
.claude/skills/generate-shorturl-pages/SKILL.md 產生 <id>/index.html 的規則與 HTML 模板
CNAME GitHub Pages 自訂網域設定,內容為 s.g0v.tw
LICENSE MIT License

list.csv 格式

id,maintainer,created_at,url,title,description
jothon,ronnywang,2024-05-05,https://jothon.g0v.tw,,
  • id:短網址代稱,對應 https://s.g0v.tw/<id>
  • maintainer:新增這筆資料的人
  • created_at:新增日期(YYYY-MM-DD
  • url:實際要轉址過去的完整網址
  • title:(選填)分享預覽用的標題。留空則該 id 只走 404 fallback,不會產生專屬頁面
  • description:(選填)分享預覽用的說明文字。留空則同上,不會產生專屬頁面

如何新增短網址

  1. Fork 這個 repo
  2. list.csv 最後新增一行,依序填入 id,maintainer,created_at,url,若希望分享時有正確標題/說明,一併填入 titledescription
  3. 若有填 title/description,請 AI agent(或自行依 SKILL.md 的模板)產生對應的 <id>/index.html
  4. 開 Pull Request(應同時包含 list.csv 的變更,以及新增/更新的 <id>/index.html

注意事項:

  • id 不可與現有資料重複(404.html 是用簡單線性搜尋比對第一筆符合的 id
  • 沒有專屬頁面的 id,轉址前會先短暫顯示 "g0v shorten url service, redirecting"
  • 由於是純前端讀取 CSV 檔案做比對,沒有後端驗證,請避免放入敏感或機敏網址

部署

本專案直接透過 GitHub Pages 部署,main 分支的內容即為線上內容,CNAME 已設定綁定 s.g0v.tw 網域。

About

No description, website, or topics provided.

Resources

Stars

5 stars

Watchers

41 watching

Forks

Releases

Packages

Contributors

Languages