安装步骤

主要安装流程参考：Hexo+GitHub搭建个人博客教程（2023最新版）_hexo github个人网站教程-CSDN博客

报错解决

安装过程报错解决：

在创建name.github.io仓库之后，需要在settings-pages路径下手动设置该仓库的页面链接，save之后，等几分钟便可看到链接；
hexo d上传网页文件夹到github仓库之后看不见内容。这是因为在教程中设置的上传分支为master,然而仓库的默认分支为main,所以，分支需要对应上，修改一致便可以解决。
部署hexo框架之后，更换网站主题为butterfly的时候报错：# extends includes/layout.pug block content #recent-posts.recent-posts include includes/rec。解决办法：在网站根目录下打开git bash ，输入命令：npm install –save hexo-renderer-jade hexo-generator-feed hexo-generator-sitemap hexo-browsersync hexo-generator-archive。之后hexo三联：
1
hexo clean && hexo g && hexo d

修改网站文章链接格式

参考链接：Hexo 博客生成永久链接 | Ordis’Blog (imbhj.com)

为网站设置域名

将自己购买的域名解析到自己github.io的地址，DNS解析类型选择CNAME，为了解决每次提交到仓库之后需要重新填写域名，可以在本地的source文件中创建CNAME文件，里面填写域名，这样便可持久化域名。

网站魔改（自定义css整合方法）

（1）在[Blogroot]\themes\butterfly\source\css\路径下新建_custom文件夹，然后把魔改样式的CSS文件拖动进去。文件目录层级可以表示为以下情况：

source  
  |__ css  
     |__ _custom  
        |__ custom1.css  
        |__ custom2.css  
        |__ custom3.css  
     |__ index.styl

（2）在[Blogroot]\themes\butterfly\source\css\index.styl中新增一行代码:@import '_custom/*.css',表示引入_custom文件夹下的所有CSS文件。（此处为了确保自定义样式不会被覆盖，放在最底下。）

    @import 'nib'  
    @import '_third-party/*.css'  
    // project  
    @import 'var'  
    @import '_global/*'  
    @import '_highlight/highlight'  
    @import '_page/*'  
    @import '_layout/*'  
    @import '_tags/*'  
    @import '_mode/*'  
+   @import '_custom/*.css'

(3)如果是使用的外链css，也可以在这里引入。同样是修改 [Blogroot]\themes\butterfly\source\css\index.styl代码,使用@import逐行引入（此处为了确保自定义样式不会被覆盖，放在最底下。）：

    @import 'nib'  
    @import '_third-party/*.css'  
    // project  
    @import 'var'  
    @import '_global/*'  
    @import '_highlight/highlight'  
    @import '_page/*'  
    @import '_layout/*'  
    @import '_tags/*'  
    @import '_mode/*'  
+   @import 'https://cdn.jsdelivr.net/gh/username/repo/css/example.css'

(4) 这样一来，每个魔改方案的CSS依然可以在独立的CSS文件中找到并修改（如果是手动添加整合的话，只能用注释分割，显然很不利于后续查找修改），而在每次提交时，运行hexo g的过程中就会将所有CSS文件都整合到index.css,可以在主题配置文件的CDN配置项里给index.css加上jsdelivr进一步提升加载速度（注意刷新jsdelivr的缓存）。