2025年11月27日 星期四

【網頁教學】免費靜態網站空間 Nekoweb:支援 MP3 上傳與 Google 表單連動

今天要為大家介紹另一個強大的免費靜態網站空間——Nekoweb。它不僅解決了上述問題,還提供了相當高的自由度,非常適合想要練習網頁製作或架設小型個人網站的朋友。

為什麼選擇 Nekoweb?與 Neocities 的差異

相較於之前介紹的 Neocities,Nekoweb 在免費功能的開放程度上更具優勢:

  1. 支援檔案類型更多:Nekoweb 的免費版本即可上傳圖片及 MP3 音訊檔,這對於想要在網頁中加入背景音樂或語音功能的創作者來說非常方便。

  2. 支援第三方外掛:你可以自由嵌入其他網站提供的計數器或小工具。

  3. 支援 Google 表單連動:這是最大的亮點,你可以利用它來做資料庫查詢或修改功能(後文會有演示)。

免費版 vs. 付費版規格

雖然功能強大,但免費版仍有一些硬體限制,介面也走比較復古陽春的風格(進站會看到一隻可愛的貓在追滑鼠)。

免費版 (Free Tier):

  • 儲存空間:500 MB

  • 檔案數量限制:5,000 個

  • 介面:基礎網頁上傳介面

付費版 (Cat Tier - 每月 3 美元):

  • 儲存空間:提升至 10 GB

  • 檔案數量限制:提升至 100,000 個

  • 自訂網址:可設定 10 個自訂網域

  • 進階功能:支援 FTP 上傳、CSS 壓縮比提升等。


實際應用演示

1. 播放 MP3 音效

在 Nekoweb 的控制面板(Dashboard)中,你可以直接上傳 .mp3 檔案。我在測試頁面中放置了一個透過線上文字轉語音生成的 MP3,在網頁上可以順利播放,這在 Neocities 免費版是無法做到的。

2. 進階應用:Google 表單查詢與修改系統

這是我利用 Nekoweb 配合 Google Sheets (試算表) 製作的一個「基本資料查詢系統」。

  • 功能說明:這是一個純靜態網頁(HTML/JavaScript),後端資料庫則是連結到 Google Sheets。

  • 隱私保護:為了示範,我將姓名與生日部分隱碼(去個資化)。

  • 操作流程

    1. 使用者在網頁上看到資料列表。

    2. 點擊「修改」按鈕。

    3. 輸入驗證資料(例如:姓名與生日)。

    4. 系統驗證通過後,顯示該筆資料的完整地址。

    5. 使用者可以直接在網頁上修改地址(例如:將「中山路」改為「中正路」)。

    6. 按下更新後,Google Sheets 上的資料會即時被修改。

這個範例展示了 Nekoweb 對於 JavaScript 與外部 API 連接的友善度。相較於 Google 協作平台(Google Sites)網址固定且受限,使用 Nekoweb 你可以自訂 HTML 檔案名稱,網址更簡潔且具備高度客製化的彈性。


總結

Nekoweb 是一個功能開放且懷舊風格的免費空間。雖然 500MB 的空間不算大,但對於練習寫 code、架設個人履歷、或製作小型互動網頁(如上述的查詢系統)來說已經綽綽有餘。

如果你需要一個可以上傳特殊檔案、且能與 Google 服務深度整合的靜態空間,Nekoweb 絕對值得一試。

相關連結:

之後我也會再製作教學,詳細解說如何將 Google 表單查詢系統移植到 Nekoweb 上,敬請期待! 



沒有留言:

張貼留言

注意:只有此網誌的成員可以留言。

【網頁教學】免費靜態網站空間 Nekoweb:支援 MP3 上傳與 Google 表單連動

今天要為大家介紹另一個強大的免費靜態網站空間—— Nekoweb 。它不僅解決了上述問題,還提供了相當高的自由度,非常適合想要練習網頁製作或架設小型個人網站的朋友。 為什麼選擇 Nekoweb?與 Neocities 的差異 相較於之前介紹的 Neocities,Nekoweb ...