搭建博客[^1]
今天搞了一天的hexo自动发布，终于终于终于算是搞好了，特别感谢sy-post-publish作者zhi大佬，不仅贡献了这么好用的hexo博客自动发布工具而且在我这个菜鸡排查问题的时候一直给我指明前进方向，比如一开始我以为hexo没有适配高版本的nodejs导致生成的public文件是空的，所以我一直都是用的低版本nodejs，结果最后大佬给我排查错误的时候终于排查出来了问题，是因为我特么hexo的版本太低了。
有一说一，今天让我感觉自己并不适合学习计算机，因为有时候看到报错真的不像大佬们那么敏锐，我特么连弄个git分支都搞得七零八碎。现在还是只懂最基本的git命令，稍微高端的什么pr创建多个分支回退版本什么的对我都还是扯淡。有时候啊，兴趣其实并没什么卵用，不会的还是不会掉头发的还是掉头发，就像我之前dark+主题修改，困扰我几个月的问题，被萌佬一语道破，唉
在package.json文件夹中更改hexo版本
{
"name": "hexo-site",
"version": "0.0.0",
"private": true,
"scripts": {
"build": "hexo generate",
"clean": "hexo clean",
"deploy": "hexo deploy",
"server": "hexo server"
},
"hexo": {
"version": "6.3.0"
},
"dependencies": {
"hexo": "^6.3.0",
"hexo-deployer-git": "^0.2.0",
"hexo-generator-archive": "^0.1.5",
"hexo-generator-category": "^0.1.3",
"hexo-generator-feed": "^1.2.2",
"hexo-generator-index": "^0.2.1",
"hexo-generator-json-content": "^2.2.0",
"hexo-generator-tag": "^0.2.0",
"hexo-git-backup": "^0.1.2",
"hexo-helper-live2d": "^3.1.1",
"hexo-renderer-ejs": "^0.3.1",
"hexo-renderer-marked": "^0.3.2",
"hexo-renderer-stylus": "^0.3.3",
"hexo-server": "^0.3.1",
"hexo-tag-aplayer": "^3.0.4",
"hexo-tag-bili": "^1.0.0",
"hexo-tag-fancybox_img": "^1.0.1",
"live2d-widget-model-hibiki": "^1.0.5"
}
}
同时中间还有一次问题是在.gitignore里面，其实这种生成的public和node_modules都不应该放入GitHub，只需要代码就行.
我一开始还以为GitHubpage和vercel是相辅相成的，必须先开启GitHubpage才能使用vercel，但是事实上并不是如此，它俩都是静态网站托管服务，功能类似，如果是GitHubpage进行托管的话如果不是纯粹的前端代码，需要把生成的public这类文件夹名字改为docs(在hexo代码中就是在_config.yml中把它写成public_dir: doc而不是public_dir: public。而vercel中根目录(root deirctory)一般不用动，顶多是output deirctory改成你自己的output的文件夹名字。
使用vercel步骤：
- add new project
- 选择GitHub的项目
- 如果需要更改output directory则更改一下
- 然后直接deploy部署
使用GitHubpage步骤：
- 需要注意仓库名称后缀为.github.io，前面是什么无所谓
- 如果不是纯前端页面则选择output文件夹名字为docs（他不能想vercel一样自定义，这点比较烦）
致谢zhi大佬
[^1]: # 搭建博客
# 搭建博客
why why
[Hexo博客搭建基础教程(一) | Fomalhaut🥝](https://www.fomal.cc/posts/e593433d.html) 配套视频 [第1期：从零开始搭建一个能用的博客_哔哩哔哩_bilibili](https://www.bilibili.com/video/BV1G84y1B7NH/?spm_id_from=..search-card.all.click&vd_source=9d39a931f34500bcd5ae0170a26fd7c7)
[超详细 Hexo + Github Pages 博客搭建教程 - 知乎 (zhihu.com)](https://zhuanlan.zhihu.com/p/370635512)
1. 通过`hexo new post_name`命令，会自动在`source/_post`目录下生成一个待写的`post_name.md`文件
2. 编写完该md文件后，用`hexo generate`编译生成对应的HTML文件
3. 发布之前，可以用`hexo s`本地预览，然后通过`hexo deploy`发布到远程仓库的**master**分支，然后你的个人站点就能看到刚才新加的文章了
# hexo
通过hexo更改主题搭建
在Hexo博客的文章或者单页面中使用以下标签语法插入视频
`{% bili video_id %} 或 {% bili video_id page %}`
## 相关链接
[Hexo系列 | Hexo的基本使用 - 知乎 (zhihu.com)](https://zhuanlan.zhihu.com/p/85037427)
[Hexo静态博客搭建教程 | 星尘の小站 (xingchenblog.ml)](https://xingchenblog.ml/2021/06/27/Hexo%E9%9D%99%E6%80%81%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA%E6%95%99%E7%A8%8B/)
[Sakura主题美化 (qq.com)](https://mp.weixin.qq.com/s/OAyOA28-bTJLE6aKtzpoqg)
## 常用命令
* hexo -s 启动本地服务器，用于预览主题
* hexo clean 清除缓存文件 `db.json` 和已生成的静态文件 `public`
* hexo -d 自动生成网站静态文件，并部署到设定的仓库。
* hexo -g 生成网站静态文件到默认设置的 `public` 文件夹
同步三板斧，hexo clean,hexo d -g
# 更新hexo
## 22.11.3 添加动态背景线条
> [网页动态背景——随鼠标变换的动态线条 - 孤独的飞行者 - 博客园 (cnblogs.com)](https://www.cnblogs.com/qq597585136/p/7019755.html)
>
D:\value_code\javaCode\webStackPage\hexo\myblog\hexo-theme-sakura-master\themes\Sakura\layout_partial\aplayer.ejs
在这个文件里面添加
```
<script type="text/javascript" src="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>
```
来实现动态线条效果。
下面的代码段是我添加了随机颜色生成的<script> /** * Copyright (c) 2016 hustcc * ...[^2]
## 好看的博客
[花未眠的个人博客 (linhaojun.top)](https://www.linhaojun.top/?utm_source=ld246.com)
[Mr-吴の客栈 (wuweijan.cn)](https://www.wuweijan.cn/)
# 常见问题
* 搭建好GitHubpages打开一片空白
* nodejs版本问题，public生成的index为0kb 用12版本就行
# vercel
使用vercel选择GitHub仓库后如果不是纯前端则选择生成的前端文件夹
test
<script>
/**
* Copyright (c) 2016 hustcc
* License: MIT
* Version: v1.0.1
* GitHub: https://github.com/hustcc/canvas-nest.js
**/
!
function() {
function n(n, e, t) {
return n.getAttribute(e) || t
}
function e(n) {
return document.getElementsByTagName(n)
}
function t() {
var t = e("script"),
o = t.length,
i = t[o - 1];
var color = randomColor()
window.alert(color)
return {
l: o,
z: n(i, "zIndex", -1),
o: n(i, "opacity", .99),
c: n(i, "color", (color)),
n: n(i, "count", 299)
}
}
function randomColor() {
// var color = ["217,104,9"]
var color = ["254,67,101","17,63,61","20,68,106","217,104,9"]
// return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math
// .random() * 255)) + ")";
return color[(~~Math.random() * color.length)]
}
function o() {
a = m.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
c = m.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
}
function i() {
r.clearRect(0, 0, a, c);
var n, e, t, o, m, l;
s.forEach(function(i, x) {
for (i.x += i.xa, i.y += i.ya, i.xa *= i.x > a || i.x < 0 ? -1 : 1, i.ya *= i.y > c || i.y < 0 ? -1 : 1, r.fillRect(i.x - .5, i.y - .5, 1, 1), e = x + 1; e < u.length; e++) n = u[e],
null !== n.x && null !== n.y && (o = i.x - n.x, m = i.y - n.y, l = o * o + m * m, l < n.max && (n === y && l >= n.max / 2 && (i.x -= .03 * o, i.y -= .03 * m), t = (n.max - l) / n.max, r.beginPath(), r.lineWidth = t / 2, r.strokeStyle = "rgba(" + d.c + "," + (t + .2) + ")", r.moveTo(i.x, i.y), r.lineTo(n.x, n.y), r.stroke()))
}),
x(i)
}
var a, c, u, m = document.createElement("canvas"),
d = t(),
l = "c_n" + d.l,
r = m.getContext("2d"),
x = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(n) {
window.setTimeout(n, 1e3 / 45)
},
w = Math.random,
y = {
x: null,
y: null,
max: 2e4
};
m.id = l,
m.style.cssText = "position:fixed;top:0;left:0;z-index:" + d.z + ";opacity:" + d.o,
e("body")[0].appendChild(m),
o(),
window.onresize = o,
window.onmousemove = function(n) {
n = n || window.event,
y.x = n.clientX,
y.y = n.clientY
},
window.onmouseout = function() {
y.x = null,
y.y = null
};
for (var s = [], f = 0; d.n > f; f++) {
var h = w() * a,
g = w() * c,
v = 2 * w() - 1,
p = 2 * w() - 1;
s.push({
x: h,
y: g,
xa: v,
ya: p,
max: 6e3
})
}
u = s.concat([y]),
setTimeout(function() {
i()
},
100)
} ();
</script>
```
