⭕ 收集个人搭建博客过程中用到的教程和碰到的问题解决方法

🔱 可按照下面顺序学习观看，我也是按下面一步步实现，编程基础为 0

🌻 完全免费、没有任何花费，除了花时间而已

1️⃣ 【2021最新版】保姆级Hexo+github搭建个人博客

👉 视频教程

上述视频中用到的：

Node.js安装及环境配置之Windows篇

https://www.cnblogs.com/liuqiyun/p/8133904.html

Windows系统Git安装教程（详解Git安装过程）

https://www.cnblogs.com/xueweisuoyong/p/11914045.html

第一步主要是搭建环境和网站搭建是否成功，完成后，开始配置网站页面主题

2️⃣ hexo butterfly主题安装使用

👉 视频教程

butterfly 官方主题配置教程

https://butterfly.js.org/posts/21cfbf15/

Ps：刚刚开始看这个教程也很迷糊，看了一遍上述视频教程，然后在去看官方配置教程的时候就一目了然

3️⃣ 其他功能配置

  1. 3分钟教你hugo博客绑定个人域名(个人站点搭建)07 地址
  2. Hexo butterfly 自定义文章封面 && 主页顶部图片更改 地址
  3. Hexo的Butterfly下如何隐藏部分文章不在首页显示 地址
  4. hexo个人博客居然有这么方便的评论系统 地址
  5. Hexo-使用阿里iconfont图标 地址
  6. 如何使用阿里矢量图标库 地址
  7. Hexo站点建设之——修改网站图标 地址
  8. Hexo插入响应式Bilibili视频代码块 地址
  9. 网站添加网站备案号 地址
  10. 每天自动提交url到百度和谷歌必应 项目
  11. URL Submission主动推送站点链接至谷歌、必应、百度等搜索引擎，提升网站收录质量和速度 项目 文档
  12. 将免费的公众号引流工具整合到博客中 项目 文档
  13. Hexo博客页脚添加ICP备案号 地址
  14. 基于 Butterfly 的外挂标签引入 - 笔记 | 鸟不拉诗 地址
  15. Hexo侧边栏添加文章合集 地址
  16. Hexo侧边栏添加微博热搜 地址
  17. Hexo + Butterfly 搜索功能 地址 ⭐09-06
  18. Hexo设置永久链接 地址 ⭐09-14
  19. 主题文章双栏布局插件 地址 ⭐09-14
  20. 历史上的今天插件 地址 ⭐09-14
  21. iframe引入站外视频的方法及参数自动播放详解 地址 ⭐09-16
  22. HEXO博客引用B站视频并自动适配 地址 ⭐10-10
  23. Butterfly主题外挂标签（个人常用）地址 ⭐11-23
  24. HEXO | 给博客添加RSS 地址 ⭐11-23

4️⃣ 碰到的问题

npm WARN config global --global, --local are deprecated 地址

nodejs报错：npm WARN config global --global, --local are deprecated. Use `–location解决 地址

利用GitHub搭建博客自定义域名失效问题解决方法 地址

5️⃣ 美化配置

  1. hexo | 某些小修饰（加粗，颜色变化等） 地址

  2. Butterfly美化 地址

  3. 【重点推荐】butterfly美化 地址 ⭐09-14

  4. 【重点推荐】Butterfly主题 一图流背景与顶部图修改 地址 ⭐09-14

  5. 小冰插件包 butterfly-orchid 1.0 地址 ⭐11-23

B站视频并自动适应各客户端 
1
2
3
4
# 替换地址url即可，其他不变

<div style="position: relative; width: 100%; height: 0; padding-bottom: 75%;">
<iframe src="//player.bilibili.com/player.html?aid=847517080&bvid=BV16L4y1a78V&cid=394204827&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="position: absolute; width: 100%; height: 100%; Left: 0; top: 0;" ></iframe></div>
html字体，背景色和代码块 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<font style="color: blue;"> 网盘下载 </font>   #字体色

<font style="background:red">hello world</font>   #背景色

<font style="background:yellow ; color: red">   #背景色 + #字体色

$\color{red}{红色字}$
$\color{green}{绿色字}$
$\color{blue}{蓝色字}$
$\color{black}{黑色字}$
$\color{pink}{粉色字}$
$\color{yellow}{黄色字}$
$\color{cyan}{青绿色}$
$\color{Plum}{紫色}$
Markdown改变图片大小,图片左对齐 
1
2
3
4
5
6
7
8
如果想改变图片大小，把粘贴生成后的图片源地址粘到以下代码对应处（可以不指定高度）
<img src="./xxx.png" width = "300" height = "200" alt="图片名称" align=center />

图片左对齐
<div align="left"><img src="图片地址" alt="图片名称"/><div>

typora中左对齐
<img src="图片地址" alt="图片名称" style="zoom: 67%; float:left" />