開發背景:年後回來公司業務不忙,閒暇時間瞭解一下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/