前言

本教程围绕 Win10 进行
对于Mac或者Linux系统等,可百度或者自行找教程

本教程仅仅是作为个人纪录
如若有兴趣动手按照本教程搭建自己的博客

搭建前,请提前浏览一遍本教程,和重要要点!

前期准备

安装Git

官网链接:https://git-scm.com/
阿里镜像源(下载速度快):https://registry.npmmirror.com/binary.html?path=git-for-windows/
或通过我提供的文件下载:下载链接

安装时,建议不要修改安装路径,否则会导致后面的批处理脚本出现问题

安装Node.js

官网链接:https://nodejs.org/zh-cn/
或通过我提供的文件下载:下载链接

Node.js 版本需不低于 10.13,建议使用 Node.js 12.0 及以上版本
使用 Node.js 官方安装程序时,请确保勾选 Add to PATH 选项(默认已勾选)

更换npm镜像源

为了解决速度慢的问题。建议给Node.js换一个镜像源,这里更换的是淘宝的镜像源,代码如下:

1
npm install -g npm --registry=https://registry.npm.taobao.org

安装Hexo

官网链接:https://hexo.io/
或通过我提供的文件下载:下载链接

我提供的 Hexo-cli.bat 双击打开后有两种安装方式

npm : 官方源,如果是在中国大陆访问速度可能有点慢
cnpm : 淘宝的npm镜像源,中国大陆访问速度最快

配置Git用户和ssh密钥

注:如需上传至GitHub或Gitee部署的,需要进行此步骤,其他可跳过

  • 在任意空白地方右键,选择 Git Bash Here 输入下面的命令

1
git config --global user.name "你的用户名"
1
git config --global user.email "你的邮箱"
1
ssh-keygen -t rsa -C "邮箱地址"

引号里对应填入自己的东西
接着在第三个命令后,会出现Enter开头的英文提示,这时候按三次 回车键 即可

配置SSH

SSH文件夹的默认存储位置是 C:\Users\电脑用户名.ssh

在ssh文件夹里,会显示 id_rsaid_rsa.pub 两个文件
id_rsa是私钥,id_rsa.pub是公钥

id_rsa.pub 里的内容复制到 GitHubSettings的SSH处

测试连接

完成上一步后可通过下面的这条命令测试是否于GitHub接通了

1
ssh -T git@github.com

Hexo搭建教程

初始化

  • 在你想存放的地方新建一个空文件夹,作为博客的源文件部署地
  • 在此文件夹内右键选择 Git Bash Here 输入下面的命令 初始化Hexo
    1
    hexo init

    注:往后所有的操作都基于此文件夹
    如果出现了什么问题无法解决,就只能删除
    所以修改东西前注意做好备份

    接下来就会在此目录下自动生成一些文件,初始化完成

本地调试

在Hexo根目录内右键选择 Git Bash Here 输入下面的命令
即可通过本地默认的4000端口访问进行预览调试

1
hexo s

或使用我分享里的 本地调试.bat ,双击即可直接运行调试

Butterfly主题教程

Butterfly主题官网:https://butterfly.js.org/
Butterfly项目地址:https://github.com/jerryc127/hexo-theme-butterfly
更多Hexo主题:https://hexo.io/themes/

主题安装

在Hexo根目录内右键选择 Git Bash Here 输入下面的命令

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

接下来就会在此目录下自动下载主题文件到 themes 目录内

配置主题

Hexo根目录 内创建一个文件 _config.butterfly.yml
并把主题目录内 _config.yml 里面的内容 复制 到刚刚创建的 _config.butterfly.yml 里面去

注意: 复制的是主题内的 _config.yml,而不是 Hexo根目录 的 _config.yml

往后 _config.butterfly.yml 用来配置主题的文件
_config.yml 是用来配置Hexo框架等信息内容

启用主题

在Hexo根目录内打开 _config.yml
找到配置项 theme,修改为 theme: butterfly

在Hexo根目录内右键选择 Git Bash Here 输入下面的命令
即可通过本地默认的4000端口访问进行预览

1
hexo s

懒人教程

此文件包含了第四步、第五步的所内容
可以直接通过我提供的 Hexo程序主文件 下载解压使用 下载链接

新建文章&页面

可使用我分享里的 创建文章或页面.bat ,双击即可直接创建
也可以根据下方对应的教程来创建

文章

在Hexo根目录内右键选择 Git Bash Here 输入下面的命令

1
hexo n "文章名称"

Hexo支持实时预览文章页面内容
编写的时候保存文件并刷新浏览器页面就能看到新内容

页面

在Hexo根目录内右键选择 Git Bash Here 输入下面的命令

1
hexo n page "页面名称"

上传网站

提示:可使用我分享里的 上传网站.bat ,双击即可选择上传

新建仓库

优点:
可以绑定自己的域名,也可以强制开启HPPTS
总体容量无限制,单个仓库推荐最大1G

缺点:
GitHub的服务器在国外,有时可能会访问不到、过慢或需要挂梯子
私有库需要付费使用
源代码完全公开,安全性略差

  • 打开 Github 官网并登录,点击右下角头像旁边的加号
  • 选择 New Repository(新建仓库)

  • 1、如果作为网站使用,仓库名称格式必须为:你的Github用户名.github.io
  • 2、选择 Public(公开)

  • 再点击 Create Repository 按钮完成创建

优点:
Gitee的服务器在国内,在国内访问的速度会很快
仓库出现问题,可快速联系管理员处理
私有库是免费的

缺点:
绑定域名属于付费内容
仓库、内容容易误封
涉及政治内容容易误封

  • 打开Gitee官网并登录,点击右下角头像旁边的加号
  • 选择新建仓库

  • 如果作为网站使用,仓库名称需要和你的用户名一样
  • Gitee Pages没有限制,开源和私有都能使用
  • 点击创建按钮完成创建

安装插件

在Hexo根目录内右键选择 Git Bash Here 输入下面的命令
即可安装Git部署插件

1
cnpm install --save hexo-deployer-git

_config.yml配置

  • 将下方左侧图的 url: 的链接改成:你的GitHub用户名.github.io
  • 再找到下方右侧图的 repo: 把SSH地址粘贴进去


  • 将下方左侧图的 url: 的链接改成:你的gitee用户名.gitee.io
  • 再找到下方右侧图的 repo: 把SSH地址粘贴进去


部署网站

在Hexo根目录内右键选择 Git Bash Here 安装顺序输入以下命令

  • 清除缓存
    1
    hexo clean
  • 生成静态文件
    1
    hexo g
  • 部署到远端
    1
    hexo d
  • 打开下载好我分享内的 上传网站.bat
  • 双击即可选择上传方式

1:没有清除缓存的文件,一般用于文章发布等小推送
2:包含了清除缓存、生成更新站点地图命令行,适用于修改了主题文件、配置等重大改动的推送

注意: 使用bat脚本,第一次上传会让你记住主机,输入 yes 继续

报错案例

若遇到报错,请一个一个排查
更多报错案例请移步:Butterfly

本地预览出错

extends includes/layout.pug block content include ./includes/mixins/post-ui.pug #recent-posts.recent-posts +postUI include includes/pagination.pug

没有 pug 以及 stylus 的渲染器

解决方法:

  • 在Hexo根目录内右键选择 Git Bash Here 输入下面的命令
1
2
3
4
5
npm install hexo-renderer-pug hexo-renderer-stylus --save



yarn add hexo-renderer-pug hexo-renderer-stylus

push后出错/缺失/无效

本地可以正常运行,但是push上去后出错/缺失/无效

解决方法:

  • 清理浏览器缓存

  • 如果上方方法无效,请确认上传时是否有运行 hexo clean

博主使用的插件

命令普及

  • 查看已安装插件

    1
    npm ls -dept 0
  • 安装、卸载插件

    1
    2
    3
    4
    5
    npm install 插件名 --save
    //安装插件

    npm uninstall 插件名 --save
    //卸载插件

已装插件表

插件名 插件名 说明
hexo-deployer-git 插件链接 适用于Hexo的Git部署程序插件
hexo-generator-search 插件链接 为 Hexo 博客添加本地搜索功能
hexo-renderer-kramed 插件链接 为 Hexo 博客插入数学公式
hexo-wordcount 插件链接 为 Hexo 博客添加字数统计和阅读统计
hexo-generator-feed 插件链接 为 Hexo 博客添加RSS订阅-xml地图
hexo-generator-sitemap 插件链接 为 Hexo 博客生成站点地图
hexo-generator-baidu-sitemap 插件链接 专门为百度生成站点地图
hexo-helper-live2d 插件链接 为 Hexo 博客添加live2d动态模型
hexo-githubcalendar 插件链接 基于 Hexo 的github贡献插件
hexo-filter-nofollow 插件链接 自动为站内链接加上nofollow跳转
hexo-butterfly-artitalk 插件链接 为 Hexo 博客添加说说页面
hexo-blog-encrypt 插件链接 实现对文章的加密

下载地址

蓝奏云访问码请到公众号回复:607