0%

Hexo+Next主题博客搭建

首先很感谢大佬提供这样基于hexo框架下的next主题,目前大佬们也一直维护next主题源码。本人是一个WEB前端小白,可是按照主题源码提供一些建站教程,自己也成功搭建起了属于自己一个后花园!


写在前面

本博客教程使用 Next6.6.0 版本搭建。
项目源码:https://github.com/theme-next/hexo-theme-next

环境准备

安装 hexo 框架之前,我们需要安装该框架的依赖环境:

首先安装 node.js 稳定版本。

Snipaste_2020-03-17_19-48-19.png

然后安装 Git,我的是 windows10 系统,点击相应 git 版本下载。

Snipaste_2020-03-17_19-49-37.png

安装 Hexo 和 Next主题

安装 Hexo

本文安装安装环境 windows10, 所以以下都以 window10 系统下安装为例。

安装 Hexo

在 GitBash 中操作,输入以下命令,等待安装完成。
$ npm install -g hexo-cli

创建 hexo 文件

在电脑本地桌面创建一个名为 hexo 的文件夹(路径和名字可以自己随意取)。然后我们在 GitBash 中使用 cd 命令切换到创建好的文件夹中。
$ cd /C/User/A/Desktop/hexo/

初始化 hexo

在上面 cd 到文件夹后,输入以下命令进行初始化(folder 是你建好博客后存放博客所有文件的一个文件夹,可以自取名字)。
hexo init folder

这个命令执行时间非常长,主要是初始化 hexo 博客中的文件夹,包括 hexo 博客内置的各种 node_modules 组件等,所以请耐心等待!如果初始化失败建议删除文件夹内容后重试。(如果 GitBash 下载卡了,按 Ctrl+C 取消下载然后重试)
GitBash 出现 INFO Start blogging with Hexo! 说明初始化成功,打开刚刚创建的文件夹,会发现里面包含如下文件夹:

lmoZLj.png

注意:其中有一个_config.yml 文件,这个我们叫做站点配置文件,里面的初始化内容如下:

lmqZad.md.png

其实到这里,我们 hexo 博客已经做好了。执行以下命令即可:
// cd 到根目录
$ hexo g && hexo s

复制 http://localhost:4000 到浏览器,可以看到自己博客搭建完成!

lmONvV.md.png

接下来我们可以修改我们主题配置。打开 themes 目录下,发现有一个 landscape 的主题,这个是 hexo 默认的自带主题,当然我们可以下载其他主题,具体后面会讲。

我们来分析下这个 landscape 主题文件夹:

lKeoJs.png

注意:这里也有一个_config.yml 配置文件,这个我们叫作主题配置文件

先看看上面 languages 文件夹,这个是网站语言配置文件,(其中 zh-CN 是指简体中文)然后我们可以在站点配置文件修改我们网站为中文简体语言。

lKnvG9.png

更改完成记得保存!然后回到 GitBash 命令行,输入以下命令:

$ hexo g && hexo s

再重新打开浏览器,页面语言已经变成中文了!
好了,来说明下以上命令是什么?

hexo g // hexo generate 的缩写,用来生成一个 public 文件夹。
hexo s // hexo server 的缩写,用来启动本地服务器,默认情况下,是 http://localhost:4000

第一篇博客文章

博客基本框架完成后,我们可以写一篇个人博客文章啦!在 GitBash 中 cd 到根目录(folder),输入以下命令:

hexo new "我的第一篇博客"

就可以在 hexo/folder/source/_posts 目录下看到已经创建好了名为“我的第一篇博客”且后缀名为 .md 的 markdown 格式的文件。

将 Hexo 博客部署到 Github

部署到 GitHub 上有几下点优点:
1.Hexo 博客是静态文件, Github Pages 自身支持静态文件。
2.免费方便,不用花费一分钱就可以搭建一个自己的自由博客。
3.可以随意绑定自己的域名,并且可以一键开启 HTTPS,很方便。
4.数据安全,Github 可以恢复任意版本。
5.博客内容可以轻松打包、转移以及发布到其他平台。
6…….
在部署到 Github 之前,我们需要准备好自己的 Github 账号,Github 账号在官网注册(https://github.com/)。

创建 Github 仓库

首先我们需要在 Github 上新建一个 repository,注意仓库名必须为你的 Github 用户名 .github.io,如下图:

lKGP4f.md.png

不能设置其他名字,只用用仓库名。这样设置后,我们不绑定域名前提下,可以直接访问 http://Azjhong.github.io (我的 Github 仓库名)来访问自己的个人博客,这样相当于有一个个人域名,并且是永久免费!

将 Hexo 博客部署到 Github

首先打开 hexo 站点配置文件,找到 deploy 并填写如下配置:
文件位置:hexo/folder/_config.yml

lKYd1O.png

此时直接执行 hexo d 命令的话一般会报如下错误:Deployer not found: github 或者 Deployer not found: git
原因是还需要安装一个插件 hexo-deployer-git,我们可以在 GitBash 中 cd 到 hexo 根目录(folder),并输入以下命令:

$ npm install hexo-deployer-git --save

然后我们可以使用:

hexo clean && hexo g && hexo deploy 命令完成一键部署到 Github 上。

安装 Next 主题

默认的主题是 landscape,我们可以使用 Hexo 官方推荐主题:https://hexo.io/themes,如果你喜欢这里的某些主题,可以直接去上面主题对应界面中的 Github 中下载。目前我正在使用主题是 hexo-next ,因此我下面介绍 Next 主题的使用方式。

首先我们可以打开 Github,全局搜索 hexo-next,我们会发现有两个 star 数量比较高的:

lG1Yhn.png

其中第一个是 Next5 版本的(目前已停止维护了),第二个是 Next6 以上版本的。

下载 Next 主题

以下均已 Next6 版本为例。
进入:https://github.com/theme-next/hexo-theme-next
安装 Next6 版本,有两种方式:
1.在 Gitbash 中 cd 博客根目录下 themes 目录下,使用命令:

git clone https://github.com/theme-next/hexo-theme-next.git

2.直接在 Github 页面上选择绿色按钮 Clone or Download,点击下载 zip 压缩包。(也可到 releases 中下载相应版本的 zip 压缩包)。

设置 hexo 博客为 Next 主题

修改站点配置文件,找到如下代码并进行配置:
文件位置:hexo/folder/_config.yml

lGUCeP.png

测试 Next 主题

在 Gitbash 中输入:

$ hexo clean && hexo g && hexo s

等待启动后访问 http://localhost:4000 即可查看已安装好的 Next主题!
(如果博客出现乱码,请参考链接:https://github.com/theme-next/hexo-theme-next/issues/1304 解决问题。
至此,博客 Next 主题安装已经基本完成!

^_^