前言

• 最近在网上经常刷到各种博客和个人主页，看着就挺手痒的，突然想起来以前大学的时候也做了一个博客，不过后来因为上班之后就没时间去更新和维护了，直到现在也只是个半成品，最近公司假期放得比较多，想着要不就重新搭建一个新的博客吧，正好也能写一篇文章（水一篇文章）

什么是hexo

• Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他标记语言）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

hexo常用指令

• 在开始搭建之前，建议先了解几个常用指令，这对后面的安装调试都非常有帮助 (资料来源官方)

hexo init [folder] # 新建一个网站。如果没有设置 folder ，Hexo 默认在目前的文件夹建立网站。
hexo new [layout] <title> # 新建一篇文章。如果没有设置 layout 的话，默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话，请使用引号括起来。
hexo generate # 生成静态文件
hexo server # 启动服务器。默认情况下，访问网址为： http://localhost:4000/
hexo deploy # 部署网站。
hexo clean # 清除缓存文件 (db.json) 和已生成的静态文件 (public)。在某些情况（尤其是更换主题后），如果发现您对站点的更改无论如何也不生效，您可能需要运行该命令。

• 这里只是几个比较常用的指令，并没有详细说明使用方法，详细说明请到官方文档查询，这里也把官方链接贴出来

https://hexo.io/zh-cn/docs/commands

环境安装

安装前提

1. Github账号（用于网页搭建使用）
2. Node.js (Node.js 版本需不低于 10.13，建议使用 Node.js 12.0 及以上版本)
3. Git

• 如果您的电脑中已经安装上述必备程序，那么恭喜您！你可以直接前往 安装 Hexo 步骤。
• 如果您的电脑中尚未安装所需要的程序，请根据以下安装指示完成安装。

安装NodeJS和Git

• 打开浏览器，这里我用的是微软的Edge，在地址栏复制以下链接粘贴回车安装包将会开始下载，下载完成之后打开一路下一步安装即可

https://npmmirror.com/mirrors/node/v20.14.0/node-v20.14.0-x64.msi
https://mirror.ghproxy.com/https://github.com/git-for-windows/git/releases/download/v2.45.2.windows.1/Git-2.45.2-64-bit.exe

测试安装是否完成

• 安装完成之后右击Windows徽标，选择终端打开输入node -v和git -v，如果能跳出版本号的话就是安装成功了（如图所示）
  

安装hexo框架

• 所有必备的应用程序安装完成后，即可使用 npm 安装 Hexo，这里可以提前准备一个代码编辑器，我使用的是来自微软的VSCode，选择提前准备好存放代码的位置，右击用code打开，一般打开之后底下会弹出一个终端，这时候在终端输入以下指令开始安装hexo，一般情况下，只要不是显示红色字体，都是安装成功了的（黄色字体可以不用管）

npm install -g hexo
npm install -g hexo-cli

创建博客以及初始化

创建

• 在终端里输入以下指令开始创建博客，这里我输入的是blog2是因为我已经创建了一个同名的文件夹了，所以需要避开重名

hexo init blog

• 待跑码完成，可以在文件管理器里看到一个名为blog的文件夹(请无视这个blog2，正常情况都是blog)，打开之后会看到一堆文件以及文件夹，这些就是搭建博客所需的文件
  

初始化

• 接下来可以输入以下指令可以测试一下博客是否正常运行

hexo server

• 正常情况下，当启动服务器之后，终端会跳出本地访问地址，打开这个地址，如果出现以下界面，说明博客启动成功，一切正常，就可以进行接下来的操作了
  
  

更换主题为butterfly以及初始化

安装主题

• 在终端里输入以下指令开始拉取butterfly主题源码

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

• 到这个步骤很多人可能会遇到无法拉取源码，这里也准备了一个国内可以使用的

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

• 待源码拉取完成之后，打开themes文件夹，会看到一个名为butterfly的文件夹，打开文件夹会看到很多文件，这个就是butterfly主题的所有文件了
  

应用主题

• 接下来打开_config.yml这个配置文件，按Ctrl+F直接搜索theme这个字段，将原本的landscape改为butterfly，按Ctrl+S保存一下
  一定要养成随手保存的习惯，这是血的教训！！！
  
  

安装所需的插件

在终端里输入以下指令安装pug 以及 stylus 的渲染器，这是必要的插件

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

测试主题

• 接下来可以在本地先测试一下效果看看，输入以下指令清除缓存并运行本地服务

hexo clean
hexo server

• 每次都要这么重复输入相同指令，感觉有点麻烦，后面我去查了一下相关的文档以及文章，发现可以修改package.json里的script字段，直接把要执行的命令输入进去，后面只需要输入npm run server就可以执行相同的效果了，具体步骤如下：
  1. 打开blog目录里的package.json，用之前的编辑器打开，这里我用的是VSCode
  2. 定位到scripts字段里的server，这里能看到官方的只有一个hexo server，直接在hexo这个字段前面打一个空格输入逻辑连接符 && 中间还有一个空格在加上需要的执行的指令，这里我就加了一个hexo clean，这段指令的意思是先每次运行都先清除缓存之后在运行本地服务
     
     
• 把package.json设置好之后，输入以下指令，打开浏览器看下主题是否一切正常

npm run server

初始化

创建页面

• 看到这个界面就表示主题安装成功，并且运行一切正常，但是现在主题光秃秃的什么都没有，接下来就来做一个最基本的界面吧
• 接下来打开主题文件夹(/blog/theme/butterfly) 把_config.yml这个文件直接复制到一个空闲的文件夹，并重命名为_config.butterfly.yml，之后剪切并粘贴到博客目录中
  注意: 复制的是主题的 _config.yml ，而不是博客目录下的 _config.yml，以后只需要在 _config.butterfly.yml 进行配置就行。
  如果使用了 _config.butterfly.yml， 配置主题的 _config.yml 将不会有效果。
  注意： 不要把主题目录的 _config.yml 删掉
  
• 接下来先创建几个基本的页面：标签，分类，友情链接，先把之前运行的服务按Ctrl+C结束运行
• 确保此时终端显示是在博客目录下(blog)而不是在主题目录下
  
• 输入以下指令分别创建标签，分类，友情链接页面

hexo new page tags
hexo new page categories
hexo new page link

• 打开博客目录下的source文件夹，会看到三个名为tags，categories，link的文件夹，对应的也就是标签，分类，友情链接，分别打开tags文件夹，里面有一个名为index.md的文件，打开这个文件，在时间末尾按一下回车，输入type: "tags" 保存退出，接下来以此类推，打开另外两个文件夹，按照文件夹名称添加type，重复上面的操作即可
  
  
  

友情链接添加

• 在博客目录中的 source/_data（如果没有 _data 文件夹，请自行创建），创建一个名为文件 link.yml的文件，复制以下代码直接粘贴，后续想要添加链接或者是修改的话，都按照这个文件里的格式修改即可

- class_name: 友情链接
  class_desc: 那些人，那些事
  link_list:
    - name: Hexo
      link: https://hexo.io/zh-tw/
      avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg
      descr: 快速、简单且强大的网志框架

- class_name: 网站
  class_desc: 值得推荐的网站
  link_list:
    - name: Youtube
      link: https://www.youtube.com/
      avatar: https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png
      descr: 视频网站
    - name: Weibo
      link: https://www.weibo.com/
      avatar: https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png
      descr: 中国最大社交分享平台
    - name: Twitter
      link: https://twitter.com/
      avatar: https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png
      descr: 社交分享平台

顶部导航栏添加

• 现在博客几个最基本的页面都有了，但是顶部还是光秃秃的，接下来就来加几个常用的按钮吧
• 打开博客目录下的_config.butterfly.yml文件，原始文件里的都是繁体字，建议直接按Ctrl+F搜索Menu，找到这个字段之后，直接复制下面我编辑好的中文目录替换即可，当然你也可以自己修改

# Menu 目录
menu:
  首页: / || fas fa-home
  时间轴: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags
  标签: /categories/ || fas fa-folder-open
  媒体||fas fa-list:
    音乐: /music/ || fas fa-music
    电影: /movies/ || fas fa-video
  友链: /link/ || fas fa-link
  关于: /about/ || fas fa-heart

• 替换好之后直接保存，输入npm run server测试效果，不出意外的话，那就跟我图片的是一模一样的，到这里博客基本功能就可以使用了，这里没有写太多怎样去自定义博客功能，这篇教程主要是面向新手朋友的，具体怎么去自定义功能，建议去作者的博客看看，里面写的非常详细，这里也把链接放在文章最后了，可以自行跳转

把博客部署到GitHub

安装插件

• 停止博客服务运行，确保终端此时显示的目录是博客目录(blog)在终端输入以下指令开始安装插件

npm install hexo-deployer-git --save

创建仓库

打开GitHub，如果没有账号的可以自己注册一个，注册登录好之后，点击右上角的加号旁的小三角形，点击New repository创建一个新仓库，仓库名一定要按照以下格式创建，不然博客会无法识别并上线

你的GitHub用户名.github.io

创建完成之后，会自动跳转到以下地址

https://github.com/你的用户名/你的GitHub用户名.github.io

配置博客

• 打开博客目录下的_config.yml文件，找到deploy这个字段，在repo里输入你的仓库地址，branch这里填入master
  
  注意: 一定要按照格式输入，该加空格的地方一定要加，否则在运行时会报错

上传源码

• 在终端输入以下指令，设置一下git参数

git config --global user.name "GitHub用户名"
git config --global user.email "GitHub绑定的邮箱"

• 接下来依次执行以下指令，也可以使用之前修改package.json的方法，直接一次性执行，这里我就是直接把下面的指令都放到package.json里面了，如果和我的一样的话，那直接输入npm run deploy就可以了

hexo clean
hexo generate
hexo deploy

查看效果

• 到这一步可能很多人会出现GitHub无法连接的情况，这是正常的，一般情况下多试几次就好了，，当跑码完成之后，回到刚刚创建的仓库，就能看到博客源码了，此时在浏览器地址输入：你的GitHub用户名.github.io，就能看到博客已经正常运行了
  • 例如：我的用户名是ui-beam-9，那么我的博客地址就是 ui-beam-9.github.io
    
    
    

鸣谢

本篇文章所有资料来源均来源于Hexo和Butterfly官方，感谢这些开发者做出的贡献

https://hexo.io/zh-cn/docs
https://butterfly.js.org

写在最后

• 到这里博客已经搭建并部署完成了
  现在你的博客网站的地址是 xxx.github.io，如果觉得这个网址不够好的话，可以设置个人域名了，但是需要花钱
  • 其实现在域名也很便宜，有条件的还是买一个域名吧，当然如果只是白嫖的话，这个网站也已经够用了，毕竟也不用买云服务器，也可以省下一笔钱

原文链接：只需一个 github 账号从 0 到 1 使用 hexo 博客框架和 Butterfly 主题搭建一个属于自己的博客 (无需云服务器) | ui_beam の Blog