---
# System prepended metadata

title: Github Pages
tags: [lecture]

---

---
tags: lecture
---

# Github Pages

Github page can host static website(純前端) for free.

https://pages.github.com/


## Goals
找一個Template套版，改成自己的網頁

    無腦套版: https://html5up.net/
    歷時很久的套版網站： https://getbootstrap.com/
    長得像Google的東西: https://material.io/design/




## Let's Practice !!!


照著[這個](https://docs.github.com/en/free-pro-team@latest/github/getting-started-with-github/create-a-repo)創一個repo叫作`你的帳號名字.github.io`，其中"你的帳號名字"要轉成全小寫，之後把這個repo clone下來。

在這個repo裡創以下檔案：

1. `.nojekyll` （空檔案就好）

    註: github page 預設用Jekyll，創這個檔案可以避免一些奇怪的bug（例如檔案開頭是`.`的不會被serve）。
    
    :::warning
    Github Pages 默認是基於 Jekyll 構建，Jekyll 是一個將純文本轉換為靜態網站的工具，它構建的網站下各種目錄都是特定的以下划線開頭命名的文件夾，例如 _layouts、_posts ，它會忽略掉其它的以下划線開頭的文件夾和文件。
    .nojekyll 就是告訴 Github Pages 當前網站不是基於 Jekyll 構建的，不要忽略掉下划線開頭的文件和文件夾。
    :::


2. `index.html`
    ```html=
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Title</title>
        <link rel="stylesheet" href="/main.css" />
      </head>
      <body>
        <h1>Hi</h1>
      </body>
    </html>
    ```

    註：`/main.css` 這種路徑是相對於http server的root，用這種寫法是個好習慣，但在local端測試的時候就不能簡單的點兩下開啟html，而要架一個local server。

3. `main.css`
    ```css=
    h1 {
      color: red;
    }
    ```

4. 關掉瀏覽器的cache（重要）

    按 F12 選 Network，然後把 Disable cache 勾起來。
    ![](https://i.imgur.com/2cK7COQ.png)

5. 用local server測試一下（沒python的話去載一下）
    ```
    python3 -m http.server
    ```
    去 http://localhost:8000 看你的網站。
    
6. 測試一下你是不是真的有關掉cache

    把`main.css`裡的`red`改成`blue`之後去瀏覽器refresh一下看有沒有變色。
    
    :::warning
    瀏覽器在經過第一次讀取網站後，就會將不易變動的 HTML 架構內容（比如圖片、文字）儲存到使用者瀏覽器所在電腦記憶體中，當瀏覽者第二次開啟相同網站時，瀏覽器會開始比對第一次存放在 Cache 中暫存的資料。
    如果說 Cache 未過效期，就會直接調用 Cache 中儲存的網頁資料，而不需要再呼叫伺服器至資料庫重新演算，進而達到快速顯示網站內容的目的。
    :::
    
7. push 上去
    ```
    git add -A
    git commit -m "Initial commit"
    git push
    ```

8. 看你的網站

    去 https://你的帳號名字.github.io 看你的網站吧！（每次push可能都要等一下讓它更新）
