1. 程式人生 > >在github上搭建個人部落格並在線更新

在github上搭建個人部落格並在線更新

換部落格比更博還勤的我終於決定寫一篇部落格搭建教程了。。

FAQ

Q:\(hexo\)需要本地編譯。\(jekyll\)雖然可以直接上傳\(md\)。。但是如果在github上直接編輯也太難受了叭,畢竟不能線上預覽。。。

A:對於\(hexo\),博主目前也沒有什麼很好的辦法233。(有個叫\(Travis CI\)似乎可以做到)。所以這篇文章僅適用於\(jekyll\)主題的部落格哦。\(jekyll\)其實也有些蠻好的主題的。

Q:那我知道了,找個\(markdown\)線上編輯器編輯好,然後直接去\(github\)上傳不就行了麼??

A:你真的能忍受國內\(github\)的訪問速度??這裡講的方法可以線上更新哦。。。

Q:那我需要用到什麼呢??

A:一個\(github\)賬號(申請只需要郵箱)。一個瀏覽器。(最好有個國內程式碼託管平臺(如碼雲)的賬號)。

搭建部落格

首先來講如何在\(github\)上搭建一個部落格。網上這種文章簡直不要太多,但是還是來寫一下吧(精緻)。大佬請直接跳過

申請賬號

真的是從零開始的呢。首先去github申請\(github\)賬號。
按要求填寫就行了。。

直接continue

翻譯一下,看心情添。。。

然後去郵箱裡驗證一下就可以啦。。

登上我們的\(github\)賬號。

哇,我是有\(github\)賬號的人啦2333

建立倉庫

點選右上角的加號,選擇\(newrepository\)。

然後對倉庫資訊進行設定。注意箭頭標識的幾個地方。倉庫名必須是\(username.github.io\)的形式。必須勾選\(public\)。下面那個用readme填充最好也選上,避免麻煩。

然後就有了一個用來搭建部落格的倉庫了。

挑選主題

下面我們就可以去挑選自己中意的主題了。前面講過,此方法只適用於\(jekyll\)主題的部落格。所以下面就以\(jekyll\)主題部落格為例咯。

在這裡你可以找到很多這種主題。挑一款自己喜歡的吧。

點進去一款主題,可以點選\(Demo\)預覽。選好之後\(download\)即可。
由於站長已經咕了很多年。所以這個網站上很多主題已經不能預覽了。

修改主題

我們將下載下來的主題解壓。可以見到大概如下檔案(不一定完全相同)。

學校的xp系統是不是要暴露啦233

如果你對這些css程式碼和html有一定了解,那麼你可以展開思維任意魔改了。

如果你是個新手,那麼就跟隨我來進行簡單的修改,將部落格變為自己的吧。

開啟\(config.yml\),將裡面的資訊修改為自己的。

然後進入_posts資料夾,將裡面自帶的文章刪除(刪之前注意檢視這些文章的起名格式和裡面的書寫格式,以後寫文章會用到)。當然你想留著也可以。

對於不同的主題,這裡要改的內容不盡相同。以後慢慢修改就行了。

上傳主題

回到剛才建立的倉庫。然後點選Upload。(當然也可以使用git,這裡為了對大白們友好點。。)

直接將我們的檔案拖進去。(不要在外面套資料夾!!)傳完之後,點選下方的\(commit\ changes\)

檢視主題

然後就可以訪問\(username.github.io\)(username是你在github上的使用者名稱)檢視自己的部落格啦。

展示一下我的lj部落格(表示換了幾次之後更喜歡簡潔點的)。。

更新部落格

終於到了重頭戲啦。。。下面將如何在瀏覽器上直接更新部落格。並不需要去\(github\)上傳檔案。

markdown編輯器

首先安利一個makrdown編輯器。

小書匠markdown編輯器

介紹一下他的功能。
1.編寫markdown並在線預覽(以及大多數編輯器能幹的)
2.將圖片和文章儲存在自己繫結的開源倉庫中。

繫結倉庫

該編輯器與其他的不同點在於他可以繫結倉庫。那麼我們如果和剛才自己的部落格倉庫繫結起來,然後在小書匠上面編輯不就可以線上更新了麼。。

首先我們點選左上角的小書匠按鈕

選擇繫結

資料儲存選擇\(github\)。

然後他告訴我們需要一個taken

按照他給的連結去申請,需要的許可權在剛才小書匠的的申請頁面有寫,按要求勾選即可(寬心的我一般都是全選啦)。

然後我們複製出來這個taken。(注意這個申請之後只能檢視一次,建議找個地方儲存好。)填寫到小書匠裡面對應的taken框裡。然後那個倉庫名稱就填你的倉庫名稱(\(username.github.io\))

然後一路確定。

點選中間回到編輯頁面。你會看到左下角多了一欄。

這就是你倉庫的檔案目錄了。

然後我們只要將文章儲存到\(\_posts\)資料夾中就達到了更新部落格的目的了。

更新

然後點選左上角新建。儲存。

目錄一定要選擇\(\_posts\),名字按照原來自帶文章的格式填寫。

然後寫就完了。

快去看看你的部落格有沒有更新吧

擴充套件

這個編輯器還資瓷繫結圖片的儲存庫,你是不是也曾想過直接將圖片複製進編輯器。可惜被貧窮限制了想象力。現在你可以用自己的倉庫來存圖了。
建議使用國內程式碼託管平臺儲存圖片,以加快訪問速度。繫結方法與繫結文章倉庫類似。自己去探究吧。。