使用宝塔面板部署hexo博客
注意事项
- 本文使用宝塔面板辅助部署，安装参考 宝塔面板安装和基本配置
- 所有关于安装hexo的插件的命令均在网站根目录下执行
- 每次更改配置过后都需要重新生成静态文件才能看到更改后的效果
- 因为hexo是静态文件，在重新生成静态文件后需要删除浏览器缓存在重新刷新才能看到更改的页面
安装nodejs
安装nodejs版本管理器
进入宝塔面板，点击 网站 -> Node项目 ,出现以下界面安装即可
安装nodejs
点击 添加Node项目，安装nodejs，我选择的是 v14.17.6 稳定版
安装完成后，nodejs在目录 /www/server/nodejs/{version}/ ，编辑文件 /etc/profile
vim /etc/profile在最后一行添加，版本号换成自己的
export PATH=$PATH:/www/server/nodejs/v14.17.6/bin如何使配置文件生效
source /etc/profile部署hexo
安装hexo
打开宝塔 -> 文件，在 /www/wwwroot/ 目录下新建站点目录，注意 wzspace.cn 是你的域名
进入该目录
cd /www/wwwroot/wzspace.cn/创建完成后，使用npm安装
npm install hexo -g设置hexo环境变量，版本号换成自己的
ln -s /www/server/nodejs/v14.17.6/lib/node_modules/hexo/bin/hexo /usr/bin/hexo进行初始化
hexo init生成静态文件
hexo g新建网站
打开宝塔 -> 网站 -> PHP项目：
添加站点：
设置网站运行目录，点击保存，如下：
访问效果如下：
更换主题
本次使用的主题来源：https://github.com/blinkfox/hexo-theme-matery/
下载主题
进入网站目录下的 themes/ 目录，下载主题：
cd themes
git clone https://github.com/blinkfox/hexo-theme-matery.git配置
更改网站目录下的 _config.yml 文件中的theme的值为：hexo-theme-matery
主题配置详情：https://github.com/blinkfox/hexo-theme-matery/blob/develop/README_CN.md
Hexo配置详情：
https://hexo.io/zh-cn/docs/configuration
个人使用记录
数字链接
Hexo默认使用的文章永久链接格式是：
year/:month/:day/:title/这种链接格式不仅容易出现错误，而且可读性很差，abbrlink插件可以很好的解决这个问题，插件项目地址：https://github.com/rozbo/hexo-abbrlink
安装abbrlink插件
npm install hexo-abbrlink --save在网站根目录下更改站点配置文件_config.yml
permalink: p/:abbrlink/在网站根目录下添加站点配置文件_config.yml
abbrlink:
alg: crc16 #support crc16(default) and crc32
rep: dec #support dec(default) and hex重新删除缓存，生成静态文件
hexo clean
hexo g -d就可以在网站目录下的 /source/_post/{post-name}.md 文件中就能看到：
abbrlink: 52020更改 abbrlink 的值就可以自定义文章链接，更改过后记得重新生成静态文件哦
更改页脚
默认的页脚格式可能没有达到你想要的效果，你可以自定义页脚模板文件，在主题目录下的 layout/_partial/footer.ejs
- 运行天数提醒精确到秒，更改相对应的 <script> 标签下的JavaScript代码如下，其中字符串内的内容可自行更改：
<span id="sitetime"> Loading ...</span>
<script>
var calcSiteTime = function () {
var seconds = 1000;
var minutes = seconds * 60;
var hours = minutes * 60;
var days = hours * 24;
var years = days * 365;
var today = new Date();
var startYear = "<%- theme.time.year %>";
var startMonth = "<%- theme.time.month %>";
var startDate = "<%- theme.time.date %>";
var startHour = "<%- theme.time.hour %>";
var startMinute = "<%- theme.time.minute %>";
var startSecond = "<%- theme.time.second %>";
var todayYear = today.getFullYear();
var todayMonth = today.getMonth() + 1;
var todayDate = today.getDate();
var todayHour = today.getHours();
var todayMinute = today.getMinutes();
var todaySecond = today.getSeconds();
var t1 = Date.UTC(startYear, startMonth, startDate, startHour, startMinute, startSecond);
var t2 = Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond);
var diff = t2 - t1;
var diffYears = Math.floor(diff / years);
var diffDays = Math.floor((diff / days) - diffYears * 365);
var diffHours = Math.floor((diff / hours) - diffDays * 24 - diffYears * 365 * 24);
var diffMinutes = Math.floor((diff / minutes) - diffHours * 60 - diffDays * 24 * 60 - diffYears * 365 * 24 * 60);
var diffSeconds = Math.floor((diff / seconds) - diffMinutes * 60 - diffHours * 60 * 60 - diffDays * 24 * 60 * 60 - diffYears * 365 * 24 * 60 * 60);
//var diffHours = 7;var diffMinutes = 7;var diffSeconds = 7;
// 区分是否有年份.
var language = '<%- config.language %>';
if (startYear === String(todayYear)) {
document.getElementById("year").innerHTML = todayYear;
var daysTip = 'This site has been running for ' + diffDays + ' days';
if (language === 'zh-CN') {
daysTip = '<%- config.author %>已摆烂 ' + diffDays + ' 天' + diffHours + '小时' + diffMinutes + '分钟' + diffSeconds + '秒';
} else if (language === 'zh-HK') {
daysTip = '<%- config.author %>已擺爛 ' + diffDays + ' 天' + diffHours + '小時' + diffMinutes + '分鐘' + diffSeconds + '秒';
}
document.getElementById("sitetime").innerHTML = daysTip;
} else {
document.getElementById("year").innerHTML = startYear + " - " + todayYear;
var yearsAndDaysTip = 'This site has been running for ' + diffYears + ' years and '
+ diffDays + ' days';
if (language === 'zh-CN') {
yearsAndDaysTip = '<%- config.author %>已摆烂 ' + diffYears + ' 年 ' + diffDays + ' 天' + diffHours + '小时' + diffMinutes + '分钟' + diffSeconds + '秒';
} else if (language === 'zh-HK') {
yearsAndDaysTip = '<%- config.author %>已擺爛 ' + diffYears + ' 年 ' + diffDays + ' 天' + diffHours + '小時' + diffMinutes + '分鐘' + diffSeconds + '秒';
}
document.getElementById("sitetime").innerHTML = yearsAndDaysTip;
}
}
//calcSiteTime();
setInterval("calcSiteTime()",250);
</script>- 更改版权信息模板，懂一点HTML代码的可自行更改
Copyright ©
<% if (theme.time.year !== new Date().getFullYear()) { %>
<span id="year"><%- theme.time.year %>-<%- new Date().getFullYear() %></span>
<% } else { %>
<span id="year"><%- theme.time.year %></span>
<% } %>
<a href="<%- url_for('/about') %>" target="_blank"><%- config.author %></a>
| Powered by <a href="<%- url_for('/') %>" target="_blank"><%- config.title %></a>更改背景颜色
这个在主题配置详情已有说明，可以在那个基础上加上透明度，亲测，有点意思
.bg-color {
background-image: linear-gradient(to right, #228B22 0%, #8A2BE2 100%);
opacity: 0.9;
}修改模板
网站根目录下的 scaffolds/ 目录内保存着模板，其中post.md是文章模板，因为在新建文章时一般要配置一些初始设置，可以加在模板中，修改如下：
---
title: {{ title }}
date: {{ date }}
img:
top: false
hide: false
cover: false
coverImg:
password:
toc: true
mathjax: false
summary:
categories:
tags:
keywords:
---添加评论
前往 LeanCloud官网 注册账号，创建应用：
打开应用设置 -> 应用凭证：
复制AppID，AppKey和REST API 服务器地址，配置主题目录下的配置文件：
# The configuration of the Valine comment module is not activated by default.
# To use it, activate the configuration item and set appId and appKey.
# Valine 评论模块的配置，默认为不激活，如要使用，就请激活该配置项，并设置 appId 和 appKey.
valine:
enable: true
appId: 6uAzMWIBFLe06rxy8cUFfpQs-MdYXbMMI # 必填
appKey: 2rmetdma3FQoLdhgymHWI5FX # 必填
serverURLs: https://6uazmwib.api.lncldglobal.com # 必填 https://你的api
notify: false
verify: false
visitor: false # 文章阅读统计
lang: zh-CN
highlight: true # 代码高亮
avatarForce: false # 每次访问强制拉取最新的评论列表头像
recordIP: false # 是否记录评论者IP
enableQQ: false # 是否启用昵称框自动获取QQ昵称和QQ头像
requiredFields: ['nick', 'mail'] # 设置必填项
mathJax: false # 数学公式功能
meta: ['nick','mail','link']
js: https://cdn.jsdelivr.net/gh/HCLonely/Valine@latest/dist/Valine.min.js
avatar: 'wavatar' # Gravatar style : mm/identicon/monsterid/wavatar/retro/hide
pageSize: 10
placeholder: '在这里写下你想说的话哦~' # Comment Box placeholder
background: /medias/comment_bg.png
coolpushkey:
emojiCDN: # 设置表情包CDN, https://valine.js.org/emoji.html
emojiMaps: null评论添加邮箱提醒
来源：https://github.com/DesertsP/Valine-Admin
先看结果：
配置环境变量
前往 LeanCloud官网，打开刚才创建的应用 -> 云引擎 -> WEB -> 设置，添加环境变量：
部署项目
打开云引擎 -> WEB -> 部署 -> 部署项目 -> Git部署：
配置Git，复制 https://github.com/DesertsP/Valine-Admin.git，粘贴保存
再次点击部署项目，划到最底，点击部署，等待部署完成，部署完成，部署完成后发送怕
绑定域名
打开设置 -> 域名绑定，绑定你的域名，如何在云服务器控制台进行云解析，解析到下图中推荐DNS配置的CNAME域名下
更改邮箱模板
可选，彩虹模板，先看效果
在配置环境变量那里加上邮箱模板配置结果如下：
MAIL_SUBJECT：
${PARENT_NICK}同学，您曾在『${SITE_NAME}』上的留言有新回复啦~MAIL_SUBJECT_ADMIN：
${NICK}同学在您的『${SITE_NAME}』留言啦~MAIL_TEMPLATE：
<div style="border-radius: 10px 10px 10px 10px;font-size:13px; color: #555555;width: 666px;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;margin:50px auto;border:1px solid #eee;max-width:100%;background: #ffffff repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);">
<div style="width:100%;background:#49BDAD;color:#ffffff;border-radius: 10px 10px 0 0;background-image: -moz-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));background-image: -webkit-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));height: 66px;">
<p style="font-size:15px;word-break:break-all;padding: 23px 32px;margin:0;background-color: hsla(0,0%,100%,.4);border-radius: 10px 10px 0 0;">
您在
<a style="text-decoration:none;color: #ffffff;" href="${SITE_URL}">${SITE_NAME}</a>
上的留言有新回复啦！
</p>
</div>
<div style="margin:40px auto;width:90%">
<p>
${PARENT_NICK} 同学，您曾在
<a style="text-decoration:none; color:#12addb" href="${SITE_URL}">${SITE_NAME}</a>
上留言：
</p>
<div style="background: #fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);margin:20px 0px;padding:15px;border-radius:5px;font-size:14px;color:#555555;">
${PARENT_COMMENT}
</div>
<p>${NICK} 给您的回复如下：</p>
<div style="background: #fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);margin:20px 0px;padding:15px;border-radius:5px;font-size:14px;color:#555555;">
${COMMENT}
</div>
<p>
您可以点击
<a style="text-decoration:none; color:#12addb" href="${POST_URL}#comments">查看回复的完整內容</a>
，欢迎再次光临
<a style="text-decoration:none; color:#12addb" href="${SITE_URL}"> ${SITE_NAME}</a>
。
</p>
<style type="text/css">
a:link{
text-decoration:none
}
a:visited{
text-decoration:none
}
a:hover{
text-decoration:none
}
a:active{
text-decoration:none
}
</style>
</div>
</div>MAIL_TEMPLATE_ADMIN：
<div style="border-radius: 10px 10px 10px 10px;font-size:13px; color: #555555;width: 666px;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;margin:50px auto;border:1px solid #eee;max-width:100%;background: #ffffff repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);">
<div style="width:100%;background:#49BDAD;color:#ffffff;border-radius: 10px 10px 0 0;background-image: -moz-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));background-image: -webkit-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));height: 66px;">
<p style="font-size:15px;word-break:break-all;padding: 23px 32px;margin:0;background-color: hsla(0,0%,100%,.4);border-radius: 10px 10px 0 0;">
您的
<a style="text-decoration:none;color: #ffffff;" href="${SITE_URL}">${SITE_NAME}</a>
上有新留言啦！
</p>
</div>
<div style="margin:40px auto;width:90%">
<p>
${NICK} 同学，在您的
<a style="text-decoration:none; color:#12addb" href="${SITE_URL}">${SITE_NAME}</a>
上留言：
</p>
<div style="background: #fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);margin:20px 0px;padding:15px;border-radius:5px;font-size:14px;color:#555555;">
${COMMENT}
</div>
您可以点击
<a style="text-decoration:none; color:#12addb" href="${POST_URL}#comments">查看完整內容</a>
。
</p>
<style type="text/css">
a:link{
text-decoration:none
}
a:visited{
text-decoration:none
}
a:hover{
text-decoration:none
}
a:active{
text-decoration:none
}
</style>
</div>
</div>可用参数配置，有HTML基础的也可以自行发挥
| 模板变量 | 说明 |
|---|---|
| SITE_NAME | 博客名称 |
| SITE_URL | 博客首页地址 |
| POST_URL | 文章地址（完整路径） |
| PARENT_NICK | 收件人昵称（被@者，父级评论人） |
| PARENT_COMMENT | 父级评论内容 |
| NICK | 新评论者昵称 |
| COMMENT | 新评论内容 |
留言板问题
这个主题的留言板我在使用时无法评论也无法显示，增加评论后只显示一个黑框，后来也尝试了很多中改法，发现这是因为导入了其他js文件引起的阻塞（猜测），在主题文件夹下的 layout/ 文件夹下，contact.ejs 文件即留言板的模板文件，默认的模板文件在开头导入了以下文件：
<link rel="stylesheet" type="text/css" href="/css/style.css" />
<link rel="stylesheet" type="text/css" href="/css/barrager.css">
<script src="/libs/valine/av-min.js"></script>
<script src="/libs/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.barrager.js"></script>我也不知道是哪一个的问题，导入的js文件内容太多，没有深究，将导入文件的代码删除后就不会引起阻塞了，然后在最下面的“其他评论card”卡片下增加代码：
<% if (theme.valine && theme.valine.enable) { %>
<%- partial('_partial/valine') %>
<% } %>最后就可以正常评论了，因为我用的是valine评论系统，所以增加此代码，但上面的留言板不能使用还占位置，鉴于此，我把它删了，最后修改的代码如下：
<%- partial('_partial/bg-cover') %>
<main class="content">
<div id="contact" class="container chip-container">
<div class="card">
<div class="card-content">
<div class="tag-title center-align">
<i class="fas fa-comments"></i> <%= __('contact') %>
</div>
<%- page.content %>
</div>
</div>
<!--其他评论card-->
<div class="card">
<% if (theme.gitalk && theme.gitalk.enable) { %>
<%- partial('_partial/gitalk') %>
<% } %>
<% if (theme.gitment.enable) { %>
<%- partial('_partial/gitment') %>
<% } %>
<% if (theme.disqus.enable) { %>
<%- partial('_partial/disqus') %>
<% } %>
<% if (theme.livere && theme.livere.enable) { %>
<%- partial('_partial/livere') %>
<% } %>
<% if (theme.valine && theme.valine.enable) { %>
<%- partial('_partial/valine') %>
<% } %>
<% if (theme.minivaline && theme.minivaline.enable) { %>
<%- partial('_partial/minivaline') %>
<% } %>
<% if (theme.waline && theme.waline.enable) { %>
<%- partial('_partial/waline') %>
<% } %>
<% if (theme.twikoo && theme.twikoo.enable) { %>
<%- partial('_partial/twikoo') %>
<% } %>
<% if (theme.changyan && theme.changyan.enable) { %>
<%- partial('_partial/changyan') %>
<% } %>
</div>
</div>
</main>本地编写代码
服务器写代码对我来说是一件痛苦又无奈的事，想要本地写代码
参考 本地连接服务器远程写代码
搭建图床
推荐使用图床作为图片链接，减轻服务器压力
我现在使用的是 路过图床，使用很简单，上传图片，然后复制链接即可
我错了，这玩意老是删我图片，不讲武德
推荐使用自己的域名创建一个子域名来单独保存数据，或者使用 GitHub 创建一个仓库保存，但是github有时候访问会比较困难
