2019-08-27

blog

团队博客搭建:hexo+gitlab+jenkins

用于团队的知识积累、管理

目前有很多开源博客，但是考虑markdown的优势，以及同样基于markdown的gitbook(我们作为开发文档工具使用)，最后决定选择在程序员中使用最广的个人博客hexo，如果能使用域名配置gitlab page就不需要配置自动化部署，请直接跳过本文，本文使用环境是在内部网络，gitlab page在没域名下是无法使用的。

以下就从编写markdown博客内容到自动化部署流程

1. 环境说明

3台服务器 ubuntu16.04 docker-18.09.1 (用单台多容器或者虚拟机都可以，按实际资源考虑)

[A]:192.168.4.17 node.js + npm + git + hexo编译构建服务 + nginx博客运行服务

[B]:194.0.19.253 gitlab服务器

[C]:192.168.4.16 jenkins服务器
node.js v10.16.3
npm v6.9.0
hexo v2.0.0
nginx 1.15.8
GitLab 11.8.1-ce
Jenkins 2.168

以下步骤名称尾部都会标注[A] [B] [C] 对应各自的服务器

2. 安装

2.1 Git安装配置 [A]

升级,ubuntu16.04 git默认版本2.7.4

$ sudo add-apt-repository ppa:git-core/ppa
$ sudo apt-get update
$ sudo apt-get install git
$ git --version

2.2 hexo搭建 [A]

2.2.1 nodejs+npm

安装

$ sudo apt-get install nodejs
$ sudo apt install nodejs-legacy
$ sudo apt-get install npm
$ sudo npm config set registry https://registry.npm.taobao.org

#更新node版本
$ sudo npm install n -g
$ sudo n stable

#使用淘宝镜像
$ sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

#查看安装版本
$ sudo node -v

2.2.2 安装hexo

安装

$ sudo cnpm install -g hexo-cli

#版本验证
$ hexo -v

初始化

1
2
3

$ mkdir ~/hexo && cd ~/hexo
$ sudo hexo init
$ sudo cnpm install

安装插件

#git发布插件（必须）
$ sudo cnpm install hexo-deployer-git --save
#rss插件
$ sudo cnpm install hexo-generator-feed --save
#永久链接插件
$ sudo cnpm install hexo-abbrlink --save
#目录
$ sudo cnpm install hexo-toc --save
#流程图插件
$ sudo cnpm install hexo-filter-mermaid-diagrams --save
$ sudo cnpm install hexo-filter-flowchart --save
$ sudo cnpm install hexo-filter-sequence --save

配置权限

#查看当前用户的UID GID
$ cat /etc/passwd | grep $(whoami)
#授权
$ sudo chown -R $(id -u):$(id -g) ~/hexo

运行
1
$ hexo s -g
访问 http://192.168.4.17:4000 看是否正常显示博客，按ctrl+c停止运行

2.3 安装nginx

$ docker run --name nginx -p 4000:4000 \
-v /var/www/hexo:/usr/share/nginx/html \
-v /var/local/nginx:/etc/nginx \
-v /var/log/nginx:/var/log/nginx \
-v /etc/localtime:/etc/localtime:ro \
-d nginx:1.15.8-alpine

2.4 Jenkins安装 [B]

安装

1
2
3

$ docker pull jenkins/jenkins:2.168
$ sudo mkdir /var/local/jenkins
$ sudo chown -R 1000:1000 /var/local/jenkins

$ docker run --name=jenkins \
-p 81:8080 -p 50000:50000 \
-v /etc/localtime:/etc/localtime:ro \
-v /var/local/jenkins:/var/jenkins_home \
-d jenkins/jenkins:2.168

安装后访问系统 http://192.168.4.16:81 ，从日志中复制填写password，并按引导安装插件，这个密码也是admin管理员的密码,或者在/var/jenkins_home/secrets/initialAdminPassword文件中查看
1
$ docker logs jenkins
注意：一定要安装publish-over-ssh插件，用于SSH连接并发送执行命令
设置时区:系统管理->脚本命令行执行以下命令即可
System.setProperty(‘org.apache.commons.jelly.tags.fmt.timeZone’, ‘Asia/Shanghai’)

2.5 GitLab安装 [C]

安装

$ docker pull gitlab/gitlab-ce:11.8.1-ce.0

#使用的都不是常规端口
$ docker run --name gitlab \
-p 11443:443 -p 1180:1180 -p 1122:22 \
-v /etc/localtime:/etc/localtime:ro \
-v /var/local/gitlab/config:/etc/gitlab \
-v /var/local/gitlab/logs:/var/log/gitlab \
-v /var/local/gitlab/data:/var/opt/gitlab \
-d gitlab/gitlab-ce:11.8.1-ce.0

配置ssh密钥的端口,端口号与映射的宿主机端口号一致；修改时区

1	$ docker exec -it gitlab vi /etc/gitlab/gitlab.rb

#如果使用常规端口，端口号就不用修改
gitlab_rails['gitlab_shell_ssh_port'] = 1122
external_url 'http://194.0.19.253:1180'  #你的实际IP
nginx['listen_port'] = 1180
gitlab_rails['time_zone'] = 'Asia/Shanghai'

配置后应用重启

1 2	$ docker exec -it gitlab update-permissions $ docker restart gitlab

访问gitlab,第一次需要设置root密码，然后创建用户，再新建一个仓库本地拉取测试是否安装成功

http://194.0.19.253:1180

3.自动化部署配置

在服务器A配置: node.js + npm + git + hexo编译构建服务 + nginx博客运行服务

3.1 创建仓库 [C]

在gitlab上创建2个仓库，一个用于存放博客内容，一个用于存放hexo编译后的发布文件

注意：在创建blog-deploy的时候不要勾选 Initialize repository with a README ，不然后面发布会报错

3.2 配置ssh key [A]

查看本机是否已有ssh key
1
2
$ cd ~/.ssh
$ cat id_rsa.pub

生成 ssh key id_rsa.pub

1
2
3

$ ssh-keygen -t rsa -C "[email protected]"  #会提示输入密码，这里不要使用密码，都是按回车
# 查看公钥
$ cat ~/.ssh/id_rsa.pub

打开gitlab,配置公钥

http://194.0.19.253:1180

3.3 配置GIT [A]

1 2	$ git config --global user.email "你的gitlab邮箱" $ git config --global user.name "你的gitlab用户名"

3.4 克隆仓库 [A]

#删除hexo初始博客文件
$ mkdir ~/hexo/tmp && mv ~/hexo/source/* ~/hexo/tmp/
#拉取
$ git clone ssh://[email protected]:1122/java/blog.git ~/hexo/source/

3.5 配置hexo并推送gitlab [A]

配置_config.yml

1	$ vi ~/hexo/_config.yml

#Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

#Site  博客信息
title: TEC开发中心
subtitle: 知无穷尽,行无止境
description:
keywords:
author: ikin
language: zh-CN
timezone: Asia/Shanghai

#URL 
url: http://192.168.4.17:4000
root: /
permalink: posts/:year:month:day-:abbrlink.html
permalink_defaults:

#Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

#Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:

#Home page setting
#path: Root path for your blogs index page. (default = '')
#per_page: Posts displayed per page. (0 = disable pagination)
#order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -date

#Category & Tag
default_category: uncategorized
category_map:
tag_map:

#Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

#Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

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

#Feed Atom
feed:
  type: atom
  path: atom.xml
  limit: 20

#sitemap
sitemap:
  path: sitemap.xml

#abbrlink config
abbrlink:
  alg: crc32  #support crc16(default) and crc32
  rep: hex    #support dec(default) and he

# mermaid chart
mermaid: ## mermaid url https://github.com/knsv/mermaid
  enable: true  # default true
  version: "8.2.6"
  options:  # find more api options from https://github.com/knsv/mermaid/blob/master/src/mermaidAPI.js
  #startOnload: true  // default true
  
#Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: ssh://[email protected]:1122/java/blog-deploy.git
  branch: master

修改主题支持mermaid

下载:https://unpkg.com/[email protected]/dist/mermaid.min.js 保存到 themes/landscape/source/js/

在文件: themes/landscape/layout_partial/after-footer.ejs 底部加入:
1
2
3
4
5
6
7
8
<% if (theme.mermaid.enable){ %>
<%- js('js/mermaid.min') %>
<script>
if (window.mermaid) {
mermaid.initialize({theme: 'forest'});
}
</script>
<% } %>
发布
1
$ hexo d -g

3.6 配置nginx并发布博客 [A]

配置nginx

1	$ sudo vi /var/local/nginx/nginx.conf

在底部加入：include defined/*.conf;

1 2	$ sudo mkdir /var/local/nginx/defined $ sudo vi /var/local/nginx/defined/ip.conf

配置hexo的运行路径

server {
  listen 4000; #这是容器内的端口
  server_name localhost;
  
  access_log  /var/log/nginx/ip.access.log;
  error_log  /var/log/nginx/ip.error.log;
  
  location / {
      root   /usr/share/nginx/html; #这是容器内的路径
      index  index.html index.htm;
  }
}

检查配置是否正常

1
2
3

$ docker exec -it nginx nginx -t -c /etc/nginx/nginx.conf
#重启生效
$ docker restart nginx

克隆blog-delpoy

1 2	$ sudo chown -R 1000:1000 /var/www/hexo/ $ git clone ssh://[email protected]:1122/java/blog-deploy.git /var/www/hexo/

这时候可以正常访问nginx的博客：http://192.168.4.17:4000/

3.7 配置Jenkins [B]

配置免密SSH

$ docker exec -it jenkins bash
$ ssh-keygen #一直回车即可

#上传公钥到服务器A
$ ssh-copy-id -i ~/.ssh/id_rsa.pub [email protected]

#测试免密登录
$ ssh [email protected]
$ exit #回到容器
$ exit #回到宿主机

打开Jenkins并登录，配置Publish over SSH ：系统管理->系统设置最下面
去掉防止跨站点请求伪造

设置->全局安全配置

CSRF Protection
去掉勾选Prevent Cross Site Request Forgery exploits
新建任务

配置 Build Triggers

Build添加ssh远程执行命令

如果没有”Send files or execute commands over SSH”选项，需要先安装publish-over-ssh 插件并配置
1. 拉取最新blog仓库内容并编译发布
  1
  2
  3
  cd ~/hexo/source/ \
  && git fetch --all && git reset --hard origin/master && git pull \
  && hexo d -g

拉取最新blog-deploy仓库
1
cd /var/www/hexo/ && git pull

3.8 配置gitlab webhook [C]

在blog仓库配置webhook,只要有新的提交就触发jenkins任务

这里的1681是gitlab到jenkins的转发端口，大家按原来的81就可以

4. 编写发布博客(成员PC)

4.1 克隆仓库

1	$ git clone ssh://[email protected]:1122/java/blog.git

4.2 使用Typora编写博客

4.3 提交并推送到远程仓库

1
2
3

$ git add -A
$ git commit -m "测试"
$ git push -u origin master

可以打开jenkins查看是否成功触发自动化部署

访问 http://192.168.4.17:4000 查看已经自动发布的博客

最后

实际原理就是通过hexo把markdown文件生成静态html页面，然后在nginx下运行，团队的每个成员只要专注于博客的内容编写，不用管博客编译、发布。

如果在github上也有个人博客，只要复制md文件通过hexo或jekyll编译发布到自己的github上即可，甚至可以同时发布到其他支持markdown的平台(简书、微信公众号等)，一次编写到处发布。