Add README.md

README.md

@@ -0,0 +1,114 @@
+# SITCON 短網址服務
+
+這個專案使用 GitHub Pages 建立一個簡單的短網址服務，允許自定義標題、摘要和 Open Graph 標籤。
+
+## 如何建立新的短網址
+
+1. 在 `_redirects` 資料夾中建立一個新的 Markdown 檔案。檔名將成為短網址的一部分。
+   例如：`template.md` 將生成 `https://i.sitcon.org/template`
+
+2. 在 Markdown 檔案中使用以下格式：
+
+   ```yaml
+   ---
+   layout: redirect
+   title: "您的自定義標題"
+   description: "您的自定義描述"
+   image: "/images/your-image.jpg"  # 使用相對路徑引用 repo 中的圖片
+   # 或
+   image: "https://example.com/your-image.jpg"  # 使用完整的 URL
+   redirect_to: "https://example.com/your-long-url"
+   ---
+   ```
+
+   注意：
+   - 如果圖片存放在本專案的 `images` 資料夾中，請使用相對路徑（例如：`/images/your-image.jpg`）。
+   - 如果要使用外部圖片，請提供完整的 URL。
+
+3. 如果你想使用自訂圖片，請將圖片檔案上傳到 `images` 資料夾。
+
+4. 將變更提交並推送到 GitHub 儲存庫。
+
+5. GitHub Actions 將自動構建並部署您的新短網址。
+
+## 技術原理
+
+本專案利用以下技術和工具：
+
+1. **GitHub Pages**：用於託管靜態網站。
+2. **Jekyll**：靜態網站生成器，用於將 Markdown 檔案轉換為 HTML。
+3. **自定義 HTML 模板**：位於 `_layouts/redirect.html`，用於生成重定向頁面。
+4. **GitHub Actions**：自動化構建和部署流程。
+5. **Google Tag Manager**：用於追蹤轉換效果。
+
+### 檔案結構
+
+```
+/
+├── _redirects/     # 存放 Markdown 檔案的資料夾
+├── _layouts/       # 存放 HTML 模板
+├── images/         # 存放圖片檔案
+├── _config.yml     # Jekyll 設定檔
+└── .github/workflows/  # GitHub Actions 設定
+```
+
+### 重定向機制
+
+重定向使用 JavaScript
+
+### 重定向機制
+
+重定向使用 JavaScript 延遲執行，以確保 Google Tag Manager 有足夠時間載入和執行。這個延遲設定在 HTML 模板中，可以根據需要調整。
+
+### 自動化部署
+
+每當有新的變更推送到主分支時，GitHub Actions 會自動觸發構建流程，將 Markdown 檔案轉換為 HTML，並部署到 GitHub Pages。
+
+## 維護注意事項
+
+1. 確保 `_config.yml` 中的設定正確，特別是 `collections` 和 `url` 部分。
+
+2. 如需修改重定向邏輯或 Google Tag Manager 設定，請編輯 `_layouts/redirect.html` 檔案。
+
+3. GitHub Actions 設定檔位於 `.github/workflows/build.yml`，如需調整自動化流程，請修改此檔案。
+
+4. 若要更新 Google Tag Manager 程式碼，請在 HTML 模板中找到相應的程式碼區塊進行修改。
+
+5. 圖片檔案應放在 `images/` 資料夾中。請確保使用適當大小和格式的圖片，以優化網站效能。
+
+6. 在引用圖片時，請使用相對路徑（例如：`/images/your-image.jpg`）或完整的 URL。
+
+7. 圖片路徑支持兩種格式：
+   - 相對路徑：用於引用儲存在 `images/` 資料夾中的圖片（例如：`/images/your-image.jpg`）。
+   - 完整 URL：用於引用外部圖片（例如：`https://example.com/your-image.jpg`）。
+   請確保在 Markdown 檔案中正確指定圖片路徑。
+
+8. 定期檢查外部圖片鏈接是否有效，以確保所有短網址頁面都能正確顯示預期的圖片。
+
+9. 本系統強制使用 HTTPS 協議來確保安全性。即使在配置或圖片 URL 中使用了 HTTP，系統也會自動將其轉換為 HTTPS。請確保所有外部資源都支持 HTTPS 訪問。
+
+## 效能考量
+
+1. **頁面載入時間**：由於使用 JavaScript 進行重定向，頁面可能會有短暫的顯示時間。目前設定為 500 毫秒的延遲，可以在 `_layouts/redirect.html` 中調整這個值。
+
+2. **SEO 影響**：雖然使用 JavaScript 重定向可能會稍微影響搜尋引擎優化，但我們已經加入了適當的 meta 標籤來緩解這個問題。
+
+## 自定義和擴展
+
+1. **自定義域名**：如果您想使用自己的域名，可以在 GitHub Pages 設定中配置自定義域名。
+
+當然，我會繼續完成 README.md 的剩餘部分：
+
+
+## 相關資源
+
+- [GitHub Pages 文檔](https://docs.github.com/en/pages)
+- [Jekyll 文檔](https://jekyllrb.com/docs/)
+- [Markdown 指南](https://www.markdownguide.org/)
+- [Open Graph 協議](https://ogp.me/)
+
+## 最後說明
+
+這個專案旨在提供一個簡單、靈活且免費的短網址解決方案。它特別適合個人博客、小型專案或需要自定義重定向的情況。雖然它可能不適合大規模商業使用，但對於大多數中小型需求來說，它應該是一個很好的選擇。
+
+記住，雖然設置和使用這個系統相對簡單，但它仍然需要基本的 Git 和 GitHub 知識。如果您是新手，不要擔心！網路上有許多優秀的資源可以幫助您學習這些技能。