我們之前做出了一個單純的 HTML 網頁程式，我們想要讓更多人使用我們的傑作。但是這個程式只在你的電腦裡，只能把檔案用 email 或是聊天軟體傳給一個個的朋友。如果要改版，或是全校的學生都想用的時候，聽起來就是個不可能的任務。

但之前提到過大家的電腦上都有瀏覽器。所以只要有一台不知道在哪裡的電腦，是 24 小時開機，上面上了你的網頁檔案。當任何人用瀏覽器輸入一個特定的網址，這台遠方的電腦就會把這張網頁傳到他的瀏覽器上。

每當我們加了新功能或修正錯誤，那就把新版的檔案丟到這台遠方的電腦上，這樣大家就會抓到新的程式了。為了讓你的同學覺得你很厲害，我們之後會將「把程式丟到伺服器上」這個行為稱作 「佈署」 (絕對不是因為我懶的打很多字)。

這台遠方的電腦，我們就叫它 「伺服器」。而把程式佈署到伺服器上，並管理伺服器確定它能好好的運作，這個新的地圖領域叫做 「維運工程 (DevOps)」。

維運工程是一張非常大且複雜的地圖。不過我們的程式很單純，所以現代已經有很簡單的佈署方式了。

程式設計師每天都會用的章魚貓網站：Github

之前介紹過版本控管用的工具 Git, 而程式設計師們會把自己用 Git 管理的程式碼，上傳到 Github 這個網站上。這個網站是幾乎每個程式設計師每天都會使用的，網址是: https://github.com

把程式碼上傳到 Github 有下列這些好處：

1. 備份: 不怕電腦壞掉或不見
2. 協作：跟其它人一起合作
3. 開源：開放讓所有人共用及修改
4. 自動化處理：檢查程式碼有沒有錯誤，或是佈署

今天我們會把我們的專案上傳備份，並進行 HTML 佈署。

註冊

首先用瀏覽器開啟網站後，點選右上角的[Sign up]

接著點選畫面上的 [Continue with Google]，用你的 Google 帳號進進註冊。

將來點選[Sign in]就可以用 Google 帳號登入了。

建立新專案

接著點選左邊的綠色[Create repository]按鈕，來新建一個專案倉庫。

最上方的專案名稱欄位，需要輸入英文字母、數字或是底線。通常我們會取跟我們專案資料夾一樣的名稱。我們就使用之前的 little_pocket。要記得下面的Choose visibility要選[Public]，才有辦法佈署網頁*，再按下[Create repository]。

新建倉庫後會顯示下方的畫面，點選畫面中間的[SSH]按鈕。再按右邊的[複製]按鈕。

* 註：免費的 Github 帳號只能佈署開源(所有人看得到程式碼)專案的單網頁程式。必須要是付費帳戶或是 Github 學生專案(國中以上)才能佈署閉源的專案。

綁定倉庫連結

打開終端機，並且 cd 到我們專案的目錄下

然後在終端機中輸入

git remote add origin <貼上剛才複製的連結>

這樣就會把我們的專案綁定到我們在 Github 上的倉庫了。

上傳專案

在終端機裡輸入

git push

就會把我們的專案上傳到 Github 裡了。未來每次「版本儲存」後，就可以用 git push 把專案備份到 Github 裡。

佈署網頁程式：Github page

Github page 是 Github 網站提供的網頁佈署環境。不是只存在一台伺服器上，而是他們有一大堆伺服器聯合起來做事。所以不需要真的自己管理一台伺服器，我們把這種東西叫做 「雲端伺服器」 。

回到瀏覽器，重新整理一下我們剛才的 Github 頁面。就會看到畫面已經不一樣了。

接著按中間上方的[Settings]按鈕。然後再按下左邊的[Pages]按鈕。

然後在中間的「Branch」選擇 [main]，並且按下同一行的[Save]按鈕。

大功告成！

回到瀏覽器，連到 https://你的帳號.github.io/你的專案名稱，就會看到我們的網頁程式了！

可以到 https://taiansu.github.io/little_pocket_demo/ 試玩我們做出來的記帳程式

伺服器、佈署以及維運工程

由於我們的網頁程式不需要後端伺服器(我們在第十章提過)，現在有很多設計良好的工具，所以非常簡單。但是維運工程包括對系統的了解、網路環境的各種工具及知識等，是一個很大的領域。

營火前的回顧

地圖

又開啟新的領域了！