简介

Hexo 是一个由Nodejs驱动的博客框架，支持 Markdown、一键部署、插件和多种模板引擎。Hexo 可以让你轻松创建、管理和部署你的个人或团队博客。本文基于个人的实践经验，以Windows为主要开发环境，旨在让那些对博客搭建感兴趣但碍于困难的朋友能搭建起基本的博客框架。

准备工作

课前提醒——主要是针对非程序员

大部分的操作、代码输入都是在Windows系统终端中执行的。

方法：点击开始-搜索“终端”-打开，或者在任意文件夹中“右键”-“在终端中打开”。会出现黑色的框。后续大部分代码都是在这“黑框”中输入且执行的。

博客创建指南01

相关资料下载

  1. Node.js 中文网 (nodejs.cn)安装，进去后点击下载安装，选择长期支持版（LTS）即可

博客创建指南02

  1. 安装cnpm并配置淘宝镜像
1
npm install -g cnpm --registry=https://registry.npmmirror.com

博客创建指南03

注意：后面代码中我打//并且后面跟着文字的（比如//这里是初始化)都是注释，不要写在终端里面

  1. 测试cnpm是否安装
1
cnpm -v

v：version 版本的意思

  1. 安装hexo博客框架
1
cnpm install -g hexo-cli
  1. 测试hexo博客框架是否安装
1
hexo -v

初始化博客

后续可以通过blog文件(shift+鼠标右键-在终端中打开）直接进入终端，也可以用Visual Studio Code将此文件打开并创建终端（建议使用vscode，后续博客维护很方便）。

  1. 在空文件夹（我这里事先创建并将其命名为temp)中初始化hexo博客框架,然后通过cd指令进入此目录。
1
2
3
//示例：cd .\Desktop\temp\
hexo init
//如果报错的话就输入cnpm install 然后再输入hexo s即可
  1. 启动博客 start 用来预览修改后的博客 按ctrl+c即可停止运行。
1
hexo s
  1. 清除博客内容
1
hexo clean  //或者hexo cl
  1. 生成博客内容
1
hexo g

部署

我这里只讲解部署到github的思路，部署到其他平台或者服务器请自行查询有关资料。没有注册github和git的可以看这个github入门及如何提交代码-清晰版本_哔哩哔哩_bilibili

  1. github创建仓库,注意格式严格为你的github用户名.github.io 并复制SSH的clone地址，我这里以Tom为例

博客创建指南04

  1. 安装部署插件
1
cnpm install --save hexo-deployer-git
  1. 修改_config.yml文件

博客创建指南05

1
2
3
4
5
//一般是最后一行。
deploy:
  type: 'git'
  repository: 粘贴你10步复制的地址。
  branch: master
  1. 部署到github
1
hexo d

  1. 13步后有的会提示输入github账号密码，没有就跳过14和15步

  2. 分别输入用户名与密码。

输入密码之后报错并提醒你github已经停止使用密码登录，需要用密钥或者是ssh，这里我采用ssh的方式。

  1. 初始化用户名与邮箱(“yourname”和”youremail“改成你之前注册github设置的)
1
2
git config --global user.name "yourname" //（注意user.name/email和英文双引号"之间要有一个空格）
git config --global user.email "youremail"
  1. 确认是否设置成功
1
2
3
//用户名与邮箱
git config --global user.name
git config --global user.email
  1. 下载github部署插件
1
npm install hexo-deployer-git --save
  1. 本地生成密钥
1
ssh-keygen -t rsa -C "youremail"（这里改为16步你设置的邮箱）
  1. 获取你生成的密钥，并复制返回的结果
1
cat ~/.ssh/id_rsa.pub

  1. 登录github, 点击头像——settings——点击SSH and GPG keys-再点击New SSH key,自己取一个标题,然后将复制的密钥粘贴到"key"文本框内并提交（Add SSH key)。

  2. 验证：

1
ssh -T git@github.com
  1. 再次提交
1
hexo d
  1. 运行并检验是否成功
1
hexo s   //或者在浏览器URL栏输入“你的github用户名.github.io”，验证是否已经部署。

至此你已经成功部署一个简单的hexo博客，恭喜你我的朋友(^o^)/~，但这只是伟大征程的第一步，这是结束也是开始……

博客维护

基础指令

主题、文章修改之后要重新生成并部署。
简单讲解：

  1. hexo cl 将之前上传的清除
  2. hexo g 生成框架
  3. hexo s 将其打开在主机上
  4. hexo d 提交到github上

总结：最重要的是第2,4个代码（部分插件使用需要第一个代码，这样通过你的用户名.github.io打开的博客才会更改。

md文件

命令行创建md文件
hexo n "博客文章名"， 必须先进入到文件中才能使用，会自动在 你所创建的文件夹\source_posts\博客文件名.md 路径下创建一个md文件。

md文件保存位置
一般就在/_ posts 文件下创建md文件即可（或者把md文件移动到这里），要在开头加上如下语句即可.注意冒号后面要留空格

示例格式如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<! -- 这里是html的注释 写的时候不要添加 - - >
title: 我的第一篇博客文章
date: 2024-06-01  19:10:34
tags: C++
no_valine: true<!- - 关闭评论- - >
comments: 是否开启评论(true or false)
top: <!- - 文章置顶true- - >
no_word_count: true<!- -关闭字数统计- - >
password: <! - -如果加密，这里填写密码 - - >
reward: true<!- - 当前文章是否开启打赏 - - >
copyright: true<!- - 当前文章是否开启版权声明 - - >
categories: <! - -如下，分类2是分类1的子分类- - >
- [分类1，子分类1]
- [分类1，子分类2]
- [分类2]
tags: 
- 标签1
- 标签2

插件下载与使用

提醒：少即是多, 避免华而不实。

打开官方文档文档 | Hexo，点击插件，点击中意的插件，按照作者的教程去配置插件

举例
DPlayer插件

播放代码
{% dplayer "url=" "pic=" "theme=#FADFA3" "autoplay=false" "mutex=true" %}

示例
打开对应视频资源网页版（这里以b站为例），鼠标移动到分享-“嵌入代码”，将代码复制到md文件里面，如果需要调整大小，可添加height=450 width=600 ,根据需要调整即可

主题的下载与使用

安装思路同插件
注意在themes界面中可以点击“visit preview site”预览主题。

  1. 看作者介绍如何安装，一步步安装 ，复杂一点的主题还有一系列插件安装
  2. 打开根目录下的_config.yml 将theme: 以前的主题 改为 theme: 现在的主题
  3. 后续的改动都是要基于作者文档。熟悉前端开发的朋友可以用“检查“了解作者网页的结构，然后自行修改

推荐主题：

Hexo进阶-butterfly主题安装及其定制化

我目前安装的是5.1.0版本的。

虽然主菜单栏里面可以分成多个子菜单，但是似乎每一个子菜单只能放一个md文件，所以建议此md文件作为某一类型的东西的索引来呈现。

所有的博客md文件都需要放在_post文件夹里面，其他地方大多只能放索引md文件。建议使用hexo n post 标题名 ,这样就会自动将对应的文件夹也生成。

建议修改的使用经常使用Hexo s命令，修改无误之后再提交。

To be continue……

总结

本篇文章主要侧重于基础的hexo博客搭建，至于进阶的hexo主题搭建和插件安装，限于笔者能力难以展开，有兴趣的读者可以去官方文档找对应的资料，按照作者的文档去安装。

结束语

有的朋友会说这也太难了吧，确实对于零基础的小白配置一个复杂的博客主题绝非易事，但是我想用王安石的一句话共勉想要变得更强、超越自我的朋友。
“而世之奇伟、瑰怪、非常之观，常在于险远，而人之所罕之焉，故非有志者不能之也。”

参考资料

  1. 官方网站：文档 | Hexo
  2. 其他人的教程：搭建个人博客网站 - 幕布 (mubu.com)
  3. git和github下载和使用：github入门及如何提交代码-清晰版本_哔哩哔哩_bilibili