建站過(guò)程
選型
- 本人積累了4年左右的技術(shù)文檔
- 苦于無(wú)處管理
- 原先想在開源中國(guó)上創(chuàng)建博客寫寫文章,并且也付之行動(dòng)
- 后來(lái)發(fā)現(xiàn)將這么多文檔轉(zhuǎn)移到開源中國(guó)上得工作量實(shí)在太大了
- N久之前想學(xué)習(xí)Node.JS
- 在同事的推薦下,知道了Hexo這個(gè)東西
- 而且有很多theme可以使用,有哪些好看的 Hexo 主題? - GitHub - 知乎
- 而且所有的文檔都是用markdown去寫的
- markdown的語(yǔ)法很簡(jiǎn)單,很容易入門上手.Markdown 語(yǔ)法說(shuō)明(簡(jiǎn)體中文版)
- 遂,選之.
PS: 文本文檔轉(zhuǎn)markdown的代價(jià)也大,但是值得!
環(huán)境搭建過(guò)程
- 首先在本地搭建Node.JS開發(fā)環(huán)境
- 去Node.JS官網(wǎng)下載最新版本Node.JS,下載地址
- 這個(gè)是免安裝版本,解壓后配置環(huán)境變量即可
vim ~/.bash_profile
export NODE_JS_HOME=/Users/sunhao/Documents/tools/node-v5.6.0
export PATH=$NODE_JS_HOME:$PATH - 然后執(zhí)行:
source ~/.bash_profile - 測(cè)試是否安裝成功:
node -v
sunhaodeMacBook-Pro:~ sunhao$ node -v
v5.6.0
sunhaodeMacBook-Pro:~ sunhao$
- npm相關(guān)
- 很久以前的Node.JS安裝后需要單獨(dú)安裝npm的
- 現(xiàn)在不需要了,可以直接使用了
- 由于我大天朝強(qiáng)大的GFW,npm的源在天朝局域網(wǎng)訪問(wèn)很不理想
- 所以,阿里的大神們給大伙提供了一個(gè)npm registry鏡像
- 配置阿里npm鏡像
npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist - 這下npm的速度妥妥的
- 參考文檔:
- hexo相關(guān)
- 前戲都做好了,我們就進(jìn)入正事吧
- 由于hexo是經(jīng)常使用的,所以需要全局安裝
npm install hexo -g -
測(cè)試是否安裝成功
測(cè)試是否安裝成功.png
開始搭建博客
- 選擇一個(gè)目錄
- 進(jìn)入之后執(zhí)行
hexo init -
等待步驟2下載一堆依賴后,即創(chuàng)建好基于Hexo的博客基本目錄結(jié)構(gòu)
基本目錄結(jié)構(gòu).png - 簡(jiǎn)單應(yīng)用
- 直接在本機(jī)運(yùn)行博客
sunhaodeMacBook-Pro:test sunhao$ hexo serve
INFO Start processing
INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.
這樣在本機(jī)瀏覽器上直接訪問(wèn)http://localhost:4000即可以訪問(wèn)最簡(jiǎn)單的博客 - hexo構(gòu)建靜態(tài)文件,可以放入nginx中直接訪問(wèn)(本人就是這種方式)
hexo generate
生成的文件放在public文件夾下
- 直接在本機(jī)運(yùn)行博客
- 自定義一些配置
- 在
_config.yml中進(jìn)行配置 - 參考官方文檔
- 在
- 自定義主題
- 主題請(qǐng)參考有哪些好看的 Hexo 主題? - GitHub - 知乎
- 主題放在
themes文件夾下 - 選擇主題,在
_config.yml中設(shè)置
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape
即將theme設(shè)置為主題文件夾名 - 主題配置:在每個(gè)主題文件夾下的
_config.yml文件中
- 我的主題是基于
yelee添加了一些修改,后面會(huì)把這個(gè)修改后的主題放到git上- 原生的
yelee: yelee - 我修改后的
yelee:敬請(qǐng)期待
- 原生的
如何進(jìn)行更新博客
- 將博客整個(gè)項(xiàng)目文件托管到Github或者Git@OSC中
- 利用git的push鉤子進(jìn)行更新
- 利用Node.JS在服務(wù)器的后臺(tái)啟用一個(gè)服務(wù),去接收git鉤子的請(qǐng)求,從而進(jìn)行更新
- 我就是采用這個(gè)方法的,所以我買了一個(gè)域名和一個(gè)阿里云服務(wù)器并且將域名備案了
- 搭建過(guò)程
-
將項(xiàng)目托管到git上,我選擇的是Git@OSC,畢竟是天朝局域網(wǎng)直接互相訪問(wèn),速度快
Git@OSC.png -
配置git的push鉤子
鉤子.png 在服務(wù)器上將Node.JS+Npm+Hexo的環(huán)境搭建好
在服務(wù)器上將git上得博客pull下來(lái),路徑如:
/opt/blog-
在服務(wù)器上利用Node.JS起一個(gè)服務(wù)
var express = require('express');
var app = express();
var exec = require('child_process').exec;app.post('/hexo', function(req, res){ // 打開目錄,先執(zhí)行g(shù)it pull // 再執(zhí)行hexo clean // 再重新生成public文件 exec('cd /opt/blog/ && git pull && hexo clean && hexo generate', function (error, stdout, stderr) { console.log('stdout: ' + stdout); console.log('stderr: ' + stderr); if (error !== null) { console.log('exec error: ' + error); } }); res.send('ok'); }); // 在3000端口啟動(dòng)監(jiān)聽服務(wù) var server = app.listen(3000, function() { console.log('Listening on port %d', server.address().port); }); 注意,要寫一個(gè)
package.json文件,寫明此服務(wù)所以來(lái)的組件
{
"name": "gitlab-hexo-webhook",
"version": "1.0.0",
"description": "gitlab鉤子",
"main": "hexo-webhook.js",
"dependencies": {
"debug": "^2.0.0",
"express": "^3.0.6"
},
"devDependencies": {},
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"author": "sunhao",
"license": "ISC"
}利用Node.JS的
forever在后臺(tái)啟動(dòng)此服務(wù)
forever -a start /opt/shell/gitlab-hexo-webhook/hexo-webhook.js這樣每次在本地用markdown寫好博客后push到git上,push鉤子就會(huì)執(zhí)行,去請(qǐng)求服務(wù)器上的這個(gè)服務(wù),這個(gè)服務(wù)就會(huì)將博客更新后,重新generate新的
public
-
部署到nginx上
在服務(wù)器上安裝nginx
-
進(jìn)行配置
server {
listen 80;
# 您的域名
server_name blog.izufang.me;location / { // 您的博客public文件夾絕對(duì)路徑 root /opt/blog/public; index index.html; try_files $uri $uri/ /index.html; expires -1; } } 在您的域名提供商設(shè)置域名解析即可
