利用 GitHub + PicGo + Typora 搭建屬於本身的圖牀

道阻且長，行則將至。埋頭苦幹，不鳴則已，一舉成名！加油，騷年！！！

1 前言&基本介紹

  以前直接在網頁上用 Markdown 寫博客，能夠直接複製粘貼。可是如今發現了 Typora 這麼好一個 Markdown 編輯器後，就想在本地寫博客了，而後上傳到 GitHub 上備份。

  可是在本地寫博客，總不能不插入圖片吧？可是插入圖片，上傳到GitHub時，圖片不顯示怎麼辦？這個問題困擾了我好幾天，今天終於搞定了，必定要寫篇博客記錄一下！

1.1 總體方案

  總體上使用的是：GitHub + Typora + PicGo 來實現。

1.2 參考網址

  在實現我想要的功能的時候，參考了幾個頗有用的博客，但他們的文章跟我本身想要的方案並不徹底同樣，因此我本身就參考他們的文章，總結出本身的經驗。

  一、至關於啓蒙的文章：一款markdown編輯器typora和圖牀的搭建過程

  二、這個使用的是 Gitee：windows本地markdown環境配置：使用typora，並實現圖片自動插入並上傳圖牀

  三、這個是第二篇文章中的連接，排坑用的：手把手教你用Typora自動上傳到picgo圖牀【教程與排坑】

1.3 軟件下載地址

1. Typora 官網：Typora

2. 上不去官網的，能夠直接使用國內的軟件管家，而後在軟件內升級到最新版本便可。例如我用的騰訊電腦管家 -> 軟件管家：

3. PicGo 藍奏雲下載地址：PicGo-Setup-2.2.2.exe

4. PicGo 在 GitHub 上的地址：GitHub - PicGo

5. node.js 插件下載地址：node.js下載

6. 沒有 GitHub 帳號的，本身須要先註冊一個帳號~

  作好上邊的準備工做，下邊開始配置步驟~

2 GitHub

2.1 建立圖片庫

  在本身的 GitHub 上建立一個庫，當作圖牀，專門用來存儲圖片。具體操做流程與建倉庫的流程同樣。

  因爲 GitHub 不容許存在空的倉庫，也不容許存在空的文件夾，所以能夠勾選默認建立一個 ReadMe 文件

2.2 獲取令牌

  GitHub 的令牌，其實就是 token，自我感受就像本身的 GitHub 對外的一個公鑰同樣，可讓擁有此 token 的軟件訪問 GitHub 的 API 接口。

  生成過程，參考經驗便可，大體步驟以下：

• 點擊本身的 GitHub 頭像
• Settings
• Developer settings
• Personal access tokens
• Generate new token

  以下圖，注意下邊的選項所有勾選。（具體不清楚，大概是賦予使用此 token 的軟件一些權限）

  此時能夠保存備用，也能夠在下邊用到的時候，再按照上述步驟生成 token 。注意 token 是私密的，須要作好安全保護！

3 本地配置步驟

3.1 安裝配置PicGo

  win10 電腦，直接安裝下載下來的 EXE 文件便可，整個安裝步驟一路 next 。

  安裝後的軟件界面以下：

• 接下來配置 GitHub 做爲圖牀，在左側找到圖牀設置，找到GitHub圖牀。

• 前邊有星號的爲必填項，依次填入以前建立的倉庫名，注意是：帳戶名/倉庫名；

• 而後填入設定的分支名（建立倉庫時若是沒有建立其餘分支，默認就是 master 分支）；

• 最後填入以前生成的 token 令牌，點擊肯定。

• 而後找到 PicGo 設置，打開裏邊的 時間戳重命名，這樣能夠避免圖牀在上傳文件時，因爲文件名相同形成的錯誤。

• 而後剩下的配置項能夠不用管，參考的文章不建議設置爲開機自啓，由於等會配置好 typora 後，typora 在上傳圖片時會自動打開 PicGo 軟件。

3.2 安裝配置node.js

  這個我具體不知道是什麼東西，不過我對於不知道的東西，仍是踩着前人的腳印前進吧，後續有時間在深刻了解。

  整個安裝過程也很簡單，一路 next ，所有使用默認配置便可。

3.3 測試PicGo

  到這一步，能夠打開軟件，直接拖動到首頁上傳區，測試是否上傳成功；或者直接利用截圖，而後點擊右下角的剪貼板圖片上傳，便可快速實現上傳。

  通過實際驗證，有一些理解：

1. 在上傳時，若是進度條到一半出現紅色，表明上傳失敗；
2. 在上傳時，若是進度條一直是藍色，應該就是上傳成功了；
3. 在PicGo設置此選項下，能夠找到對應的日誌文件，查看相關錯誤信息，進而輔助咱們排查問題。

3.3 安裝配置Typora

  Typora 的安裝教程，應該也能夠一路 next。。。我本身當時直接用的軟件安裝管家，而後後續在軟件內更新到最新版便可。

  安裝事後，能夠進行一個簡單的配置，點擊文件，而後選擇偏好設置。

3.3.1 通用

  在此頁面，勾選自動保存，對寫文件有很大的幫助。

3.3.2 外觀

  我本身的設置以下：

3.3.3 編輯器

  我本身的配置參考下圖：

3.3.4 圖像

  這個是咱們此次的重點，依次按照圖示配置

  在配置完成的時候，能夠點擊驗證圖片上傳選項，進行測試，查看配置的 PicGo 插件是否有用。此時會出現以下界面，因爲使用的是 GitHub ，所以很容易受到網速影響

  此時上傳成功後，是以下界面：

  上述過程，很容易出現錯誤，具體能夠參考文章開頭借鑑的博客。文件名已存在這個錯誤，若是以前勾選打開時間戳選項，此處應該不會有這個錯誤。

本次測試，我剛開始使用的家裏的 WiFi 進行上傳測試，可是報錯。因而我使用本身的手機熱點測試上傳，不久就看到 ok 啦，本篇博客的圖片也是使用手機熱點上傳的，我也不清楚爲啥 WiFi 會失敗。

  還有一個錯誤：Failed to fetch，這個錯誤參考文章經驗，通常是因爲端口設置錯誤形成的，此時須要打開 PicGo 設置，點擊 設置 Server，此時監聽的端口號須要與 Typora 中的端口號保持一致，通常默認就是 36677，只是須要去查看是否被篡改等等。

3.3.5 Markdown

  特別注意：此選項下的全部配置，在修改後，都須要重啓 Typora 才能生效。

  我本身的配置以下，僅作參考

  至此，Typora 軟件全部的配置已經完成，有沒有發現，在不知不覺間，已經實現了咱們最開始的方案，使用 Typora 寫做，而後利用 GitHub + PicGo 製做本身的圖牀，這樣後續文章在移動的時候，就不怕圖片丟失了！

4 排坑記錄

  在這裏總結一下本身在使用過程當中，遇到的一些坑，記錄一下。

4.1 GitHub 成功上傳圖片，可是不能正常顯示

  此處好像是因爲 hosts 文件解析的問題，我在使用過程當中，參考的這個網址：解決github圖片不顯示問題，配置後，GitHub 便可正常顯示圖片，很贊，已收藏文章。

  特別提醒：在修改 hosts 文件以前，必定要記得先備份！備份！備份！！！避免一些未知的緣由，到時候想恢復回去都很難。

4.2 兩個設備都要配置一樣的環境，token 能夠同樣嗎？

  其實我本身在配置的時候，也是很蒙逼的，因爲以前配置了一臺電腦，生成了一個 token，而後第二臺電腦想再次使用以前的 token 時，發現我找不到在哪了，由此推斷：GitHub 給的 token ，應該是一臺設備一個，而後我又從新生成了一個 token 給第二臺電腦用。

5 總結

1. 整個配置過程，仍是比較坎坷的， 最開始是在家裏筆記本上配置，可是家裏的網訪問 GitHub ，很慢，就致使總是超時，不事後來嘗試使用手機熱點後，還ok。
2. 一步一個腳印，Go！Go！Go！