基于Hexo+Nginx+Git在云服务器上搭建个人网站
欢迎查看我的个人网页:小念
环境
本地环境:Windows11专业版 21H2
云服务器:腾讯云 轻量应用服务器 Ubuntu Server 20.04 LTS 64bit
本地端
安装 Git
安装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博客文章图片展示问题