釋出你的網站

完成網站程式碼編寫和檔案整理後,需要將其釋出到網上以便人們查詢。本文介紹如何輕鬆地將簡單的示例程式碼釋出到網上。

有哪些選項?

網站釋出是一個複雜的話題,因為有很多方法可以實現。本文不會嘗試記錄所有可能的方法。相反,它解釋了三種對初學者來說比較實用的方法的優缺點。然後逐步介紹一種對許多讀者來說可以立即使用的方法。

獲取主機和域名

為了更好地控制內容和網站外觀,大多數人選擇購買網路託管和域名。

  • 網路託管是指在託管公司 Web 伺服器 上租用的檔案空間。您將網站檔案放置在 Web 伺服器上。Web 伺服器向網站訪問者提供網站內容。
  • 域名 是人們查詢您的網站的唯一地址,例如 https://www.mozilla.orghttps://www.bbc.co.uk。您可以從 域名註冊商 處租用域名,租期可長達數年。

許多專業網站都是以這種方式上線的。

此外,您還需要一個 檔案傳輸協議 (FTP) 程式(有關更多詳細資訊,請參閱 費用:軟體),才能將網站檔案實際傳輸到伺服器。FTP 程式種類繁多,但通常您需要使用託管公司提供的詳細資訊(通常是使用者名稱、密碼、主機名)連線到您的 Web 伺服器。然後,該程式會在兩個視窗中顯示您的本地檔案和 Web 伺服器的檔案,並提供一種在檔案之間傳輸檔案的方法。

An FTP client showing all files and folders of a website and uploading them to a server

查詢主機和域名的提示

  • MDN 不推廣特定的商業託管公司或域名註冊商。要查詢託管公司和註冊商,只需搜尋“網路託管”和“域名”即可。所有註冊商都將提供一項功能,允許您檢查您想要的域名是否可用。
  • 您的家庭或辦公室 網際網路服務提供商 可能會為小型網站提供一些有限的託管服務。可用的功能集將受到限制,但它可能非常適合您的第一次實驗。
  • 還有一些免費服務可用,例如 NeocitiesGoogle SitesBloggerWordPress。有時一分錢一分貨,但有時這些資源足以滿足您最初的實驗需求。
  • 許多公司提供託管和域名服務。

使用 GitHub 或 Google App Engine 等線上工具

某些工具允許您將網站釋出到網上。

  • GitHub 是一個“社交編碼”網站。它允許您上傳程式碼儲存庫以儲存在 Git 版本控制系統 中。然後,您可以協作處理程式碼專案,並且該系統預設是開源的,這意味著世界上任何人都可以找到您的 GitHub 程式碼,使用它、從中學習並對其進行改進。GitHub 有一項非常有用的功能,稱為 GitHub Pages,它允許您在 Web 上即時公開網站程式碼。
  • Google App Engine 是一個功能強大的平臺,允許您在 Google 的基礎架構上構建和執行應用程式,無論您需要從頭開始構建多層 Web 應用程式還是託管靜態網站。有關更多資訊,請參閱 如何在 Google App Engine 上託管您的網站?

這些選項通常是免費的,但您可能會超出有限的功能集。

使用基於 Web 的 IDE,例如 CodePen

有很多 Web 應用程式可以模擬網站開發環境,允許您輸入 HTML、CSS 和 JavaScript,然後將該程式碼的結果顯示為網站,所有這些都在一個瀏覽器選項卡中。一般來說,這些工具相對簡單,非常適合學習,適合共享程式碼(例如,如果您想與同事共享技術或在不同的辦公室尋求除錯幫助),並且免費(對於基本功能)。它們會在唯一的 Web 地址上託管您呈現的頁面。但是,功能有限,並且這些應用程式通常不提供資產(如影像)的託管空間。

嘗試使用其中一些示例,找出最適合您的示例。

Screenshot of JS Bin web based IDE

透過 GitHub 釋出

現在讓我們看看如何透過 GitHub Pages 輕鬆釋出您的網站。

  1. 首先,註冊 GitHub 並驗證您的電子郵件地址。
  2. 接下來,您需要 建立儲存庫 以儲存檔案。
  3. 在此頁面上的“儲存庫名稱”框中,輸入 username.github.io,其中 username 是您的使用者名稱。例如,我們的朋友 Bob Smith 將輸入 bobsmith.github.io。選中“使用 README 初始化此儲存庫”框。然後單擊“建立儲存庫”。 GitHub 儲存庫頁面的示例
  4. 將網站資料夾的內容拖放到您的儲存庫中。然後單擊“提交更改”。

    注意:確保您的資料夾中有一個 index.html 檔案。

  5. 在瀏覽器中導航到 username.github.io 以檢視您的網站線上狀態。例如,對於使用者名稱 chrisdavidmills,請訪問 chrisdavidmills.github.io

    注意:您的網站可能需要幾分鐘才能上線。如果您的網站沒有立即顯示,請等待幾分鐘。然後重試。

要了解更多資訊,請參閱 GitHub Pages 幫助

進一步閱讀