Hexo+Butterfly建站

参照：分类: 魔改教程 | Fomalhaut🥝

1.安装Hexo

在vscode终端执行:

1
npm install -g hexo-cli

2.初始化Hexo项目

1.在目标路径（我这里选的路径为【C:/Hexo-Blog】）打开vscode命令窗口，执行hexo init初始化项目。

1
hexo init blog-demo(项目名)

2.进入blog-demo ，输入npm i安装相关依赖。

1
2
cd blog-demo  //进入blog-demo文件夹
npm i

3.初始化项目后，blog-demo有如下结构：

【node_modules】：依赖包
【scaffolds】：生成文章的一些模板
【source】：用来存放你的文章
【themes】：主题
【.npmignore】：发布时忽略的文件（可忽略）
【_config.landscape.yml】：主题的配置文件
【config.yml】：博客的配置文件
【package.json】：项目名称、描述、版本、运行和开发等信息

3.静态博客挂载GitHub Pages

  • 仓库的格式必须为：<用户名>.github.io (注意：前缀必须为用户名，不要等后面404了再来为什么！！！)

    1. 安装 hexo-deployer-git

      1
      2
      SHELL
      npm install hexo-deployer-git --save

    2. 修改 _config.yml 文件
      在blog-demo目录下的_config.yml，就是整个Hexo框架的配置文件了。可以在里面修改大部分的配置。详细可参考官方的配置描述。
      修改最后一行的配置，将repository修改为你自己的github项目地址即可，还有分支要改为main代表主分支（注意缩进）。

      1
      2
      3
      4
      5
      YAML
      deploy:
        type: git
        repository: [email protected]:Fomalhaut-Blog/Fomalhaut-Blog.github.io.git
        branch: main

    3. 修改好配置后，运行如下命令，将代码部署到 GitHub（Hexo三连）。

      1
      2
      3
      SHELL
      hexo clean && hexo generate && hexo deploy  // Git BASH终端
      hexo clean; hexo generate; hexo deploy  // VSCODE终端

      • hexo clean：删除之前生成的文件，若未生成过静态文件，可忽略此命令。

      • hexo generate：生成静态文章，可以用hexo g缩写

      • hexo deploy：部署文章，可以用hexo d缩写

        image-20221027113704801

        注意：deploy时可能要你输入 username 和 password。

        如果出现Deploy done，则说明部署成功了。

        image-20221027113756069

        稍等两分钟，打开浏览器访问：https://Fomalhaut-Blog.github.io ，这时候我们就可以看到博客内容了。

        image-20221027113923949