博客搭建过程

建站过程

选型

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

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. 在您的域名提供商设置域名解析即可