釋出您的網站

有哪些選擇？

釋出網站是一個複雜的話題，因為有許多方法可以做到。本文不打算記錄所有可能的方法。相反，它解釋了三種適合初學者的方法的優缺點。然後，它詳細介紹了一種對許多讀者都立即有效的方法。

獲取託管和域名

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

• 網路託管是託管公司網路伺服器上租用的檔案空間。您將網站檔案放在網路伺服器上。網路伺服器向網站訪問者提供網站內容。
• 一個域名是人們找到您的網站的唯一網路地址，例如https://www.mozilla.org或https://www.bbc.co.uk。您可以從域名註冊商那裡租用您的域名，租期可以是你想要的任意年限。

如果您從同一家公司獲取網路託管和域名，它們通常會自動配置以相互通訊。但是，如果您從不同的公司獲取它們，或者想將您的託管更改為不同的公司，您需要進行一些設定以將域名指向正確的伺服器。這樣，當人們導航到該網址時，他們將看到您的網站。這通常透過登入您的域名註冊商網站，並將您的域名的名稱伺服器設定為您的託管公司提供的名稱伺服器來完成。

公司使用各種機制將檔案傳輸到其網路伺服器。許多公司將提供不止一種選項；典型的選項包括：

• 拖放介面（稍後您將在透過GitHub釋出中看到一個示例）。
• 一個檔案傳輸協議（FTP）程式。FTP程式種類繁多，但通常您必須使用託管公司提供的詳細資訊（通常是使用者名稱、密碼、主機名）連線到您的網路伺服器。然後，程式會在兩個視窗中顯示您的本地檔案和網路伺服器的檔案，並提供一種在兩者之間傳輸檔案的方法。
• 將網站原始碼儲存在GitHub倉庫中（見下文），並授予託管公司訪問許可權，以便他們可以獲取原始碼，並在必要時構建和釋出它。
• 一些公司將提供命令列工具供您使用來傳輸檔案。

查詢託管和域名的提示

• MDN不推廣特定的商業託管公司或域名註冊商。要查詢託管公司和註冊商，只需搜尋“網路託管”和“域名”。所有註冊商都將提供一個功能，允許您檢查您想要的域名是否可用。
• 您的家庭或辦公室網際網路服務提供商可能會為小型網站提供一些有限的託管。可用功能集將受到限制，但它可能非常適合您的首次嘗試。
• 還有一些免費服務可用，例如Neocities、Google Sites和WordPress。此類服務範圍可能有限，但它們足以滿足初步試驗的需求。

使用線上工具

一些工具允許您線上釋出您的網站

• GitHub是一個“社交程式設計”網站。它允許您上傳程式碼倉庫以儲存在Git 版本控制系統中。然後，您可以協作進行程式碼專案，並且該系統預設是開源的，這意味著世界上任何人都可以找到您的GitHub程式碼，使用它，從中學習，並改進它。GitHub有一個非常有用的功能，稱為GitHub Pages，它允許您將網站程式碼即時展示在網路上。
• Netlify是一個網路託管平臺，可以直接從您的GitHub倉庫為靜態網站提供託管。它還提供許多附加功能，例如部署預覽、無伺服器函式和表單處理。
• Fly.io是一個平臺，允許您將應用程式和資料庫部署到靠近使用者的地方。如果您的Web應用程式需要後端服務，這更適合。

這些選項通常是免費的，但功能集有限。

使用基於網路的IDE，例如CodePen

有許多網路應用程式模擬網站開發環境，允許您編寫HTML、CSS和JavaScript，然後將其渲染並顯示在輸出窗格中。一般來說，這些工具易於使用，非常適合學習，擅長共享程式碼（例如，如果您想與不同辦公室的同事分享技術或尋求除錯幫助），並且免費（基本功能）。它們將您的渲染頁面託管在一個獨特的網址。但是，功能有限，這些應用程式通常不提供資產（如影像）的託管空間。

嘗試使用以下一些示例，找出哪個最適合您

• Scrimba ^{MDN學習夥伴}
• JSFiddle
• JSBin
• CodePen

透過GitHub釋出

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

1. 首先，註冊GitHub並驗證您的電子郵件地址。

2. 接下來，您需要建立一個倉庫來儲存檔案。在此頁面上：

   1. 在倉庫名稱框中，輸入使用者名稱.github.io，其中使用者名稱是您的使用者名稱。例如，我們的朋友Bob Smith會輸入bobsmith.github.io。
   2. 單擊頁面底部的建立倉庫按鈕。

3. 在下一頁上，找到上傳現有檔案連結，然後單擊它。這應該會將您帶到檔案上傳頁面。

4. 此時，您應該能夠將檔案從本地檔案系統拖放到網頁上，以將其上傳到GitHub倉庫。為此：

   1. 在您的計算機上開啟一個檔案瀏覽器/查詢器視窗。
   2. 確保您可以看到檔案瀏覽器和網頁瀏覽器視窗——將它們並排放在螢幕上。
   3. 將檔案瀏覽器視窗導航到包含您的示例網站的資料夾。

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

   4. 選擇您的示例網站的所有檔案（例如，使用Ctrl + A鍵盤快捷鍵，或在macOS上使用Cmd + A）。
   5. 將檔案從您的檔案瀏覽器拖到GitHub頁面的“將檔案拖到此處以將其新增到您的倉庫”部分。
   6. 該部分的邊框和文字會發生變化，表示可以放置檔案。此時放下檔案。
   7. 單擊頁面底部的提交更改按鈕。

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

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

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

延伸閱讀

• 什麼是網路伺服器
• 瞭解域名
• 在網路上做某事需要多少錢？
• 部署網站：來自Codecademy的一個不錯的教程，它更進一步，展示了一些額外的技術。

• 上一頁
• 概述：你的第一個網站
• 下一頁