使用jekyll与阿里云服务器自动搭建自己的博客网站

本文旨在教小伙伴用Jekyll和阿里云centos7服务器以及github自动搭建自己的服务器,也为了记录下自己的搭建过程。中间有自己踩的一些坑,参照了大神的搭建步骤,如有不足欢迎指正
服务器安装步骤

安装Node环境,执行以下命令:

wget https://nodejs.org/dist/v8.12.0/node-v8.12.0-linux-x64.tar.xz
xz -d node-v8.12.0-linux-x64.tar.xz
tar -xf node-v8.12.0-linux-x64.tar 
ln -s ~/node-v8.12.0-linux-x64/bin/node /usr/bin/node
ln -s ~/node-v8.12.0-linux-x64/bin/npm /usr/bin/npm
node -v 
npm

安装ruby

Jekyll依赖于Ruby环境,需要安装Ruby,执行以下命令即可:

wget https://cache.ruby-lang.org/pub/ruby/2.4/ruby-2.4.4.tar.gz
 mkdir  -p /usr/local/ruby
 tar -zxvf ruby-2.4.4.tar.gz 
 cd ruby-2.4.4
 ./configure --prefix=/usr/local/ruby
 make && make install

环境变量设置:

cd ~ vim .bash_profile
在.bash_profile 文件设置以下内容:

PATH=/usr/local/ruby/bin:$PATH:$HOME/bin
export PATH

安装gcc

安装gcc执行以下命令:

yum -y update gcc
yum -y install gcc+ gcc-c++

安装jekyll

最后安装Jekyll,执行以下命令

gem install jekyll
jekyll --version
gem update --system

安装中如果报

ERROR:  Loading command: install (LoadError)
	cannot load such file -- zlib
ERROR:  While executing gem ... (NoMethodError)
    undefined method `invoke_with_build_args' for nil:NilClass

错误,则

进入ruby源码文件夹 (若按上面步骤,则cd ~ ll就会看到)
安装ruby自身提供的zlib包 
#cd ext/zlib
#ruby extconf.rb --with-zlib-dir=/usr/local/zlib
这时若出错,No rule to make target `/include/ruby.h', needed by `zlib.o'.  Stop.
其实是ext/openssl/Makefile中忘了给路径变量top_srcdir赋值,调用的时候当然就报错了,修改 Makefile 增加 top_srcdir = ../.. 
#make
#make install

问题解决
若不能解决,请参考报错请看这里
继续gem install jekyll
如果报错

Unable to require openssl, install OpenSSL and rebuild ruby (preferred) or use non-HTTPS sources

1. yum install openssl-devel -y
2. 在ruby安装包/root/ruby-2.4.4/ext/openssl,执行ruby ./extconf.rb
3.执行make,若出现make: *** No rule to make target `/include/ruby.h', needed by `ossl.o'.  Stop.;在Makefile顶部中的增加top_srcdir = ../..     添加完后保存重新执行make
4.执行make install

问题解决
gem update --system
继续gem install jekyll
安装Jekyll成功

部署我的博客

安装git

yum install git

然后在linux下请fork本人或者直接fork jekyll源代码到自己的github
本人地址: 逍遥风github地址

git  clone 复制的地址

解压缩后进入加压缩文件夹内
然后bundle update,然后bundle exec jekyll serve(报依赖错误就多重复bundle update(直到update更新成功为止))
此时jekyll就可以启动成功了,此时可以通过curl命令查看服务器里部署的博客 例如clrl www.xiaoyaowind.com

部署博客到Nginx服务器

新建文件/etc/yum.repos.d/nginx.repo
编辑以下内容并保存

[nginx]
name=nginx repo
baseurl=http://nginx.org/packages/centos/7/$basearch/
gpgcheck=0
enabled=1

执行安装nginx命令
yum install nginx

Nginx配置成功后,需要设置Nginx的配置,配置文件路径为/etc/nginx/conf.d/default.conf,配置的内容如下:

server {
    listen       80;
    server_name xiaoyaowind.com  www.xiaoyaowind.com;
    
       location / {
       root   /root/blog/html;
        index  index.html index.htm;
      }

    error_page  404              /404.html;

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /root/blog/html;
    }
   
   }

安装Nginx服务器成功后,需要将Jekyll编译的博客静态html文件输出到Nginx服务器上(记得加bundle exec 个人理解相当于windows下以兼容格式或者忽略版本差异模式编译)

cd git下是博客文件夹下 例如: cd /xiaoyaowind.github.io
bundle exec  jekyll build --destination=/root/blog/html

启动Nginx服务器,就可以正常的访问博客网页
启动nginx

   cd  /usr/sbin
   ./nginx

如果需要在浏览器上访问,需要在阿里云ECS控制台的安全组件暴露80端口。如果想通过域名访问,需要将域名解析设置指向你的服务器。(这个自行百度)
非www域名的重定向到www
比如我想访问http://xiaoyaowind.com重定向到http://www.xiaoyaowind.com上,需要在Nginx的配置文件/etc/nginx/conf.d/default.conf,修改配置以下内容:

listen       80;
    server_name xiaoyaowind.com www.xiaoyaowind.com;


    if ( $host != 'www.xiaoyaowind.com' ) {
          rewrite "^/(.*)$" http://www.xiaoyaowind.com/$1 permanent;
         }

自动化部署

通过设置github的webhook可以实现自动化构建和部署。过程是,提交博文或者配置到github仓库,仓库会触发你设置的webhook,会向你设置的webhook地址发送一个post请求,比如我设置的请求是在服务器的跑的一个Nodejs程序,监听gitub webhook的请求,接受到请求后,会执行shell命令。

设置webhook

首先设置github仓库的webhook,在github仓库的项目界面,比我的我的项目界面https://github.com/xiaoyowind/xiaoyowind.github.io,点击Setting->Webhooks->Add Webhook,在添加Webhooks的配置信息,我的配置信息如下:

Payload URL: http://www.xiaoyowind.com/incoming
Content type: application/json
Secret: aaaaa12345678

这样Webhook就设置成功了。

安装监听组件以及自动构建

现在在博客所在的服务端去监听Github Webhook发送的请求,我采用的开源组件去监听github-webhook-handler,项目地址为:https://github.com/rvagg/github-webhook-handler,首先安装:

npm install -g github-webhook-handler

安装成功后,在/root/node-v8.12.0-linux-x64/lib/node_modules/github-webhook-handler下新建deploy.js文件:

var http = require('http')
var createHandler = require('github-webhook-handler')
var handler = createHandler({ path: '/incoming', secret: 'aaaaa12345678' }) 
 
function run_cmd(cmd, args, callback) {
  var spawn = require('child_process').spawn;
  var child = spawn(cmd, args);
  var resp = "";
 
  child.stdout.on('data', function(buffer) { resp += buffer.toString(); });
  child.stdout.on('end', function() { callback (resp) });
}
 
http.createServer(function (req, res) {
  handler(req, res, function (err) {
    res.statusCode = 404
    res.end('no such location')
  })
}).listen(3001)
 
handler.on('error', function (err) {
  console.error('Error:', err.message)
})
 
handler.on('push', function (event) {
  console.log('Received a push event for %s to %s',
    event.payload.repository.name,
    event.payload.ref);
  run_cmd('sh', ['./start_blog.sh'], function(text){ console.log(text) });
})

上述代码中,指定了nodejs服务的践踏端口为3001,监听了path/incoming,Secret为aaaaa12345678,这和之前Github Webhook设置的要保持一致。代码run_cmd(‘sh’, [’./start_blog.sh’],指定了接受到请求后执行./start_blog.sh,start_blog.sh文件的代码如下,首先进入到博客的代码文件,拉代码,编译。

echo `date`
cd /root/xiaoyaowind.github.io
echo start pull from github 
git pull
echo start build..
bundle exec jekyll build --destination=/root/blog/html

然后需要使用forever来启动deploy.js的服务,执行命令如下:

sudo npm install forever -g   #安装
$ forever start deploy.js          #启动
$ forever stop deploy.js           #关闭
$ forever start -l forever.log -o out.log -e err.log deploy.js   #输出日志和错误
/root/node-v8.12.0-linux-x64/lib/node_modules/forever/bin/forever start -l forever.log -o out.log -e err.log deploy.js

如果报错:
/root/node-v8.12.0-linux-x64/lib/node_modules/forever/bin/forever start -a -l forever.log -o out.log -e err.log deploy.js

本人deploy.js和start_blog.sh都在/root/node-v8.12.0-linux-x64/lib/node_modules/github-webhook-handler目录下,如果最后启动不成功,请查看err.log,如果日志里有3001则是因为端口已被占用,重启服务器并按步骤进入到指定目录并执行上面的如果报错命令。
最后一步,需要在nginx服务器的配置文件中添加配置,需要将监听的/incoming请求转发到nodejs服务上,配置代码如下:

location = /incoming {
     proxy_pass http://127.0.0.1:3001/incoming;
}

这样,当你提交了文章或者修改文件到gitub上,github通过webhook向你所在的服务器发送请求,服务器接收到请求后执行 sh命令,sh命令包括了重新pull代码和编译代码的过程,这样自动化部署就完成了,你只需提交代码,服务器就触发pull代码和重新编译的动作。

    好了,以上就是本人实践的jekyll和nginx自动化部署博客系统步骤了,如有不足和问题请添加微信1354335693或者留言欢迎指正。

你可能感兴趣的:(博客,jekyll,博客搭建)