Github Pages

v0.4 by 晴

Git & Github

神奇的線上版本管理系統

前情提要

Git 是一個對大型專案很有用的版本管理系統

而 Github 可以儲存 Git 在雲端

從而讓線上共編更方便

今天的主題會是使用 Github Desktop 建立一個新的專案

然後使用 Github Pages 架設自己的網站

 然後做成發 ​

Github Desktop

是一個管理 Github 的桌面程式

下載好以後,把它打開應該會看到

右邊的這個畫面

接著就是創一個新的帳號並登入

建立新的 Repo

一個 Repository 就是一個專案的意思,一般簡稱 Repo

在 Github Desktop 點 File > New repository

注意這邊的資料夾是父資料夾

也就是說你新增一個叫做 bar 的 Repo

選擇在 foo/ 資料夾裡面

那專案資料夾會被新增在 foo/bar/

打開專案

現在你會看到這樣

代表你什麼動作都沒做

現在點選 Open in VS Code

就可以把專案在編輯器中打開了

首先會有 .gitattributes 檔案

目前還不會用到,可以刪了

然後隨便新增一個 index.html

更新

首先,你可以看到這裡統計了你剛才都做了什麼

然後我們要把更改的東西發布到一個新版本

更新

然後我們要把更改的東西發布到一個新版本

這樣就存好新版本了,不過還要與線上的版本同步

更新

這樣就存好新版本了,不過還要與線上的版本同步

這樣就與線上版本同步了!

第一次會是 Publish 之後都是叫做 Push

章節統整

  • 專案管理的工具 Git
  • 線上存 Git 的平台 Github
  • Github Desktop 軟體
  • 開一個新專案然後打開它
  • Git 指令動作
    • Commit 發布新版本
    • Push 與線上同步

注意關於 Github 還有一堆東西,但今天我只會講到這邊

我們的重點是使用 Github Pages 架個網站

Github Pages

給懶得自己架伺服器的人們

專案設定

要使用 Github Pages,得先在 Github.com 打開你的專案

在 Github Desktop 中按 Repository > View on Github

首先到 Settings > General > Danger Zone > Change visibility > Change to public

然後 Settings > Branch 選擇 main 然後按 Save

這樣就可以了!

你可以到 https://<USER-NAME>.github.io/<REPO-NAME>/ 查看

對應檔案

網址中的路徑是檔案中的路徑底下的 index.html

例如 UserName.github.io/RepoName/Foo/

對應到的是  ./Foo/index.html

使用根目錄

如果你不想要那個 Repo Name 出現在你的網址

想要 UserName.github.io 就是你的網站首頁的話

你得新增一個名字就叫做 UserName.github.io 的 Repo

蝦殼

Github Pages

By 晴☆

Github Pages

  • 176