Web开发编程网
分享Web开发相关技术

如何部署hexo博客到VPS服务器上

作为一个勤奋的程序员,通常都会有一个自己的技术博客,用于记录日常的学习体会或总结,搭建博客的方式也有很多,如果自己没有vps服务器,那么可以在博客园、CSDN、SegmentFault等网站注册账户进行博客的写作,如果有自己的vps服务器,那么可以搭建更加灵活的wordpress、typecho等博客网站。当然,没有服务器的还可以搭建hexo博客托管在github pages上,这些教程不在本博客的讨论范围,有兴趣的可以自己去百度一下相关资料,本博客要讲的是在自己的vps服务器上搭建一个hexo博客,没有服务器的可以去Vultr官网购买:https://www.vultr.com/?ref=7122677,通过这个链接注册并购买服务器会有10美元赠送,我的博客就是托管在这家的vps服务器,如何你不舍得出这些服务器费用,把hexo博客托管在github pages也是一个不错的选择。

准备工作:本地安装相关工具

 安装git

git官网下载地址:https://git-scm.com/downloads
安装好后,git自带一个可以在windows上运行的shell: git bash, 后面操作hexo就使用这个git自带的shell,打开方式跟cmd一模一样,在 git bash 界面输入 pwd 就能看到当前用户所在的目录。

安装node.js

node.js官网下载地址:https://nodejs.org/zh-cn/download/ 尽量安装最新稳定版本,如果遇到报错信息,请自行检查操作步骤或者查找相关解决办法。安装成功后,执行如下命令:

$ node -V

如果提示了版本号,说明安装成功了。

安装xshell

xshell用于远程登录你的vps服务器,官网下载地址:https://www.netsarang.com/xshell_download.html 记住选择home/school 免费版本进行下载,否则过了试用期你就用不了xshell了,具体安装教程这里也不进行阐述,请自行查阅相关教程。

本地配置

安装hexo

hexo的官网地址是:https://hexo.io/zh-cn/docs/index.html

详细的文档你可以等有空的时候再看,这里只需要知道基本操作就行了,打开git bash, 然后执行安装命令

 $ npm install -g hexo-cli

接下来我们就本地创建一个hexo站点:

$ hexo init myblog // 以myblog为目录名建立站点文件夹

$ cd myblog

$ npm install // 安装相关依赖

安装完依赖后,就可以启动本地服务器进行预览了,这个我们稍后再说,因为hexo自带的默认主题不好看,这里想换成next主题,这个主题的官网地址是:http://theme-next.iissnan.com/getting-started.html 执行以下命令进行安装:

$ cd myblog // 先切回本地站点根目录

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

然后打开_config.yml hexo博客配置文件,修改theme字段的值为next:

# Extensions
 ## Plugins: https://hexo.io/plugins/
 ## Themes: https://hexo.io/themes/
 theme: next // 这里讲默认值改为 next

# Deployment

另外,我个人比较喜欢next主题的侧边导航布局,所以也改了一些next主题的配置文件_config.yml,将Scheme的值改为Pisces:

# ---------------------------------------------------------------
 # Scheme Settings
 # ---------------------------------------------------------------

# Schemes
 #scheme: Mist
 scheme: Pisces // 选用这个
 #scheme: Gemini

然后执行以下命令,来启动本地服务器进行预览,预览地址为 http://localhost:4000:

$ hexo server

好了,下一步就是实现hexo部署到服务器,部署到服务器时,依次执行以下三个命令:

$ hexo clean // 清楚缓存

$ hexo generate

$ hexo deploy

当然,现在还不能部署,需要进行ssh相关的配置。

本地ssh配置

**Hexo部署是通过git来完成的,而git又是基于ssh连接的,所以需要在本地和服务端进行ssh相关配置。**

打开git bash, 执行以下命令:

$ git config --global user.email "你的邮箱"

$ git config --global user.name "你的用户名"

这里的邮箱和用户名都是服务器用于记录git提交记录的,然后是本地端生成ssh Key:

$ ssh-keygen -t rsa -C "你的邮箱" 
// 执行这个命令会提示输入用于保存的密钥名和口令之类的,都不填,
//执行完后会在C:\Users\Administrator\.ssh目录下生成id_rsa
//和id_rsa.pub两个文件,其中id_rsa.pub
//文件里的内容是等会要复制到服务器那里的

可以在git bash执行以下命令获取到id_rsa.pub文件里的内容:

$ cat .ssh/id_rsa.pub // 执行后可以看到公钥内容

VPS服务器配置

服务器端ssh配置

执行以下命令查看是否已经安装了ssh服务器:

$ rpm -qa |grep ssh

如果返回以下结果,说明已经安装了ssh:

openssh-5.3p1-123.el6_9.x86_64
 openssh-server-5.3p1-123.el6_9.x86_64
 libssh2-1.4.2-2.el6_7.1.x86_64
 openssh-clients-5.3p1-123.el6_9.x86_64

如果提示没有安装,则需要执行 yum install ssh 来安装。

执行以下命令查看 ssh 服务器的状态:

$ service sshd status

如果提示:

openssh-daemon (pid 1298) is running...

说明ssh正在运行。

### VPS服务器创建一个git用户

# adduser git //创建用户

# passwd git //下一步会提示你设置密码

# su //检查是否有安装sudo

如果没有安装sudo, 可以执行 yum install sudo 进行安装。

接下来给予 git 用户 root 权限,编辑 /etc/sudoers文件,添加一行:

root ALL=(ALL) ALL
git ALL=(ALL) ALL #这个是添加的

然后在服务器端用户主目录下新建.ssh文件夹,拷贝本地在前面步骤生成的公钥内容到.ssh目录下的authorized_keys:

su git

$ cd ~

$ mkdir .ssh

$ cd .ssh

$ echo "id_rsa.pub文件里的内容" > authorized_keys

到了这一步,完成了本地和服务器的ssh配置,也就是说到这里一步,在本地可以在git bash通过 ssh登录服务器了,相关命令如下,可能会需要你输入git用户的密码:

$ ssh [email protected]你的域名或者是你的vpsip //@前是前面在服务器创建的git用户

当前如果要实现域名访问部署到VPS服务器的博客,还差两个步骤,一个是安装nginx web服务器,另一个就是VPS服务器里git仓库的配置。

nginx 安装

另外,我们买了vps后可能需要托管不止一个网站,所以这里我推荐使用军哥的lnmp一键安装包,安装完后,就可以创建多个虚拟主机运行不同的网站,包括wordpress、typechoe等。

安装教程可以去军哥的lnmp一键安装包官网:https://lnmp.org/install.html

执行以下命令就可以开始lnmp的安装,安装lnmp前先切回root用户:

su root

会提示你输入root密码, 然后执行以下命令进行lnmp的安装:

wget -c http://soft.vpser.net/lnmp/lnmp1.5.tar.gz && tar zxf lnmp1.5.tar.gz && cd lnmp1.5 && ./install.sh lnmp

安装成功后会有如下提示:

Checking ...
 Nginx: OK
 MySQL: OK
 PHP: OK
 PHP-FPM: OK
 Clean src directory...
 +------------------------------------------------------------------------+
 | LNMP V1.5 for CentOS Linux Server, Written by Licess |
 +------------------------------------------------------------------------+
 | For more information please visit https://lnmp.org |
 +------------------------------------------------------------------------+
 | lnmp status manage: lnmp {start|stop|reload|restart|kill|status} |
 +------------------------------------------------------------------------+
 | phpMyAdmin: http://IP/phpmyadmin/ |
 | phpinfo: http://IP/phpinfo.php |
 | Prober: http://IP/p.php |
 +------------------------------------------------------------------------+
 | Add VirtualHost: lnmp vhost add |
 +------------------------------------------------------------------------+
 | Add VirtualHost: lnmp vhost add |
 +------------------------------------------------------------------------+
 | Default directory: /home/wwwroot/default |
 +------------------------------------------------------------------------+
 | MySQL/MariaDB root password: ********** |
 +------------------------------------------------------------------------+
 +-------------------------------------------+
 | Manager for LNMP, Written by Licess |
 +-------------------------------------------+
 | https://lnmp.org |
 +-------------------------------------------+
 nginx (pid 21333 21331) is running...
 php-fpm is runing!
 SUCCESS! MySQL running (21856)
 Active Internet connections (only servers)
 Proto Recv-Q Send-Q Local Address Foreign Address State
 tcp 0 0 0.0.0.0:3306 0.0.0.0:* LISTEN
 tcp 0 0 0.0.0.0:80 0.0.0.0:* LISTEN
 tcp 0 0 0.0.0.0:22 0.0.0.0:* LISTEN
 tcp 0 0 :::22 :::* LISTEN
 Install lnmp takes 32 minutes.
 Install lnmp V1.5 completed! enjoy it.

然后我们就是要在vps服务器上添加一个虚拟主机,添加之前,可以先将你的博客域名解析到vps服务器ip,添加虚拟主机的教程,这里不进行阐述,请自行查看教程:https://lnmp.org/faq/lnmp-vhost-add-howto.html 里面的图文教程都比较详细,如果这都看不懂就重新审视一下自己吧。这里假定你的域名是 www.f2ecoder.net:

[[email protected] ~]# lnmp vhost add
 +-------------------------------------------+
 | Manager for LNMP, Written by Licess |
 +-------------------------------------------+
 | https://lnmp.org |
 +-------------------------------------------+
 Please enter domain(example: www.lnmp.org): www.f2ecoder.net
 Your domain: www.f2ecoder.net
 Enter more domain name(example: lnmp.org *.lnmp.org):
 Please enter the directory for the domain: www.f2ecoder.net
 Default directory: /home/wwwroot/www.f2ecoder.net:
 Virtual Host Directory: /home/wwwroot/www.f2ecoder.net
 Allow Rewrite rule? (y/n) y
 Please enter the rewrite of programme,
 wordpress,discuzx,typecho,thinkphp,laravel,codeigniter,yii2 rewrite was exist.
 (Default rewrite: other):
 You choose rewrite: other
 Enable PHP Pathinfo? (y/n) y
 Enable pathinfo.
 Allow access log? (y/n) y
 Enter access log filename(Default:www.f2ecoder.net.log):
 You access log filename: www.f2ecoder.net.log
 Create database and MySQL user with same name (y/n) y
 Enter current root password of Database (Password will not shown):
 OK, MySQL root password correct.
 database name: hexo_blog
 Your will create a database and MySQL user with same name: hexo_blog
 Please enter password for mysql user hexo_blog: **********
 Your password: ********
 Add SSL Certificate (y/n) n

Press any key to start create virtul host...

Create Virtul Host directory......
 set permissions of Virtual Host directory......
 You select the exist rewrite rule:/usr/local/nginx/conf/rewrite/other.conf
 Test Nginx configure file......
 nginx: the configuration file /usr/local/nginx/conf/nginx.conf syntax is ok
 nginx: configuration file /usr/local/nginx/conf/nginx.conf test is successful
 Reload Nginx......
 Gracefully shutting down php-fpm . done
 Starting php-fpm done
 Add database Sucessfully.
 ================================================
 Virtualhost infomation:
 Your domain: www.f2ecoder.net
 Home Directory: /home/wwwroot/www.f2ecoder.net
 Rewrite: other
 Enable log: yes
 Database username: hexo_blog
 Database userpassword: **********
 Database Name: hexo_blog
 Create ftp account: no
 ================================================

到时放博客静态文件的网站目录即是:/home/wwwroot/www.f2ecoder.net,这个目录我们要赐予git用户访问的权限,因为到时部署hexo博客时,git会使用钩子将相关静态文件复制这个虚拟主机网站根目录,执行以下命令:

chown git:git /home/wwwroot/www.f2ecoder.net

执行完虚拟主机的安装后,并赐予git用户相关权限后,我们就要进行git的配置了,使用以下命令切换到git用户:

su git

 git 配置

在xshell命令行输入git –version,然后回车,如果返回git version 1.7.1,说明已经git。然后就是初始化git仓库:

$ cd ~

$ mkdir myblog.git

$ cd myblog.git

$ git init --bare // 初始化git仓库

接下来配置git仓库的hooks钩子,目的是实现git仓库的网站代码跟虚拟主机网站根目录的网站代码进行同步,在git仓库hooks目录下创建文件post-receive并修改权限:

$ cd hooks

$ touch post-receive

$ chmod 755 post-receive

将以下内容添加到post-receive中:

#!/bin/bash
 GIT_REPO=/home/git/myblog.git
 TMP_GIT_CLONE=/tmp/myblog
 PUBLIC_WWW=/home/wwwroot/www.f2ecoder.net // 这个即虚拟主机网站根目录
 rm -rf ${TMP_GIT_CLONE}
 git clone $GIT_REPO $TMP_GIT_CLONE
 rm -rf ${PUBLIC_WWW}/*
 cp -rf ${TMP_GIT_CLONE}/* ${PUBLIC_WWW}

到了这里,配置相关的工作就做完了,当然,在部署前还有一些准备工作要做。

 部署前准备

安装hexo git部署模块

在本地hexo站点根目录执行:

$ npm install hexo-deployer-git --save

 修改配置文件_config.yml

hexo博客url配置

# URL
 ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
 url: http://www.f2ecoder.net #你的博客网址
 root: /

hexo部署方式配置

deploy:
 type: git
 repo: [email protected]:/home/git/myblog.git #@ 后面可以改成你的vps服务器ip
 branch: master

正式部署hexo博客到VPS

$ hexo clean // 清除缓存

$ hexo g // 生成静态资源

$ hexo d // 部署到VPS服务器

然后在浏览器打开 http://www.f2ecoder.net 就可以看到效果了,如果不成功,请查阅相关提示信息进行排查。

———-
参考资料:

– https://lnmp.org/install.html
https://hexo.io/zh-cn/docs/index.html
– http://theme-next.iissnan.com/getting-started.html

未经允许不得转载:WEB开发编程网 » 如何部署hexo博客到VPS服务器上
微信扫码关注微信公众号

WEB开发编程网

谢谢支持,我们一直在努力

安全提示:您正在对WEB开发编程网进行赞赏操作,一但支付,不可返还。