Hexo博客搭建和使用教程(Windows)

白昼皓月

已于 2023-08-15 15:13:31 修改

阅读量1.5k

点赞数 6

文章标签： windows

于 2023-08-15 15:06:59 首次发布

本文链接：https://blog.csdn.net/m0_68021330/article/details/132299299

版权

提前声明：

本文借鉴codingpath文章（2022 Hexo 博客搭建和使用教程(Windows) - 知乎 (zhihu.com) ），后根据本人理解重新编写。

Hexo博客

Hexo介绍：

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 [Markdown]Daring Fireball: Markdown )（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

Hexo 官方中文网站: Hexo

第一章前期准备

1.1 安装前所需环境介绍

安装 Hexo 之前，需要确保您的 PC 中已经安装以下工具:

Node.js [地址: [Node.js (nodejs.org)](Node.js (nodejs.org) )]
Git [地址: [Git (git-scm.com)](Git (git-scm.com) )]

如果您的电脑已经具备所需工具，那么您可以直接进入第二章开始安装 Hexo 了。

如果您还未安装这两款工具，那么请按照以下步骤进行安装。

1.2 安装 Git

官方下载地址: [Git - Downloading Package (git-scm.com)](Git - Downloading Package (git-scm.com)
安装与使用: 详情见 Git 笔记(尚未写出)
注意事项: 建议选择 64-bit Git for Windows Setup，并且安装时要勾选 Add to PATH 选项

win + R 在命令行输入cmd进入终端模式，输入下面指令，当显示版本则安装成功

git -v

1.3 安装 Node.js

官方下载地址: Node.js (nodejs.org)
安装与使用: 详情见 Node 笔记(尚未写出)
注意事项: 使用 Node.js 官方安装程序时，请确保勾选 Add to PATH 选项（默认已勾选）

win + R 在命令行输入cmd进入终端模式，输入下面指令，当显示版本则安装成功

1	node --version

至此，您已经完成了安装 Hexo 所需的所有额外环境，接下来就可以安装 Hexo 了。

第二章安装 Hexo

2.1 安装 cnpm

当您安装 Node.js 之后，便可以在命令行中通过 node install 命令安装您想要的程序了。但本文推荐使用 cnpm 安装 Hexo，所以需要先通过 npm install 安装 cnpm。

命令: npm install -g cnpm --registry==https://registry.npm.taobao.org
说明: -g 表示进行全局安装，–registry==https://registry.npm.taobao.org 表示使用淘宝镜像安装 cnpm
安装后验证: 在 cmd 中输入命令 cnpm -v, 可查看 cnpm 版本

2.2 安装 Hexo

命令: cnpm install -g hexo-cli
说明: -g 表示全局安装，hexo-cli 为所安装的包
安装后验证: 在 cmd 中输入命令 hexo -v, 可查看 hexo 版本

2.3 注意事项

建议永远安装最新版本的 Hexo，以及 [推荐的 Node.js 版本](文档 | Hexo )。

Hexo 版本	最低兼容 Node.js 版本
6.0+	12.13.0
5.0+	10.13.0
4.1 - 4.2	8.10
4.0	8.6
3.3 - 3.9	6.9
3.2 - 3.3	0.12
3.0 - 3.1	0.10 or iojs
0.0.1 - 2.8	0.10

至此，您已成成功安装了 Hexo，接下来进入 Github 的配置吧!

第三章配置 Github

如果您还没有 Gihub 账户，请注册一个 Github 账户吧!

3.1 在 Github 上创建仓库

新建一个名为: http://username.github.io 的仓库(username 为您的 Github 用户名)
比如，如果您的 github 用户名是 test，那么您就新建名为 http://test.github.io 的仓库（必须是您的用户名，其它名称无效），将来你的网站访问地址就是 https://test.github.io 了。由此可见，每一个 github 账户最多只能创建一个这样可以直接使用域名访问的仓库。

-->

3.2 配置 SSH 免密登录

为什么要配置这个呢？因为您提交代码肯定要拥有您的 github 权限才可以，但是直接使用用户名和密码太不安全了，所以我们使用 ssh key 来解决本地和服务器的连接问题。

注: 如果您已经配置过 SSH，可跳过此步骤

步骤:

1、首先打开电脑文件夹，找到 C:\Users\您的用户名\ .ssh文件夹并删除(如果没有，则直接进入第二步)

2、在 C:\Users\您的用户名文件夹下右键打开 Git Bash Here 输入命令: ssh-keygen -t rsa -C "你的github登录邮箱" 生成.ssh秘钥，输入后连敲三次回车，出现下图情况代表成功

3、生成了一个新的 C:\Users\您的用户名\ .ssh文件夹，打开这个文件夹，找到 .ssh\id_rsa.pub 文件，记事本打开并复制里面的内容

4、打开您的 github 主页，进入个人设置 -> SSH and GPG keys -> New SSH key，把复制的内容粘贴进去，title 随便填，保存即可，我们的公钥就添加成功了，设置好如下图:

5、检测是否设置成功:

输入命令: ssh -T git@github.com

看到以上信息说明 SSH 已配置成功!

如果出现提示则选择yes知道成功；

6、此外您还需要如下配置:

命令: git config --global user.name "您的 Github username" // 注意是 username, 而非昵称

命令: git config --global user.email "xxx@qq.com" // 填写您的 github 注册邮箱

至此，您已经成功配置好了 Github，接下来开始搭建个人博客吧!

第四章使用 Hexo 搭建博客

Hexo 的一些命令

生成静态文件：hexo g；
清空静态文件：hexo cl；
在本地运行：hexo s；
部署到网站：hexo d；
生成静态文件并部署到网站：hexo d -g 或 hexo g -d；
创建新文章：hexo new <file>。

4.1 初始化

1、在电脑的某个磁盘或路径新建一个名为 hexo 的文件夹(名字可以随便取)，比如我的是 D:\hexo，由于这个文件夹将来就作为您存放代码的地方，所以最好不要随便放

2、在 D:\hexo 文件夹下右键打开 Git Bash Here，输入命令: hexo init 进行初始化

hexo 会自动下载一些文件到这个目录，包括 node_modules，目录结构如下图:

3、执行命令: hexo g 会在 public 文件夹下生成相关的 html 文件，这些文件将来需要提交到 Github 上

4、执行命令: hexo s 可以开启本地预览服务，打开浏览器访问 http://localhost:4000 即可看到博客内容

4.2 将博客部署到 Github

1、在 D:\hexo 目录下安装 hexo-deployer-git 插件

命令: npm install hexo-deployer-git --save

2、编辑 D:\hexo 目录下的 _config.yml 文件，在文件末尾添加如下内容:

注意: 其中 repository 中的内容即为 github 个人主页链接地址

3、在 D:\hexo 目录下，输入命令: hexo d 将本地 blog 推送到 github 远程仓库，也可能需要输入 username & pwd

推送成功后，即可通过https://baizhouhaoyue.github.io/访问个人博客了 !

第五章更换主题

在 D:\hexo 目录下有一个 themes 文件夹，该文件夹下存放着 hexo 所使用的主题

5.1 搜索主题

hexo 官方提供了很多主题供我们使用，地址: Themes | Hexo , 选择喜欢的主题并点击即可跳转至 github
您可以在 github 中直接搜索 hexo 主题

5.2 下载主题

方法一：

1、在 D:\hexo 目录下右键 Git Bash Here

2、执行命令: git clone 主题http链接 themes/主题名称 将主题下载至 themes 文件夹下

可以在该文件夹下查看是否下载成功

方法二：

1、在 D:\hexo 目录下右键 Git Bash Here

2、执行命令: npm install hexo-theme-主题名@latest 将主题下载至 themes 文件夹下(根据主题要求文档)

5.3 使用主题

方法一：

打开 D:\hexo 目录下的 _config.yml 文件，在里面找到 theme: landscape改为theme: yilia-plus(yilia-plus为我们要使用的主题名)，然后执行 hexo clean 先删除旧的 html 文件，再执行 hexo g 重新生成，再执行 hexo d 推送到远程仓库
在浏览器输入相应域名，发现主题已更换
注意: 可能需要等一段时间刷新才更换 please be patient

方法二：

在 Hexo 根目录的 _config.yml 文件中，将 theme 值修改为主题名。

_config.yml
1
theme: redefine

5.4 修改主题内容

您可以在 themes/yilia-plus 文件夹中查看该主题的内容，并可编辑该文件夹中的 _config.yml 文件修改主题样式

注意: 记得编辑根目录下的 _config.yml 文件，将信息修改为自己的

第六章使用 Typora 编写博客

6.1 Typora 介绍

Typora 是一款轻便简洁的 Markdown 编辑器，支持即时渲染技术，这也是与其他 Markdown 编辑器最显著的区别。即时渲染使得你写Markdown 就像是写 Word 文档一样流畅自如，不像其他编辑器的有编辑栏和显示栏。

优点:

简洁美观
实时预览
扩展语法
跨平台

6.2 安装 Typora

官网: Typora 官方中文站 (typoraio.cn) 遗憾收费了。

为此再次感谢codingpath大佬 codingpath - 知乎 (zhihu.com) 提供的免费资源阿里云盘分享 (aliyundrive.com)

6.3 写博客

1、在 D:\hexo 目录下，通过输入命令: hexo new "文章 title" 会在 /source 文件夹下生成对应文章的 .md 文件，然后就可以通过 Typora 打开此文件编写文章并保存了

2、当您写完该篇文章后，依次输入以下命令:

hexo clean 删除 public 文件夹，即删除旧的博客文章

hexo g 生成 public 文件夹，即生成新的博客文章相关 html 文件

hexo d 将博客推送到 github

6.4 向 Hexo 博客中插入图片

Hexo 有多种图片插入方式，可以将图片存放在本地引用或者将图片放在 CDN 上引用。

1、本地引用–绝对路径

当 Hexo 项目中只用到少量图片时，可以将图片统一放在 source/images 文件夹中，通过 markdown 语法访问它们。

设置Typora的图片默认路径

按照如图配置，如果你用的Hexo写博客，复制这个即可../../source/imgs/${fiilename}
它的意思是将文中的照片复制一份到imgs里的${fiilename}文件里
如果没有用Hexo，按照这个思路设置对路径即可

2、本地引用–相对路径

图片除了可以放在统一的 images 文件夹中，还可以放在文章自己的目录中。文章的目录可以通过配置 _config.yml 来生成。

打开项目根目录中的 *_config.yml 文件，将 _config.yml文件中的配置项 post_asset_folder 设为 true 后，执行命令 hexo new "post_name"，在 source/*posts 中会生成文章 post_name.md 和同名文件夹 post_name。