<網頁>
網頁小社第七堂 --- GitHub pages
講師:鹽亞倫

講師介紹
- 炎上鹽亞倫
- 不會寫網頁但被抓來當網頁講師
- 今天其實是專案小社(?
<Git>
神奇的工具
什麼是Git呢?

- 一個版本管理工具軟體
- 多用於大型程式專案當中
- 用途:
- 管理程式版本
- 備份專案&回復
- 有利於程式分享與共編
- 詳細介紹請看專案小社簡報
Git的基本運作單位
Repository / 儲存庫
- 一個Repository代表一個專案
- 在電腦上面,一個repo會是一個資料夾,裡面會有程式碼、子資料夾、git設定檔等等
- 一個經典的網頁專案長相:


Repository 存在哪裡?
本地端 (Local)
遠端 / 伺服器端 (Local)

你的電腦 / 你同學的電腦
伺服器 / GitHub 等網站
程式碼同時存在多個地方,並且利用一些動作(指令)進行同步
有點類似雲端硬碟同步,但是不會自動進行
Git的四大基本動作:
- fetch:檢查remote有沒有變化
- pull:將remote的變化“拉”(同步)到本地
- commit : 將目前所做變更記錄到git中 (類似存檔)
- push:將Local的變化,上傳同步到remote
寫code前
寫code後
以上四個步驟是按一般的工作流程排的

fetch只是類似瀏覽器的
沒什麼特別
所以沒在圖上

通常git要用指令操作,不過等等會教一個應用程式,讓你比較容易上手
<GitHub>
神奇的網站
GitHub是什麼?

- 一個提供Git伺服器的網站
- 可以存放你的git repository
- 一個開源程式碼平台:
- 讓大家共享程式
- 一同修改程式
全球最大工程師社群網站-
和Git是不一樣東西-
一個是軟體,一個是使用該軟體的公司
-
前面提到的git remote一般來說都是用github啦
來註冊帳號吧


填入基本資料
username好好取,因為改不了
而且之後你網頁的網址會是它


輸入email驗證碼
回答簡單問題
(也可以跳過)
登入後長相

身為社群媒體必備的動態牆
常用的repo
最重要的選單

來設定改改名字和頭貼
(注意,名字可以改,但username會是原本的註冊時的那個)

profile頁面

repository頁面
<GitHub Desktop >
神奇的圖形化介面
前面不是有說Git通常是用終端機指令嗎?
但是因為這堂不是專案小社我不打算講指令(太難了)
所以Github Desktop是什麼呢?

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

記得選擇自己的作業系統 (macOS / Windows)

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

設定名字 / Email
(應該不太需要改)

點選Create a Turorial跟著他練習看看吧
<GItHub Pages >
神奇的GitHub服務
- 之所以在網頁小社講GitHub的目的
- Github Pages是GitHub公司提供的服務
- 免費讓你架設你自己的靜態網站
- 架設出來的網址:
https::/<USERNAME>.github.io/<REPO NAME>
- 例如:https://aaronwu-train.github.io/The-Gravity-Ball/

如果不用github pages,其實一般的電腦也可以當成網頁伺服器
- 下載 nginx 、 apache等軟體
- 或是如果你電腦沒有python,你可以用這些方式在本地測試:
- 裝python
- 在終端機中打開你網頁專案資料夾
- 輸入:
python -m http.server
在瀏覽器網址輸入 localhost:8000
看到你的網站了
-
如果你電腦有python的話
把python刪掉,回歸case1
-
不過這些方法都還要處理一堆防火牆、ip、網域有的沒的 還是github-pages比較好
只要用一些東西讓你的網頁可以接收http協定就好
<實作時間>
將上週的網站放到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

github
local

push
pull

AaW
nn

AaW's github repo
fork
push
pull
pull request
merge
nn's github repo
pull
各位google能力加油
下課!
別忘記報名寒訓!

網頁聯課第七堂 --- github pages
By Aaron Wu
網頁聯課第七堂 --- github pages
- 420