官方文档:https://hexo.io/zh-cn/docs/#%E5%AE%89%E8%A3%85-Node-js

主题文档:https://butterfly.js.org/

安装步骤

  1. 安装Node.js(https://nodejs.org/en/download/)和Git(https://gitforwindows.org/

  2. 安装hexo:npm install -g hexo-cli

  3. 初始化:hexo init blog(folder/本地blog文件路径)或直接在想要放blog位置执行命令

    执行完将在目录下出现以下文件 

441897d1cc251e4b1dcc13c96a697543.png

各目录作用:

_config.yml:网站配置信息,配置参数

themes: 主题文件夹,存放主题

scaffolds:模板文件夹,根据模板文件创建

source:存放资源的文件夹,\_开头的文件会被忽略(\_posts除外),\_posts文件存放md文件(博客文章)
  1. 主题安装:git clone -b master https://github.com/jerryc127/hexo\-theme\-butterfly.git themes/Butterfly

   注:自定义主题安装时可以更改github链接和文件名

   主题应用:修改_config.yml文件的theme:Bbutterfly

   把themes/butterfly文件夹中的 _config.yml 复制到博客根目录里,同时重新命名为 _config.butterfly.yml便于后续git pull平滑升级主题

  1. 生成静态页面:hexo g

   成功后会在blog目录下生成project文件夹,文件夹中存放页面html

9578d142d1cb6f1c468c0c2eca7bc2bc.png

   如果报错安装cheerio:npm install cheerio@0.22.0 –save(hexo 4.2以上的系统需要安装cheerio)

  1. 启动服务器:hexo s

   运行localhost:4000

   报错如下:

c068f8e1b49573b24a33532a514553e0.png

   安装pub和stylus渲染器:npm install hexo-renderer-pug hexo-renderer-stylus --save

   再次启动服务器运行可查看到正常页面

  1. 部署到github

    1. 创建仓库:仓库名建议设置为 github用户名

    2. 配置git(详细内容省略可查阅博客文章)

    3. 上传博客文件到github

      1. 配置_config.yml的repo信息

        deploy:
        type: git
        repo: 仓库地址
        branch: master
      2. 安装插件:npm install hexo-deployer-git –save

      3. 上传代码:hexo d

      4. 刷新仓库网址即可看到自己刚才上传的文件

配置静态站点

点击Settings,下滑到GitHub Pages配置,可以看到已经存在为我们发布了静态的页面username.github.io。

到此一个博客系统已经搭建完成,借用github的服务器存储,后面为博客美化和完善

绑定个人域名

在域名位置添加解析

c523643a0bc75f27cf9417b00617aabd.png

添加内容如下

49513cc974da6e852aeabd13ae3e2f90.png

记录类型A 主机记录@ 解析线路国外(海外域名选默认) 记录值ip地址(ping bbutterf1y.github.io(github域名)查看ip地址)

b4f72d0a33f23b83e7fc34c7c18664c9.png

记录类型CNAME 主机记录www 解析线路国外(默认) 记录值github域名

保存后配置CNAME:在source目录新建CNAME文件,输入个人域名地址,保存

依次执行hexo clean

hexo g

hexo d 

成功后,查看就可以发现域名已经修改

e06ef99d6ec1f90da71d895e8b959b8a.png

文章搜索(本地搜索)

插件官方github:https://github.com/wzpan/hexo-generator-search

安装搜索插件:npm install hexo-generator-search --save

配置插件:在博客根目录的_config.yml最后插入下面代码

search:

 path: search.xml

 field: post

 content: true

各参数详解

f2799f298892a39f8df41bb60e2d81ce.png

更改butterfly配置打开本地搜索功能

评论留言

以valine为例 valine官方文档https://valine.js.org/

打开评论功能,在use参数配置所使用的评论,留空为不使用,text参数选择是否选择服务商名字,count选择是否在文章顶部显示评论数

5862ea0a51ccf249518cf3daefebb23d.png

注册Leancloud用来管理评论(https://console.leancloud.cn)在控制台中创建应用,创建完成后,从设置中获得APP ID APP key和REST API 服务器地址

e95afd1fbe17efcdedcb46ca5a1517ef.png

将appid appkey REST API 服务器地址 写入设置文档中

DDF12BEB-5120-4F45-97FA-B1290EB2258D.png

创建其他链接页面(以友链页面为例)

hexo new page link

修改source/link/index.md文件相关参数如下

title: 友情链接

date: 生成时自动生成

type: “link"

comments: 评论

top\_img:顶部图片

其余效果美化查阅butterfly官方文档多为参数选择配置在此不作过多解释

文章的最后是博客写作方法(以.md格式为例)

直接使用md文件即可,在文件顶部用—回车分隔写入文章配置,可配置参数如下

title: 文章标题

date: 文章创建日期

tags: 文章标签

categories: 文章分类

keywords: 文章关键字

description: 文章描述

top\_img: 文章顶部图片

comments: 文章评论模块

cover: 文章缩略图

highlight\_shrink: 代码框是否展开

aside: 显示侧边栏