<網頁>

網頁小社第七堂 --- GitHub pages

講師：鹽亞倫

講師介紹

• 炎上鹽亞倫
• 不會寫網頁但被抓來當網頁講師
• 今天其實是專案小社(?

<Git>

神奇的工具

什麼是Git呢？

• 一個版本管理工具軟體
• 多用於大型程式專案當中
• 用途：
  • 管理程式版本
  • 備份專案&回復
  • 有利於程式分享與共編
• 詳細介紹請看專案小社簡報

Git的基本運作單位

• 一個Repository代表一個專案
• 在電腦上面，一個repo會是一個資料夾，裡面會有程式碼、子資料夾、git設定檔等等
• 一個經典的網頁專案長相：

Repository 存在哪裡？

1. fetch：檢查remote有沒有變化 
2. pull：將remote的變化“拉”（同步）到本地
3. commit : 將目前所做變更記錄到git中 （類似存檔）
4. push：將Local的變化，上傳同步到remote

<GitHub>

神奇的網站

GitHub是什麼？

• 一個提供Git伺服器的網站
• 可以存放你的git repository
• 一個開源程式碼平台：
  • 讓大家共享程式
  • 一同修改程式
• 全球最大工程師社群網站
• 和Git是不一樣東西
  • ​一個是軟體，一個是使用該軟體的公司

來註冊帳號吧

https://github.com/

填入基本資料

username好好取，因為改不了

而且之後你網頁的網址會是它

輸入email驗證碼

回答簡單問題

（也可以跳過）

登入後長相

身為社群媒體必備的動態牆

常用的repo

最重要的選單

來設定改改名字和頭貼

（注意，名字可以改，但username會是原本的註冊時的那個）

profile頁面

repository頁面

<GitHub Desktop >

神奇的圖形化介面

前面不是有說Git通常是用終端機指令嗎？

• GitHub出的圖形化應用程式
• 讓你在Local端能夠以按按鈕的方式來搞定剛剛commit push pull 那些東東

一樣來安裝摟

https://desktop.github.com/

安裝完之後直接點選Sign in to GitHub

設定名字 / Email

（應該不太需要改）

點選Create a Turorial跟著他練習看看吧

<GItHub Pages >

神奇的GitHub服務

GitHub Pages

• 之所以在網頁小社講GitHub的目的
• Github Pages是GitHub公司提供的服務
• 免費讓你架設你自己的靜態網站
• 架設出來的網址：
• https::/<USERNAME>.github.io/<REPO NAME>
• 例如：https://aaronwu-train.github.io/The-Gravity-Ball/

• 下載 nginx 、 apache等軟體
• 或是如果你電腦沒有python，你可以用這些方式在本地測試：
  1. 裝python
  2. 在終端機中打開你網頁專案資料夾
  3. 輸入：python -m http.server
  4. 在瀏覽器網址輸入 localhost:8000
  5. 看到你的網站了
• 如果你電腦有python的話
  1. ​​把python刪掉，回歸case1
• ​​​不過這些方法都還要處理一堆防火牆、ip、網域有的沒的
• 還是github-pages比較好

<實作時間>

將上週的網站放到Github上面吧

1. 從GitHub建立Repo

從repository頁面點選New

添加README檔

簡介repo

repo名稱

添加版權LICENSE

License簡介

• 在GitHub上面基本上程式碼是公開的
• 因此需要不同的License來保護你程式碼的著作權，並且限制他人的使用

看更多

常見的有MIT、GPL、Apache 2.0 等等

為了讓你們可以修改講師的code

所以今天先用最鬆的MIT LICENSE

弄完應該長這樣

接下來要將在Github(remote)上的這個專案

複製到電腦(local)上

這動作叫做clone

按綠色按鈕 code

然後選 Open with Github Desktop

在電腦的資料夾位置

從檔案總管開啟

從VScode開啟

更改vscode為其他編輯器

在瀏覽器中開啟github

神奇按鈕

從檔案總管開啟後
新增專案基本的資料夾

並且隨便放幾個檔案

再回到剛剛的Github Desktop

他偵測到變更了！

變更列表

每個檔案可以看到檔案變了哪些地方

commit區

練習commit和push吧

commit message

簡單講一下你的變更

在這裡詳細寫下變更內容

寫完點我

神奇按鈕已經顯示push了

按下去之後就會push到github上了

成功了

2. 從codepen上下載網頁程式碼

上週的code

右下角Export

選擇 Export .zip

下載到電腦隨便一個地方，但不要放在剛剛的git資料夾中

解壓縮之後

dist 資料夾裡面有三個檔案

把他複製到剛剛創的repo中

記得將css和js存入相對應的資料夾

用編輯器打開index.html

修改css和js的路徑

記得使用相對路徑！

相對路徑中 . 和 .. 分別代表

同個資料夾(.)和上層資料夾(..)

一樣，commit + push

成功！

不過現在github上面依然只有你的程式碼

3. 建立pages

點選setting

左下方pages

branch選擇main

然後按save

等個幾分鐘

網站架好了！！！

不過呢，這個網址每次都要進到setting才點的開的話有點不方便

所以我們可以把它放進repo的README裡面

完成！！！

不過這時候你會發現

你電腦中的readme其實沒被改到

5. Fetch and Pull

連續按神奇按鈕兩次

同步完成了！！！

是不是很簡單？

這次的範例repo在這裏

<補充的啦>

更多神奇的東東

branch

Fork & Pull Request

各位google能力加油