10分鐘雲上靜態網站託管

2019 年 11 月 28 日
筆記

靜態網站：有別於動態網站，它就是只包含靜態內容（如圖片、音頻、影片、HTML、CSS、JS）的網站，不依賴伺服器端動態渲染頁面。

那麼靜態網站託管應該如何使用呢？

今天就和大家分享一下『「傻瓜式」的靜態網站搭建託管之旅』。

　　用戶可以在騰訊雲對象存儲（以下簡稱 COS）上託管靜態網站，訪客可以通過自定義域名（例如 www.example.com ）

訪問託管的靜態網站。以下是具體步驟：

事前準備

　　以下是實踐過程中，將會用到的相關服務：

域名註冊：託管靜態網站前，您需要先註冊一個域名，例如 www.example.com。
對象存儲 COS：使用 COS 創建存儲桶，上傳的網頁內容將存放到存儲桶。
內容分發網路 CDN：結合 CDN 和雲解析服務，使得域名和網站內容綁定的同時，還可以為靜態網站加速，降低訪問延遲，提高可用性。
雲解析：使用雲解析，實現使用自定義域名訪問靜態網站的目的。

說明：

本指南中的所有步驟都使用www.example.com作為示例域名。實際操作中請使用您的自有域名替換此域名。

4步搞定靜態網站託管

註冊域名與備案

　　域名註冊是在互聯網上建立任何服務的基礎。註冊域名之後，還需要進行備案，網站才能正常訪問。請根據您的具體情況進行操作：

已註冊域名並備案，可跳過本步驟，進行步驟2；
已註冊域名但未備案，請進行域名備案；
未註冊域名，請先註冊域名，再進行域名備案；

創建存儲桶並上傳內容

　　在完成域名註冊及備案後，您需要在 COS 控制台中執行以下任務，以創建和配置網站內容：

創建存儲桶；
配置存儲桶並上傳內容；

　　2-1、創建存儲桶

　　請使用騰訊雲帳號登錄 COS 控制台，為您的網站創建相應的存儲桶，存儲桶用於存儲數據，您可以將網站內容存儲在一個存儲桶中。

　　如您首次使用 COS，可以通過控制台的概覽介面直接創建存儲桶，或者在存儲桶列表導航欄創建存儲桶。

　　2-2、配置存儲桶並上傳內容

開啟存儲桶的靜態網站設置，方法是：

1) 登錄 COS 控制台，在左側菜單欄中，單擊【存儲桶列表】，找到剛剛創建的存儲桶，單擊右側的【配置管理】

　　2) 找到靜態網站，單擊編輯，將當前狀態設置為開啟，其他設置暫時保持為默認，單擊保存。

　　3) 將您的網站內容上傳到已創建好的存儲桶。在存儲桶中存放的內容可以是文本文件、照片、影片，任何您想要託管的內容。如果您還未構建網站，則只需按此實踐創建一個文件。

　　例如，您可使用以下 HTML 創建文件，並將其上傳到存儲桶。網站主頁的文件名通常為 index.html。在後續步驟中，您將提供此文件作為網站的索引文檔。搭建

<!DOCTYPE html>  <html>      <head>          <title>Hello COS!</title>          <meta charset="utf-8">      </head>      <body>          <p>歡迎使用&nbspCOS&nbsp的靜態網站功能。</p>          <p>這是首頁！</p>      </body>  </html>

注意：開啟靜態網站功能後，當用戶訪問任何不帶文件指向的一級目錄時，COS默認優先匹配對應存儲桶目錄下index.html，其次為index.htm，若無此文件，則返回404。

　 綁定自定義域名

　　為了加速訪問，我們推薦將域名綁定為自定義加速域名，藉助騰訊雲 CDN 加速您的靜態網站，使網站訪客獲取更好的瀏覽體驗。

　　3-1、域名添加

　　1) 登錄COS控制台，在左側菜單欄中，單擊【存儲桶列表】，單擊存儲網站內容的存儲桶並進入。

　　2) 在左側二級菜單欄中，單擊【域名管理】，進入域名管理頁面，單擊【自定義加速域名】下的【添加域名】，進入可配置狀態：

　　域名：輸入您已購買的自定義域名；

　　源站類型：選擇靜態網站源站；

　回源鑒權：勾選，然後單擊保存即可；

3) 單擊保存後，按照提示繼續添加【CDN服務授權】。

在CDN服務授權彈窗中，單擊確定即可。

　　 4) 稍等幾分鐘，等待域名部署上線完成後。然後複製對應的CNAME記錄，再進行如下步驟。

3-２、域名解析

　　如果您使用第三方服務商註冊域名，請在服務商處為您的自定義域名添加CNAME並指向步驟3.1中對應的CNAME記錄。

　　如果您使用騰訊雲解析服務，請參考下文進行操作：

　　１) 登錄雲解析控制台，找到您的域名，單擊右側的【解析】。

　　２) 單擊添加記錄按鈕。

　　　　主機記錄：www；

　　　　記錄類型：CNAME；

　　　　記錄值：步驟3.1中對應的CNAME記錄；

　　　　然後單擊保存即可完成添加。

測試驗證

　　在完成上述步驟後，可通過在瀏覽器地址欄輸入網站域名進行訪問，來驗證實踐結果，以 www.example.com 為例：

http://www.example.com ——返回名為 example 的存儲桶中的索引頁面（index.html）。
http://www.example.com/test.html（不存在的文件） ——返回404提示。如果您需要自定義錯誤文檔，可在步驟2.2開啟【靜態網站】設置中進一步設置【錯誤文檔】，此時訪問不存在的文件將顯示該指定的錯誤文檔。

說明： 在某些情況下，您可能需要清除瀏覽器快取才能看到預期結果。