1分鐘部署一個屬於本身的網站,藉助雲開發靜態網站部署屬於本身的網站

今天來教你們部署一個屬於本身的第一個靜態網站,由於這裏藉助小程序雲開發的靜態服務器資源,因此能夠輕鬆的實現本身網站的部署,部署完之後能夠在電腦瀏覽器,手機瀏覽器,微信公衆號裏面展現。html

老規矩,先看效果圖

簡單起見,我這裏寫一個最簡單的html靜態網頁
1分鐘部署一個屬於本身的網站,藉助雲開發靜態網站部署屬於本身的網站
而後把這個網頁部署到雲開發靜態網站上
微信上訪問效果以下
1分鐘部署一個屬於本身的網站,藉助雲開發靜態網站部署屬於本身的網站
手機瀏覽器上訪問以下
1分鐘部署一個屬於本身的網站,藉助雲開發靜態網站部署屬於本身的網站
這也就意味着,咱們的網站能夠供用戶在任何地方訪問。下面就來教你們如何快速的部署一個屬於本身的網站。vue

一,開通雲開發

這裏開通雲開發咱們藉助小程序開發者工具來實現快速開通。小程序

1-1,註冊小程序

這裏我就再也不多說了,只有註冊太小程序的appid才能夠開通雲開發
1分鐘部署一個屬於本身的網站,藉助雲開發靜態網站部署屬於本身的網站
咱們註冊好小程序後,就能夠拿到appid了,如上圖瀏覽器

1-2,建立一個小程序項目

小程序項目的建立,我這裏再也不多說,我前面小程序基礎課裏有講過不少遍。《小程序基礎學習》
1分鐘部署一個屬於本身的網站,藉助雲開發靜態網站部署屬於本身的網站
這裏強調一點,就是建立小程序項目時必定要用咱們本身的appid不要用測試號。
在這裏插入圖片描述
若是你一開始是用測試appid建立的,也能夠經過上圖的方式更換成本身的小程序的appid。安全

1-3,開通雲開發

這裏雲開發的開通,我就不作過多講解了,我雲開發課程裏也講過不少遍。你們能夠去翻看下
1分鐘部署一個屬於本身的網站,藉助雲開發靜態網站部署屬於本身的網站
只須要點擊開發者工具裏的雲開發按鈕,跟着提示一步步操做就能夠快速開通雲開發。服務器

二,開通靜態網站功能

1分鐘部署一個屬於本身的網站,藉助雲開發靜態網站部署屬於本身的網站
咱們上面雲開發開通好之後,就能夠在這裏快速開通靜態網站了。
1分鐘部署一個屬於本身的網站,藉助雲開發靜態網站部署屬於本身的網站
點擊之後,直接點擊開通便可
1分鐘部署一個屬於本身的網站,藉助雲開發靜態網站部署屬於本身的網站
這時候開通有個條件
1分鐘部署一個屬於本身的網站,藉助雲開發靜態網站部署屬於本身的網站
咱們必須按照要求改變本身小程序的付費方式,把咱們的付費方式改爲按量付費便可。
1分鐘部署一個屬於本身的網站,藉助雲開發靜態網站部署屬於本身的網站
1分鐘部署一個屬於本身的網站,藉助雲開發靜態網站部署屬於本身的網站
1分鐘部署一個屬於本身的網站,藉助雲開發靜態網站部署屬於本身的網站
這個時候咱們的靜態網站功能就開通成功了。
1分鐘部署一個屬於本身的網站,藉助雲開發靜態網站部署屬於本身的網站
開通成功之後以下圖。
1分鐘部署一個屬於本身的網站,藉助雲開發靜態網站部署屬於本身的網站
這個時候咱們就能夠把咱們開發好的靜態網頁上傳到網站供別人訪問了。微信

三,部署網站

咱們的靜態html以下
1分鐘部署一個屬於本身的網站,藉助雲開發靜態網站部署屬於本身的網站
點擊上傳文件,把咱們的index.html文件上傳到靜態網站
1分鐘部署一個屬於本身的網站,藉助雲開發靜態網站部署屬於本身的網站
這樣就表明上傳成功了。app

訪問咱們的網站

上面把網頁部署成功之後,咱們就能夠經過雲開發爲咱們建立的默認網址來訪問了。
1分鐘部署一個屬於本身的網站,藉助雲開發靜態網站部署屬於本身的網站
點擊上圖所示的詳情,就能夠拿到訪問咱們網站的網址以下
1分鐘部署一個屬於本身的網站,藉助雲開發靜態網站部署屬於本身的網站
上圖箭頭所示的網址,就是咱們網頁的訪問網址。
1分鐘部署一個屬於本身的網站,藉助雲開發靜態網站部署屬於本身的網站
若是你的html是以index命名的,咱們使用雲開發爲咱們分配的域名,就能夠直接訪問咱們的網站。
1分鐘部署一個屬於本身的網站,藉助雲開發靜態網站部署屬於本身的網站
study-gas4x-1258760189.tcloudbaseapp.com 就是雲開發爲我分配的網站域名,之後用戶就能夠直接經過這個域名訪問咱們的網站了。
其實到這裏咱們就能夠成功的部署屬於咱們本身的網站了,無非就是你網頁寫的比石頭哥再好看些。ide

可是有些同窗以爲官方給分配的域名太長,很差記,想使用本身的域名。那麼咱們該如何配置本身的域名呢?工具

四,配置域名(選看)

其實前面3步就能夠成功的部署本身的網站了,若是你有本身的域名,而且也成功的備案了,再來跟着石頭哥學習這一節。若是沒有本身的域名,那麼你就要先去註冊本身的域名,並備案了。因此這一節做爲一個選學。

4-1,在網站配置裏添加本身的域名

1分鐘部署一個屬於本身的網站,藉助雲開發靜態網站部署屬於本身的網站
如我在這裏點擊添加域名,而後添加本身的備案域名。
1分鐘部署一個屬於本身的網站,藉助雲開發靜態網站部署屬於本身的網站
可是咱們這裏要想https來安全訪問,就必須配置本身的ssl證書。
1分鐘部署一個屬於本身的網站,藉助雲開發靜態網站部署屬於本身的網站
點完之後,咱們這裏能夠直接申請免費證書。免費證書有效期1年,1年後咱們再從新申請新的證書就能夠了,因此這裏免費的就夠用了。
1分鐘部署一個屬於本身的網站,藉助雲開發靜態網站部署屬於本身的網站
如實的填寫本身的備案域名和其他信息。
1分鐘部署一個屬於本身的網站,藉助雲開發靜態網站部署屬於本身的網站
提交完資料,咱們這裏須要驗證下本身的域名,驗證方式選擇DNS就能夠
1分鐘部署一個屬於本身的網站,藉助雲開發靜態網站部署屬於本身的網站
點位DNS驗證,咱們就須要給咱們的域名配置訪問的解析值了(這裏的知識點比較深奧,你們須要本身課下惡補下域名解析的相關知識點)若是不想學習,直接根據提示配置也行。
1分鐘部署一個屬於本身的網站,藉助雲開發靜態網站部署屬於本身的網站
配置好之後,就能夠點擊驗證先進行驗證了
1分鐘部署一個屬於本身的網站,藉助雲開發靜態網站部署屬於本身的網站
驗證經過後,能夠看到以下
1分鐘部署一個屬於本身的網站,藉助雲開發靜態網站部署屬於本身的網站
雲開發控制檯也會顯示部署中,咱們耐心等待部署就能夠了。
1分鐘部署一個屬於本身的網站,藉助雲開發靜態網站部署屬於本身的網站
啓動成功會有以下標識
1分鐘部署一個屬於本身的網站,藉助雲開發靜態網站部署屬於本身的網站
雖然已經啓動成功,咱們若是想經過本身的域名訪問本身的雲開發靜態網站,還須要配置下CNAME進行重定向,也就是訪問咱們域名的時候咱們要重定向到雲開發給咱們分配的域名。
1分鐘部署一個屬於本身的網站,藉助雲開發靜態網站部署屬於本身的網站
這裏理解起來有點晦澀,官方給的文檔也是沒有講明白,我也是試了不少遍才知道是這樣配置的。這裏都配置好之後,咱們就能夠直接經過本身的域名訪問網站了。
1分鐘部署一個屬於本身的網站,藉助雲開發靜態網站部署屬於本身的網站
你們也能夠去訪問下石頭哥的雲開發靜態網站試一試。

到這裏咱們的網站部署就講完了,後面我會用vue寫一些炫酷的網站,而後部署到線上供你們觀賞。好了,今天就講到這裏吧,石頭哥也要吃午餐了。

相關文章
相關標籤/搜索