基于Hexo框架快速搭建个人博客--搭建（一）

---

• 博客链接： 会思想的苇草i
• 文章链接：
  • 基于Hexo框架快速搭建个人博客–搭建（一）
  • 基于Hexo框架快速搭建个人博客–评论功能（二）
  • 基于Hexo框架快速搭建个人博客–部署（三）
  • 基于Hexo框架快速搭建个人博客–文章写作（四）
  • 基于Hexo框架快速搭建个人博客–文章一键发布（五）

---

一、HEXO框架

• Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。Hexo不仅搭建过程简单快捷，配置灵活，可定制型非常高，拥有众多的主题库
• Hexo中文官网 ，Hexo Github地址

二、安装Node.js

• Hexo 是使用 Node.js 开发的，所以我们安装 Hexo 之前需要先安装 Node.js 环境
• Node.js 就是运行在服务端的 JavaScript 。安装了 Node.js 环境，就可以不用依赖浏览器就可以运行 js 代码，其实它也是基于 Chrome 引擎开发的一个开源项目
• Node.js 官网

• 官网下载，直接点击下一步安装即可，打开命令行窗口输入 npm-v 出现版本号即安装成功

三、安装Git

• Git是一个开源的分布式版本控制系统，可以有效、高速地处理从很小到非常大的项目版本管理；也是为了帮助管理Linux内核开发而开发的一个开放源码的版本控制软件。
• Git 官网

• 官网下载，直接下一步安装即可。Git 安装完成后，自带了一个命令行窗口，通过上面新增的右键菜单 Git Bash Here 就可以打开输入 git --version 出现版本号即安装成功

四、安装Hexo

1. Hexo官网

2. 安装：命令行窗口输入npm install hexo-cli -g

   

3. 初始化：命令行窗口输入hexo init "项目名称"

   

4. 测试：hexo clean（清理编译文件）hexo g （编译项目）hexo s（本地预览运行项目），打开浏览器，输入网址 http://localhost:4000/ 预览

   

   

   

   

五、设置主题

• 默认主题较为简洁，可以从官方网站主题页，Github，以及网上寻找相关主题进行美化
• 我选用的是 ayer 主题，该主题界面简洁，功能丰富，上手简单快速
• Ayer主题展示 ，Ayer主题 Github地址

• 在Hexo博客根目录下（D:\hexoblog）(这是我电脑中的路径)下右键，选择Git Bash Here，执行下面命令：

git clone https://github.com/Shen-Yu/hexo-theme-ayer.git themes/ayer

• 执行上述命令后在node_modules中会有hexo-theme-ayer文件夹

• 打开博客根目录下的 _config.yml (D:\hexoblog\_config.yml)，找到theme标签，默认值是landscape主题，把它改为要更换的主题名字ayer，然后执行启动命令

# 清理 && 生成 && 启动
hexo clean && hexo g && hexo s

• 此时再到浏览器打开网址http://localhost:4000，可以看到我们的博客已经换上一款非常精美的主题

• Hexo 的配置大部分都保存在博客根目录下的_config.yml文件，我这里是D:\hexoblog\_config.yml，它是根目录配置文件，直接修改这个文件就可以更改博客的一些设置，像前面更换主题就是修改这个文件的参数实现的
• 关于_config.yml文件的每个参数的详细意义，可以在 官方文档 | Hexo里查看，每一个参数都有示例，讲解的非常详细
• 对网站主要部分进行修改：

# 网站标题
title: 会思想的苇草i
# 网站副标题
subtitle: 技术博客
# 网站描述
description: 一个有趣且实用的博客网站，涉及前端，算法，数据结构，操作系统等计算机相关知识。
# 网站的关键词。支持多个关键词。
keywords: 前端 算法 技术
# 名字
author: 会思想的苇草i
# 网站使用的语言。
language: zh-CN
# 网站时区
timezone: Asia/Shanghai

• 此外，下载的第三方主题的根目录下也有一个_config.yml文件，比如 ayer 主题，我这里就是D:\hexoblog\node_modules\hexo-theme-ayer\_config.yml文件，它是主题配置文件。
• 关于这个文件每个参数的详细意义，可以在每个主题的 GitHub 主页看到详细说明，参考 ayer 主题官方帮助文档Ayer中文说明 | 岛 (gitee.io)
• 关闭不需要的侧边栏：

menu:
  主页: /
  归档: /archives
  分类: /categories
  标签: /tags
#  旅行: /tags/旅行/
#  摄影: http://shenyu-vip.lofter.com
#  友链: /friends
  关于我: /2019/about

• 自定义首页滚动播放的文字内容：

subtitle:
  enable: true # 是否开启动效
  text:  欢迎来到会思想的苇草i的博客 # 显示的文字
  text2: When the sun shines on the sea, I miss you. # 滚动播放，如果不需要可以留空
  text3: When the hazy moonlight sprinkles on the spring, I miss you. # 最多支持三段文字

• 设置网站图标和侧边栏logo，推荐使用ICO转换器 — Convertio将图片转换为.ico格式：

# 网站图标和侧边栏logo
favicon: /favicon.ico
logo: /favicon.ico

• 关闭右上角的 GitHub forkme：

github:
  # (关闭请设置为false)
  enable: false
  url: https://github.com/Shen-Yu/hexo-theme-ayer

• 修改打赏图片，直接重命名复制到该文件夹下覆盖：

# 打赏
# 打赏type设定：0-关闭打赏； 1-文章对应的md文件里有reward:true属性，才有打赏； 2-所有文章均有打赏
reward_type: 2
# 打赏wording
reward_wording: "感谢打赏哈哈嗝~"
# 支付宝二维码图片地址，跟你设置logo的方式一样。比如：/images/alipay.jpg
alipay: /images/alipay.jpg
# 微信二维码图片地址
weixin: /images/wechat.jpg

• 改完后，执行hexo g && hexo s，刷新网页看下效果：

六、本地发布文章

• 终端下输入命令：hexo new "我的第一篇博客"

• 此时进入博客根目录下的source_posts(D:\hexoblog\source_posts)文件夹，可以看到多了一个我的第一篇博客.md文件，这便是新生成的博客文章，因为 Hexo 默认使用 Markdown 格式，所以文件后缀是md，可以使用记事本或者Typora打开并编辑

• 编辑完毕后执行hexo g && hexo s重新部署，刷新http://localhost:4000/，就可以看到博客上多了一篇文章

• 打开新建的文章我的第一篇博客.md，可以看到它并不是空的，可是页面上却显示为空，因为 Hexo 根据默认模板帮我们自动生成了一些参数，比如文章创建时间等。这个模板是可更改的。编辑上面打开的文章我的第一篇博客.md，添加一些正文，并改一下自动生成三个参数

• 此时先 Ctrl + C 停止服务器，执行hexo g && hexo s重新部署，刷新http://localhost:4000/，可以看看到更改后的效果

七、总结

• 借助于Hexo的框架和ayer主题可以快速简易地搭建好一个个人博客，我觉得相对而言更加复杂的是对网页布局和内容的修改和美化，在这里还只是在本地搭建好了一个个人博客，只能实现本地预览效果，因此需要对网站进行部署，我采用的是 GitHub Page ，相关内容请关注后续文章。