Hexo + Butterfly 搭建博客

mumumu1
718 阅读6分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第6天

博客框架选择Hexo，这是目前较为主流的博客框架之一，选择它一是因为它的布局相对美观，二是因为这个框架已经较为成熟，在搭建过程中遇到的大多数问题都可以Google到解决方案。博客的主题我选用的是Butterfly，这个的选择是全凭个人审美了，大家可以去GitHub上直接搜索 hexo themes选择喜欢的主题。那么话不多说，开始今天Hexo + Butterfly 搭建博客的教程。

Hexo的安装

Node.js的安装

  1. 下载地址：node.js.org/，下载完安装即可（安装过程无脑点下一步）

  2. 打开命令行工具sudo进入root用户

    • node -v查看node的版本
    • npm -v查看包管理器的版本

安装完node.js后就可以进行hexo的安装了

hexo的安装

  • 安装hexo要借助npm来安装，由于国内镜像源速度很慢，所以先利用npm安装cnpm来提高安装速度
npm install -g cnpm --registry="http://registry.npm.taobao.org"
​
cnmp -v 查看版本
  • cnpm安装hexo
cnpm install -g hexo-cli
​
hexo -v 查看版本
  • 建立你的blog文件夹，我这里是建在D盘。以后你博客的所有内容都将在这个文件夹中设置、
mkdir D:\blog
  • cd进blog文件夹中，初始化博客
cd blog
sudo hexo init
ls -l 查看安装后生成的文件
  • 启动博客，可以看到已经成功启动，并且为你自动生成了第一篇博客：Hello World
hexo s
  • 新建一篇文章
hexo n "第一篇blog"
  • 几个常用命令
hexo c  清理
hexo g  生成
hexo s  启动

将博客部署到GitHub上

  • 新建一个仓库，命名为 "你的GitHub用户名".github.io,例如我的用户名为mumushu1，这里命名如下：
  • 安装hexo-deployer-git 插件
npm install hexo-deployer-git --save

  • 返回blog文件夹，使用vim修改_config.yml文件。翻到页尾会发现刚刚安装的deployer，下面对这一项进行配置。（repo和branch需要自己添加）

    • type：git
    • repo：刚刚你建的GitHub仓库的地址
    • branch：master
  • 使用命令部署到远端，系统会弹出界面让你输入GitHub的账号和密码
hexo d

如果这里有报错的话则在hexo d之前敲上

git config --global user.email "xxx"
git config --global user.name "xxx"     //xxx是你GitHub的邮箱和用户名

返回GitHub仓库即可查看里面多了一些东西，即是生成blog的内容

  • 复制你的仓库名到浏览器访问，即可进入你的博客

当然我这里是使用主题装饰好的，正常刚打开封面是一个Hexo的图片，和你当时hexo s后打开的界面相同。 至此，一个简单的hexo框架就搭建好了，并且利用GitHub部署到了远端。下面的内容就是博客的装修部分，我选用了butterfly主题，下面也会展开讲一下如何使用这个主题来装饰你的博客。

Butterfly主题装饰博客

butterfly安装

  • 在GitHub上直接搜索hexo-theme-butterfly，在readme文件里找到这里，进入butterfly的说明文档

  • 在【快速开始】中可以找到安装教程

    • git安装，直接在blog文件夹中git clone即可
    git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

  • 修改_config文件，把主题（theme）改为butterfly*（从这里开始建议用vscode打开blog文件夹进行编辑）*，直接Ctrl F查找theme修改即可

  • 安装pug以及stylus的渲染器

npm install hexo-renderer-pug hexo-renderer-stylus --save

  • 创建主题的配置文件（减少升级主题后带来的不便）

    • 在hexo的根目录建立一个文件，命名为_config.butterfly.yml，并把目录的_config.yml文件内容复制到里面去

    • 注意

      • 复制的是theme文件夹的_config.yml，不是hexo的config.yml
      • 不要把主题的_config.yml删掉
      • 以后只要在_config.butterfly.yml配置即可
      • 如果使用了 _config.butterfly.yml， 配置主题的 _config.yml 将不会有效果。
      • Hexo会自动合并主题中的config.yml和 config.butterfly.yml里的配置，如果存在同名配置，会使用_config.butterfly.yml的配置，其优先度较高。

至此，butterfly的安装以及配置已经完毕，接下来的内容就是如何使用butterfly主题修饰你的博客，使你的博客丰满起来。

修改&创建博客的基本信息

  • 网站资料（标题，副标题，邮箱等资料），修改博客根目录的_config.yml

  • 创建标签页

    • 前往博客跟目录
    • 使用命令行工具输入 hexo new page tags
    • 输入后可以找到 source/tags/index.md 这个文件，进行修改即可，主要设置是前三项，top_img为置顶图，设置方法在后续会讲
  • 使用同样的方法创建分类页和友情链接，详情见官方文档
  • 404页面（访问出错的网站跳到404页面），在_config butterfly.yml中更改
# A simple 404 page
error_404:
  enable: true
  subtitle: "页面没有找到"
  background:

基本工具&&排版&&图像设置

  • 语言

    • 修改hexo根目录的_config.yml

    • 默认语言是en，支持三种语言

      default(en) zh-CN (简体中文) zh-TW (繁体中文)

  • 导航菜单

    • 修改主题配置文件

  • 代码（都是在主题配置文件中修改）

    • 代码高亮

    其中有多种高亮颜色可以选择，可以去官网查看自己选取

    highlight_theme: light
    • 代码复制
    highlight_copy: true

    • 代码框展开/关闭

      • true：全部代码框不展开，需手动点击按钮展开
      • false：代码框展开，有展开按钮
      • none：不显示展开按钮
    highlight_shrink: true #代码框不展开，需点击 '>' 打开
    • 代码换行
    code_word_wrap: true
    • 代码高度限制(配置代码框的最大高度，超出部分会隐藏，并显示展开按钮)
    highlight_height_limit:50 # unit: px

  • 社交图标

    • 在主题配置文件中找到 social settings 修改即可
    • 书写格式：图标名：url || 描述性文字
    • 图标和图标名都可以在这里找到fontawesome.com/icons?from=…

  • 顶部图

    • 不需要顶部图可以直接配置
    disable_top_img: true
    • index_img主页的顶部图
      archive_img归档页面的顶部图
      tag_img标签子页面的顶部图
      category_img分类子页面的顶部图
    • 如果想要更改分类/标签等自建页面的顶部图，需要到对应的md文档中修改，这里演示更改标签页面的顶部图

直接使用top_img添加图片地址链接即可

  • 文章封面

    • 在文章的md文档中添加cover，并填上图片地址
    • 如果不配置cover，可以设置显示默认的cover
    • 如果不想在首页显示cover，可以设置false

  • 头像

    • 修改主题配置文件
    avatar:
  img: /img/avatar.png
  effect: true # 头像会一直转圈

以上演示了一些最基本的配置，还有一些在文章中没有涉及到，但根据官网的文档以及借鉴上述的方法可以很轻松的配置完一些基本的设置。由于本人也是小白，最近也在学习一些更高级的设置，学会的话有机会也更在博客中。

参考内容：

butterfly官方文档：butterfly.js.org/

哔哩哔哩up主CodeSheep的视频【手把手教你从0开始搭建自己的个人博客 |无坑版视频教程| hexo】：www.bilibili.com/video/BV1Yb…

avatar
文章
阅读
粉丝