使用Hexo框架搭建博客,並部署到github上

開發背景:年後回來公司業務不忙,閒暇時間瞭解一下node的使用場景,一篇文章吸引了我15個Nodejs應用場景,然後就被這個hexo框架吸引了,說時遲,那時快,趕緊動手搭建起來,網上找了好多資料一天時間才搭建完成,我的博客地址:博客,記錄一下過程,以便以後學習。


開始搭建

學習新框架的一般步驟:

  • 中文文檔擼一遍,跟着做(Hexo中文文檔),一般都會有各種問題出現,當然直接成功的也有,很不幸,我就是出現問題的那一類,沒關係,出現問題,解決問題的過程,才能學到更多東西;
  • 上網找一些hexo使用的教程,繼續弄;
  • 這個時候要是再有問題就是很難解決的有針對性的問題了,繼續上網找相關的解決辦法;
  • 網上資源真的很多,很好用,只要想學沒有找不到的東西,哈哈哈...

一、安裝

前提:
既然是node框架,肯定前提是你已經安裝過Node.js(下載地址),另外還需要你安裝Git(下載地址);
如果你已經成功安裝了上述程序後,接下來就是hexo的安裝:

$ npm install -g hexo-cli

安裝完成以後,需要初始化一下項目,執行下列命令:

$ hexo init
$ npm install

完成以後,項目大概目錄就是這樣的:

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

_config.yml
網站的配置信息,可以在此配置大部分的參數。後面發佈到github上面時,有用到這個文件;

package.json
應用程序的信息。


文件的其他部分的詳細解釋請看文檔,此處只是記錄一下搭建以及發佈的過程,具體寫文章的步驟,先不進行過多說明;


接下來可以在本地啓服務來查看一下項目的初始狀態:

$ npm install hexo-server --save
$ hexo server

效果大概就是下面的樣子:
首頁
我稍微修改了一下文字配置,可能你的會跟我的有點不一樣,項目能啓動就是成功了;


二、發佈到github並設置成個人博客

1、github上新建一個倉庫


登錄自己的github後,在界面右上角用戶信息點擊左邊的加號,新建一個repository:
圖片描述

然後給新建的倉庫起個名字,注意:這個名字必須跟用戶名一致,github纔會默認設置成用戶的博客:
圖片描述

項目建好以後,就是一些信息的設置:
圖片描述
圖片描述
設置頁面裏面有分支選項,如果有master分支,會默認成博客的首選代碼;


2、將本地搭建好的hexo發佈到github上:
將本地代碼上傳到github上的方法有很多:
可以用Github Desktop,簡單直觀,但是需要把之前我們搭建好的項目生成的文件放到GitHub Desktop指定的位置,再上傳,感覺不那麼智能,還有點麻煩,所以我選擇planB,耶!我可真是個小機靈鬼...


下面是在項目中生成靜態文件的命令:

$ hexo generate

簡寫,結果是一樣的

$ hexo g

執行完以上代碼,會在項目的根目錄下生成public文件夾,選擇planA的童鞋就可以將裏面的所有文件用GitHub Desktop上傳到github上了;


而另外一種,就是在當前項目直接遠程連接自己的github上傳文件,這會涉及到SSH(關於SSH是什麼,網上有很多詳細說明,可以自己查找學習)

安裝插件:

npm install hexo-deployer-git --save

修改網站配置文件_config.yml,添加deploy信息:

deploy:
  type: git 
  repo: [email protected]:wjlilh/wjlilh.github.io.git 
  branch: master 

上面的repo的配置信息,替換成自己的項目名字


生成SSH key:

按照網上的教程生成ssh key的時候是直接ssh-add,但是失敗了,調查問題,發現原因是因爲,我是第一次使用ssh-agent代理,第一次需要首先執行以下命令,以後就不需要了(具體原來請參考此處鏈接):

$ ssh-agent bash

以上命令回車,啓動進程,後再輸入命令:

$ ssh-add ~/.ssh/id_rsa

圖片描述

按照提示操作輸入密碼,

這樣就在c盤對應位置生成了ssh-key;

配置github賬戶的ssh-key
打開id_rsa.pub文件將一整串公鑰拷貝下來

進入你的github賬戶設置,在ssh and GPG keys中新增一個ssh key,如下
圖片描述

圖片描述

title隨意,key填id_rsa.pub文件中內容,保存即可;


驗證是否連接成功:

$ ssh -T [email protected]

出現下面的語句說明你的ssh key已經配置好了

Hi wispyoureyes! You've successfully authenticated, but GitHub does not provide shell access.

ok,到了這一步,本地跟遠程github的連接已經建立,在項目中,直接生成靜態文件,上傳就可以了:

$ hexo clean  //清除緩存文件db.json和已生成的靜態文件public
$ hexo g   //生成網站靜態文件到默認設置的public文件夾
$ hexo d   //部署網站到設定的倉庫

這樣就完成了個人博客的github部署,直接打開過程中設置的地址就可以查看了,我的是:https://wjlilh.github.io/

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章