前言

因为自己是初次搭建Hexo博客，不少地方都有踩坑，在此记录一下从搭建到部署的过程以及对Butterfly主题自定义上的一些处理。

安装Hexo

1
npm install hexo-cli -g
  • 也可以选择局部安装
1
npm install hexo
  • 这里我是全局安装的，可直接使用hexo <command>命令

初始化

安装完成后，执行下列命令，即可生成一份简单的模板文件

1
2
3
hexo init <folder>
cd <folder>
npm install

当前目录下执行命令npm run server或hexo s即可在本地服务器快速启动

接下来就可以开始编写文章了

安装主题

如果不喜欢初始化的界面效果，那我们可以去选择自己喜欢的主题，我的博客主题使用的是Butterfly

进入到博客根目录下，使用git安装

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

应用主题

进入博客根目录下的_config.yml文件，修改主题为butterfly

1
theme: butterfly

安装插件

首次使用需要安装作者编写主题使用的模板渲染器和样式处理器插件，否则启动会报错

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

以上配置完毕后停止服务并重新执行hexo s命令后即可查看效果

主题配置

进入到主题目录themes/butterfly下，复制_config.yml文件到博客根目录下，并重命名为_config.butterfly.yml。
Hexo 会自动合并_config.yml和_config.butterfly.yml里的配置

新建页面

初始我们页面只有主页和归档页，如果需要其他页面则需要手动添加

标签页

  1. 进入到博客根目录下
  2. 输入hexo new page tags
  3. 找到source/tags/index.md文件
  4. 修改文件为：
1
2
3
4
5
---
title: 标签
date: 2020-08-24
type: "tags"
---

分类页

  1. 进入到博客根目录下
  2. 输入hexo new page categories
  3. 找到source/categories/index.md文件
  4. 修改文件为：
1
2
3
4
5
---
title: 分类
date: 2020-08-24
type: "categories"
---

关于页

  1. 进入到博客根目录下
  2. 输入hexo new page about
  3. 找到source/about/index.md文件
  4. 修改文件为：
1
2
3
4
5
---
title: 关于
date: 2020-08-24
type: "about"
---

添加导航

新建页面完毕后我们需要在配置文件中配置新建页面的导航地址，否则找不到

1
2
3
4
5
6
menu:
  主页: / || fas fa-home
  归档: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags
  分类: /categories/ || fas fa-folder-open
  关于: /about/ || fas fa-heart

路径名必须是 /xxx/，后面使用 || 分开，然后写图标名。重新启动后即可生效

主题自定义

接下来就可以按照自己的喜好来修改主题样式了

文章目录溢出隐藏

在某些时候，导航目录的文字过长时会换行显示，例如这样：

再看修改过后的样子：

这样对比就明显了，那么开始修改
找到博客目录下themes/butterfly/source/css/_layout/sidebar.styl文件第56行修改为：

1
2
.toc-link
    display: flex

在60行之后添加：

1
2
3
4
.toc-text
    overflow:hidden
    text-overflow: ellipsis
    white-space: nowrap

保存修改后刷新页面即可看到效果

部署到Github和Coding

创建仓库

登录 github ，右上角点击新建仓库

创建的仓库名必须是username.github.io格式，且仓库必须开放

无误后即可点击创建

配置SSH秘钥

如果不是第一次配置则可跳过本环节
首先打开git面板，输入以下命令

1
2
git config --global user.name "yourname"
git config --global user.email "youremail"

这里的yourname是你的github用户名，youremail是github绑定的邮箱

接下来生成SSH秘钥：

1
ssh-keygen -t rsa -C "youremail"

连续回车即可，之后会在你的电脑用户目录下生成id_rsa和id_rsa.pub文件

用记事本打开id_rsa.pub文件，全选复制内容
然后回到github，打开Settings，找到SSH and GPG keys选项，点击右上角按钮新建



随便起个名称然后把刚刚复制的内容粘贴到里面，然后点击下面绿色按钮新建即可

打开git面板测试一下，输入以下命令

1
ssh -T git@github.com

部署博客到Github

打开根目录下的_config.yml文件，在文件最下方添加以下代码：

1
2
3
4
deploy:
  type: git
  repo: git@github.com:yourname/yourname.github.io.git
  branch: master

把yourname替换成你的github用户名

然后我们需要再下载一个部署插件

1
npm install hexo-deployer-git --save

下载完毕后再执行hexo g -d命令，即可自动部署到github
然后输入yourname.github.io即可访问

自定义域名

进入我们购买域名的云服务商，比如我是在腾讯云买的那就登录腾讯云然后在控制台找到我的域名

然后解析按钮按如下格式添加一个域名解析

然后进入到我们博客目录source下，新增一个CNAME文件，文件名必须大写且没有后缀。

进入我们新建的仓库，点击settings按钮

一直往下翻，找到一个GitHub Pages选项

在红框所示处输入自己的域名点击保存

这个时候就可以通过域名访问来访问了

部署到Coding

方法同上，但是仓库名需要设置为用户名，然后修改_config.yml

1
2
3
4
5
6
deploy:
  type: git
  repo:
      github: git@github.com:lujdong/lujdong.github.io.git
      coding: git@e.coding.net:lujiandong/dong/dong.git
  branch: master

参考文档