使用Docker和Hexo搭建DevOps个人静态博客（基础篇）-DockerInfo

本系列文章有标题党嫌疑，但确实是使用DevOps的理念来实现个人静态博客从客户端本地编辑到服务端网页发布的全自动功能。如果必须要给本系列文章一个定位的话，大概就是起到一个抛砖引玉的作用吧。

架构图

u20160719210440

VPS和域名准备

VPS：本人使用Digital Ocean云平台服务商的VPS。主要原因是便宜（5美刀/月），网络质量也不错，还有就是国外主机不需要走域名备案流程。
官网链接: https://www.digitalocean.com/
域名：国内域名提供商很多，选一家靠谱的申请一个心仪的域名就行(如万网，新网，美橙等)。初次申请价格约人民币50元/年左右，申请完成后进入域名管理控制台并添加域名相应的DNS解析条目并指向到VPS主机的固定IP。本例中将onlyeric.com,www.onlyeric.com和gogs.onlyeric.com指向已申请VPS的互联网固定IP。

客户端软件准备

MarkdownPad
Markdown文本编辑器，可实现博客文章在客户端本地的编辑和预览功能。
下载:
http://markdownpad.com
Node.js
Node.js是一个Javascript运行环境，Hexo的载体。
下载:
https://nodejs.org
Hexo
基于Node.js的静态博客框架，界面干净利落，阅读体验感好。
介绍:
https://hexo.io/
Git
Git客户端，被Hexo来调用实现所获取的静态网页自动上传的功能。
下载:
https://git-scm.com

服务端软件准备

CentOS 7.2
服务端操作系统，运行Docker Engine的载体，在生成VPS时选定。
Docker Engine 1.10
提供容器服务,将服务端的Gogs和Nginx以容器形式来运行，免去两者的安装和配置步骤。
介绍:
http://www.docker.com/products/docker-engine
Gogs Container
Go语言编写的一款简单、快速和轻便的自助Git托管服务，本例中主要提供Git Repository功能。
镜像介绍:
https://github.com/gogits/gogs/tree/master/docker
Nginx Container
一款轻量级的Web服务器和反向代理服务器，本例中主要提供静态网站服务和反向代理功能。

以上为搭建个人博客所需的全部软件，看起来很多且杂，但搭建起来却异常简单，大多数步骤只需要“下一步”即可。

MarkdownPad安装

MarkdownPad是一个Windows操作系统下markdown文本的编辑器，含有左页编辑右页预览的功能。在下载完成后直接运行安装程序默认安装即可。

Git客户端安装

安装Git客户端主要用来给Hexo来调用，实现Hexo静态框架部署后自动向服务端Git Repository的push工作。

本例中只需要安装Git客户端即可，不需要在本地实现初始化工作，初始化和上传工作会由Hexo自己来发起并调用Git Client。

Git客户端在下载完成后直接运行安装程序并默认安装即可，安装完成后需要生成一对SSH的Key来实现客户端本地到服务端Gogs无需密码的push操作。

具体如下:

打开Git Bash
配置并生成SSH Key

#配置用户名

git config –global user.name “EricCheung”

#配置用户邮箱

git config –global user.email “ericzhangyang@hotmail.com”

#生成一对SSH Key文件

ssh-keygen.exe -t rsa -C “ericzhangyang@hotmail.com” (使用空密码，输入三次回车即可)

记录public key的内容

cat PUBLIC_KEY_PATH/id_rsa.pub

Node.js安装

Node.js用来支撑Hexo静态博客框架的安装和运行,在下载完成后直接运行安装程序并默认安装即可。

Hexo安装

Hexo的安装需要在Node.js安装成功的前提下进行，具体操作如下:

1. 打开Git Bash

2. 安装Hexo

#全局安装Hexo

npm install -g hexo-cli

#本地创建博客数据文件夹,本例为D:\Data\blog

mkdir /d/Data/blog

#初始化Hexo博客项目

cd /d/Data/blog

hexo init

#安装依赖包

npm install

#安装git支持（在无法调用git实现静态页面自动上传时可考虑此步骤，个人觉得在上一步中已默认安装）

npm install hexo-deployer-git –save

3. 本地测试

#本地获取Hexo静态页面

hexo generate

#本地部署Hexo博客

hexo deploy

#本地启动Hexo服务（启动该服务主要用于在本地对整个Hexo静态博客的预览）

hexo server

4. 本地预览
http://127.0.0.1:4000

自此客户端的安装已全部完成，Hexo的基本功能已经实现。待服务端安装完成后进行些许配置即可完成个人博客的整体部署。

下面介绍服务端软件(Docker Engine, Gogs容器，Nginx容器)的安装和部署

Docker Engine安装

Docker Engine是Docker公司的拳头软件之一，三大组件的基石。功能异常强大，可安装却无比简单。

步骤为:
1. 准备Docker Engine的所需的操作系统（本文为CentOS 7.2）
2. 配置Docker Engine的yum源
3. 使用yum安装Docker Engine
4. 配置Docker Daemon开机自启
5. 基本验证

Gogs部署

前面已经提到Gogs的服务是以Docker容器来运行的，这样的好处是免去了不太复杂的安装过程。

更重要一点是个人非常推崇Docker，也想在 Docker布道的征程中尽一点自己的绵薄之力，且本文也以DevOps关键字来吸引眼球，而Docker则是实现DevOps的重要工具之一。

Gogs服务部署步骤如下:

1. 从Docker Hub下载Gogs最新的镜像

docker pull gogs/gogs

2. 创建gogs数据文件夹

mkdir /var/data/gogs

3. 启动gogs容器

docker run -d –name=gogs -p 10022:22 -p 3000:3000 -v /var/data/gogs:/data gogs/gogs

#容器名为gogs

#SSH端口从容器到主机的映射为22–>10022

#Gogs应用端口从容器到主机的映射为3000–>3000

#数据卷从容器到主机的映射为/data–>/var/data/gogs

4. 查看容器是否启动成功

docker ps

5. 访问Gogs应用（第一次访问Gogs需要进行初始化配置）

http://gogs.onlyeric.com:3000 (本例以gogs.onlyeric.com作为gogs应用的域名)

6. 初始化配置

#数据库的类型选择SQLite3,Gogs自带。因为该Gogs服务通常情况下只有我一人使用，无需配置MySQl数据库来支撑更多的业务量，而且要使用MySQL数据库需要额外启动一个MySQL容器,占用系统资源。

Database Type==>SQLite3

Path==>data/gogs.db

Application Name==>Gogs:Go Git Service

Repository Root Path==>/data/git/gogs-repositories

Run User==>git

#域设置成gogs容器所在主机的域名即可

Domain==>gogs.onlyeric.com

#SSH和HTTP端口设置成启动容器时所映射到Docker主机的端口

SSH Port==>10022

HTTP Port==>3000

#应用URL这里需要设置成不带端口（80端口），因为稍后我们会为gogs应用设置Nginx的反向代理实现80端口到3000端口的请求转发。

Application URL==>http://gogs.onlyeric.com

Log Path==>/app/gogs/log

Username==>自选

Passoword==>自设

Confirm Password==>自设

Admin Email==>自设

通过以上几个参数的设置即可完成Gogs服务的基本配置，其中绝大多数参数可用默认选项。

Nginx部署

Nginx也是以容器的方式来运行，本例中Nginx主要提供Hexo静态页面的Web服务和Gogs应用的反向代理，主要通过基于域名的虚拟主机来实现。

Nginx服务部署步骤如下:

1. 从Docker Hub下载最新镜像

docker pull nginx

2. 准备Nginx配置文件

nginx.conf (nginx的主配置文件)

user  nginx;
worker_processes  1;
error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;
events {
worker_connections  1024;
}
http {
include       /etc/nginx/mime.types;
default_type  application/octet-stream;

log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                  '$status $body_bytes_sent "$http_referer" '
                  '"$http_user_agent" "$http_x_forwarded_for"';
access_log  /var/log/nginx/access.log  main;
sendfile        on;
#tcp_nopush     on;
keepalive_timeout  65;
#gzip  on;
include /etc/nginx/conf.d/*.conf; #虚拟主机配置文件存放路径
}

gogs.conf(gogs虚拟主机配置文件)

server {
listen       80;
server_name  gogs.onlyeric.com; #访问Gogs的域名
location / {
    proxy_pass   http://gogs.onlyeric.com:3000;  #80到3000端口的请求转发
}
}

blog.conf(博客虚拟主机配置文件)

server {
listen       80;
server_name  www.onlyeric.com; #访问静态博客的域名 
location / {
    root   /usr/share/nginx/html; #静态博客存放路径
    index  index.html index.htm;
}
error_page   500 502 503 504  /50x.html;
location = /50x.html {
    root   /usr/share/nginx/html;
}
}

3. 重构本地Nginx镜像

（重构Nginx的目的是载入上面的三个配置文件，当然熟悉docker的朋友此步骤也可以使用docker cp或volume来完成）

Dockerfile（构建新镜像的dockerfile文件）

FROM nginx   
COPY nginx.conf /etc/nginx/nginx.conf  
COPY gogs.conf /etc/nginx/conf.d/gogs.conf  
COPY blog.conf /etc/nginx/conf.d/blog.conf
RUN rm -f /etc/nginx/conf.d/default.conf

构建镜像

（将dockerfile,nginx.conf,gogs.conf,blog.conf放于主机的同一路径下）

#镜像名字可任取,本例为nginx:onlyeric

docker build -t nginx:onlyeric .

查看镜像

docker images

4. 启动Nginx容器

主机创建Nginx数据目录

mkdir -p /var/data/www

启动Nginx

docker run -d –name web -p 80:80 -v /var/data/www:/usr/share/nginx/html:ro nginx:onlyeric

#容器名为web

#HTTP端口从容器到主机的映射为80–>80

#数据卷从容器到主机的映射为/usr/share/nginx/html–>/var/data/www,且为只读模式

#采用重新构建的镜像nginx:onlyeric来启动容器

5. 查看容器是否启动成功

docker ps

6. 访问Gogs应用测试

#如果Nginx启动且配置成功，则可直接用默认的80端口访问Gogs应用即可，无需再指定3000端口。

自此服务端软件的安装和基本配置已全部完成，如果使用手动方式来管理自己的Hexo静态博客的话，至此部署基本完成。

下面介绍DevOps自动化的方式来完成Hexo静态博客从客户端本地编辑到服务端部署的“开发运维一体化”。

服务端配置

1.1 Gogs配置

Gogs在整个架构的核心，起到一个承上启下的作用，所有的自动化任务（其实也没多少）都由它来完成。

对于客户端他接受并保存Hexo/Git上传的静态页面，对于服务端他将静态页面传输到Nginx的目录。通过此工作方式将客户端和服务端的隔阂打破，实现DevOps。

1.1.1 添加客户端SSH公钥

登录Gogs应用（如:gogs.onlyeric.com）

添加SSH Key（Key Name自取，Content是第二章已要求记录的id_rsa.pub内容）

User profile and more–>Your Settings–>SSH Keys–>Add Key–>Key Name–>Content–>Add Key

1.1.2 创建Repository

创建名为blog的Git repository

Dashboard–>Create–>New Repository–>Owner–>Repository Name–>Create Repository

记录SSH方式的连接

如ssh://git@gogs.onlyeric.com:10022/ericcheung/blog.git

1.1.3 Git Hooks配置

Git Hooks是Git和Git Server自带的一些脚本文件，主要功能是通过某一事件的触发来调用脚本的内容，自动运行脚本来实现特定的操作。

详细介绍可访问https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks

本例中用到的是Git Hooks的post-receive功能。顾名思义，该功能是在Gogs(Git Server)成功接收到Git客户端的一次上传后所执行的后续操作。在这里我们主要通过post-receive来实现静态页面从Gogs到Nginx的传输（拷贝）。

激活Git Hooks

Dashboard–>My Repositories–>blog–>Settings–>Git Hooks–>post-receive–>Hook Content–>Update Hook

其中Hook Centent的内容为：

#!/bin/bash

/data/git/deploy.sh

创建脚本

上述Git Hooks的配置过程中，我们已经指定在post-receive触发后运行的脚本(/data/git/deploy.sh)。现在我们需要在Gogs的服务器上生成该脚本以便于Git Hooks调用。

a.连接gogs容器(gogs为我们之前创建Gogs容器所指定的容器名)

docker-enter gogs

docker-enter是在本地连接容器的一个非常实用的小工具，秒杀docker attach。

安装方式如下：

wget -P ~ https://github.com/yeasy/docker_practice/raw/master/_local/.bashrc_docker;

echo “[ -f ~/.bashrc_docker ] && . ~/.bashrc_docker” >> ~/.bashrc; source ~/.bashrc

b.创建deploy.sh

su – git

vi deploy.sh

内容如下

#!/bin/bash

cd /data/git

#通过git clone将Gogs上blog repository里面的Hexo静态页面下载

git clone ssh://git@gogs.onlyeric.com:10022/ericcheung/blog.git

#通过scp将Hexo静态页面的内容拷贝到Nginx的Web根目录

scp -r blog/* root@onlyeric.com:/var/data/www

rm -rf blog

chmod u+x deploy.sh

如果看到了这里，你会发现脚本里面有ssh也有scp。在想使用无交互的情况下实现脚本的自动运行，我们需要像之前客户端一样在Gogs的容器里面生成一对无密码的SSH Key并将Public Key加入到Gogs和Docker主机。

1.1.4 配置SSH互信

生成Gogs中git用户的SSH Key

ssh-keygen -t rsa (同样输入3次回车使用空密码)

cat /data/git/.ssh/id_rsa.pub (记录Pub Key的内容)

将Pub Key加入到Docker主机

vi /root/.ssh/autorized_keys

（注意这里的Docker主机就是我们的运行Docker的CentOS，加入到它的原因是Nginx没有安装SSH服务而无法实现scp的功能，好在我们之

前以只读的方式来将Nginx容器的Web Root给挂载到Docker主机的/var/data/www目录下）

将Pub Key加入到Gogs应用(个人回顾这一步应该可以省略，因为git本身就是Gogs的运行用户)

User profile and more–>Your Settings–>SSH Keys–>Add Key–>Key Name–>Content–>Add Key

自此服务端的配置通过以上4个小步骤完成。

客户端配置

2.1 Hexo配置

客户端的配置很简单，只用配置Hexo就行，而且也只用修改一处地方。

2.1.1 Hexo连接到Gogs Repository

编辑Hexo博客主配置文件_config.yml，并修改以下内容

本例为D:/Data/blog/_config.yml

# Deployment

## Docs: https://hexo.io/docs/deployment.html

deploy:

type: git

repo: ssh://git@gogs.onlyeric.com:10022/ericcheung/blog.git

branch: master

repo指定为之前在Gogs创建的blog repository的SSH连接串

验证

3.1 Hexo自动Push

3.1.1 打开Git Bash并进入Hexo目录

hexo clean #清除已存在的静态页面

hexo generate #重新获取静态页面

hexo deploy #部署静态页面

3.1.2 登录Gogs验证

Dashboard–>My Repositories–>blog

验证静态页面是否成功上传到blog repository

3.2 访问博客网站

访问自己的博客网站域名以验证

自此一个基于DevOps方法维护的纯静态博客已经完成，在每次本地创建新的博文之后清理、获取和部署静态页面即可自动部署到VPS的Nginx服务中，以此提供个人博客在互联网上的访问。

目前发布的博客已经满足了写博文的功能，下面介绍Hexo个性化的配置，此部分属于文章中“锦”上添花的节。

Hexo个性化

在做Hexo个性化定义之前推荐一款超级炫酷的文本编辑器Atom。

A hackable text editor for the 21st Century

官网链接：https://atom.io

对于此篇博文中出现有三个名词定义如下：

HEXO_ROOT: 初始化Hexo的路径，本例为D:\Data\blog
站点配置文件: HEXO_ROOT\_config.yml
主题配置文件: HEXO_ROOT\themes\next\_config.yml

自定义博客名和作者

编辑Hexo站点配置文件

#Site

title: Blog_Name

author: Author_Name

自定义博客语言

编辑Hexo站点配置文件

#Site

language: zh-Hans #本例为中文

自定义头像

编辑Hexo站点配置文件

avator: /uploads/avatar.jpg

#将想要的头像图片上传至HEXO_ROOT/source/uploads/avatar.jpg,其中uploads文件夹需要新建

添加多说评论

多说评论提供博文的评论和分享功能

a.注册多说帐号

b.创建多说站点

站点名称 #自定义

站点地址 #博客域名

多说域名 #填写的内容即为your-duoshuo-shortname

c.编辑Hexo站点配置文件

添加字段duoshuo_shortname: your-duoshuo-shortname

选择博客主题

Hexo博客用得比较多的主题模版为Next，个人非常喜欢界面的简洁，这点也确实符合Next”精于心，简于形”的宗旨。

Next模版网站:http://theme-next.iissnan.com

Next主题安装

a.下载Next主题

cd HEXO_ROOT

git clone https://github.com/iissnan/hexo-theme-next themes/next

b.激活主题

编辑Hexo站点配置文件

theme: next

c.选择Scheme(可选)

编辑主题配置文件

scheme: Pisces

添加分类页面

a.新建分类页面

hexo new page categories

b.编辑页面

（路径:HEXO_ROOT/source/categories/index.md）

—

title: 分类

date: 2016-05-03 00:14:39

type: “categories”

comments: false

—

c.激活页面

编辑Next主题配置文件

menu:

categories: /categories (#取消注释)

添加标签云页面

a.新建标签云页面

hexo new page tags

b.编辑页面

（路径:HEXO_ROOT/source/tags/index.md）

—

title: All tags

date: 2016-05-03 00:14:39

type: “tags”

comments: false

—

c.激活页面

编辑Next主题配置文件

menu:

tags: /tags (#取消注释)

禁用Google字体服务

默认情况每次访问博客网站都会加载google字体服务，由于国内已经被GFW给墙了，所以选择禁用该服务来加速网站的访问。

编辑Next主题配置文件

font:

enable: false

设置页面宽度

默认情况下Next主题宽度比较窄，在使用浏览器访问的时候两端留白很多，且标题过长的话会出现自动换行的情况。

编辑HEXO_ROOT/source/css/_schemes/Picses/_layout.styl

header{ width: 90%; }

.container .main-inner { width: 90%; }

.content-wrap { width: calc(100% – 260px); }

博文设置（可选）

在HEXO_ROOT下执行hexo new “Blog Post Name”来新建博文。

除开内容，我们还需要设置博文的分类、标签、关键字、描述等等，特别是分类和标签会直接影响到之前添加的分类和标签页面的数据显示。

如下：

—

title: 使用Docker和Hexo打造DevOps个人静态博客(五)个性化篇

date: 2016-05-04 20:46:32

categories: DevOps

tags: [hexo,git,docker]

keywords: Hexo, 博客, Git, Docker

description: 使用Git,Hexo,Docker,Gogs,Nginx搭建基于DevOps自动部署的个人静态博客之配置篇

—

categories为分类，注意半角冒号后的空格

tags为标签，可指定多个，注意半角冒号后的空格

keywords为关键字，可指定多个，注意半角冒号后的空格

description为描述，添加描述后博文在首页不会以全文形式显示，而是只显示描述和“阅读全文”选项

自此整个Hexo博客的个性化定义就完成了。其实还有很多功能都可以加入，但是考虑到我们需要的是一个简约的博客，所以本人暂时用到的功能就这么多，如果有好的推荐也请各位朋友随时回复

欢迎关注本文作者：耀扬微信公众号

u201607192104401

推荐阅读：使用Rancher创建和部署WordPress应用堆栈

使用Docker和Hexo搭建DevOps个人静态博客（基础篇）

架构图

VPS和域名准备

客户端软件准备

服务端软件准备

MarkdownPad安装

Git客户端安装

Node.js安装

Hexo安装

下面介绍服务端软件(Docker Engine, Gogs容器，Nginx容器)的安装和部署

Docker Engine安装

Gogs部署

Nginx部署

服务端配置

客户端配置

验证

Hexo个性化

相关推荐

评论抢沙发

评论前必须登录！

架构图

VPS和域名准备

客户端软件准备

服务端软件准备

MarkdownPad安装

Git客户端安装

Node.js安装

Hexo安装

下面介绍服务端软件(Docker Engine, Gogs容器，Nginx容器)的安装和部署

Docker Engine安装

Gogs部署

Nginx部署

服务端配置

客户端配置

验证

Hexo个性化

相关推荐

评论 抢沙发

评论前必须登录！

评论抢沙发