今天來教大家部署一個屬於自己的第一個靜態網站,因為這里借助小程序雲開發的靜態服務器資源,所以可以輕松的實現自己網站的部署,部署完以后可以在電腦瀏覽器,手機瀏覽器,微信公眾號里面展示。
老規矩,先看效果圖
簡單起見,我這里寫一個最簡單的html靜態網頁
然后把這個網頁部署到雲開發靜態網站上
微信上訪問效果如下
手機瀏覽器上訪問如下
這也就意味着,我們的網站可以供用戶在任何地方訪問。下面就來教大家如何快速的部署一個屬於自己的網站。
一,開通雲開發
這里雲開發開通開通雲開發我們借助小程序開發者工具來實現快速開通。
1-1,注冊小程序
這里我就不再多說了,只有注冊過小程序的appid才可以開通雲開發
我們注冊好小程序后,就可以拿到appid了,如上圖
1-2,創建一個小程序項目
小程序項目的創建,我這里不再多說,我前面小程序基礎課里有講過很多遍。《小程序基礎學習》
這里強調一點,就是創建小程序項目時一定要用我們自己的appid不要用測試號。
在這里插入圖片描述
如果你一開始是用測試appid創建的,也可以通過上圖的方式更換成自己的小程序的appid。
1-3,開通雲開發
這里是雲開發開通,我就不做過多講解了,我雲開發課程里也講過很多遍。大家可以去翻看下
只需要點擊開發者工具里的雲開發按鈕,跟着提示一步步操作就可以快速開通雲開發。
二,開通靜態網站功能
我們上面雲開發開通好以后,就可以在這里快速開通靜態網站了。
點擊以后,直接點擊開通即可
這時候開通有個條件
我們必須按照要求改變自己小程序的付費方式,把我們的付費方式改成按量付費即可。
這個時候我們的靜態網站功能就開通成功了。
開通成功以后如下圖。
這個時候我們就可以把我們開發好的靜態網頁上傳到網站供別人訪問了。
三,部署網站
我們的靜態html如下
點擊上傳文件,把我們的index.html文件上傳到靜態網站
這樣就代表上傳成功了。
訪問我們的網站
上面把網頁部署成功以后,我們就可以通過雲開發為我們創建的默認網址來訪問了。
點擊上圖所示的詳情,就可以拿到訪問我們網站的網址如下
上圖箭頭所示的網址,就是我們網頁的訪問網址。
如果你的html是以index命名的,我們使用雲開發為我們分配的域名,就可以直接訪問我們的網站。
study-gas4x-1258760189.tcloudbaseapp.com 就是雲開發為我分配的網站域名,以后用戶就可以直接通過這個域名訪問我們的網站了。
其實到這里我們就可以成功的部署屬於我們自己的網站了,無非就是你網頁寫的比石頭哥再好看些。
但是有些同學覺得官方給分配的域名太長,不好記,想使用自己的域名。那么我們該如何配置自己的域名呢?
四,配置域名(選看)
其實前面3步就可以成功的部署自己的網站了,如果你有自己的域名,並且也成功的備案了,再來跟着石頭哥學習這一節。如果沒有自己的域名,那么你就要先去注冊自己的域名,並備案了。所以這一節作為一個選學。
4-1,在網站配置里添加自己的域名
如我在這里點擊添加域名,然后添加自己的備案域名。
但是我們這里要想https來安全訪問,就必須配置自己的ssl證書。
點完以后,我們這里可以直接申請免費證書。免費證書有效期1年,1年后我們再重新申請新的證書就可以了,所以這里免費的就夠用了。
如實的填寫自己的備案域名和其余信息。
提交完資料,我們這里需要驗證下自己的域名,驗證方式選擇DNS就可以
點位DNS驗證,我們就需要給我們的域名配置訪問的解析值了(這里的知識點比較深奧,大家需要自己課下惡補下域名解析的相關知識點)如果不想學習,直接根據提示配置也行。
配置好以后,就可以點擊驗證先進行驗證了
驗證通過后,可以看到如下
雲開發控制台也會顯示部署中,我們耐心等待部署就可以了。
啟動成功會有如下標識
雖然已經啟動成功,我們如果想通過自己的域名訪問自己的雲開發靜態網站,還需要配置下CNAME進行重定向,也就是訪問我們域名的時候我們要重定向到雲開發給我們分配的域名。
這里理解起來有點晦澀,官方給的文檔也是沒有講明白,我也是試了很多遍才知道是這樣配置的。這里都配置好以后,我們就可以直接通過自己的域名訪問網站了。
大家也可以去訪問下石頭哥的雲開發靜態網站試一試。
到這里我們的網站部署就講完了,后面我會用vue寫一些炫酷的網站,然后部署到線上供大家觀賞。
產品介紹
雲開發(Tencent CloudBase,TCB)是騰訊雲提供的雲原生一體化開發環境和工具平台,為開發者提供高可用、自動彈性擴縮的后端雲服務,包含計算、存儲、托管等serverless化能力,可用於雲端一體化開發多種端應用(小程序,公眾號,Web 應用,Flutter 客戶端等),幫助開發者統一構建和管理后端服務和雲資源,避免了應用開發過程中繁瑣的服務器搭建及運維,開發者可以專注於業務邏輯的實現,開發門檻更低,效率更高。