最強最簡單的配置github教程。沒有之一

當你不理解一段代碼什麼意思的時候,你會用就好。時間久了你會懂的。css

2015年本身剛學前端的時候,使用git bash 上傳代碼到github時困難的要死。好多東西不明白不理解。隨着工做的積累,如今回頭本身隨便wanwan2半小時就配置好了。如今整理好教程。一個是爲了驗證一句話。一個是爲後來者挖好井。html

         進入 https://github.com/settings/keys前端

  1. 若是頁面裏已經有一些 key,就點「delete」按鈕把這些 key 全刪掉。若是沒有,就往下看
  2. 點擊 New SSH key,你須要輸入 Title 和 Key,可是你如今沒有 key,往下看
  3. 打開 Git Bash
  4. 複製並運行 rm -rf ~/.ssh/* 把現有的 ssh key 都刪掉,這句命令行若是你多打一個空格,可能就要重裝系統了,建議複製運行。
  5. 運行 ssh-keygen -t rsa -b 4096 -C "你的郵箱",注意填寫你的郵箱!
  6. 按回車三次
  7. 運行 cat ~/.ssh/id_rsa.pub,獲得一串東西,完整的複製這串東西
  8. 回到上面第 3 步的頁面,在 Title 輸入「個人第一個 key」
  9. 在 Key 裏粘貼剛剛你你複製的那串東西
  10. 點擊 Add SSH key
  11. 回到 Git Bash
  12. 運行 ssh -T git@github.com,你可能會看到這樣的提示:
    圖片圖片
    輸入 yes 回車……問你話你就答,別傻在那
  13. 而後若是你看到 Permission denied (publickey). 就說明你失敗了,請回到第 1 步重來,是的,回到第 1 步重來;若是你看到 Hi FrankFang! You've successfully authenticated, but GitHub does not provide shell access. 就說明你成功了!

好了,終於 TMD 添加了一個無聊的 SSH key,不要問我這個有什麼用,由於一下子你就會用到它,你想了解原理就看這篇 文章git

若是要講清楚,太浪費時間了,咱們只是想用用 GitHub 而已。github

  • 一臺電腦只須要一個 SSH key
  • 一個 SSH key 能夠訪問你的全部倉庫,即便你有 1000000 個倉庫,都沒問題
  • 若是你新買了電腦,就在新電腦上從新生成一個 SSH key,把這個 key 也上傳到 GitHub,它能夠和以前的 key 共存在 GitHub 上
  • 若是你把 key 從電腦上刪除了,從新生成一個 key 便可,替換以前的 key

配置 git

git config --global user.name 你的英文名
git config --global user.email 你的郵箱
git config --global push.default matching
git config --global core.quotepath false
git config --global core.editor "vim"

五句話,依次運行。不執行的話,電腦可能會爆炸你信不信。shell

使用 git

使用 git 有三種方式,請按照你的需求選擇vim

  1. 只在本地使用
  2. 將本地倉庫上傳到 GitHub
  3. 下載 GitHub 上的倉庫

1 只在本地使用

1.1 初始化

  1. 建立目錄做爲咱們的項目目錄:mkdir git-demo-1
  2. 進入目錄 cd git-demo-1
  3. git init,這句命令會在 git-demo-1 裏建立一個 .git 目錄
  4. ls -la 你就會看到 .git 目錄,它就是一個「倉庫」,不要進去看,這倉庫裏面有毒,別進去!
  5. 在 git-demo-1 目錄裏面添加任意文件,假設咱們添加了兩個文件,分別是 index.html 和 css/style.css
    1. touch index.html
    2. mkdir css
    3. touch css/style.css
  6. 運行 git status -sb 能夠看到文件前面有 ?? 號
    ## Initial commit on master
     ?? css/
     ?? index.html
    這個 ?? 表示 git 一臉懵逼,不知道你要怎麼對待這些變更。
  7. 使用 git add 將文件添加到「暫存區」
    1. 你能夠一個一個地 add
      1. git add index.html
      2. git add css/style.css
    2. 你也能夠一次性 add
      1. git add . 意思是把當前目錄(.表示當前目錄)裏面的變更都加到「暫存區」
  8. 再次運行 git status -sb,能夠看到 ?? 變成了 A
    ## Initial commit on master
     A  css/style.css
     A  index.html
    A 的意思就是添加,也就是說你告訴 git,這些文件我要加到倉庫裏
  9. 使用 git commit -m "信息" 將你 add 過的內容「正式提交」到本地倉庫(.git就是本地倉庫),並添加一些註釋信息,方便往後查閱
    1. 你能夠一個一個地 commit
      1. git commit index.html -m '添加index.html'
      2. git commit css/style.css -m "添加 css/style.css"
    2. 你也能夠一次性 commit
      1. git commit . -m "添加了幾個文件"
  10. 再再次運行 git status -sb,發現沒有文件變更了,這是由於文件的變更已經記錄在倉庫裏了。
  11. 這時你使用 git log 就能夠看到歷史上的變更:安全

    commit f0d95058cd32a332b98967f6c0a701c64a00810a
     Author: frankfang <frankfang1990@gmail.com>
     Date:   Thu Sep 28 22:30:43 2017 +0800
    
         添加幾個文件
  12. 以上就是 git add / git commit 的一次完整過程,能夠看到,挺複雜的。原則上,你錯了任何一步,就給我從頭來一遍,作到你不會再手抖爲止。

1.2 文件變更

若是我想繼續改文件,應該怎麼作呢?bash

  1. start css/style.css 會使用默認的編輯器打開 css/style.css(macOS 上對應的命令是 open css/style.css
  2. 而後咱們在 css/style.css 裏寫入 body {background: red},保存退出
  3. 運行 git status -sb 發現提示中有一個 M
    ## master
     M css/style.css
    這個 M 的意思就是 Modified,表示這個文件被修改了
  4. 此時你若是想讓改動保存到倉庫裏,你須要先 git add css/style.css 或者也能夠 git add .
    注意,因爲這個 css/style.css 之前被咱們 add 過,你往文章上面看,咱們是 add 過 css/style.css 的,因此此處的 git add 操做能夠省略,但我建議你使用 git 的前一個月,不要省略 git add。
    換句話說,每一次改動,都要通過 git add 和 git commit 兩個命令,才能被添加到 .git 本地倉庫裏。
  5. 再次運行 git status -sb 發現 M 有紅色變成了綠色,紅色和綠色有啥區別呢?別管它們的區別,記住我說的,先 add,再 commit,等你熟練以後再去理解區別。
    先造成肌肉記憶,在去造成大腦記憶!
  6. 運行 git commit -m "更新 css/style.css",這個改動就被提交到 .git 本地倉庫了。再說一次,不要去 .git 目錄裏面,那裏的東西你一無所知。
  7. 再再次運行 git status -sb,會發現沒有變動了,這說明全部變更都被本地倉庫記錄在案了。
    這裏來透露一下 git status -sb 是什麼意思:git status 是用來顯示當前的文件狀態的,哪一個文件變更了,方便你進行 git add 操做。-sb 選項的意思就是,SB都能看懂,哈,這是開玩笑,-s 的意思是顯示總結(summary),-b 的意思是顯示分支(branch),因此 -sb 的意思是顯示總結和分支。

1.3 總結

至此,咱們來總結一下用到的命令ssh

  1. git init,初始化本地倉庫 .git
  2. git status -sb,顯示當前全部文件的狀態
  3. git add 文件路徑,用來將變更加到暫存區
  4. git commit -m "信息",用來正式提交變更,提交至 .git 倉庫
  5. 若是有新的變更,咱們只須要依次執行 git add xxx 和 git commit -m 'xxx' 兩個命令便可。別看本教程廢話那麼多,其實就這一句有用!先 add 再 commit,行了,你學會 git 了。
  6. git log 查看變動歷史

2 將本地倉庫上傳到 GitHub

如何將咱們這個 git-demo-1 上傳到 GitHub 呢?

  1. 在 GitHub 上新建一個空倉庫,名稱隨意,通常能夠跟本地目錄名一致,也叫作 git-demo-1
    圖片圖片
    按照截圖所示,除了倉庫名,其餘的什麼都別改,其餘的什麼都別改,其餘的什麼都別改,其餘的什麼都別改,這樣你才能建立一個空倉庫
  2. 點擊建立按鈕以後,GitHub 就會把後續的操做全告訴你,如圖
    圖片圖片
  3. 看圖,點擊 SSH 按鈕,點擊 SSH 按鈕,點擊 SSH 按鈕,我想你如今確定不會忘了點擊 SSH 按鈕了吧~~~~若是不點擊這個按鈕,你就會使用默認的 HTTPS 地址。可是千萬不要使用 HTTPS 地址,由於 HTTPS 地址使用起來特別麻煩,每次都要輸入密碼,而 SSH 不用輸入用戶名密碼。
    爲何 SSH 不用密碼呢,由於你已經上傳了 SSH public key。還記得嗎?若是不記得,翻到本文第一部分「配置 GitHub」章節。
  4. 因爲咱們已經有本地倉庫了,因此看圖,圖中下面半部分就是你須要的命令,咱們一行一行拷貝過來執行
    1. 找到圖中的「…or push an existing repository from the command line」這一行,你會看到 git remote add origin https://github.com/xxxxxxxxxx/git-demo-1.git, 若是你發現這個地址是 https 開頭的,那你就作錯了,還記得嗎,咱們要使用 SSH 地址,GitHub 的 SSH 地址是以 git@github.com 開頭的。
    2. 再次點擊 SSH 按鈕,無論我強調多少遍,總會有人忘記點擊 SSH 按鈕,爲何呢?我也不知道,爲了防止你忘了點擊 SSH 按鈕,我最後再說一遍,「點擊 SSH按鈕」,點擊以後,整個世界就會變得美好起來。
    3. 獲得新的命令 git remote add origin git@github.com:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx/git-demo-1.git,複製並運行它
    4. 複製第二行 git push -u origin master,運行它
    5. 刷新當前頁面,你的倉庫就上傳到 GitHub 了!是否是特別簡單?只要你按照我說的作,一絲不苟,便可。

3 直接在 GitHub 建立一個倉庫,而後下載到本地

上面兩步講了

  1. 在本地建立倉庫
  2. 將本地倉庫上傳到 GitHub

這裏將第三種用法,那就是直接在 GitHub 建立一個倉庫,而後下載到本地。

  1. 在GitHub 上新建一個倉庫 git-demo-2,此次就不建立空倉庫了,而是自帶 README 和 Lisence 的倉庫,建立截圖以下:
    圖片圖片
    請按圖中所示,填寫如出一轍的內容,而後點擊建立按鈕。
  2. 這樣一來,這個倉庫就會自動擁有三個文件:
    圖片圖片
  3. 這三個文件的做用請自行了解:.gitignore 的做用README.md 的做用 以及 LISENCE 的做用
  4. 好了,如今遠程倉庫已經建立好了,怎麼下載到咱們的本地(也就是咱們的電腦上)呢?答案是使用 git clone 命令
  5. 點擊頁面中惟一的綠色按鈕「clone or download」,會看到一個彈出層
    圖片圖片
  6. 請確保彈出層裏的地址是 SSH 地址,也就是 git@github.com 開頭的地址,若是不是,就點擊 Use SSH 按鈕,就點擊 Use SSH 按鈕,就點擊 Use SSH 按鈕。而後複製這個地址。
  7. 打開 Git Bash,找一個安全的目錄,好比 ~/Desktop 桌面目錄就很安全:cd ~/Desktop。運行。
  8. 運行 git clone 你剛纔獲得的以git@github.com開頭的地址,運行完了你就會發現,桌面上多出一個 git-demo-2 目錄。我再說一遍,桌面上多出一個 git-demo-2 目錄。我再說一遍,桌面上多出一個 git-demo-2 目錄。這個細節很重要,不少小白髮現不了這個細節,我也不知道他們是眼瞎仍是怎麼了……
  9. 進入這個多出來的目錄,對的,你確定會忽略這一步。
  10. 進入這個多出來的目錄,對的,你確定會忽略這一步。
  11. 進入這個多出來的目錄,對的,你確定會忽略這一步。
  12. 好了你進入了這個目錄了,若是沒有,我就要吐血了,由於個人提示很明顯。
  13. 運行 ls -la 你會看到,遠程目錄的全部文件都在這裏出現了,另外你還看到了 .git 本地倉庫。這是你就能夠添加文件,git add,而後 git commit 了。

三種方式都說完了,它們分別是:

  1. 在本地建立倉庫
  2. 將本地倉庫上傳到 GitHub
  3. 下載 GitHub 上的倉庫到本地

其實呢,我還能夠說不少種不一樣的方式,可是,你記住這幾種就好了,夠你用的了。咱們並不想要了解 git 的全部高級用法,咱們的目的很明確:能經過 Git 命令使用 GitHub 就行。

咱們再回顧一遍已經學到的命令:(此次只多了一個 git clone 命令)

  1. git clone git@github.com:xxxx,下載倉庫
  2. git init,初始化本地倉庫 .git
  3. git status -sb,顯示當前全部文件的狀態
  4. git add 文件路徑,用來將變更加到暫存區
  5. git commit -m "信息",用來正式提交變更,提交至 .git 倉庫
  6. 若是有新的變更,咱們只須要依次執行 git add xxx 和 git commit -m 'xxx' 兩個命令便可。別看本教程廢話那麼多,其實就這一句有用!先 add 再 commit,行了,你學會 git 了。
  7. git log 查看變動歷史

如何上傳更新

在本地任意一個文件夾中,Git init   初始化本地倉庫  會出現一個.git  。 而後經過git remote add origin git@github.com:your name/repository name.git。與遠程倉庫創建連接。創建成功沒有反應、接下來你須要git pull origin master 先把遠程文件下載下來、Git status 看下狀態。沒有再遠程倉庫的就會變成紅色,接下來就是:Git add  Git commit -m  Git  push -u origin master(第一次須要,之後直接git push )。 

你在本地目錄有任何變更,只需按照如下順序就能上傳:

  1. git add 文件路徑
  2. git commit -m "信息"
  3. git pull (相信我,你必定會忘記這一個命令)
  4. git push

下面是例子

  1. cd git-demo-1
  2. touch index2.html
  3. git add index2.html
  4. git commit -m "新建 index2.html"
  5. git pull
  6. git push

而後你去 git-demo-1 的 GitHub 頁面,就能看到 index2.html 出如今裏面了。是否是很……簡……單……呢……

其餘

還有一些有用的命令

  • git remote add origin git@github.com:xxxxxxx.git 將本地倉庫與遠程倉庫關聯
  • git remote set-url origin git@github.com:xxxxx.git 上一步手抖了,能夠用這個命令來挽回
  • git branch 新建分支
  • git merge 合併分支
  • git stash 通靈術
  • git stash pop 反轉通靈術
  • git revert 後悔了
  • git reset 另外一種後悔了
  • git diff 查看詳細變化

學 git 命令都夠大家學一週的,因此別妄想如今就掌握它,切記。

 

注意只能預覽 HTML,不能預覽 Markdown。

    1. 在 GitHub 新建一個倉庫 x1
    2. 在 x1 裏面新建一個 HTML 好比 y1.html,文件內容爲「<h1>這是一個HTML</h1>」
      • 新建文件的方法能夠是使用 git add git commit git push
      • 也能夠是直接在網頁上操做,隨便你怎麼新建文件
    3. 點擊 Settings
    4. 往下滾動頁面
    5. 選中 master branch 而後點擊 Save
      圖片圖片
    6. 獲得一個預覽連接,假設預覽連接是 https://zzzzzzzzz/
      圖片圖片
    7. 訪問 https://zzzzzzzzz/y1.html 便可預覽 y1.html
    8. 新建 y2.html,git add git commit git push,等一分鐘,訪問 https://zzzzzzzzz/y2.html 便可預覽 y2.html
    9. 新建 y3.html,git add git commit git push,等一分鐘,訪問 https://zzzzzzzzz/y3.html 便可預覽 y3.html

資源

相關文章
相關標籤/搜索