Hexo 博客搭建一条龙服务

前言

最近有些朋友加我微信咨询一些关于Hexo博客搭建的问题,特此写下了这篇文章,希望能够帮助到大家。

以后再有人问我,我就直接让他看这个。

本篇教程都是以Windows操作系统为例,macOS或Linux系统请自行百度。

由于考虑到需要这篇文章的人大部分都是Hexo博客的小白,所以我会尽可能的写的详细简单一点。

搭建环境

安装Git

安装完成后,在终端中输入以下命令:

1
git -v

若显示版本号则表示安装成功。

安装Node.js

安装完成后,在终端中输入以下命令:

1
node -v
1
npm -v

若都可以显示版本号则表示安装成功,但你仍还需要配置Node.js的环境,可以看下这篇环境配置教程,完成后就可以继续往下进行了。

快速上手

安装Hexo

1
npm install hexo-cli -g

如果执行hexo -v后,打印出的信息中能显示hexo-cli: x.x.x则表示安装成功。

进入博客目录

新建好博客想要存放的目录,比如我是放在了D盘的Blog文件夹里,那么你就需要点击进入该文件夹,然后右键选择Open Git Bash here打开Git Bash终端面板(以下简称终端)。

当然,你也可以在桌面直接右键选择Open Git Bash here,然后使用Liunx命令创建并进入Blog目录:

1
cd D: && mkdir Blog && cd Blog

初始化Hexo

1
hexo init

在终端执行上面的命令后,不出意外的话你就能在下面看到Start blogging with Hexo!这条信息,并且该目录中已经生成了很多东西,那么恭喜你已经可以在本地开启你的Hexo博客了。

生成的Hexo目录结构
1
2
3
4
5
6
7
8
9
10
11
12
├── .deploy_git		# 执行 hexo d 后生成的静态网页文件
├── .github # 可以利用 GitHub Actions 自动部署博客
├── node_modules # Node.js 项目的模块,包括通过 npm 下载的 Hexo 插件和主题等
├── public # 执行 hexo g 后生成的静态网页文件
├── scaffolds # 创建草稿、页面、文章时的模板
├── source # 全局资源文件夹,用来存放博客正文和其他源文件,如:文章、草稿、页面、图片、CNAME 等都应该放在这里
├── themes # 主题
├── _config.landscape.yml # 主题配置文件
├── _config.yml # 博客全局配置文件
├── db.json
├── package-lock.json # 用于跟踪 Node.js 项目模块的确切版本和依赖关系树
└── package.json # Node.js 项目的清单,可以通过 npm install 来恢复 Node.js 项目的模块

启动服务器

1
hexo s

输入上面的命令后,可以看到Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.这条信息,Hexo默认为我们提供了一个本地服务器地址http://localhost:4000/,我们可以在浏览器输入该URL地址或者直接点击进入即可。

默认主题

进来后你会看到上面的页面,这是Hexo默认使用的landscape主题,接下来我们需要为它更换一个更加美观且强大的主题。

更换主题

Theme推荐

这里只推荐几款我用过,并且觉得还不错的主题:

建议在选好心仪的主题后大致浏览下他们的主题Docs,后期可以减少许多不必要的麻烦和问题。

Theme安装

这里以Fluid主题为例,这个也是我目前正在用的主题,很喜欢这种主题风格,感觉非常的低调沉稳大气。

方式一:

1
npm install --save hexo-theme-fluid

然后在博客目录下创建 _config.fluid.yml,将主题的 _config.yml 内容复制过去。

或者直接输入快捷命令:

1
cp node_modules/hexo-theme-fluid/_config.yml  _config.fluid.yml

注意:之后每次更改主题配置文件 _config.fluid.yml 时,都需要重新hexo s一下才能看到变化。

方式二:

1
git clone https://github.com/fluid-dev/hexo-theme-fluid.git  themes/fluid
git clone 失败解决方案

由于GitHub的服务器在美国,所以使用HTTPS方式大概率会因为网络问题而导致git clone失败,可以改用SSH的方式:

1
git clone git@github.com:fluid-dev/hexo-theme-fluid.git  themes/fluid

如果还是不行,那么可能是因为你还没有在GitHub中添加SSH密钥,方法如下:

如果你是第一次使用Git,需要设置用户名和电子邮件,在终端输入:

1
2
git config --global user.name "xxxxx"
git config --global user.email "xxxxx@xxxxx.com"

查看配置好的用户信息:

1
2
git config user.name
git config user.email

首先需要用你刚才填入的邮箱信息在本地生成SSH Key秘钥对:

1
ssh-keygen -t rsa -C "xxxxx@xxxxx.com"

生成的秘钥对在C:\Users\用户名\.ssh目录下的id_rsa【私钥】和id_rsa.pub【公钥】。

查看公钥:

1
cat ~/.ssh/id_rsa.pub

然后将公钥复制粘贴到你的GitHub中,用SSH的方式再试一遍就可以了。

通过这种方式安装有个好处,就是在更改主题配置文件themes/fluid/_config.yml的时候可以不用再重新hexo s了。

不管你用了以上的哪种方式,别忘了修改Hexo博客目录中 _config.yml 的指定主题:

1
2
3
# theme: landscape
# 更换为:
theme: fluid

改好后,重新hexo s一下就能看到效果啦~

Fluid主题

Theme双开

如果你想同时开两个博客主题的话,正常情况下执行hexo s时会报EADDRINUSE错误,这是由于两个主题默认同时会使用localhost:4000的端口,所以后开的那个博客主题会失败,你需要使用-p选项来将其更换为另一个端口打开,从而避免冲突。

例如:

1
hexo s -p 5000

值得注意的是,如果你同时开两个博客主题的话,那么你的第二个博客主题每次都需要使用上面的命令才能正常开启。

常用Hexo命令

创建新文章

1
hexo new post "post name"

创建新页面

1
hexo new page "page name"

创建新草稿

1
hexo new draft "post name"

将草稿转为正式文章

1
hexo publish "post name"

清除缓存

1
hexo cl

生成静态文件

1
hexo g

本地调试

1
hexo s

部署博客

1
hexo d

首次执行hexo d部署命令时需要先安装并配制好hexo-deployer-git插件,详见Hexo官方文档

常用Hexo插件

名称功能地址
hexo-deployer-git部署博客https://github.com/hexojs/hexo-deployer-git
hexo-git-backup备份博客https://github.com/coneycode/hexo-git-backup
hexo-browsersync实时预览https://github.com/hexojs/hexo-browsersync
hexo-blog-encrypt文章加密https://github.com/D0n9X1n/hexo-blog-encrypt
hexo-admin文章管理https://github.com/jaredly/hexo-admin
hexo-tag-commonTab切换https://github.com/YunYouJun/hexo-tag-common
hexo-abbrlink生成URL短链接https://github.com/rozbo/hexo-abbrlink
hexo-html-minifier压缩HTML文件https://github.com/hexojs/hexo-html-minifier
hexo-clean-css压缩CSS文件https://github.com/hexojs/hexo-clean-css
hexo-uglify压缩JS文件https://github.com/hexojs/hexo-uglify
hexo-generator-feed生成atom.xmlhttps://github.com/hexojs/hexo-generator-feed
hexo-generator-sitemap生成sitemap.xmlhttps://github.com/hexojs/hexo-generator-sitemap
hexo-filter-nofollow为所有外链添加rel="noopener external nofollow noreferrer"https://github.com/hexojs/hexo-filter-nofollow

安装:

1
npm install --save 插件名称

简写:

1
npm i -S 插件名称

查看:

1
npm list 插件名称

卸载:

1
npm uni 插件名称

鸣谢

4月13号画的饼,4月14号建的博文,5月28号才断断续续的正式写完,没办法我实在是太懒了哈哈~

这是我这个小博客目前收到最大的一笔打赏了,记录一下,真的很感谢🙏🌹🌹🌹


Hexo 博客搭建一条龙服务
https://blog.xukaiyyds.cn/posts/9ed44a7f/
作者
xukaiyyds
发布于
2024年4月14日
许可协议