写在前面
最近打算搭建一个教程网站,专门放我写的一些教程一类的文章。本来想和http://www.wendev.site一样是自己写的,但是整天CRUD实在是太烦了,还是找点简单粗暴的办法为好。
考虑到这个网站的更新频率会非常非常慢,所以打算用Hexo
这个博客框架。毕竟纯静态的比较安全,Hexo也属于开箱即用的,比较适合这个网站。
因为以前用过Hexo,现在又要来重新使用,于是把自己的部署过程记录一下,就当是一个教程吧。
Reference
前期准备
前期没什么要准备的,主要就是安装node
和git
这两个工具。
这两个工具安装很简单,不同的平台也有不同的安装方法,这里就不再赘述了,大家自行安装就可以,网上也有很多教程。
本地部分
安装hexo-cli
要使用Hexo,需要使用npm
安装一个叫hexo-cli
的工具。安装非常简单,有点类似于vue-cli
的安装(毕竟都是node写的嘛)。在终端中执行:
sudo npm install hexo-cli -g
安装完毕后使用hexo
命令检查是否安装成功:
出现上图的输出,就表示安装成功了。
建立本地文件夹
有了hexo-cli
之后,就可以建立一个文件夹作为本地文件的路径了。
选一个自己喜欢的路径,cd过去,然后执行以下命令来初始化一个Hexo项目:
hexo init wendev_tutorial
cd wendev_tutorial
sudo npm install
这样本地文件夹就建立好了,可以在本地文件夹进行编辑与预览了。
主题安装与配置
考虑到这个站点是一个教程网站,所以我选择了我认为最合适的主题:3-hexo。理由是这个主题可以清晰地列出所有分类的所有文章,而且阅读体验还挺不错的。给作者点个赞。
主题的安装:
git clone https://github.com/yelog/hexo-theme-3-hexo.git themes/3-hexo
在_config.yml
中配置(大概在第96行):
theme: 3-hexo
然后就可以启动了:
hexo clean && hexo g && hexo s
效果(主题已经过本人略微修改):
接下来把我以前写好的一些文章放进来:
这样就可以部署上线了。
服务端部分
环境准备
如果服务器没有安装git的话,需要安装git。
此外,因为我的服务器上正在跑着我的个人网站,它已经占用了80端口,要再加一个网站的话需要做反向代理,于是需要安装nginx。
首先把我的个人网站的端口改成10000
备用,把80端口空出来,然后安装Nginx:
sudo yum -y install nginx
nginx # 启动nginx试一下
建立Git仓库
Hexo可以使用Git来部署,这样每次写完之后就都可以使用git来一键部署了,比较方便。
注意:如果本地没有配置ssh,先配一个ssh。这里因为我已经有了,就不再配置了。
开始前先切到root用户,然后执行:
useradd git # 添加一个新用户
passwd git # 设置git用户密码
su git # 切换用户进行后续操作
cd /home/git/
mkdir -p projects/blog # 把项目目录建立起来
mkdir repos && cd repos
git init --bare blog.git # 创建仓库
cd blog.git/hooks
vim post-receive # 创建一个钩子
post-receive
文件的内容如下:
#!/bin/sh
git --work-tree=/home/git/projects/blog --git-dir=/home/git/repos/blog.git checkout -f
之后退出vim,继续进行用户相关的操作:
chmod +x post-receive # 添加可执行权限
exit # 返回到root用户
chown -R git:git /home/git/repos/blog.git # 给git用户添加权限
这样Git仓库就配好了。在本地试一下能不能把空仓库拉下来:
git clone git@server_ip:/home/git/repos/blog.git
如果能拉下来,就说明配置成功了。
本地建立SSH信任关系
目前每次对git仓库进行操作都需要输入密码,不太方便。但是我们已经配置了SSH,就可以通过建立SSH信任关系来免去输入密码的步骤:
ssh-copy-id -i ~/.ssh/id_rsa.pub git@server_ip # 建立信任关系
ssh git@server_ip # 试一下能不能登录
如果不能登录或者还是要输入密码,就说明前面的操作有误,再检查一下吧。
更改git用户默认的shell
为了安全起见,这个部署用的git用户最好只能用git clone等操作,所以需要更改它默认的shell:
cat /etc/shells # 查看 git-shell 是否在登录方式里面
which git-shell # 找到git-shell的路径,记下来
vim /etc/shells
然后把刚才记下来的路径添加进去,保存,然后vim /etc/passwd
,把git:x:1000:1000::/home/git:/bin/bash
修改为git:x:1000:1000:,,,:/home/git:/usr/bin/git-shell
。
这样本地再用ssh应该就没法登录了,只能进行git操作。
部署上线
有了git仓库,就可以部署hexo文件上去了。
首先改一下_config.yml
:
deploy:
type: git
repo: git@your_ip:/home/git/repos/blog.git
branch: master
然后安装hexo-deployer-git
,否则没法使用git部署:
sudo npm install --save hexo-deployer-git
编辑package.json
文件,添加部署脚本:
"scripts": {
"build": "hexo generate",
"clean": "hexo clean",
"deploy": "hexo clean && hexo g -d",
"server": "hexo server"
},
然后执行npm run deploy
就可以把文件部署上去了,出现类似于下面的提示,就说明部署成功。
配置Nginx反向代理
首先需要配置一下域名解析记录,把tutorial.wendev.site
也绑定到现在的ip上,以便进行下一步操作。
前面配置完仓库,也把文件部署上去了,我们把Nginx反向代理也来配置一下。
cd /etc/nginx
cp nginx.conf nginx_backup.conf # 备份配置文件
vim nginx.conf
主要是开头的
user root;
和服务器部分的
server {
listen 80;
server_name www.wendev.site;
# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;
location / {
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://localhost:10000;
}
}
server {
listen 80;
server_name wendev.site;
# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;
location / {
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://localhost:10000;
}
}
server {
listen 80;
server_name tutorial.wendev.site;
# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;
location / {
root /home/git/projects/blog;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
这样就可以把两个不同的域名 www.wendev.site
和tutorial.wendev.site
分别绑定到10000端口(已有的个人网站)和新的hexo网站了。
然后重新加载一下配置:
nginx -s reload
访问http://tutorial.wendev.site、http://wendev.site和http://www.wendev.site,发现三个网站都正常,大功告成!
网友评论