使用Coding.net來搭建基於Hexo的免費博客(一)

使用Coding.net來搭建基於Hexo的免費博客(一)

Hexo是什麼

Hexo is a fast, simple and powerful blog framework. You write posts inMarkdown(or other languages) and Hexo generates static files with a beautiful theme in seconds.

Hexo 是一款 快速,簡單而強大的博客框架。你可以使用Markdown(或其他語言)撰寫文章,同時,您還可以使用其豐富的主題裝點Hexo。

摘抄自 Hexo 官網

什麼是Coding.net

   Coding可以說,就是國產的Github,但是,有一個功能使它似乎超越了GitHub,那就是 Web IDE。

Coding WebIDE 是 Coding 自主研發的在線集成開發環境 (IDE)。用戶可以通過 WebIDE 創建項目的工作空間, 進行在線開發, 調試等操作。同時 WebIDE 集成了 Git 代碼版本控制, 用戶可以選擇 Coding、GitHub、BitBucket、Git@OSC 等任意的代碼倉庫。 WebIDE 還提供了分享開發環境的功能, 用戶可以保存當前的開發環境, 分享給團隊的其他成員。

摘抄自 Coding WebIDE 官網

   那麼,很多人就會問,爲什麼Hexo需要在這個平臺上搭建捏?答案很簡單,因爲Coding WebIDE爲用戶在在線開發過程中,提供套完整的Ubtuntu系統環境,用戶可以使用它來進行雲端開發。

   Hexo不像其他傳統的博客引擎(如WordPress),Hexo生成的是靜態頁,當您完成寫作後,你可以把其生成的頁面Push到代碼託管平臺上,並開啓靜態演示,您的粉絲就可以訪問並查看到您撰寫的文章。但是,Hexo也有一個非常重要的缺點——必須在同一臺主機上生成靜態頁,這就會導致如果您在外地,將無法快速發佈文章,所依使用Coding.net的在線開發環境就可以解決這一問題了。

一、準備工作

首先,去Coding.net官網註冊一個賬號,接着,點擊“+ 創建項目”,創建一個新項目。

要求:

項目名稱和簡介隨意

項目類型選擇“私有”

勾選“使用README.md初始化項目”


創建項目完成

接着,我們傳送到Coding WebIDE,單擊“+ 新建工作空間”。




新建工作空間

隨後,單擊“同步倉庫”,等待同步倉庫完成。




“同步倉庫”按鈕

接着,點開我們剛剛創建的項目。

哦,對了,webIDE是部分收費的,但是不用着急,官方提供瞭如下方式免費獲得其網站虛擬幣——碼幣,且Coding在註冊後會送給用戶一些碼幣,足以讓IDE跑起來啦!




獲得免費碼幣的方法,來源於Coding.net馬幣介紹頁

好了,言歸正傳,我們創建IDE。配置不變,直接鼠標拉到最底下,單擊“創建”,這時候,空間創建完畢,點開創建完成的工作空間。

WOW~~超酷誒!全屏正有種帶GUI的Linux的既視感~~



Coding webIDE




看看這高大上的終端!!!!!


Hexo是基於Nodejs的,所以我們將運行環境切換爲Nodejs。




單擊切換運行環境




如圖

單擊“使用”後,再單擊確定。然而,貌似並沒有發生什麼……

下面,我們單擊“終端”來打開終端【酷斃了】


二、正式開始

(⊙o⊙)…我是不是上面寫的太詳細了??我真是大好人(zi lian kuang)

進入正式安裝步驟,首先,我們在終端中輸入

sudo npm install -g hexo-cli

安裝進程,就會全自動完成【這是重要的一步,有問題可以向我發評論。】




自動安裝進程

如果安裝結果如下圖,安裝就成功了




安裝結果

接着,我們創建一個文件夾用於存放文章與設置。

mkdir hexo

然後,使用init命令初始化博客。

cd hexo

sudo hexo init

初始化進程需要安裝一些輔助插件,所以比安裝的時候慢,需要耐心等待…

等待初始化進程完成後,安裝進程就正式完成啦~~~~

我們首先先解鎖一下配置文件(將所有文件提權至777)

sudo chmod -R 777 *

接着,我們可以暫時關閉終端,編輯一下博客的設置,依次打開文件樹中的目錄 項目名->hexo->_config.yml

這時,我們就可以在編輯窗口中編輯屬性。

title爲標題,subtitle小標題【可不填】,author作者,language語言【可不填】,titmezone時區【可不填】。

我已經修改完成了:




我的修改

修改完成之後保存。

接着我們可以使用以下命令來開啓本地服務器:

hexo server

然後,我們就可以通過單擊右上角的訪問鏈接,將端口設置爲4000來訪問網站。

是不是非常的酷?




本地博客測試成功!

測試成功了,那麼我們先在終端中按Ctrl+C退出,然後按下訪問鏈接中的垃圾桶來銷燬端口。

那麼大家剛纔也看到了,IDE中的訪問鏈接是測試用途,長且有時間限制,一看就非常不嚴謹,所以,我們要學會把博客Push到託管平臺中。

那麼,首先,我們先要安裝Hexo Git插件以至於可以將靜態頁推送到託管平臺上。

sudo npm install hexo-deployer-git –save

安裝完成之後,我們配置一下_config.yml文件。

修改一下最下面的deploy:

deploy:

 type:

改爲

deploy:

 type:git

 repo: [倉庫地址]

 branch: master

 message: blog update

倉庫地址可以在您的項目主頁找到。




項目主頁




倉庫地址在您項目的“代碼”頁面中。




所以,我的項目就這樣填寫


隨後,我們就可以將博客推送到代碼託管平臺了,最終端中使用這個命令:

sudo hexo deploy

和往常的推送操作一樣,終端會要求用戶輸入用戶名與密碼。

這時,我們前往項目託管代碼頁,就可以看到推送過來的文件了。




推送成功!!

下面,我們開啓靜態頁服務(Pages)。

只需要單擊頁面上的“Pages服務”,設置部署分支爲master,然後單擊“立即開啓”,就可以訪問啦!




訪問成功

等等,爲什麼樣式加載不出來了??很簡單,這是因爲Html處理請求的時候認爲,您的域名爲根,所以無法訪問,最好的解決辦法,就是綁定一個自己的域名,這裏我就不講了,相信大家都會,如果有需要,我會在下一篇文章介紹如何註冊並綁定自己的域名。

三、添加、刪除、編輯文章

1、添加文章

打開終端,以如下格式敲入命令:

sudo hexo new <文章名稱>

這樣,我們就創建了一篇文章。

可以在目錄source->_posts中找到,並編輯【警告:文章名稱爲文章的英文名,不知此中文,中文名可以在Markdown文件中設置】。

這裏,我創建了一篇名稱爲heisky的文章:





在編輯這篇文章之前,我們需要對文件進行提權:

cd source/_posts

sudo chmod -R 777 *

隨後,我們可以先設置標題、發佈日期以及標籤。

接着,使用Markdown語法在編輯內容:





完成之後,我們需要更新博客,再次推送到代碼託管平臺:

sudo  hexo generate –deploy

再次訪問就可以看到新的文章啦~

2、刪除文章




刪除文章

刪除之後使用更新博客命令,就可以看到效果。

3、更新文章


只需要修改文章內容,然後使用如下命令更新即可:

sudo  hexo generate –deploy


未完待續》》》


更加詳細的教程
http://blog.csdn.net/MasterAnt_D/article/details/54598391
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章