博客搭建過程 頂 原 薦

建站過程

選型

1. 本人積累了4年左右的技術文檔

2. 苦於無處管理

3. 原先想在開源中國上創建博客寫寫文章,並且也付之行動

4. 後來發現將這麼多文檔轉移到開源中國上得工作量實在太大了

5. N久之前想學習Node.JS

6. 在同事的推薦下,知道了Hexo這個東西

7. 而且有很多theme可以使用,有哪些好看的 Hexo 主題? - GitHub - 知乎

8. 而且所有的文檔都是用markdown去寫的

9. markdown的語法很簡單,很容易入門上手.Markdown 語法說明(簡體中文版)

10. 遂,選之.

    PS: 文本文檔轉markdown的代價也大,但是值得!

環境搭建過程

1. 首先在本地搭建Node.JS開發環境

   • 去Node.JS官網下載最新版本Node.JS,下載地址

   • 這個是免安裝版本,解壓後配置環境變量即可

       vim ~/.bash_profile
       export NODE_JS_HOME=/Users/sunhao/Documents/tools/node-v5.6.0
       export PATH=$NODE_JS_HOME:$PATH
     

   • 然後執行:source ~/.bash_profile

   • 測試是否安裝成功: node -v

       sunhaodeMacBook-Pro:~ sunhao$ node -v
       v5.6.0
       sunhaodeMacBook-Pro:~ sunhao$
     

2. npm相關

   • 很久以前的Node.JS安裝後需要單獨安裝npm的

   • 現在不需要了,可以直接使用了

   • 由於我大天朝強大的GFW,npm的源在天朝局域網訪問很不理想

   • 所以,阿里的大神們給大夥提供了一個npm registry鏡像

   • 配置阿里npm鏡像

       npm config set registry https://registry.npm.taobao.org
       npm config set disturl https://npm.taobao.org/dist
     

   • 這下npm的速度妥妥的

   • 參考文檔:

     • 淘寶 NPM 鏡像
     • npm介紹
3. hexo相關

   • 前戲都做好了,我們就進入正事吧

   • 由於hexo是經常使用的,所以需要全局安裝

       npm install hexo -g
     

   • 測試是否安裝成功

開始搭建博客

1. 選擇一個目錄
2. 進入之後執行hexo init
3. 等待步驟2下載一堆依賴後,即創建好基於Hexo的博客基本目錄結構

4. 簡單應用 - 直接在本機運行博客

		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.
	這樣在本機瀏覽器上直接訪問http://localhost:4000即可以訪問最簡單的博客
- hexo構建靜態文件,可以放入nginx中直接訪問(本人就是這種方式)

		hexo generate
	生成的文件放在`public`文件夾下

5. 自定義一些配置
   • 在_config.yml中進行配置
   • 參考官方文檔
6. 自定義主題

   • 主題請參考有哪些好看的 Hexo 主題? - GitHub - 知乎

   • 主題放在themes文件夾下

   • 選擇主題,在_config.yml中設置

        # Extensions
        ## Plugins: https://hexo.io/plugins/
        ## Themes: https://hexo.io/themes/
        theme: landscape
     

     即將theme設置爲主題文件夾名

   • 主題配置:在每個主題文件夾下的_config.yml文件中

7. 我的主題是基於yelee添加了一些修改,後面會把這個修改後的主題放到git上
   • 原生的yelee: yelee
   • 我修改後的yelee: 敬請期待

如何進行更新博客

1. 將博客整個項目文件託管到Github或者Git@OSC中
2. 利用git的push鉤子進行更新
3. 利用Node.JS在服務器的後臺啓用一個服務,去接收git鉤子的請求,從而進行更新
4. 我就是採用這個方法的,所以我買了一個域名和一個阿里雲服務器並且將域名備案了
5. 搭建過程

   • 將項目託管到git上,我選擇的是Git@OSC,畢竟是天朝局域網直接互相訪問,速度快

   • 配置git的push鉤子

   • 在服務器上將Node.JS+Npm+Hexo的環境搭建好

   • 在服務器上將git上得博客pull下來,路徑如:/opt/blog

   • 在服務器上利用Node.JS起一個服務

       var express = require('express');
       var app = express();
       var exec = require('child_process').exec;
     
       app.post('/hexo', function(req, res){
       	// 打開目錄,先執行git pull
       	// 再執行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端口啓動監聽服務
       var server = app.listen(3000, function() {
           console.log('Listening on port %d', server.address().port);
       });
     

   • 注意,要寫一個package.json文件,寫明此服務所以來的組件

       {
         "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在後臺啓動此服務

       forever -a start /opt/shell/gitlab-hexo-webhook/hexo-webhook.js
     

   • 這樣每次在本地用markdown寫好博客後push到git上,push鉤子就會執行,去請求服務器上的這個服務,這個服務就會將博客更新後,重新generate新的public

部署到nginx上

1. 在服務器上安裝nginx

2. 進行配置

    server {
    	listen       80;
    	# 您的域名
    	server_name  blog.izufang.me;
   
    	location / {
    		// 您的博客public文件夾絕對路徑
    		root   /opt/blog/public;
    		index  index.html;
    		try_files $uri $uri/ /index.html;
    		expires -1;
    	}
    }
   

3. 在您的域名提供商設置域名解析即可