使用GitHub-Pages創建博客和圖片上傳問題解決

---

title: 使用GitHub Pages創建博客和圖片上傳問題解決
date: 2017-10-22 20:44:11
tags: IT 技術

toc: true

搭建博客

博客的搭建過程完全參照小茗同學的博客園中的使用hexo+github搭建免費個人博客詳細教程里邊的詳細介紹。請逐步跟文檔進行操作。我只對一些要點做總結。
<!–more–>

要點1 SSH Key的配置

在電腦上使用git時，若SSH Key沒有配置，在執行hexo d命令會提示Permision Denied,因此這一步要注意，請按照配置ssh-key中的說明。

要點2 Deploy設置

在_config.yum配置時，這一點其實是最容易出現錯誤，正確的配置應該是

deploy:
type: git
repository: [e-mail]:yourid/liuxianan.github.io.git
branch: master

一般大多數的介紹都是
deploy:
type: github
repository: https://github.com/yourid/liuxianan.github.io.git
branch: master
更詳細的內容，請參考上傳到github

寫博客

工具

工欲善其事必先利其器，好的工具能夠大幅提升效率，這里要安利一下MWEB，官網在這里，各種好用，誰用誰知道。我們用他的External模式，我的設置方法是：View -> Open External，看圖，最后那個選項就是。


External模式打開后，我們用左下角的“+”把hexo博客目錄下的source文件夾選進去就可以了。
)


圖片問題

剛開始時被在博客里邊貼圖片的問題難到了，甚至有一刻有放棄的念頭，后來在網上查到了MWeb同樣可以解決這個問題，方法也很簡單，承襲上一步，我們在選擇source文件夾時，會彈出讓你設置文件夾屬性的對話框，進行如下設置即可

Media Folder Name: images
Media Save Path: Absolute

這樣一來，就可以直接在MWeb中直接粘貼截圖了，圖片會被自動保存到images文件夾，而后，在運行hexo g的時候，圖片文件夾也會被生成和上傳到GitHub。


讓Hexo支持流程圖

讓Hexo支持Markdown的流程圖是一個很酷的想法，所幸不是只有我想到這個問題，人家早已解決，所以我們只需要利用前人的輪子即可。

安裝hexo插件

命令為npm install --save hexo-filter-flowchart，插件地址，

配置：

在hexo的_config.yml文件中配置

flowchart:
  # raphael:   # optional, the source url of raphael.js
  # flowchart: # optional, the source url of flowchart.js
  options: # options used for `drawSVG`

示例

代碼如下（注意，在MWeb中要把這段設置成代碼塊才能生成流程圖）

flow
st=>start: Start|past:>http://www.google.com[blank]
e=>end: End:>http://www.google.com
op1=>operation: My Operation|past
op2=>operation: Stuff|current
sub1=>subroutine: My Subroutine|invalid
cond=>condition: Yes
or No?|approved:>http://www.google.com
c2=>condition: Good idea|rejected
io=>inputoutput: catch something…|request

st->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e

st=>start: Start|past:>http://www.google.com[blank]
e=>end: End:>http://www.google.com
op1=>operation: My Operation|past
op2=>operation: Stuff|current
sub1=>subroutine: My Subroutine|invalid
cond=>condition: Yes
or No?|approved:>http://www.google.com
c2=>condition: Good idea|rejected
io=>inputoutput: catch something...|request

st->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e