hexo+腾讯云服务器搭建一个自己的博客
我的博客: http://www.elcarimqaq.top/
前期准备
node.js: https://nodejs.org/en/
git:https://git-scm.com/download/win
hexo官方文档:https://hexo.io/zh-cn/docs/index.html
安装hexo
npm install -g hexo-cli
# 由于我懒得添加环境变量,所以hexo命令前要加npx才能成功,npx hexo <command>,将 Hexo 所在的目录下的 node_modules 添加到环境变量之中即可直接使用 hexo <command>
npx hexo -v #验证是否安装成功
在你想要存放博客的文件夹下初始化文件夹,例如我的为 E:\workspace
npx hexo s #npm hexo init blog #初始化blog文件夹,bolg可替换为你的自定义名字
cd blog
npx install #安装必备的组件
npx hexo g #生成静态网页
npx hexo s #npm hexo s
这样本地的网站配置就弄好啦,然后浏览器打开http://localhost:4000/, 就可以看到我们的博客。
如果hexo s 启动服务后 打开localhost:4000 无响应:
用 管理员身份 打开命令窗口输入一下命令
netstat -o -n -a | findstr :4000
,发现4000端口已经有服务在使用了,通过taskkill /F /PID XXXX
,结束掉占用了这个端口号的进程。
当然也可以选择换一个端口号
hexo s -p 4001
,一般就不会有端口号冲突了
常用hexo命令
npm install hexo -g #安装Hexo
npm update hexo -g #升级
hexo init #初始化博客
命令简写
hexo n "我的博客" == hexo new "我的博客" #新建文章
hexo g == hexo generate #生成
hexo s == hexo server #启动服务预览
hexo d == hexo deploy #部署
hexo server #Hexo会监视文件变动并自动更新,无须重启服务器
hexo server -s #静态模式
hexo server -p 5000 #更改端口
hexo server -i 192.168.1.1 #自定义 IP
hexo clean #清除缓存,若是网页正常情况下可以忽略这条命令
部署到GitHub
关于github在电脑上的配置这里不赘述,这里是将 Hexo 博客部署到 GitHub Pages 上。
新建一个 repository。如果你希望你的站点能通过域名 <你的 GitHub 用户名>.github.io
访问,你的 repository 应该直接命名为 <你的 GitHub 用户名>.github.io
。
hexo有一键部署,首先安装npm install hexo-deployer-git --save
,https://github.com/hexojs/hexo-deployer-git
找到根目录下的_config.yml,找到Deployment,修改为
deploy:
type: git
repo: <repository url> #https://github.com/ElcarimQAQ/elcarimqaq.github.io
branch: [branch]
message: [message]
npx hexo deploy
博客已经成功部署到 GitHub Pages 上面,这时候我们访问一下 GitHub Repository 同名的链接,这时候我们就可以看到跟本地一模一样的博客内容了。
这些内容实际上是博客文件夹下面的 public 文件夹下的所有内容,Hexo 把编译之后的静态页面内容上传到 GitHub 的 master 分支上面去了。
部署到云服务器
我这里使用的是腾讯云服务器
操作系统:Debian 11.1
前置:首先要在云服务器上创建一个你自己的用户,并配置好ssh
创建博客的目录,并给你的用户添加权限
su root
mkdir /home/blog
chown ylb -R /home/blog #给你的用户添加权限
安装配置nginx
Nginx是一款轻量级的Web服务器、反向代理服务器,由于它的内存占用少,启动极快,高并发能力强,在互联网项目中广泛应用。
apt-get install nginx
systemctl start nginx.service #启动nginx服务器
访问你的主机ip地址 看一下是否安装成功
修改配置
#配置目录sites-available
cd /etc/nginx/sites-available/
cp default elcarimqaq.top #建议命名为你的域名
vim elcarimqaq.top
#修改配置
server {
listen 80;
listen [::]:80;
server_name elcarimqaq.top;
root /home/blog;
}
#配置目录sites-enabled
ln -s /etc/nginx/sites-available/elcarimqaq.top /etc/nginx/sites-enabled/elcarimqaq.top #软连接
#取消default,否则配置会冲突
unlink default
#进行检查,配置是否正确
nginx -t
#重启服务器
systemctl restart nginx.service
创建 git 仓库,用于存放博客网站资源。
回到当前用户的home目录
#创建裸仓库
git init --bare blog.git
#使用hook同步网站根目录
cd blog.git/hooks
vim post-receive
#修改文件
#!/bin/sh
git --work-tree=/home/blog--git-dir=/home/ylb/blog.git checkout -f
#修改权限
chmod +x post-receive
为什么不直接将裸仓库克隆到 Web 根目录下呢?
出于项目安全的考虑,避免了将整个仓库历史暴漏在 Web 服务中。
最后更改本地的config的deploy为你的git仓库
deploy:
type: git
repo: ylb@服务器ip:/home/ylb/blog.git #https://github.com/ElcarimQAQ/elcarimqaq.github.io
branch: master
message:
更换主题
如果你不喜欢默认的主题,可以对主题进行更换。主题传送门:https://hexo.io/themes/
我使用的主题为butterfly,在blog目录中打开命令行输入:
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
这是将主题下载到blog目录的themes主题下的文件夹中。打开站点的_config.yml配置文件,修改主题为butterfly:theme: butterfly
主题butterfly
butterfly的官方网站:https://butterfly.js.org/
你可以参考官方的文档进行一些配置的修改,我这里也会记录一些。
文章置顶
hexo-generator-index是官方默认的博客文章排序插件,无需额外安装。你可以直接在文章的front-matter区域里添加sticky: 1属性来把这篇文章置顶。数值越大,置顶的优先级越大。
评论区
butterfly支持多种评论区,我使用的为Valine
Valine官方文档:https://valine.js.org/quickstart.html
首先要注册一个LeanCloud 账号,然后创建一个你的评论应用。修改配置_config.butterfly.yml初始化对象中的appId
和appKey
的值为你的应用的值即可。
当然别忘了要下载
# Install valine
npm install valine --save
可以看到效果: