博客迁移 —— 从 Github 到 VPS

个人博客荒废了好久,最近突然想起来要搞点事情,由于有可以在多台设备写 Blog 的需求,原来托管在 Github 上的 Blog 就显得力不从心了。因为 Github 上并没有所有的源代码,只是托管了网站运行需要的一些资源,所以要实现多设备的代码同步,并没有那么方便,网上也有一些解决方案,我也懒得折腾。正好最近入租了一台 VPS ,就想着把网站部署到 VPS 上, Github 就只用来做版本控制,以下内容就是记录部署网站的过程,备忘吧。忘了说了,我所使用的博客框架是 Hexo

  • VPS OS: Ubuntu 16.04.3

Nginx 站点配置

安装 Nginx

首先,在 VPS 上面装 Nginx:

1
$ sudo apt-get install nginx

安装成功后,在浏览器里访问 VPS 的 IP ,将会看到如下的页面:

Nginx Welcome

创建新的网站目录

Nginx 默认把网页文件存在 /var/www/html 目录。我们刚刚访问到的页面就是 /var/www/html 目录下的 index.nginx-debian.html (实际文件名可能有所不同)。我们在可以在 /var/www/ 目录下为自己的站点创建一个文件夹。

1
2
$ cd /var/www
$ mkdir blog

/var/www/blog/ 目录下创建 index.html 文件。写上以下内容,用于测试虚拟主机运行情况。

1
2
3
4
5
6
7
8
<html>
<head>
<title>Welcome to KeepLearning!</title>
</head>
<body>
<h1>Your Blog Server is Running!</h1>
</body>
</html>

修改 /etc/nginx/sites-available 目录下的 default 文件,修改 root 所在的那一行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
server {
listen 80 default_server;
listen [::]:80 default_server;

...

root /var/www/blog; # 默认为 root /var/www/html; 修改为自己创建的目录

# Add index.php to the list if you are using PHP
index index.html index.htm index.nginx-debian.html;

server_name _;

location / {
# First attempt to serve request as file, then
# as directory, then fall back to displaying a 404.
try_files $uri $uri/ =404;
}

# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# include snippets/fastcgi-php.conf;
#
# # With php7.0-cgi alone:
# fastcgi_pass 127.0.0.1:9000;
# # With php7.0-fpm:
# fastcgi_pass unix:/run/php/php7.0-fpm.sock;
#}

# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}

重启 Nginx 服务

1
$ service nginx restart

再次访问 VPS 的 IP,就能访问到我们刚才写的 index.html 里面的内容了。

Nginx 小知识

nginx 的目录主要在 /etc/nginx/ 下,在这个文件夹下面,主要有三个文件夹来存放nginx的配置文件,分别是:

  • conf.d
  • sites-available
  • sites-enabled

其中,conf.d 里面主要用来存放一些与nginx本身相关的配置信息,web站点的相关配置文件则是存放在 sites-available 里面,sites-enabled 里面存放的只是对应 sites-available 里面配置文件的软连接。

简单来说,就是有多个站点的话,配置文件都存放在 sites-available 里面,但不是所有的站点都启用,对于需要启用的站点,就可以针对相应的配置文件做一个软连接,存放到 sites-enabled 里面。当然,也可以直接把配置文件扔sites-enabled里面,但是用软连接的话有一个好处就是,启用和关闭站点比较简单。关闭站点,直接将 sites-enabled 里的软连接删掉就行,而 sites-available 里的配置文件不受影响。

Git 配置

创建 Git 用户

1
$ adduser git

将新用户加到 root 用户组

1
$ gpasswd -a git sudo

添加 SSH Key

1
2
3
4
5
$ su git #切换到 git 用户
$ cd ~
$ mkdir .ssh && cd .ssh
$ touch authorized_keys
$ vi authorized_keys

将本地的 id_rsa.pub 内容粘贴到 authorized_keys 里面,如果你不知道什么是 SSH Key 戳这里:

创建 Git 仓库

首先在 VPS 上安装 Git

1
$ apt-get install git

安装完成之后,执行以下命令,Git 仓库就算是建好了

1
2
3
4
5
$ su git
$ cd ~
$ mkdir blog.git
$ cd blog.git
$ git init --bare

执行以下命令,把 /var/www/blog 这个目录的拥有者变更为用户 git ,方便 git 用户自动部署。

1
$ sudo chown git:git -R /var/www/blog

添加 Git hooks

现在 Git 仓库创建好了,Web 服务器也配置好,就差一个 Git Hooks:当我们从本地 deploy Hexo 到VPS上的Git仓库时,我们希望的是能够自动部署到 nginx 的 web 根目录下,也就是 /var/www/blog/ 中的。所以这里就需要用到 Git 的 post-receive 这个勾子。我们进到 git 仓库的 hooks 目录下, 编辑 post-receive 文件:

1
2
3
$ su git
$ cd ~/blog.git/hooks
$ vi post-receive

然后输入以下内容:

1
2
3
4
5
6
7
8
#!/bin/bash
GIT_REPO=/home/git/blog.git
TMP_GIT_CLONE=/tmp/blog
PUBLIC_WWW=/var/www/blog
rm -rf ${TMP_GIT_CLONE}
git clone $GIT_REPO $TMP_GIT_CLONE
rm -rf ${PUBLIC_WWW}/*
cp -rf ${TMP_GIT_CLONE}/* ${PUBLIC_WWW}

简单来说,post-receive 的逻辑就是,当接收到客户端的推送后,就会先把 git 仓库中的内容,克隆到一个临时目录下,然后再从临时目录复制到 web 根目录下。

编辑完 post-receive 文件,最后再赋予其可执行权限:

1
$ chmod +x post-receive

至此,VPS上的配置就结束,现在就差在hexo本地环境的配置了。

Hexo 配置

配置 hexo 使用 git 形式部署

修改 blog 里面的 _config 文件, 修改 deploy 配置如下:

1
2
3
deploy:
type: git
repo: git@{ VPS 的 IP }:blog.git

部署 Code

完成 blog 的编写后,只要执行 hexo d,就可以将网站同步到 VPS 上了。

Lei.Pan wechat
subscribe to my blog by scanning my public wechat account
万一有人想不开呢?