作为本系列的第一篇文章,本文仅写出了阿里云服务器+hexo个人博客的搭建初始过程,并不涉及后面的next主题优化与选择。若想要深入了解如何优化next主题,那么可以去查看相关文献或者我将会在之后更新相关内容的文章。
阅读这篇文章前你最好对简单的hexo博客有个简单的认识,如果没有,可以参看一些博客系列文章。
如果你已经做好了准备,那就让我们开始吧!
Hexo博客部署方案
-
本地编写MarkDown文档→本地Hexo解析成静态页→提交到VPS上的Git和GitHub等多仓库→Nginx对外服务→用户访问
-
本地编写MarkDown文档→本地Hexo解析成静态页→提交到GitHub→直接用GitHub Page资源→用户访问
-
本地编写MarkDown文档→自动同步到VPS并安装Hexo服务解析成静态页→Nginx对外服务→用户访问
-
本地编写MarkDown文档→自动同步到VPS并安装Hexo服务解析成静态页→Hexo server对外服务→用户访问
各种方案无非是在哪解析静态页,文件怎么提交流转的不同。大家可根据自己的需求选择方案,各方案都有优缺点,这里暂且选择第一种方案。
第一种方案的优点是:
- VPS上只需要安装Git和Nginx,不用Git也要用其他工具把文件同步上去,那就索性装个Git自动同步吧
- 不在VPS上装Hexo服务,节省点资源
- Git提交后利用Git的post-receive完成自动部署到网站根目录
- 文件同时提交到GitHub和VPS,这样有个备份,VPS不行了直接改下DNS解析就可以无缝过渡
当然也有缺点
- 需要在写文档的机器上安装Hexo,换个电脑用需要重新装
- 在解放区,GitHub同步有点坑
以后兴许会选择在VPS上部署Hexo,仍然git管理,有更新的时候自动触发VPS上编译,这样就不需要在多个工作机上安装Hexo环境了。
1 准备工作
1.1 阿里云控制台中开启相关端口:
新购买的阿里云系统中默认是没有开启80端口的,而这是HTTP协议的端口号,不开启别人是无法访问你的网站的。下文中还会使用到4000端口,所以首先在阿里云控制台中开启这两个端口,具体步骤如下:
进入轻量应用服务器管理,点击防火墙:
添加80端口和4000端口
1.2 安装git
直接使用yum即可,即在命令行中输入:
yum –y install git
完成后输入git version,若显示git版本信息即安装成功
1.3 安装Node.js
Node.js 是运行在服务端的 JavaScript, 是基于 Chrome JavaScript V8 引擎建立的平台。
Hexo基于Node.js,所以安装Node.js是必须的,具体步骤如下:
1.3.1 下载安装包
我下载的是v12.14.1版本的,当然你也可以在官网上找其他版本的下载链接:
wget https://nodejs.org/dist/v12.14.1/node-v12.14.1-linux-x64.tar.xz
注:也可在官网下载下来后通过ftp软件传入
待下载完成后,进行下一步
1.3.2 解压缩改名放到/usr/local
tar xvf node-v12.14.1-linux-x64.tar.xz
将解压的 Node.js 目录移动到 /usr/local 目录下
mv node-v12.14.1-linux-x64 /usr/local/node-v12
1.3.3 软链接到/bin目录
ln -s /usr/local/node-v12/bin/node /bin/node
ln -s /usr/local/node-v12/bin/npm /bin/npm
1.3.4 配置环境变量
将 /usr/local/node-v12/bin 目录添加到 $PATH 环境变量中可以方便地使用通过 npm 全局安装的第三方工具
echo 'export PATH=/usr/local/node-v12/bin:$PATH' >> /etc/profile
注:也可vim /etc/profile,在最后面添加PATH=/usr/local/node-v12/bin
使环境变量生效
source /etc/profile
1.3.5 测试是否成功
输入node -v和npm -v,若显示版本号,即安装成功,如图:
2 安装并配置nginx
2.1 下载安装Nginx
yum -y install nginx
2.1.1 查看nginx安装路径等
whereis nginx
/usr/bin/nginx
/usr/sbin/nginx
/usr/lib64/nginx
/etc/nginx 配置文件所在位置
/usr/share/nginx
/usr/share/man/man8/nginx.8.gz
/usr/share/man/man3/nginx.3pm.gz
2.1.2 通过以下指令可以查看nginx的状态
ps -ef | grep nginx #查看状态
service nginx start #开启服务
service nginx stop #停止服务
service nginx reload #重启服务
2.2 在修改配置文件之前我们需要创建一下需要的文件夹
cd /
mkdir www
cd /www
mkdir hexo #存放博客的页面等,可以通过nginx访问(大概就是这个意思,读者get一下就行了)
mkdir myblog #初始化hexo
2.2.1 修改配置文件
vim /etc/nginx/nginx.conf
3 配置git
3.1 初始化裸库
cd /www #切换到www目录下
git init --bare blog.git #初始化一个裸库
3.1.1 此时/www目录下应该是这样的
3.2 在hooks文件中创建post-receive文件
3.2.1 添加的内容如下
#!/bin/sh
git --work-tree=/www/hexo --git-dir=/www/blog.git checkout -f #注意路径的填写
3.2.2 将此文件设置成可执行文件
chmod +x blog.git/hooks/post-receive
4 本地博客的初始化
4.1 由于使用npm会比较慢,所以我们使用cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
4.2安装全局插件
cnpm install hexo-cli hexo-server hexo-deployer-git -g
4.3 进入文件夹/www/myblog
cd /www/myblog
hexo init #初始化博客,稍微等一短时间
4.4 初始化之后需要内容进行配置
vim myblog/_config.yml
拉到最后可以发现如下配置
需要注意的是repo参数的填写:用户名@IP地址或域名:/git仓库地址,master
其余参数可以与我填写一样的。
5 完成部署
hexo三步走:
hexo clean && hexo g && hexo d #需要输入服务器密码
注:我出现了以下的问题:
hexo d后 ERROR Deployer not found: git
npm install --save hexo-deployer-git
即可
如果再执行报如下错误:
则依次执行如下命令:
git config --global user.email "you@example.com"
git config --global user.name "Your Name"
最后hexo d 部署成功
访问域名www.gmkh.top即可看到如下页面:
恭喜你!!你的个人博客初步搭建成功啦!