目標
上一篇我們使用Sourcetree這個版控軟體
把檔案放到Github上，完成了前置作業
這篇我們會將Github上的檔案做佈署

接下來我們會使用到Netlify提供的功能
動態網站建置、佈署的服務

步驟
1.
首先到Netlify
用之前的Github身分登入
基本上這邊的設定 都是下一步下一步

設定好後 來到左邊選單
有一個Projects的選項
按下後畫面呈現如下圖 按下Add new Project
這邊開始佈署的作業

點選下圖紅框處 我們要匯入已經上傳的專案

這個畫面會確認授權
要以哪個授權方式佈署這個專案
我們這邊就直接選Github

下圖會列出Github的專案列表
一樣可以透過紅框這邊做篩選

按下專案後
會進到這個畫面
基本上就用預設設定就可以了
因為我們傳Github是直接傳到Master(主幹)
所以下圖紅框 就用預設的Master選項就好
接著按下下方的 Deploy 專案名稱

這個佈署的處理速度其實蠻快的
約一分鐘不到
完成後 下圖這個紅框就是目前這個應用程式的網址

預設圖片我是隨意放的
點進來就會看到我們在前幾篇做的 加載畫面

大部分瀏覽器應該都內建了建QR碼的功能
右鍵按下會有頁面建立QR-Code
所以現在也能用手機掃描 看到自己做的東西了
不過這次的文章 只有設計在桌機畫面

以下就是這次鐵人文佈署的專案
點我
來復盤一下 這兩篇我們講到了
用Sourcetree將檔案上傳到Github遠端倉庫的方式
並透過Netlify服務將Github上專案佈署成一個應用程式
另外網域名稱那些 也都是可以另外再做設定的

備註
1.
由於我們剛才的佈署設定完成後
Netlify有預設做了跟Github建立通知的設定(Webhook)

所以當Github上的專案
有做更新時
Github也會同時通知Netlify這邊
而Netlify收到後
這邊佈署的應用程式 也會跟著自動同步
所以我們不需要再到Netlify重新手動佈署
下面一點會簡短說明

因為剛才預設加載圖片太大張了
我們換個圖片 並更新父組件App.vue程式碼
然後在src/assets路徑底下放一張新的圖片

const supportSettingImgUrl = computed(() => {
	return favoriteSupportSettingList.value.length !=  0 
	? images(`./${favoriteSupportSettingList.value["eventNo"]}.png`) 
	: images("./999999.png") ;
})

然後回到Sourcetree
如下圖就會顯示我們剛才做的變動
●修改檔案
●新增圖片
然後按照前一篇敘述的
我們先commit再push

接著我們來到Github倉庫這邊
剛才我們提交的訊息已經更新了

並且Netlify這邊 在下方的紅框處
可以看到也同步收到Github通知
並幫我們自動重新佈署

最後加載畫面
將預設圖片更新成 家裡的狗寶貝