基于Hexo+Nginx+Git在云服务器上搭建个人网站

基于Hexo+Nginx+Git在云服务器上搭建个人网站

欢迎查看我的个人网页：小念

环境

本地环境：Windows11专业版 21H2

云服务器：腾讯云 轻量应用服务器 Ubuntu Server 20.04 LTS 64bit

本地端

安装 Git

Git Git 教程

安装Node.js

Node.js

安装Hexo

打开 Git Bash，输入命令：

npm install -g hexo-cli
hexo version

显示出版本号则成功。

自定义博客文件夹名，默认生成在C盘用户文件夹。

hexo init myblog
cd myblog

小技巧：在myblog文件夹上右键点击“Git Bash Here” 即可快速打开bash到这个文件夹内。

测试Hexo是否能生成网页：

输入hexo generate 或者 hexo g ：生成静态文件。

hexo generate

输入 hexo server - port xxxx 或者 hexo s -p xxxx 在指定端口启动本地服务器(默认在4000端口)。

hexo server - port xxxx

在本地访问localhost:xxxx或者在上面指令后加 -o 即可打开Hexo博客主页。

默认是landscape主题，图中是NexT主题。

服务器端

通过服务器官方网页登陆或者SSH登录服务器终端（PuTTY/XShell）。

安装Git和Nginx

apt-get update
apt-get install git nginx -y

创建Git仓库

建立文件路径并修改权限：

mkdir /var/repo/
chown -R $USER:$USER /var/repo/
chmod -R 755 /var/repo/

创建远程Git仓库：

cd /var/repo
git init --bare myblog.git

配置Nginx

创建目录并修改目录所有权和权限，用于存放静态网页文件：

mkdir -p /var/www/hexo
chown -R $USER:$USER /var/www/hexo
chmod -R 755 /var/www/hexo

修改Nginx的配置文件，把网页根目录指向刚刚创建的文件夹：

vim /etc/nginx/sites-available/default

重启Nginx：

service nginx restart

此时浏览器输入自己的公网ip就可以访问到Nginx的空页（403 Forbidden）。

配置Git hooks文件

vim /var/repo/myblog.git/hooks/post-receive

打开文件，输入以下代码：

#!/bin/bash
git --work-tree=/var/www/hexo --git-dir=/var/repo/myblog.git checkout -f

保存后修改权限：

chmod +x /var/repo/myblog.git/hooks/post-receive

部署本地Hexo

回到本地hexo文件夹，Git Bash输入：

git clone root@{云服务器IP}:/var/repo/myblog.git

然后修改文件夹中的配置文件 “_config.yml”：

找到"url：" 将后面的网址改为服务器网址。

找到"deploy"，改为：

deploy:
 type: 'git'
 repo:   {服务器用户名}@{服务IP}:/var/repo/myblog.git：

保存后，在Bash输入：

hexo clean
hexo generate
hexo deploy

或者

hexo clean && hexo g -d

输入服务器的密码，完成部署。

当然，我们也可以不用输入密码就可以连接服务器

生成ssh密钥

git config --global user.name "your username"
git config --global user.email "your email"

ssh-keygen -t rsa -C "your email"

输入后会有三次询问，不管直接回车即可。

之后在C盘用户文件夹里就会出现.ssh文件夹，里面的id_rsa.pub就是密钥。

建立SSH信任关系

ssh-copy-id -i ~/.ssh/id_rsa.pub {服务器用户名}@{服务器ip}
ssh -T {服务器用户名}@{服务器ip}

如果不需要密码就可以直接登录，说明配置成功。

至此，就可以使用你的服务器ip或者域名进入博客啦。

结束语

经过一天的折腾，终于在服务器上成功部署了Hexo博客。曾经遇到过部署之后样式全部丢失的情况，在网上找了许多方法都不能解决。网上大部分教程都是将Hexo部署在Github或者Gitee上面，而部署在服务器上的教程并不多，所以写这一篇记录一下第一次搭建Hexo的过程。

补充

在文章中插入图片：除了修改hexo配置文件和插件文件之外，md的插入图片代码也要写成类似<img src="newHexoBlog\final.png"/>的形式，前面没有"\"。写成![]()在我的环境下是显示不出来的，原因可能与这个有关：HEXO博客文章图片展示问题

参考资料

​ Hexo 博客配置指南

​ 阿里云服务器+Hexo+Nginx搭建个人博客网站

​ HEXO插入图片（详细版）