基于Hexo、Butterfly、Github的建站笔记

从零开始

2024.10 魔改

hexo 常用命令

参考：https://segmentfault.com/a/1190000002632530

hexo init 初始化
hexo server 启动服务
hexo g -d -m "cxs" 博客发布更新
hexo clean 清除缓存，网页正常情况下可以忽略此条命令
hexo new page xxx 创建新页面
hexo new post "xxx" | hexo new "xxx" 创建新博客

本地链接远程 github 仓库

git init 初始化
git commit -m "first commit"
git branch -M main 切换到 main，默认是 master
git remote add origin https://github.com/xxx.git 链接远程仓库
git push -u origin main 推送

重装依赖，并设置代理

1	npm install --force --proxy http://127.0.0.1:1080

卸载依赖，直接用 cnpm

Github 个人主页美化

https://blog.csdn.net/qq_44231797/article/details/129251980

网站域名重定向

直接在github根目录增加CNAME文件

1	chenxs.site

网站运行时间统计

修改 \layout\includes\footer.pug，增加如下代码：

1
2
3

#sitetime
    script(language='javascript').
    ......  // 具体查看源码

测试 ssh 连接

设置代理

1	ssh -T git@github.com

报错：Connection reset by 140.82.113.4，需要设置代理

Git 设置 ssh代理：https://zhuanlan.zhihu.com/p/481574024

C:\Users\chen_xiaosheng\.ssh 的 config文件
添加几行代码

1 2	# Windows用户，注意替换你的端口号和connect.exe的路径 ProxyCommand "C:\Program Files\Git\mingw64\bin\connect" -S 127.0.0.1:10808 -a none %h %p

添加密钥

报错： git@github.com: Permission denied (publickey).

参考：https://blog.csdn.net/qq_40047019/article/details/122898308

其他主题

博客美化

npm install 的时候一定要加 --save，不然本地预览的时候可能不会显示

npm uninstall xxx 卸载

时钟出现加载不出来的情况，改用 hexo-electric-clock-plus

底部音乐播放器Aplayer

npm地址：https://www.npmjs.com/package/hexo-tag-aplayer

# 歌单修改，主题_config文件，data-id即为歌单id
inject:
  head:
  bottom:
    - <div class="aplayer no-destroy" data-id="3145079790" data-server="netease" data-type="playlist" data-fixed="true" data-mini="true" data-listFolded="false" data-order="random" data-preload="none" data-autoplay="false" muted></div>

追剧、追番页面 -> hexo-bilibili-bangumi 插件

电影、读书页面 -> hexo-douban 插件

报错：because you are offline or your network is bad

使用 version 12 的node环境，关于Hexo添加豆瓣页面踩过的坑 | 花猪のBlog

2024.04 更新：hexo-douban 目前升级到了 2.x 版本，将原先由插件客户端自行获取数据的逻辑抽到了一个隐藏的服务端中进行，以统一解决数据获取、数据缓存、风控对抗等问题，提高页面生成的成功率和效率。

运行 hexo douban 命令生成豆瓣页面，最新的豆瓣数据，需要过一段时间才能采到

顶部冒泡特效

底部小鱼特效

修改高度、透明度
修改小鱼颜色，修改 footer.styl 中的 background: $violet

.\themes\Butterfly\source\css\_layout

鼠标样式美化

效果

Butterfly主题 Markdown 语法显示效果 | 木漏れ日

底部徽章

底部署名和图标旋转

// 修改 .\themes\Butterfly\layout\includes 的 footer.pug 文件
#footer-wrap
  if theme.footer.owner.enable
    .copyright!= `&copy;某年某月 <i class='fas fa-bug fa-spin'></i> By ${config.author}`

其他优化

设置私密博客 hexo-blog-encrypt插件

图片压缩工具 Imagine

优质图床 smms

网站图标 - 阿里矢量图标

修改 主题配置 的 favicon

静态资源的优化

html、css、js文件压缩
cdn加速 - jsdelivr的使用注： Content Delivery Network 内容分发网络

2022.06.01

博客改名、绑定自定义域名

官方教程：https://docs.github.com/cn/pages/configuring-a-custom-domain-for-your-github-pages-site/managing-a-custom-domain-for-your-github-pages-site

ssh 报错：Could not resolve hostname github.com: No address associated with hostname

ping github.com 的时候显示 找不到主机

修改 hosts 文件，地址 C:\Windows\System32\drivers\etc\hosts

最后一行添加：140.82.113.4 github.com（ip地址可能会变动）

顺便解决了本地访问不了 github 的问题
ssh 报错：

The authenticity of host ‘github.com (140.82.113.4)’ can’t be established.

Host key verification failed

解决：Are you sure you want to continue connecting (yes/no/[fingerprint])?

后面不能直接按回车，而是要输入 yes
记得修改 config.yml 和 .deploy 里面的 config 文件的 github.io 地址