Hexo起步

  1. 首先,你需要起一个项目,新建博客的文件夹作为根目录

  2. 然后采用编辑器的终端进行命令行输入

  3. 安装项目

    1
    2
    3
    4
    5
    6
    7
    8
    npm config set registry https://registry.npmmirror.com
    #将npm源替换为阿里的镜像。之后的安装就会迅速很多了。

    npm install hexo-cli -g
    # hexo-cli 是 hexo的指令集。

    hexo init
    # 有了指令集以后,使用它的初始化指令来初始化安装Hexo博客。
  1. 安装插件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    npm install hexo-renderer-stylus --save
    # nib css支持插件,如无需求,可跳过

    npm install hexo-generator-feed --save
    # RSS订阅支持插件,如无需求,可跳过

    npm install hexo-generator-sitemap --save
    # sitemap生成插件,帮助搜索引擎抓取,如无需求,可跳过

    npm install hexo-admin --save
    # 网页端hexo文档管理插件,如无需求,可跳过

    npm install hexo-deployer-git --save
    # git部署插件,必须安装
  1. 常用命令

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    hexo clean
    #清空缓存

    hexo generate
    hexo g #简写
    #重新编译

    hexo server
    hexo s #简写
    #打开本地访问

    hexo new <layout> "文章title"
    #新建文章

    hexo deploy
    hexo d #简写
    #部署到云端
  1. 本地预览

    1
    hexo server

    终端跑了之后就会出现

    image-20231206151517155

    打开浏览器之后,在搜索框里面输入这个 http://localhost:4000/ 就可以预览

    image-20231206151909257


选择主题

这里选择的主题是butterfly官网在这里

  1. 安装主题

    1
    git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

    运行这个命令,下载项目下来,这里安装的是开发分支的项目,可以体验更多的东西,但是bug比较多,看个人选择

  1. 应用主题

    修改 Hexo 根目錄下的 _config.yml,把主題改為 butterfly

    1
    theme: butterfly
  1. 安装插件

    这里按照官方教程安装插件

    1
    npm install hexo-renderer-pug hexo-renderer-stylus --save
  1. 复制_config.yml

    hexo 的根目錄創建一個文件 _config.butterfly.yml,並把主題目錄的 _config.yml 內容複製到 _config.butterfly.yml 去。( 注意: 複製的是主題的 _config.yml ,而不是 hexo_config.yml)

    注意: 不要把主題目錄的 _config.yml 刪掉

    注意: 以後只需要在 _config.butterfly.yml 進行配置就行。如果使用了 _config.butterfly.yml, 配置主題的 _config.yml 將不會有效果。

  2. 运行 hexo server


基础的搭建

本站的一些基础搭建参考Jerry的基础教程

  1. Butterfly 安裝文檔(二) 主題頁面 | Butterfly
  2. Butterfly 安裝文檔(三) 主題配置-1 | Butterfly
  3. Butterfly 安裝文檔(四) 主題配置-2 | Butterfly

然后基础的信息搭建好了,现在开始参考网上其他魔改大佬的教程


魔改准备工作

  1. 在博客根目录下的source文件夹下新建jscssimg三个文件夹
  2. _config.butterfly.yml文件下面的inject选项里面添加你新建的各种jscss


参考教程

1、Butterfly 安裝文檔(一) 快速開始 | Butterfly

2、Win10:Hexo+github搭建个人博客 | Akilarの糖果屋