道阻且長，行則将至。埋頭苦幹，不鳴則已，一鳴驚人！加油，騷年！！！
1 前言&基本介紹
之前直接在網頁上用 Markdown 寫部落格，可以直接複制粘貼。但是現在發現了 Typora 這麼好一個 Markdown 編輯器後，就想在本地寫部落格了，然後上傳到 GitHub 上備份。
但是在本地寫部落格，總不能不插入圖檔吧？但是插入圖檔，上傳到GitHub時，圖檔不顯示怎麼辦？這個問題困擾了我好幾天，今天終于搞定了，一定要寫篇部落格記錄一下！
1.1 整體方案
整體上使用的是：GitHub + Typora + PicGo 來實作。
1.2 參考網址
在實作我想要的功能的時候，參考了幾個很有用的部落格，但他們的文章跟我自己想要的方案并不完全一樣，是以我自己就參考他們的文章，總結出自己的經驗。
1、相當于啟蒙的文章：一款markdown編輯器typora和圖床的搭建過程
2、這個使用的是 Gitee：windows本地markdown環境配置：使用typora，并實作圖檔自動插入并上傳圖床
3、這個是第二篇文章中的連結，排坑用的：手把手教你用Typora自動上傳到picgo圖床【教程與排坑】
1.3 軟體下載下傳位址
- Typora 官網：Typora
- 上不去官網的，可以直接使用國内的軟體管家，然後在軟體内更新到最新版本即可。例如我用的騰訊電腦管家 -> 軟體管家：
利用 GitHub + PicGo + Typora 搭建屬于自己的圖床 - PicGo 藍奏雲下載下傳位址：PicGo-Setup-2.2.2.exe
- PicGo 在 GitHub 上的位址：GitHub - PicGo
- node.js 插件下載下傳位址：node.js下載下傳
- 沒有 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
到這一步，可以打開軟體，直接拖動到首頁上傳區，測試是否上傳成功；或者直接利用截圖，然後點選右下角的剪貼闆圖檔上傳，即可快速實作上傳。
經過實際驗證，有一些了解：
- 在上傳時，如果進度條到一半出現紅色，代表上傳失敗；
- 在上傳時，如果進度條一直是藍色，應該就是上傳成功了；
- 在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 即可正常顯示圖檔，很贊，已收藏文章。
4.2 兩個裝置都要配置同樣的環境，token 可以一樣嗎？
5 總結
- 整個配置過程，還是比較坎坷的， 最開始是在家裡筆記本上配置，但是家裡的網通路 GitHub ，很慢，就導緻老是逾時，不過後來嘗試使用手機熱點後，還ok。
- 一步一個腳印，Go！Go！Go！