天天看點

1分鐘部署一個屬于自己的網站,借助雲開發靜态網站部署屬于自己的網站

今天來教大家部署一個屬于自己的第一個靜态網站,因為這裡借助小程式雲開發的靜态伺服器資源,是以可以輕松的實作自己網站的部署,部署完以後可以在電腦浏覽器,手機浏覽器,微信公衆号裡面展示。

簡單起見,我這裡寫一個最簡單的html靜态網頁

1分鐘部署一個屬于自己的網站,借助雲開發靜态網站部署屬于自己的網站

然後把這個網頁部署到雲開發靜态網站上

微信上通路效果如下

1分鐘部署一個屬于自己的網站,借助雲開發靜态網站部署屬于自己的網站

手機浏覽器上通路如下

1分鐘部署一個屬于自己的網站,借助雲開發靜态網站部署屬于自己的網站

這也就意味着,我們的網站可以供使用者在任何地方通路。下面就來教大家如何快速的部署一個屬于自己的網站。

這裡雲開發開通開通雲開發我們借助小程式開發者工具來實作快速開通。

這裡我就不再多說了,隻有注冊過小程式的appid才可以開通雲開發

1分鐘部署一個屬于自己的網站,借助雲開發靜态網站部署屬于自己的網站

我們注冊好小程式後,就可以拿到appid了,如上圖

小程式項目的建立,我這裡不再多說,我前面小程式基礎課裡有講過很多遍。《小程式基礎學習》

1分鐘部署一個屬于自己的網站,借助雲開發靜态網站部署屬于自己的網站

這裡強調一點,就是建立小程式項目時一定要用我們自己的appid不要用測試号。

1分鐘部署一個屬于自己的網站,借助雲開發靜态網站部署屬于自己的網站

在這裡插入圖檔描述

如果你一開始是用測試appid建立的,也可以通過上圖的方式更換成自己的小程式的appid。

這裡是雲開發開通,我就不做過多講解了,我雲開發課程裡也講過很多遍。大家可以去翻看下

1分鐘部署一個屬于自己的網站,借助雲開發靜态網站部署屬于自己的網站

隻需要點選開發者工具裡的雲開發按鈕,跟着提示一步步操作就可以快速開通雲開發。

1分鐘部署一個屬于自己的網站,借助雲開發靜态網站部署屬于自己的網站

我們上面雲開發開通好以後,就可以在這裡快速開通靜态網站了。

1分鐘部署一個屬于自己的網站,借助雲開發靜态網站部署屬于自己的網站

點選以後,直接點選開通即可

1分鐘部署一個屬于自己的網站,借助雲開發靜态網站部署屬于自己的網站

這時候開通有個條件

1分鐘部署一個屬于自己的網站,借助雲開發靜态網站部署屬于自己的網站

我們必須按照要求改變自己小程式的付費方式,把我們的付費方式改成按量付費即可。

1分鐘部署一個屬于自己的網站,借助雲開發靜态網站部署屬于自己的網站
1分鐘部署一個屬于自己的網站,借助雲開發靜态網站部署屬于自己的網站
1分鐘部署一個屬于自己的網站,借助雲開發靜态網站部署屬于自己的網站

這個時候我們的靜态網站功能就開通成功了。

1分鐘部署一個屬于自己的網站,借助雲開發靜态網站部署屬于自己的網站

開通成功以後如下圖。

1分鐘部署一個屬于自己的網站,借助雲開發靜态網站部署屬于自己的網站

這個時候我們就可以把我們開發好的靜态網頁上傳到網站供别人通路了。

我們的靜态html如下

1分鐘部署一個屬于自己的網站,借助雲開發靜态網站部署屬于自己的網站

點選上傳檔案,把我們的index.html檔案上傳到靜态網站

1分鐘部署一個屬于自己的網站,借助雲開發靜态網站部署屬于自己的網站

這樣就代表上傳成功了。

上面把網頁部署成功以後,我們就可以通過雲開發為我們建立的預設網址來通路了。

1分鐘部署一個屬于自己的網站,借助雲開發靜态網站部署屬于自己的網站

點選上圖所示的詳情,就可以拿到通路我們網站的網址如下

1分鐘部署一個屬于自己的網站,借助雲開發靜态網站部署屬于自己的網站

上圖箭頭所示的網址,就是我們網頁的通路網址。

1分鐘部署一個屬于自己的網站,借助雲開發靜态網站部署屬于自己的網站

如果你的html是以index命名的,我們使用雲開發為我們配置設定的域名,就可以直接通路我們的網站。

1分鐘部署一個屬于自己的網站,借助雲開發靜态網站部署屬于自己的網站

study-gas4x-1258760189.tcloudbaseapp.com 就是雲開發為我配置設定的網站域名,以後使用者就可以直接通過這個域名通路我們的網站了。

其實到這裡我們就可以成功的部署屬于我們自己的網站了,無非就是你網頁寫的比石頭哥再好看些。

但是有些同學覺得官方給配置設定的域名太長,不好記,想使用自己的域名。那麼我們該如何配置自己的域名呢?

其實前面3步就可以成功的部署自己的網站了,如果你有自己的域名,并且也成功的備案了,再來跟着石頭哥學習這一節。如果沒有自己的域名,那麼你就要先去注冊自己的域名,并備案了。是以這一節作為一個選學。

1分鐘部署一個屬于自己的網站,借助雲開發靜态網站部署屬于自己的網站

如我在這裡點選添加域名,然後添加自己的備案域名。

1分鐘部署一個屬于自己的網站,借助雲開發靜态網站部署屬于自己的網站

但是我們這裡要想https來安全通路,就必須配置自己的ssl證書。

1分鐘部署一個屬于自己的網站,借助雲開發靜态網站部署屬于自己的網站

點完以後,我們這裡可以直接申請免費證書。免費證書有效期1年,1年後我們再重新申請新的證書就可以了,是以這裡免費的就夠用了。

1分鐘部署一個屬于自己的網站,借助雲開發靜态網站部署屬于自己的網站

如實的填寫自己的備案域名和其餘資訊。

1分鐘部署一個屬于自己的網站,借助雲開發靜态網站部署屬于自己的網站

送出完資料,我們這裡需要驗證下自己的域名,驗證方式選擇DNS就可以

1分鐘部署一個屬于自己的網站,借助雲開發靜态網站部署屬于自己的網站

點位DNS驗證,我們就需要給我們的域名配置通路的解析值了(這裡的知識點比較深奧,大家需要自己課下惡補下域名解析的相關知識點)如果不想學習,直接根據提示配置也行。

1分鐘部署一個屬于自己的網站,借助雲開發靜态網站部署屬于自己的網站

配置好以後,就可以點選驗證先進行驗證了

1分鐘部署一個屬于自己的網站,借助雲開發靜态網站部署屬于自己的網站

驗證通過後,可以看到如下

1分鐘部署一個屬于自己的網站,借助雲開發靜态網站部署屬于自己的網站

雲開發控制台也會顯示部署中,我們耐心等待部署就可以了。

1分鐘部署一個屬于自己的網站,借助雲開發靜态網站部署屬于自己的網站

啟動成功會有如下辨別

1分鐘部署一個屬于自己的網站,借助雲開發靜态網站部署屬于自己的網站

雖然已經啟動成功,我們如果想通過自己的域名通路自己的雲開發靜态網站,還需要配置下CNAME進行重定向,也就是通路我們域名的時候我們要重定向到雲開發給我們配置設定的域名。

1分鐘部署一個屬于自己的網站,借助雲開發靜态網站部署屬于自己的網站

這裡了解起來有點晦澀,官方給的文檔也是沒有講明白,我也是試了很多遍才知道是這樣配置的。這裡都配置好以後,我們就可以直接通過自己的域名通路網站了。

1分鐘部署一個屬于自己的網站,借助雲開發靜态網站部署屬于自己的網站

大家也可以去通路下石頭哥的雲開發靜态網站試一試。

到這裡我們的網站部署就講完了,後面我會用vue寫一些炫酷的網站,然後部署到線上供大家觀賞。

雲開發(Tencent CloudBase,TCB)是騰訊雲提供的雲原生一體化開發環境和工具平台,為開發者提供高可用、自動彈性擴縮的後端雲服務,包含計算、存儲、托管等serverless化能力,可用于雲端一體化開發多種端應用(小程式,公衆号,Web 應用,Flutter 用戶端等),幫助開發者統一建構和管理後端服務和雲資源,避免了應用開發過程中繁瑣的伺服器搭建及運維,開發者可以專注于業務邏輯的實作,開發門檻更低,效率更高。