工欲善其事,必先利其器。

我們需要先下載vscode與git pash(內建git)並安裝及配置。

注意:1,Windows安裝時儘量保證目錄(父目錄)不存在中文,否則會出現各種問題(別問我怎麼知道的emmmmm)

2,一定要配置,就是將下面5句話輸入到git pash中,不然git沒法用!

2018-06-30 菜鳥心得之如何將vscode與github連線實現檔案推送

首先,新建好資料夾,你想要上傳的檔案也放在裡面,右擊,選擇gitbash here

然後就要自報家門啦~設定全域性環境

git config ——global user。name XXX

git config ——global user。email xxxxx

輸入後,並沒有反應,不用擔心,沒有訊息就是好訊息~說明執行了

接下來我們來簡單瞭解一下Git:

GitHub的核心是一個名為Git的開源分散式版本控制系統,它負責著所有的與github相關的在你計算機上發生的事情。詳細瞭解git

所以要想將vscode上的編碼或者本地專案等推送到github上,我們就需要為它建一個倉庫。

1、註冊並登陸GitHub

2、點選“New repository”建立倉庫。

2018-06-30 菜鳥心得之如何將vscode與github連線實現檔案推送

3、輸入你所建立倉庫的名字,點選最下面的Create reposity。

2018-06-30 菜鳥心得之如何將vscode與github連線實現檔案推送

4、進入如下圖頁面,記得點下ssh

2018-06-30 菜鳥心得之如何將vscode與github連線實現檔案推送

5、但是目前還不能執行git bash,第一次使用git的clone或者push命令時,連線github會出現一個警告,以致出現一個對話

Are you sure you want to continue connecting (yes/no)?

因為git使用ssh連線,而ssh連線第一次連線驗證github伺服器key時,需要確認github伺服器key的指紋資訊是否真的來自於github伺服器。

所以我們先去取得一個ssh key :

①Settings

2018-06-30 菜鳥心得之如何將vscode與github連線實現檔案推送

②SSH and GPG keys

2018-06-30 菜鳥心得之如何將vscode與github連線實現檔案推送

③generating SSH keys

2018-06-30 菜鳥心得之如何將vscode與github連線實現檔案推送

④Generating a new SSH key and adding it to the ssh-agent

2018-06-30 菜鳥心得之如何將vscode與github連線實現檔案推送

⑤出現下圖的命令,選中它複製到gitbash中

2018-06-30 菜鳥心得之如何將vscode與github連線實現檔案推送

⑥複製選中的命令到GitBash後,點選3次回車,得到下圖中泡泡的樣子說明成功了

2018-06-30 菜鳥心得之如何將vscode與github連線實現檔案推送

⑦接著在GitBash裡輸入命令:cat ~/。ssh/id_rsa。pub,回車,得到下圖的英文

2018-06-30 菜鳥心得之如何將vscode與github連線實現檔案推送

⑧複製下來這段英文,接著:

2018-06-30 菜鳥心得之如何將vscode與github連線實現檔案推送

2018-06-30 菜鳥心得之如何將vscode與github連線實現檔案推送

6、好了,ssh key已經取得了,現在回到圖4的頁面,將程式碼一行一行復制到gitpash中

2018-06-30 菜鳥心得之如何將vscode與github連線實現檔案推送

7、出現圖中的new branch就證明執行成功了

2018-06-30 菜鳥心得之如何將vscode與github連線實現檔案推送

8、回到圖4頁面,重新整理,出現你自己的倉庫名稱證明建立倉庫成功了

2018-06-30 菜鳥心得之如何將vscode與github連線實現檔案推送

9、那麼接下來就是把我們vscode的編碼推送上來。開啟vscode,我想上傳的是blog。html,點選圖中箭頭所指方向,然後在輸入框中輸入你的命名,我的是“練習用”,然後點一個小對號(沒截到圖,很好找),就上傳成功了,接著點選同樣位置對號旁邊的三個點,選擇推送就大功告成啦。

2018-06-30 菜鳥心得之如何將vscode與github連線實現檔案推送

10、回到github頁面,我上傳的編碼就在這裡了。

2018-06-30 菜鳥心得之如何將vscode與github連線實現檔案推送

11、如果想開啟看的話,你會發現點開來並不能直接生成頁面,而是程式碼的形式,什麼也看不出來。如果你想看,那就繼續跟我來。

2018-06-30 菜鳥心得之如何將vscode與github連線實現檔案推送

點選右上角的settings

2018-06-30 菜鳥心得之如何將vscode與github連線實現檔案推送

找到github pages,選擇圖示位置,然後點選save

2018-06-30 菜鳥心得之如何將vscode與github連線實現檔案推送

點選save後會在github pages 下邊出現一個網址,不要點開,複製。

2018-06-30 菜鳥心得之如何將vscode與github連線實現檔案推送

複製到瀏覽器位址列,在後面輸入你檔案的名字。html,回車即可

2018-06-30 菜鳥心得之如何將vscode與github連線實現檔案推送

我遇到的問題

一:vscode裡找不到git,始終無法上傳和提交

解決方案:透過設定找到git的路徑,右邊覆蓋更改正確路徑

二:在gitbash中輸入git remote add origin git@github。com:xx。git這一行後報錯

2018-06-30 菜鳥心得之如何將vscode與github連線實現檔案推送

解決方案,輸入下圖:

2018-06-30 菜鳥心得之如何將vscode與github連線實現檔案推送

不過今天重新練習沒再出現這樣的情況,可能今天是使用的資料夾包含了我需要上傳的內容,而昨天是一個空的資料夾。目前還不清楚具體原因,繼續努力~