Loading...
Navigation
Table of Contents

Hexo博客搭建 - VPS远程部署Tech

由于GitHub的访问速度可能有时候会比较慢, 并且把博客文件都放在公开库里似乎不太好, 还是想试试把Hexo生成的静态博客部署在VPS上. 在Google上看了好多教程, 踩了很多大坑. 特此写一篇自己感觉比较靠谱的教程.

我的环境是: 本地是Win10, Git, WinSCP, Putty, VPS是Vultr, Ubuntu 16.04.

Hexo本身的搭建之前说过了, 这次就谈谈怎么把Hexo生成的public文件夹一键部署到VPS这件事吧.

0. References

1. 本地配置

SSH生成

如果想一键部署博客, 那肯定需要Git在本地和VPS之间加密沟通, 使用SSH的好处就是不用手动输入密码了, 而且安全.

本地上Git Bash中输入命令ssh-keygen -t rsa -C "blog", 这里的"blog"就是个标识符, 随便填什么用户名啥的都行. 我这里是为了博客数据传输, 就写了blog. 生成好了默认是在C:\Users\USERNAME\.ssh文件夹里面的, 如果你生成时不手动更改路径的话. 打开这个文件夹, 可以看到id_rsa.pub这个文件, 可以用notepad++打开它, 待会有用的.

SSH具体说明见前一篇文章

修改hexo配置文件

修改hexo的配置文件_config.yml中的deploy选项

deploy:
  type: git
  message: update
  repo:
    s1: git@0.0.0.0:blog.git,master

注意吧这里的IP地址换成VPS的IP地址.

2. VPS端配置

基本思路就是: 1. 把本地的静态文件, 通过git的部署方式部署到VPS上; 2. 把Git部署的仓库文件clone到Nginx的库里 3. 用Nginx直接做Web服务. 注意到, Git的更新方式方便快捷; Nginx是一个可以在VPS上运行的轻量级Web 服务器/反向代理服务器/电子邮件(IMAP/POP3)代理服务器, 处理咱们这种hexo静态文件非常适合, easy.

VPS安装Nginx

curl -sL https://deb.nodesource.com/setup | bash
apt-get install nodejs -y
apt-get install nginx -y
cd /etc/nginx/sites-available
vim blog #修改blog的配置, 并保存
ln /etc/nginx/sites-available/blog /etc/nginx/sites-enabled/blog #硬链接
/etc/init.d/nginx restart #启动Nginx

修改配置如下, 注意到listen后面的IP改成你VPS的IP; server_name后面填写类似于blog.a.com, b.me,当然肯定得在诸如DNSpod的网站上先做好域名解析. 如果没有域名的话, 可以填localhost.

注意到, 这里是blog的配置. 当然, 也可以新建多个配置文件, 每个配置文件监听不同的域名, 返回不同目录下的文件.

server {
    listen 0.0.0.0:80;
    root /var/www/blog;
    server_name a.com www.b.com;
    access_log  /var/log/nginx/blog_access.log;
    error_log   /var/log/nginx/blog_error.log;
    location ~* ^.+\.(ico|gif|jpg|jpeg|png)$ {
            root /var/www/blog;
            access_log   off;
            expires      1d;
        }
    location ~* ^.+\.(css|js|txt|xml|swf|wav)$ {
        root /var/www/blog;
        access_log   off;
        expires      10m;
    }
    location / {
        root /var/www/blog;
        if (-f $request_filename) {
            rewrite ^/(.*)$  /$1 break;
        }
    }
}

其中/var/www/blog是存放博客静态文件的目录, 这个目录也是Nginx自动监测的目录, 后面会用到. 有的人也用的是/var/www/hexo, 看自己喜好了. 接着, 完善后续设置

cd /var/www
mkdir blog
sudo chmod 775 -R /var/www/blog

VPS安装Git

adduser git --ingroup sudo# 新建一个git用户
su git #切换用户到git用户
cd ~ #进入的是git用户的根目录, 实际放在/home里的
mkdir .ssh && cd .ssh
touch authorized_keys
vi authorized_keys

把刚才notepad++打开的id_rsa.pub里的内容粘贴到authorized_keys里, 然后 :wq. 这样本地和VPS之间就可以通过ssh使用git了. 注意到, 这里的SSH是用来和git用户沟通的, 和服务器里其他用户不产生影响. 如果之前给root用户配置过SSH, 仍然是可用的并和这个git的独立.

一个可选的小测试

在本机的terminal(比如Git Bash)中输入ssh git@0.0.0.0, 如果可以登录, 那么就算成功.

接着, 我们还是在git用户下安装"软件git", 并为静态内容新建仓库

sudo apt-get update && apt-get upgrade -y
sudo apt-get install git-core -y
cd ~ 
mkdir blog.git && cd blog.git
git init --bare #生成一个空的Git仓库

3. VPS配置Git hooks

本地deploy只是把静态文件push到了VPS的git仓库里. 这是不能直接用的...我们还得使用git hooks在每次push完成后, 执行一个小脚本, 把blog.git里的内容clone出来, 再复制到/var/www/blog目录. 就可以实现博客的更新了.

还是在git用户下

cd ~/blog.git/hooks
touch post-receive #生成小脚本
vi post-receive

把如下配置放入

#!/bin/bash -l
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}

这个脚本还是很好理解的, 就是先声明了几个变量, 然后删除临时目录; "克隆"Git仓库的文件到临时目录; 删除最终目录之前的文件; 复制文件到最终目录.

保存并退出, 然后更改脚本权限

chmod +x post-receive

这个hook的原理就是, 每次通过git进行hexo d后, VPS端会自动调用此脚本, 进行文件移动.

4. 总结

至此, 本地与VPS的配置就完成了. 在本地上写一篇文章, 进行 hexo g, hexo d. 就应该能部署到VPS上了
打开浏览器, 输入你的VPS的IP, 或者域名(假设你做好了域名解析服务的话),就应该能看到你的博客了.

但是总有大坑, 经过我的测试, 发现是403 forbidden. 后来发现/var/www/blog这里面没有任何网页静态文件. 想一下, 肯定是那个脚本没权限进行删除, 复制.

我在putty里手动跑了一下这个脚本

su git #切换用户
cd ~/blog.git/hooks
./post-receive #手动运行此脚本

果然, 和删除复制的有关操作都会提示Permission Denied.

所以, 需要用chown命令赋予git对这两个文件夹/var/www/blog, /tmp/blog的所有权. 在git用户下, 在terminal中输入groups, 我这里返回的是sudo, 这说明我这个git用户(所有者)所属的组是sudo.

所以, 我们切换回root用户, 然后

chown git:sudo -R /var/www/blog
chown git:sudo -R /tmp/blog

再次hexo g, hexo d后, 就会发现这个脚本可以正常执行了, /var/www/blog也有静态html文件了.

VPN搭建

  • 教程
    如果失效了, 注意重启pptpd服务: $ /etc/init.d/pptpd restart.

Last updated on Jan 11, 2019.