如何將網站代碼部署到 netlify 上免費託管

blank

如何將網站代碼部署到 netlify 上免費託管

前言

之前分享過,如何將代碼部署到騰訊雲網站靜態託管,也分享過如何將代碼部署到 vercel 上,今天給大家分享下如何將代碼部署到 Netlify 上

使用 Netlify 的優勢

1. 免費託管,一鍵部署,100GB 的存儲容量

2. CI/CD: 當你將本地的代碼 push 到 github/gitlab 等主目錄中,Netlify 會自動觸發實現自動部署(與 vercel 一樣)

3. 自訂網功能變數名稱/支援 Hth,免費 ssl 憑證

4. http headers: 你可以定製資源的 HTTP header,從而可以為單頁面應用做「緩存優化」等

5. CDN: 把你的靜態資源推到各個邊緣節點,雖然都在國外(跟國內還是沒法比.. 但貌似也沒慢多少)

6. HTTP redirect/rewrite: 配置 /api 解決跨域問題,根據業務需求配置更多的路由重定向

7. 一些強大的輔助性的外掛程式用於提升網站的性能

怎麼使用 Netlify

這裏同樣以 github pages 為例,將 github pages 遷移到 Netlify 上進行託管

登入開啟 Netlify 官方網站(自備好梯子)

1. 使用 github 帳號 授權登錄 netlify。 在主頁點擊 New site from git 按鈕,新建網站

blank

新增網站(從 git 主目錄匯入)

2. 創建一個新的網站

blank

選擇一個倉庫

3. 這個倉庫可以從 github/gitlab 中導入

blank

注意

如果想要 Netlify 授權 github 中所有的倉庫,那就選擇所有,但是一般我們指定特定的倉庫就可以了的

這裡我是指定到我本地 npm run build 打包構建生成的那個 dist目录 ,其中 dist 目錄就是在 github pages 中的 xxxx.github.io 這個倉庫

你可以指定原始程式碼目錄,但是需要注意的是,你需要進行一下配置, Netlify 應該是放置你打包生成構建的 dist 目錄

配置 netlify

選擇 github 中打包建構那個倉庫,一般我們將本地開發源碼與建構包裝生成的目錄,進行分開的,至於是否強行分開,這個並不是固定的,只是專案源碼不會上傳打包生成的 dist 目錄

而將打包建構生成的dist目錄單獨放到一個倉庫中獨立管理的

這樣分開管理代碼,有利於代碼的反覆運算和維護

blank

構建 Netlify 選項

1. build command : 如何構建生成靜態檔資源,一般會是 npm run build

2. publish directory : 靜態檔案資源目錄,一般會是 public/dist 等目錄

blank

build command,以及 publish directory,你可以不填,當然你可以指定命令,構建打包使用 npm run build ,而 publish directory,寫public

這個一般我們在本地執行 npm run build 時就會生成 dist 目錄,如果你的源碼與構建代碼是在同一個倉庫進行管理的

那這裡就需要填寫指定的打包目錄

因為我的源碼和構建出來的代碼已經分開了的,所以這裡可以省略的

部署成功

只要你正確的導入你構建打包的目錄檔,一般都會部署成功,最好不要將源碼也一同部署到 Netlify 上的,其實只需要把本地打包構建後的專案檔部署到 Netlify 上就可以了的

自定義功能變數名稱

1. 在主面板中找到 Add or register domain 添加或註冊功能變數名稱

blank

2. 添加功能變數名稱以及進行域名解析

blank

3. 功能變數名稱管理

blank

基本上到了這一步,功能變數名稱解析,就很容易了,如果之前有 vercel 網站上解析過功能變數名稱,在你購買功能變數名稱商的控制台裡找到 dns 進行功能變數名稱解析就可以了的

安裝外掛程式

在 Netlify 部署網站後,如果你想你的網站運行得更快,除了自己可以對代碼進行優化,或使用一些 seo 等讓網站跑的更快

Netlify也提供了一些外掛程式進行輔助,提升網站的性能

blank
blank

總結

使用 Netlify 部署網站,非常簡單,它不僅可以部署 vuepress 應用,可以部署目前前端很多流行的專案,一些靜態生成器的網站應用都可以部署在上面(如:Jamstack,React,Vue.js,Gatsby,Angular,Next.js,Sitecore,Drupal 等),非常強大,也支援 CI/CD 命令行終端操作

總之,如果你愛折騰,你可以嘗試一下 Netlify 的,而我另一個網站doc.itclan.cn卻是部署在 vercel 上的

你可能會有疑問,難道我要到不同的地方去管理代碼? 其實,不是的,兩個網站的內容雖然是一樣的,但是同一套代碼,只是分別部署在不同的託管商那的,彼此之間並不會有任何干擾

如果你的網站受眾人群更多的是國外用戶,那麼可以選擇國外的網站託管商的,如果僅僅就考慮國內用戶,那麼可以選擇國內的

一些伺服器廠商,例如:阿裡雲,騰訊雲,西部數碼等都可以

如果僅僅是個人部落格,用於記錄自己的學習,個人覺得,用靜態網站生成器構建的網站,就挺不錯的,其中 github pagesNetlifyvercel 作為靜態網站託管,都是免費的

而國內的阿裡雲,騰訊雲靜態網站託管會收一定的存儲資源費用(cdn 節點都在國內,訪問速度可能要快點),如果複雜的功能更強大的網站,可以選擇雲伺服器(阿裡雲的 ECS,騰訊雲的 CVM 等都可以).

如果你問我為什麼這麼折騰,從虛擬主機,靜態網站託管,coding 靜態託管,騰訊雲網站靜態託管,vercel,以及 Netlify

甚至還折騰過騰訊雲的雲託管(業餘折騰可以,但是不建議目前把專案放到這上面來的),以及雲伺服器(ECS/CVM,往後也可以分享下怎麼用雲伺服器建站部署應用的),

因為折騰過,就知道他們彼此各個之間的差異,在以後建站,搭應用的過程中,可以選擇最合適的一種方案

而不止於局限就會一種. 所謂技多不壓身,會多個技術就多一種選擇。 雖然都是工具,但各有所長.

參考文檔

What do you think?

Written by marketer

blank

技術基礎| 用JSON在抖音上發佈動態——使用Stargate即可輕鬆實現

blank

2020下半年前端技術發展趨勢,值得每個前端人關注