--- title: GitHub Page 製作 tags: 遠距, 筆記, 2017fall, github, 前端 --- # GitHub Page 製作 ## 環境 - 作業系統：Mac OS X - 使用工具： Terminal ## 申請 GitHub 帳號 ![](https://i.imgur.com/yKTQJTE.png) ## 登入 GitHub ![](https://i.imgur.com/6FaJhHL.png) ## 新增 Repository 1. 選擇 New Repository ![](https://i.imgur.com/z9zxnQx.png) 2. 新增內容如下 ![](https://i.imgur.com/Rv19zrj.png) 3. 成功畫面 ![](https://i.imgur.com/TSl7hno.png) ## 設定 1. 點選 Setting ![](https://i.imgur.com/4zZhEPO.png) 2. 往下滑到 GitHub Pages 3. 點選 master 並按 save ![](https://i.imgur.com/j7EgRI1.png) ## 拉到本機端更改檔案 1. 複製 HTTPS 的連結 ![](https://i.imgur.com/dPzaIjc.png) 2. 打開 Terminal(如果沒有 terminal，就要去建置 Linux 環境 or 利用指令功能的關鍵字，去打在 cmd 內) ![](https://codemaxx.github.io/assets/images/emoji/terminal.png) 3. 輸入 `git clone "你剛剛複製的 HTTPS 連結"` ![](https://i.imgur.com/wtogvQZ.png) 4. `cd` 進入你的資料夾（像我的指令就是 `cd TeresaLiang.github.io`） ![](https://i.imgur.com/ThfYf8W.png) 5. `touch index.html`(新增 index.html) ![](https://i.imgur.com/2IET5Wt.png) 6. `vi index.html`(編輯 index.html) ![](https://i.imgur.com/xninheg.png) 7. 進入以後，先按 `i` ![](https://i.imgur.com/lH3E4Tp.png) (左下角會出現 `--INSERT--`) 8. 然後貼上(`Ctrl + V`)以下程式碼 ```html= <!DOCTYPE html> <html> <body> <h1>你好 世界</h1> <p>我有一個個人網站拉www</p> </body> </html> ``` 9. 然後按`esc`（`esc` 意思是停止編輯，鍵盤左上角ww） 10. 再輸入`:wq`（`w` 是存檔，`q` 是離開 ![](https://i.imgur.com/FsbQxdL.png) ## 準備把檔案上傳到 GitHub 上（以下一樣在 Terminal 內完成） 1. `git add index.html`(把檔案加入追蹤) ![](https://i.imgur.com/fHotAtJ.png) 2. `git commit -m "add index.html"`(把檔案提交並加上註解) ![](https://i.imgur.com/y3CwzTf.png) 3. `git push -u origin master`(上傳到遠端 GitHub 上) ![](https://i.imgur.com/PEEU0Ba.png) 4. 登入 GitHub 帳密 5. 上傳成功的 GitHub 畫面 ![](https://i.imgur.com/0QGhHqB.png) 6. 成功的網站網址（https://username.github.io，username 換成自己的 username） 7. 像這是[我的網站](https://teresaliang.github.io)： https://teresaliang.github.io ![](https://i.imgur.com/SSWDUmm.png) # P.S. 記得把 index.html 的內容改成自己要的東西喔！！！