iT邦幫忙

2025 iThome 鐵人賽

DAY 22
0

我們之前做出了一個單純的 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/你的專案名稱,就會看到我們的網頁程式了!

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

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

營火前的回顧

地圖

又開啟新的領域了!


上一篇
Ch 20. 最簡潔的列出所有可能的情況
下一篇
Ch 22. 為什麼程式設計師喜歡用蘋果電腦?
系列文
Just enough code with AI: 給新手們的程式設計世界觀23
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言