博客搭建過程

時間 2020-08-05

標籤博客搭建過程简体版

原文原文鏈接

建站過程

選型

本人積累了4年左右的技術文檔html
苦於無處管理node
原先想在開源中國上建立博客寫寫文章,而且也付之行動nginx
後來發現將這麼多文檔轉移到開源中國上得工做量實在太大了git
N久以前想學習Node.JSgithub
在同事的推薦下,知道了Hexo這個東西web
並且有不少theme可使用,有哪些好看的 Hexo 主題? - GitHub - 知乎shell
並且全部的文檔都是用markdown去寫的express
markdown的語法很簡單,很容易入門上手.Markdown 語法說明(簡體中文版)npm
遂,選之.json

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

環境搭建過程

首先在本地搭建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$
```
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介紹
hexo相關
- 前戲都作好了,咱們就進入正事吧
- 因爲hexo是常常使用的,因此須要全局安裝
```
npm install hexo -g
```
- 測試是否安裝成功

開始搭建博客

選擇一個目錄
進入以後執行hexo init
等待步驟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`文件夾下

自定義一些配置
- 在_config.yml中進行配置
- 參考官方文檔
自定義主題
- 主題請參考有哪些好看的 Hexo 主題? - GitHub - 知乎
- 主題放在themes文件夾下
- 選擇主題,在_config.yml中設置
```
# Extensions
   ## Plugins: https://hexo.io/plugins/
   ## Themes: https://hexo.io/themes/
   theme: landscape
```
  即將theme設置爲主題文件夾名
- 主題配置:在每一個主題文件夾下的_config.yml文件中
個人主題是基於yelee添加了一些修改,後面會把這個修改後的主題放到git上
- 原生的yelee: yelee
- 我修改後的yelee: 敬請期待

如何進行更新博客

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

搭建過程

將項目託管到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上

在服務器上安裝nginx

進行配置

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;
 	}
 }