10分鐘雲上靜態網站託管

時間 2020-02-15

標籤 10分靜態網站託管欄目網站開發简体版

原文原文鏈接

本文分享自微信公衆號：騰訊雲存儲（關注有驚喜）javascript

靜態網站：有別於動態網站，它就是隻包含靜態內容（如圖片、音頻、視頻、HTML、CSS、JS）的網站，不依賴服務器端動態渲染頁面。那麼靜態網站託管應該如何使用呢？html

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

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

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

事前準備服務器

　　如下是實踐過程當中，將會用到的相關服務：微信

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

說明：

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

4步搞定靜態網站託管

註冊域名與備案

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

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

建立存儲桶並上傳內容

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

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

　　2-一、建立存儲桶

　　請使用騰訊雲帳號登陸 COS 控制檯，爲您的網站建立相應的存儲桶，存儲桶用於存儲數據，您能夠將網站內容存儲在一個存儲桶中。

　　如您首次使用 COS，能夠經過控制檯的概覽界面直接建立存儲桶，或者在存儲桶列表導航欄建立存儲桶。

　　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) 登陸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開啓【靜態網站】設置中進一步設置【錯誤文檔】，此時訪問不存在的文件將顯示該指定的錯誤文檔。