5 分鐘，從 0 到 1 上線個(gè)人網(wǎng)站！
用最簡單的方式，帶你上線自己的網(wǎng)站！
大家好，我是魚皮。
相信每位學(xué)編程的同學(xué)都想要擁有一個(gè)自己的網(wǎng)站，比如個(gè)人博客，可以拿來記錄自己的學(xué)習(xí)過程、分享自己的文章、展示作品等，從而激勵(lì)自己持續(xù)學(xué)習(xí)和總結(jié)。
那么今天這篇文章，目標(biāo)很簡單，我要用 新技術(shù) 帶 所有同學(xué) 從 0 到 1 快速上線一個(gè)自己的網(wǎng)站！
給我 5 分鐘，我給你全世界。
上線網(wǎng)站極簡教程
讓我們先來了解下傳統(tǒng)的上線網(wǎng)站流程。
傳統(tǒng)方式
假如我們要上線個(gè)人博客網(wǎng)站，供其他同學(xué)訪問，那么需要經(jīng)歷如下步驟：
準(zhǔn)備一份個(gè)人博客網(wǎng)站的源代碼
購買一臺有公網(wǎng) IP 的服務(wù)器
把網(wǎng)站文件放到服務(wù)器上，并安裝 web 服務(wù)器軟件提供網(wǎng)頁訪問能力
購買一個(gè)域名
配置 DNS 解析，把域名指向服務(wù)器的 IP 地址
如果要提高網(wǎng)站訪問速度，自行購買 CDN
流程圖如下：
聽起來就覺得麻煩，而且這一套流程下來最少也要 1 個(gè)小時(shí)。這也是為啥很多同學(xué)只是有上線個(gè)人網(wǎng)站的想法，卻從未實(shí)現(xiàn)。
但是，昨天我卻只用 5 分鐘，就上線了自己的網(wǎng)站，怎么做到的呢？
下面引出今天的主角 Webify 。
Webify
Webify 是騰訊云提供的 一站式 Web 應(yīng)用托管服務(wù)，幫助大家極速開發(fā)、部署、上線網(wǎng)站項(xiàng)目。
什么是一站式呢？
就是一條龍服務(wù)，只要你有一套網(wǎng)頁代碼，無論是靜態(tài)、動態(tài)網(wǎng)站還是其他類型的 web 應(yīng)用，都能使用 Webify 傻瓜式部署。由它提供服務(wù)器、默認(rèn)域名、自定義域名、HTTPS、CDN 加速，提升 Web 應(yīng)用的性能和安全性。
換言之，如果使用 Webify 上線個(gè)人博客，你只需要：
準(zhǔn)備一份個(gè)人博客網(wǎng)站的源代碼
進(jìn)入 Webify 控制臺，選擇源碼和配置
一鍵發(fā)布
流程大大精簡了！
此外，Webify 還提供基于 Git 工作流的 DevOps 流程，每次修改代碼都能自動重新構(gòu)建部署，不用再登錄服務(wù)器自己操作了！
聽起來挺爽，下面我們一起試著用 Webify 上線個(gè)人博客。
Webify 實(shí)戰(zhàn)
地址：https://cloud.tencent.com/product/webify
首先進(jìn)入 Web 應(yīng)用托管平臺，新建一個(gè)應(yīng)用。
一個(gè)應(yīng)用對應(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 托管平臺，就能直接在 Webify 導(dǎo)入。
比如我們想要上線個(gè)人博客，先要有一套博客源代碼?？梢宰约簩懘a；也可以直接使用一些現(xiàn)成的站點(diǎn)生成器，比如 Hugo、Hexo 等（后面詳細(xì)介紹），自動生成源代碼；當(dāng)然還可以下載、克隆別人的項(xiàng)目代碼。搞到代碼后，把它上傳到 GitHub 或 Gitee 等代碼托管平臺就可以被 Webify 導(dǎo)入了。
導(dǎo)入之后需要根據(jù)應(yīng)用的技術(shù)棧和類型，填寫構(gòu)建命令等配置。這里可以直接選擇預(yù)設(shè)配置，比如你的項(xiàng)目用到了 Vue.js，可以直接選擇對應(yīng)的預(yù)設(shè)，不用填寫就能自動配置：
從模板創(chuàng)建應(yīng)用
如果我們啥代碼都沒有，也搞不來代碼，咋辦？
也沒有關(guān)系，Webify 內(nèi)置了一些項(xiàng)目模板，直接選擇需要的應(yīng)用創(chuàng)建即可。比如我們要做個(gè)人博客，可以選擇 Docusaurus 2 這款主流的站點(diǎn)生成器：
選中模板后，系統(tǒng)會自動把代碼模板復(fù)制到新的 Git 倉庫，和應(yīng)用關(guān)聯(lián)。
Webify 會自動給 Git 倉庫配置 Webhooks，后續(xù)每當(dāng)倉庫的代碼發(fā)生變更（push）時(shí)，都會自動觸發(fā)應(yīng)用的重新部署，無需再跑到服務(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īng)用的詳細(xì)信息，比如系統(tǒng)為我們提供的默認(rèn)項(xiàng)目域名，點(diǎn)擊之后就能訪問到已上線的博客網(wǎng)站啦！
應(yīng)用詳情中還有一個(gè)所屬環(huán)境信息，那是啥呢？
其實(shí)在部署過程中，系統(tǒng)會自動創(chuàng)建一個(gè) 云開發(fā) 環(huán)境，根據(jù)配置的命令自動構(gòu)建項(xiàng)目，將構(gòu)建產(chǎn)物放到 靜態(tài)網(wǎng)站托管 上。
可以在云開發(fā)控制臺看到已經(jīng)上傳到服務(wù)器上的文件：
在靜態(tài)網(wǎng)站托管頁面，可以修改已上傳的文件，修改 CDN 緩存設(shè)置等：
想要了解什么是云開發(fā)？歡迎閱讀我之前的文章：我和云開發(fā) 。
進(jìn)入應(yīng)用詳情的設(shè)置頁，可以給項(xiàng)目添加自定義域名、修改應(yīng)用構(gòu)建配置、刪除應(yīng)用等：
持續(xù)發(fā)布
下面讓我們給自己的博客網(wǎng)站添加一篇文章，進(jìn)入到應(yīng)用對應(yīng)的 Git 倉庫，在 docs/tutorial-basics 路徑下新建一個(gè) .md 后綴文件，輸入博客標(biāo)題和內(nèi)容。
點(diǎn)擊 commit 按鈕，本次代碼改動將自動 push 到主分支：
當(dāng)然，更好的方式是把代碼倉庫拉取到本地，在本地修改后再 push 到遠(yuǎn)程?？梢韵?push 到 dev 分支，確認(rèn)代碼沒問題后再合并到 master 分支。
代碼 push 之后，事件會通過 Webhooks 傳遞給 Webify，自動觸發(fā)重新部署，等一段時(shí)間后就可以看到新的部署記錄：
再次訪問網(wǎng)站地址，就能夠看到新增的博客啦！
如果沒有立即看到更新，可能是由于 CDN 的緩存（默認(rèn) 2 分鐘），導(dǎo)致沒有拉取到最新的資源，等個(gè)幾分鐘就好了。
OK，從 0 到 1 上線網(wǎng)站成就達(dá)成。后面大家可以參考 Docusaurus 站點(diǎn)生成器的官方文檔，更改代碼和配置，進(jìn)一步定制自己的博客。
使用感受
其實(shí)這個(gè)東西并不算新技術(shù)了，產(chǎn)品形態(tài)和體驗(yàn)上類似 Vercel 和 Github Pages。不過優(yōu)點(diǎn)是 Webify 在國內(nèi)，提供了高速 CDN；還能夠和其他云產(chǎn)品打通、形成體系。
使用 Webify 上線網(wǎng)站還是很爽的，整個(gè)流程非常簡單、易上手，著實(shí)省去了很多自己上線網(wǎng)站的瑣碎流程。無論是對想快速上線自己網(wǎng)站的同學(xué)、還是 web 開發(fā)愛好者，都是不錯(cuò)的選擇。
還有重要的一點(diǎn)要提醒大家，世上沒有免費(fèi)的午餐，Webify 依托于云開發(fā)，也是要收費(fèi)的（提供 1 個(gè)月的免費(fèi)體驗(yàn)），但相對于自己購買服務(wù)器（即使是學(xué)生機(jī)），性價(jià)比也是更高的。
最后，我還在小破站發(fā)布了 webify 視頻教程，演示了另一個(gè)博客系統(tǒng)的上線。
指路：https://www.bilibili.com/video/BV11V411p7vf/
我是魚皮，歡迎閱讀 我從 0 自學(xué)進(jìn)入騰訊的編程學(xué)習(xí)、實(shí)習(xí)、求職、考證、寫書經(jīng)歷，不再迷茫！
指路：https://t.1yb.co/w66s
點(diǎn)贊 還是要求一下的，祝大家都能心想事成、發(fā)大財(cái)、行大運(yùn)。
