🎸

Lei.Pan

Let's FingerStyle

Code

博客迁移 —— 从 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 戳这里：

About 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 上了。

comments powered by Disqus