Skip to content

Latest commit

 

History

History
135 lines (89 loc) · 4.99 KB

README.md

File metadata and controls

135 lines (89 loc) · 4.99 KB

使用 Google 試算表與 GitHub Pages 建立短網址服務

本專案示範如何透過 Google 試算表 作為資料庫，搭配 Google Apps Script 處理邏輯，以及 GitHub Pages 託管前端，快速建立短網址服務。

功能特色

  • 自訂短網址：可以手動設定短網址代碼來對應長網址。
  • 簡易前端：使用輕量級的 HTML 和 JavaScript 處理網址轉址，並部署在 GitHub Pages 上。
  • 方便整合：使用 Google Apps Script 處理短網址的儲存與查詢。

運作原理

  1. Google Apps Script：

    • code.gs 檔案實作後端邏輯。
    • 透過 Google 試算表儲存短網址與對應的原始網址，並提供 JSON API 用於查詢。

  2. 前端頁面：

    • 簡單的 HTML (404.html) 用來處理短網址轉址。
    • 使用 JavaScript 呼叫 Google Apps Script 的 API，獲取對應網址並自動跳轉。

  3. GitHub Pages：

    • 將 404.html 上傳到 GitHub Pages，作為動態轉址的前端介面。

專案結構

  • code.gs：用於 Google Apps Script 的後端程式碼。
  • 404.html：簡單的轉址頁面，部署於 GitHub Pages。

設定步驟

第一步：設定 Google 試算表與 Apps Script

  1. 建立 Google 試算表，新增以下欄位：

    • 短網址（Short Code）：短網址的識別碼（唯一）。
    • 完整網址（Long URL）：要轉址的目標網址。

  2. 在試算表中開啟 Apps Script 編輯器：

    • 將 code.gs 的內容貼到編輯器。
    • 將程式部署為網路應用程式，並設定權限為「任何知道連結的人」。

  3. 複製網路應用程式的 URL。

第二步：設定 GitHub Pages

  1. 將專案下載到本地端。
  2. 編輯 404.html，更新 API URL： 
    const apiUrl = '你的 Google Apps Script 網址?code=' + shortCode;
  3. 將專案推送到 GitHub，並在儲存庫設定中啟用 GitHub Pages。

第三步：使用短網址服務

  • 使用以下格式存取短網址服務： https://你的 GitHub 使用者名稱.github.io/你的儲存庫名稱/<短網址代碼> 例如：https://your-username.github.io/your-repo/abc123

使用範例

假設短網址代碼為 abc123，對應的完整網址為 https://example.com：

  1. 在 Google 試算表中新增一筆資料，短網址代碼 欄位填入 abc123，完整網址 欄位填入 https://example.com。
  2. 在瀏覽器中輸入 https://your-github-username.github.io/your-repo-name/abc123，即可轉址至 https://example.com。

注意事項

  • 請確保 Google Apps Script 的部署權限設為公開。
  • 請確認 GitHub Pages 與 Google Apps Script 均使用 HTTPS，以確保安全性。

URL Shortener with Google Sheets and GitHub Pages

This repository demonstrates how to create a URL shortener using Google Sheets as the database, Google Apps Script for backend logic, and GitHub Pages to host the frontend.

Features

  • Customizable short URLs: Define your own short codes for URLs.
  • Simple frontend: Lightweight HTML and JavaScript for URL redirection, hosted on GitHub Pages.
  • Easy integration: Utilize Google Apps Script to handle URL storage and lookup.

How It Works

  1. Google Apps Script:

    • The code.gs script acts as the backend service.
    • It stores short URLs in Google Sheets and provides a JSON API for URL lookup.

  2. Frontend:

    • A simple HTML page (404.html) handles redirection based on the short URL path.
    • The script fetches the target URL from the Google Apps Script API and redirects users.

  3. GitHub Pages:

    • The 404.html is hosted on GitHub Pages to handle URL redirection dynamically.

File Structure

  • code.gs: Backend logic written in Google Apps Script.
  • 404.html: Frontend redirection page hosted on GitHub Pages.

Setup

Step 1: Google Sheets and Apps Script

  1. Create a Google Sheet with the following columns:

    • Short Code: The unique code for each URL.
    • Long URL: The original URL to redirect to.

  2. Open the Apps Script editor for the sheet:

    • Paste the content of code.gs.
    • Deploy as a web app (ensure access is set to "Anyone with the link").

  3. Copy the web app's URL.

Step 2: GitHub Pages

  1. Clone this repository.
  2. Update the API URL in 404.html: 
    const apiUrl = 'YOUR_GOOGLE_APPS_SCRIPT_URL?code=' + shortCode;
  3. Push the repository to GitHub and enable GitHub Pages in the repository settings.

Step 3: Use Your Shortener

  • Navigate to https://your-github-username.github.io/your-repo-name/<short-code> to use the shortener.

Example

For a short URL abc123 pointing to https://example.com:

  1. Add abc123 and https://example.com to your Google Sheet.
  2. Navigate to https://your-github-username.github.io/your-repo-name/abc123 to be redirected.

Notes

  • Ensure the Apps Script deployment is publicly accessible.
  • Use HTTPS for both the Apps Script and GitHub Pages to ensure secure redirection.