用云開(kāi)發(fā)Webify，5分鐘上線新網(wǎng)站！

時(shí)間：2023-05-30 18:36:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-05-30 18:36:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

用云開(kāi)發(fā)Webify，5分鐘上線新網(wǎng)站！：

用最簡(jiǎn)單的方式，帶你上線自己的網(wǎng)站！

大家好，我是魚(yú)皮。

相信每位學(xué)編程的同學(xué)都想要擁有一個(gè)自己的網(wǎng)站，比如個(gè)人博客，可以拿來(lái)記錄自己的學(xué)習(xí)過(guò)程、分享自己的文章、展示作品等，從而激勵(lì)自己持續(xù)學(xué)習(xí)和總結(jié)。

那么今天這篇文章，目標(biāo)很簡(jiǎn)單，我要用 新技術(shù) 帶 所有同學(xué) 從 0 到 1 快速上線一個(gè)自己的網(wǎng)站！

給我 5 分鐘，我給你全世界。

上線網(wǎng)站極簡(jiǎn)教程

讓我們先來(lái)了解下傳統(tǒng)的上線網(wǎng)站流程。

傳統(tǒng)方式

假如我們要上線個(gè)人博客網(wǎng)站，供其他同學(xué)訪問(wèn)，那么需要經(jīng)歷如下步驟：

1. 準(zhǔn)備一份個(gè)人博客網(wǎng)站的源代碼
2. 購(gòu)買(mǎi)一臺(tái)有公網(wǎng) IP 的服務(wù)器
3. 把網(wǎng)站文件放到服務(wù)器上，并安裝 web 服務(wù)器軟件提供網(wǎng)頁(yè)訪問(wèn)能力
4. 購(gòu)買(mǎi)一個(gè)域名
5. 配置 DNS 解析，把域名指向服務(wù)器的 IP 地址
6. 如果要提高網(wǎng)站訪問(wèn)速度，自行購(gòu)買(mǎi) CDN

流程圖如下：







聽(tīng)起來(lái)就覺(jué)得麻煩，而且這一套流程下來(lái)最少也要 1 個(gè)小時(shí)。這也是為啥很多同學(xué)只是有上線個(gè)人網(wǎng)站的想法，卻從未實(shí)現(xiàn)。

但是，昨天我卻只用 5 分鐘，就上線了自己的網(wǎng)站，怎么做到的呢？

下面引出今天的主角 Webify 。

Webify

Webify 是騰訊云提供的 一站式 Web 應(yīng)用托管服務(wù)，幫助大家極速開(kāi)發(fā)、部署、上線網(wǎng)站項(xiàng)目。

什么是一站式呢？

就是一條龍服務(wù)，只要你有一套網(wǎng)頁(yè)代碼，無(wú)論是靜態(tài)、動(dòng)態(tài)網(wǎng)站還是其他類(lèi)型的 web 應(yīng)用，都能使用 Webify 傻瓜式部署。由它提供服務(wù)器、默認(rèn)域名、自定義域名、HTTPS、CDN 加速，提升 Web 應(yīng)用的性能和安全性。

換言之，如果使用 Webify 上線個(gè)人博客，你只需要：

1. 準(zhǔn)備一份個(gè)人博客網(wǎng)站的源代碼
2. 進(jìn)入 Webify 控制臺(tái)，選擇源碼和配置
3. 一鍵發(fā)布

流程大大精簡(jiǎn)了！







此外，Webify 還提供基于 Git 工作流的 DevOps 流程，每次修改代碼都能自動(dòng)重新構(gòu)建部署，不用再登錄服務(wù)器自己操作了！

聽(tīng)起來(lái)挺爽，下面我們一起試著用 Webify 上線個(gè)人博客。

Webify 實(shí)戰(zhàn)

地址：https://cloud.tencent.com/product/webify

首先進(jìn)入 Web 應(yīng)用托管平臺(tái)，新建一個(gè)應(yīng)用。

一個(gè)應(yīng)用對(duì)應(yīng)一個(gè)網(wǎng)站項(xiàng)目，這里提供兩種新建應(yīng)用的方式：Git 導(dǎo)入和從模板創(chuàng)建。

Git 導(dǎo)入創(chuàng)建應(yīng)用

Git 導(dǎo)入適用于已有網(wǎng)站源代碼的方式，只要你的代碼存在于 Git 托管平臺(tái)，就能直接在 Webify 導(dǎo)入。

比如我們想要上線個(gè)人博客，先要有一套博客源代碼?？梢宰约簩?xiě)代碼；也可以直接使用一些現(xiàn)成的站點(diǎn)生成器，比如 Hugo、Hexo 等（后面詳細(xì)介紹），自動(dòng)生成源代碼；當(dāng)然還可以下載、克隆別人的項(xiàng)目代碼。搞到代碼后，把它上傳到 GitHub 或 Gitee 等代碼托管平臺(tái)就可以被 Webify 導(dǎo)入了。

導(dǎo)入之后需要根據(jù)應(yīng)用的技術(shù)棧和類(lèi)型，填寫(xiě)構(gòu)建命令等配置。這里可以直接選擇預(yù)設(shè)配置，比如你的項(xiàng)目用到了 Vue.js，可以直接選擇對(duì)應(yīng)的預(yù)設(shè)，不用填寫(xiě)就能自動(dòng)配置：

從模板創(chuàng)建應(yīng)用

如果我們啥代碼都沒(méi)有，也搞不來(lái)代碼，咋辦？

也沒(méi)有關(guān)系，Webify 內(nèi)置了一些項(xiàng)目模板，直接選擇需要的應(yīng)用創(chuàng)建即可。比如我們要做個(gè)人博客，可以選擇 Docusaurus 2 這款主流的站點(diǎn)生成器：







選中模板后，系統(tǒng)會(huì)自動(dòng)把代碼模板復(fù)制到新的 Git 倉(cāng)庫(kù)，和應(yīng)用關(guān)聯(lián)。







Webify 會(huì)自動(dòng)給 Git 倉(cāng)庫(kù)配置 Webhooks，后續(xù)每當(dāng)倉(cāng)庫(kù)的代碼發(fā)生變更（push）時(shí)，都會(huì)自動(dòng)觸發(fā)應(yīng)用的重新部署，無(wú)需再跑到服務(wù)器上改代碼了！







點(diǎn)擊下一步，進(jìn)入應(yīng)用配置，由于我們使用的是系統(tǒng)預(yù)設(shè)模板，什么都不用改，用默認(rèn)配置就行了。







點(diǎn)擊部署按鈕，稍等幾分鐘，應(yīng)用就創(chuàng)建成功了！

應(yīng)用詳情

可以在應(yīng)用列表和部署記錄中查看到新建完成的應(yīng)用：







點(diǎn)擊新建的應(yīng)用，進(jìn)入應(yīng)用詳情頁(yè)：







可以查看到應(yīng)用的詳細(xì)信息，比如系統(tǒng)為我們提供的默認(rèn)項(xiàng)目域名，點(diǎn)擊之后就能訪問(wèn)到已上線的博客網(wǎng)站啦！







應(yīng)用詳情中還有一個(gè)所屬環(huán)境信息，那是啥呢？

其實(shí)在部署過(guò)程中，系統(tǒng)會(huì)自動(dòng)創(chuàng)建一個(gè) 云開(kāi)發(fā) 環(huán)境，根據(jù)配置的命令自動(dòng)構(gòu)建項(xiàng)目，將構(gòu)建產(chǎn)物放到 靜態(tài)網(wǎng)站托管 上。

可以在云開(kāi)發(fā)控制臺(tái)看到已經(jīng)上傳到服務(wù)器上的文件：







在靜態(tài)網(wǎng)站托管頁(yè)面，可以修改已上傳的文件，修改 CDN 緩存設(shè)置等：

想要了解什么是云開(kāi)發(fā)？歡迎閱讀我之前的文章：我和云開(kāi)發(fā) 。

進(jìn)入應(yīng)用詳情的設(shè)置頁(yè)，可以給項(xiàng)目添加自定義域名、修改應(yīng)用構(gòu)建配置、刪除應(yīng)用等：

持續(xù)發(fā)布

下面讓我們給自己的博客網(wǎng)站添加一篇文章，進(jìn)入到應(yīng)用對(duì)應(yīng)的 Git 倉(cāng)庫(kù)，在 docs/tutorial-basics 路徑下新建一個(gè) .md 后綴文件，輸入博客標(biāo)題和內(nèi)容。







點(diǎn)擊 commit 按鈕，本次代碼改動(dòng)將自動(dòng) push 到主分支：







當(dāng)然，更好的方式是把代碼倉(cāng)庫(kù)拉取到本地，在本地修改后再 push 到遠(yuǎn)程?？梢韵?push 到 dev 分支，確認(rèn)代碼沒(méi)問(wèn)題后再合并到 master 分支。

代碼 push 之后，事件會(huì)通過(guò) Webhooks 傳遞給 Webify，自動(dòng)觸發(fā)重新部署，等一段時(shí)間后就可以看到新的部署記錄：







再次訪問(wèn)網(wǎng)站地址，就能夠看到新增的博客啦！

如果沒(méi)有立即看到更新，可能是由于 CDN 的緩存（默認(rèn) 2 分鐘），導(dǎo)致沒(méi)有拉取到最新的資源，等個(gè)幾分鐘就好了。

OK，從 0 到 1 上線網(wǎng)站成就達(dá)成。后面大家可以參考 Docusaurus 站點(diǎn)生成器的官方文檔，更改代碼和配置，進(jìn)一步定制自己的博客。

使用感受

其實(shí)這個(gè)東西并不算新技術(shù)了，產(chǎn)品形態(tài)和體驗(yàn)上類(lèi)似 Vercel 和 Github Pages。不過(guò)優(yōu)點(diǎn)是 Webify 在國(guó)內(nèi)，提供了高速 CDN；還能夠和其他云產(chǎn)品打通、形成體系。

使用 Webify 上線網(wǎng)站還是很爽的，整個(gè)流程非常簡(jiǎn)單、易上手，著實(shí)省去了很多自己上線網(wǎng)站的瑣碎流程。無(wú)論是對(duì)想快速上線自己網(wǎng)站的同學(xué)、還是 web 開(kāi)發(fā)愛(ài)好者，都是不錯(cuò)的選擇。

還有重要的一點(diǎn)要提醒大家，世上沒(méi)有免費(fèi)的午餐，Webify 依托于云開(kāi)發(fā)，也是要收費(fèi)的（提供 1 個(gè)月的免費(fèi)體驗(yàn)），但相對(duì)于自己購(gòu)買(mǎi)服務(wù)器（即使是學(xué)生機(jī)），性價(jià)比也是更高的。

官方技術(shù)交流