hexo博客部署到vps

前言

大概从一年多以前开始写博客,一开始纯粹是为了好玩和喜欢折腾。从最开始的csdn上写一些乱七八糟的东西,到自己折腾用python写了个有后端的博客,再到hexo搭建的部署到github和coding的警惕博客,最后到简书和掘金,再回到hexo.期间写写停停,一年多过去了,积少成多,不知不觉也已经有八十来篇,约105k的字数,想想也是自己学习的一个痕迹,坚持写下去也不错。不过翻看以前写的包括现在写的,我觉得还不能叫做博客,我更愿意称作笔记,和我的初衷一样,是学习、记录然后分享

至于用过这么多博客的平台,有流量最大的csdn,有最简约的简书,也有小众极客的掘金。为什么我还是选择了hexo,大概是有这么些原因吧。一是hexo比较简约,我一向喜欢极简风格,尤其我所用的next主题对我来说再适合不过了。二是想有自己的一个私人的空间,一个拥有自己id域名的站点,虽然访问会比第三方的少很多很多,但是,属于自己搭建的站点带有自己的喜好,自己独立的域名更让我感觉到“嗯,这就是我的一个个人空间,属于我自己的”。

最后,至于hexo博客为什么要部署到自己的vps,一是自己买了一个vps,假如只是用来搭建梯子也未免觉得太浪费了,虽然也浪费了好长时间。二是最近发现部署到coding的线路老抽风,果然感觉免费的就别期望太多了,部署到自己vps另一个好处是ssl的证书是拿到长期的。

话不多说,下面开始搭建。需要提醒的是本次操作环境是

  • 本地win10专业版64位
  • 搬瓦工vps云端是centos7 64位

本地搭建

Git

Git是一个免费的开源分布式版本控制系统,旨在快速,高效地处理从小型到大型项目的所有事务 。这原是广泛用在代码的版本控制,在hexo建站里面的主要作用是推送渲染好的静态网页文件到部署的仓库。

下载安装GIt

到git官网去下载即可,这里给出官网链接https://git-scm.com/downloads,选择windows64位。下载好,一路按照提示按照即可。

简单配置

下载安装完成之后,简单配置一下一些必要的配置。关于git的使用教程可以参考官网的文档,写的非常详细。这里给出文档的链接https://git-scm.com/docs

配置一下用户名和自己的邮箱,打开Git bash,输入以下命令配置

1
2
$ git config --global user.name "Your Name"
$ git config --global user.email "email@example.com"

产生密钥

1
ssh-keygen -t rsa #(连续三次回车,即在本地生成了公钥和私钥,不设置密码)

后面会用到

Git常用命令

这里贴出一些Git的常用命令,此表出处链接

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
git init                                                  # 初始化本地git仓库(创建新仓库)
git config --global user.name "xxx" # 配置用户名
git config --global user.email "xxx@xxx.com" # 配置邮件
git config --global color.ui true # git status等命令自动着色
git config --global color.status auto
git config --global color.diff auto
git config --global color.branch auto
git config --global color.interactive auto
git config --global --unset http.proxy # remove proxy configuration on git
git clone git+ssh://git@192.168.53.168/VT.git # clone远程仓库
git status # 查看当前版本状态(是否修改)
git add xyz # 添加xyz文件至index
git add . # 增加当前子目录下所有更改过的文件至index
git commit -m 'xxx' # 提交
git commit --amend -m 'xxx' # 合并上一次提交(用于反复修改)
git commit -am 'xxx' # 将add和commit合为一步
git rm xxx # 删除index中的文件
git rm -r * # 递归删除
git log # 显示提交日志
git log -1 # 显示1行日志 -n为n行
git log -5
git log --stat # 显示提交日志及相关变动文件
git log -p -m
git show dfb02e6e4f2f7b573337763e5c0013802e392818 # 显示某个提交的详细内容
git show dfb02 # 可只用commitid的前几位
git show HEAD # 显示HEAD提交日志
git show HEAD^ # 显示HEAD的父(上一个版本)的提交日志 ^^为上两个版本 ^5为上5个版本
git tag # 显示已存在的tag
git tag -a v2.0 -m 'xxx' # 增加v2.0的tag
git show v2.0 # 显示v2.0的日志及详细内容
git log v2.0 # 显示v2.0的日志
git diff # 显示所有未添加至index的变更
git diff --cached # 显示所有已添加index但还未commit的变更
git diff HEAD^ # 比较与上一个版本的差异
git diff HEAD -- ./lib # 比较与HEAD版本lib目录的差异
git diff origin/master..master # 比较远程分支master上有本地分支master上没有的
git diff origin/master..master --stat # 只显示差异的文件,不显示具体内容
git remote add origin git+ssh://git@192.168.53.168/VT.git # 增加远程定义(用于push/pull/fetch)
git branch # 显示本地分支
git branch --contains 50089 # 显示包含提交50089的分支
git branch -a # 显示所有分支
git branch -r # 显示所有原创分支
git branch --merged # 显示所有已合并到当前分支的分支
git branch --no-merged # 显示所有未合并到当前分支的分支
git branch -m master master_copy # 本地分支改名
git checkout -b master_copy # 从当前分支创建新分支master_copy并检出
git checkout -b master master_copy # 上面的完整版
git checkout features/performance # 检出已存在的features/performance分支
git checkout --track hotfixes/BJVEP933 # 检出远程分支hotfixes/BJVEP933并创建本地跟踪分支
git checkout v2.0 # 检出版本v2.0
git checkout -b devel origin/develop # 从远程分支develop创建新本地分支devel并检出
git checkout -- README # 检出head版本的README文件(可用于修改错误回退)
git merge origin/master # 合并远程master分支至当前分支
git cherry-pick ff44785404a8e # 合并提交ff44785404a8e的修改
git push origin master # 将当前分支push到远程master分支
git push origin :hotfixes/BJVEP933 # 删除远程仓库的hotfixes/BJVEP933分支
git push --tags # 把所有tag推送到远程仓库
git fetch # 获取所有远程分支(不更新本地分支,另需merge)
git fetch --prune # 获取所有原创分支并清除服务器上已删掉的分支
git pull origin master # 获取远程分支master并merge到当前分支
git mv README README2 # 重命名文件README为README2
git reset --hard HEAD # 将当前版本重置为HEAD(通常用于merge失败回退)
git rebase
git branch -d hotfixes/BJVEP933 # 删除分支hotfixes/BJVEP933(本分支修改已合并到其他分支)
git branch -D hotfixes/BJVEP933 # 强制删除分支hotfixes/BJVEP933
git ls-files # 列出git index包含的文件
git show-branch # 图示当前分支历史
git show-branch --all # 图示所有分支历史
git whatchanged # 显示提交历史对应的文件修改
git revert dfb02e6e4f2f7b573337763e5c0013802e392818 # 撤销提交dfb02e6e4f2f7b573337763e5c0013802e392818
git ls-tree HEAD # 内部命令:显示某个git对象
git rev-parse v2.0 # 内部命令:显示某个ref对于的SHA1 HASH
git reflog # 显示所有提交,包括孤立节点
git show HEAD@{5}
git show master@{yesterday} # 显示master分支昨天的状态
git log --pretty=format:'%h %s' --graph # 图示提交日志
git show HEAD~3
git show -s --pretty=raw 2be7fcb476
git stash # 暂存当前修改,将所有至为HEAD状态
git stash list # 查看所有暂存
git stash show -p stash@{0} # 参考第一次暂存
git stash apply stash@{0} # 应用第一次暂存
git grep "delete from" # 文件中搜索文本“delete from”

nodejs

Node.js® 是一个基于 Chrome V8 引擎 的 JavaScript 运行时。 hexo就是基于nodeJs写的,这里给出nodejs的官网。https://nodejs.org/zh-cn/

建议选择长期支持版。下载,按照提示一路默认安装。

hexo

hexo是一个快速、简洁且高效的博客框架。安装也非常简单,虽然网上教程一大堆,建议参考官方文档,官方给出的文档也非常的详细,而且都是中文的,有英语恐惧症的朋友不必害怕了。

安装hexo

这里贴出官方的安装教程https://hexo.io/zh-cn/docs/

在window下面,其实就是一行命令 的事,在确保安装好git和nodejs之后,打开Gitbash输入以下命令

1
npm install -g hexo-cli

至此,hexo已经安装完成。

建站

安装 Hexo 完成后,请执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件。

1
2
3
$ hexo init <folder>
$ cd <folder>
$ npm install

新建完成后,指定文件夹的目录如下:

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes

然后就是编辑站点配置信息_config.yml文件,配置的想起可以参考这里https://hexo.io/zh-cn/docs/configuration

next

hexo官方自带的主题有点简陋,你可以选择自行更换,把主题下载下来放到主题文件夹theme,再修改站点的配置文件里面的主题选项即可.以next主题为例.

下载

1
2
$ cd your-hexo-site
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

启用主题

与所有 Hexo 主题启用的模式一样。 当 克隆/下载 完成后,打开 站点配置文件, 找到 theme 字段,并将其值更改为 next

启用 NexT 主题

1
theme: next

到此,NexT 主题安装完成。下一步我们将验证主题是否正确启用。在切换主题之后、验证之前, 我们最好使用 hexo clean 来清除 Hexo 的缓存

至此,主题更换完成,关于next主题的配置可以参考官网给出的文档

服务器配置

再次说明我本次的部署环境vps是搬瓦工的centos64位的系统版本,不同的版本服务器配置可能有所不同,不过原理和流程是相通的.

部署原理

通过在本地编辑文本,然后使用Git远程部署到VPS的Git仓库。hexo d命令实际上只deploy了本地的public文件夹,Git Hooks实际上就是当Git仓库收到最新的push时,将Git仓库接受到的内容复制到VPS上的网站目录内。相当于完成了手动将public文件夹复制到VPS的网站根目录里。

安装配置Git

通过SHH客户端链接VPS,推荐使用的客户端xshell.然后执行

1
sudo yum install git

等待安装完成之后,输入以下命令可以查看是否安装成功

1
git --version

正确查看版本信息,则说明安装成功.

创建git用户以及配置免密登陆

这一步非常关键,也很多坑,我就是在这一步困住不少时间.

创建git用户

1
adduser git

假如没有提示输入密码,则

1
passwd git

设置密码.

接下来,赋予git用户sudo权限

1
2
chmod 740 /etc/sudoers
vim /etc/sudoers

找到以下内容

1
2
# User privilege specification
root ALL=(ALL:ALL) ALL

添加修改为

1
2
3
# User privilege specification
root    ALL=(ALL:ALL) ALL
git ALL=(ALL:ALL) ALL

假如是

1
2
# User privilege specification
root ALL=(ALL) ALL

则修改为

1
2
3
# User privilege specification
root    ALL=(ALL) ALL
git ALL=(ALL) ALL

保存,退出.

然后修改回文件的权限

1
chmod 440 /etc/sudoers

然后,切换到git用户

1
2
3
4
5
su git
cd /home/git //切换到git用户目录
mkdir blog.git //创建git仓库文件夹,以blog.git为例
cd blog.git //进入仓库目录
git init --bare //使用--bare参数初始化为裸仓库,这样创建的仓库不包含工作区

创建网站目录

1
2
3
4
cd /var/
sudo mkdir www
cd /var/www/ //切换目录
mkdir blog //创建网站目录,以blog为例

配置ssh

1
2
3
4
cd /home/git				//切换到git用户目录
mkdir .ssh //创建.ssh目录
cd .ssh
sudo vim authorized_keys

然后将本地的公钥复制到authorized_keys文件里(公钥即上文中本地执行cat ~/.ssh/id_rsa.pub查看的内容

确认文件夹的权限

1
2
3
4
5
sudo chown git:git -R /var/www/blog
sudo chown git:git -R /home/git/blog.git
#然后查看这两个文件夹是不是都属于git:git
ll /home/git/
ll /var/www/

然后,到这里,就先验证vps是否能用git用户ssh免密登陆.在本地windows打开git bash,输入命令登陆

1
ssh git@VPS的ip -p <端口>

假如可以免密登陆,不需要手动输入密码就可以登陆,那就可以跳到安装配置nginx了.假如仍然需要密码登陆,那么就是ssh公钥配置出了问题,往往是权限的原因.几经折腾,发现解决办法如下,果然是文件的权限问题

1
2
chmod 700 ~/.ssh
chmod 600 ~/.ssh/authorized_keys

修改文件的权限

安装配置nginx

安装nginx

centos安装nginx有所不同,无法向ubuntu一样之间一行命令就下载安装.安装过程如下

  1. 添加nginx到yum源

    1
    sudo rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm
  2. 安装nginx

    1
    sudo yum install -y nginx
  3. 启动

    1
    sudo systemctl start nginx.service
  4. 开机启动

    1
    sudo systemctl enable nginx.service

nginx常用命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#启动
service nginx start
#停止
nginx -s stop
#查看nginx进程
ps -ef | grep nginx
#平滑启动nginx
nginx -s reload#平滑启动的意思是在不停止nginx的情况下,重启nginx,重新加载配置文件,启动新的工作线程,完美停止旧的工作线程
#强制停止nginx
pkill -9 nginx
#检查对nginx.conf文件的修改是否正确
nginx -t -c /etc/nginx/nginx.conf
or
nginx -t
#查看版本
nginx -v
or
nginx -V

配置nignx

1
2
3
cd /etc/nginx/conf.d
sudo cp config config.bak#备份
sudo vim config

配置文件可以参考如下

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
server {
listen 80 default; #默认监听80端口
root /var/www/blog; #网站根目录
server_name ihaoming.top www.ihaoming.top; #网址
access_log /var/log/nginx/blog_access.log;
error_log /var/log/nginx/blog_error.log;
error_page 404 = /404.html;

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;
}
}

location /nginx_status {
stub_status on;
access_log off;
}
}

配置Git hooks

  • 创建post-receive文件
    git用户下执行:
1
2
cd /home/git/blog.git/hooks		//切换到hooks目录下
vim post-receive //创建文件

复制下面的内容到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}

保存退出后,执行:chmod +x post-receive赋予可执行权限。

本地操作

  • 配置Hexo
    打开本地博客根目录下的_config.yml文件,找到最后的deploy配置,修改为:
1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: git@VPS的IP:blog.git
branch: master

至此,重新生成推送就可以把博客部署到vps了.不过要想要通过域名访问,则需要自己在域名管理那里修改解析的线路使得域名解析指向vps服务器的ip.

-------------本文结束感谢您的阅读-------------