【Day07】透過Github將個人網頁上架至Netlify靜態網站服務


相信有在進行版控的大大們一定知道github這個平台,它可以透過Git進行版本控制的軟體原始碼代管服務平台,除了允許個人和組織建立和存取保管中的程式碼以外,它也提供了一些方便共同軟體開發的功能,包括允許用戶追蹤其他用戶、組織、軟體庫的動態,對軟體程式碼的改動和bug提出評論等。GitHub也提供了圖表以及專案管理的功能,我個人覺得相當方便,相同的服務有像是Gitlab和Bitbucket。
關於Git以及Github,我們這邊不再進行贅述,所以大家務必先行了解git的使用,以及如何透過git將本地端程式碼push上遠端repository。
今天的重頭戲是名為Netify的靜態網站託管服務,官網,基本免費,進階服務需付費,而在功能上,除了host靜態網站之外,有提供Continuous Deployment、網站Redirect、身份驗證、表單功能等一些production等級需要的功能
非常適合用來架設部落格或者一些production的靜態網站。

相較於大家熟知的Github page,我覺得Netify的優勢在於自動部署這個功能,也就是近年來的CI/CD,可以在Repository有變動的同時,自動幫你Build專案。
Netlify給自己的定義是:Build, deploy, and manage modern web projects,因此它不只是一個靜態網站的hosting服務而已。

登入Netlify之後,必須先連結程式碼倉庫,並選擇對應Repository進行Deploy。

設置部署選項,包括三點:

  1. 部署分支(對應下圖中 Branch to deploy: 顧名思義就是你的git倉庫的分支,默認選擇為master分支
  2. 打包命令(對應下圖中 Build command): 就是你的打包命令,諸如 npm run build,gulp build 之類: 如果本身已是靜態文件,不需打包編譯,這一欄則不填。
  3. 打包後目錄(對應下圖中 Publish directory): 即執行完打包命令之後靜態文件所在目錄,諸如 dist,_site 之類;如果本身已是靜態文件,這一欄則不填。

完成之後點擊途中 deploy site 按鈕
我們可以看到自動化部署已經開始運行了,而且過不多久,我們的網站就已經可以利用netlify域名就行訪問了,如下圖:

等命令都跑完後,點擊連結就可以連到網站囉。
Netlify集CICD於一身,可以幫你完成Build專案與Deploy專案兩件事,與目前的CICD工具,如Jenkins(用來CI)、OctopusDeploy(用做CD)用法有著相同功用,

以上就是<七天切出屬於自己的個人網站>的系列內容,希望大家喜歡。

原始碼可至我的Github repository下載
https://github.com/PefyLi/MyWebsite

成品:
https://grantli-website.netlify.com/

#Web #CICD







你可能感興趣的文章

【隨堂筆記】網路概論與Web網頁應用基礎

【隨堂筆記】網路概論與Web網頁應用基礎

MTR04_0705

MTR04_0705

Jest - mock read-only data

Jest - mock read-only data






留言討論