--- 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可能都要等一下讓它更新）