hexo和next搭建个人博客详细教程

hexo 系列安装与介绍

hexo 介绍

hexo是一个简单地、轻量地、基于Node的静态博客框架,支持使用markdown语言进行文章编写,hexo将自动把您的文章编写为html的文档以供浏览器访问,是快速的博客框架,可以高速的完成网站的渲染工作,可以为建设站点节省大量时间。因为hexo是静态网页,因此可以在自己的服务器或者其他托管服务平台如GitHub上部署。hexo可以更换主题以更改网站风格,hexo目前已经有相当多的主题可供使用,他们多半为用户制作,本文就是使用了next主题。

hexo 系列安装

git 安装

Git(读音为/gɪt/)是一个开源的分布式版本控制系统,可以有效、高速地处理从很小到非常大的项目版本管理。Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

对于安装git大家可以去git官网去下载对应自己电脑系统的最新版本进行安装,也是一路next就行。
安装好之后在命令行输入以下命令,如出现图中所示的版本号,就证明安装成功了。

1
$ git version

node.js 安装

由于hexo是基于node.js的框架所以先的安装node.js,至于什么是node.js这里就介绍了,想了解的可以去百度或者官方文档了解。话不多说步入正题。

首先大家去node.js官网下载安装。
可以选择版本下载,推荐下载长期稳定的就行,如有需要再更新。

下载好后一路next就行,最后按住win+r打开运行对话框输入cmd然后回车,在窗口输入

1
$ node -v

如果出现版本号证明安装成功了

hexo 安装

安装好node.js后,我们就可以安装hexo框架了。首先打开cmd命令行窗口,进入到你要安装的hexo框架的目录,
我就以在D盘blog文件夹为例,如以下命令:

1
2
D: //进入对应盘
cd blog //进入到你要安装的hexo框架的目录

进入之后,根据以下命令来安装和建站

1
2
3
4
5
$ npm install hexo-cli -g  //安装
$ hexo init myblog(目录名) // 初始化博客,也可以直接在blog目录初始化 $ hexo init
$ cd myblog //进入博客目录
$ npm install //安装依赖
$ hexo server //运行

就可以看到下面图片所示

复制http://localhost:4000到浏览器打开,就可以看到如下图所示

我们的静态博客就搭建好了。

next 主题介绍与安装

next 介绍

next是一款支持自定义和简约风格个主题。(个人观点)

next 安装与启用

next 安装

Hexo 安装主题的方式非常简单,只需要将主题文件拷贝至站点目录的 themes 目录下, 然后修改下配置文件即可。当然你也可以用Git克隆最新版本之后更新就可以通过git pull 来快速更新,而不用再次下载压缩包替换。在hexo官方文档中的主题栏中你可以找到很多个性炫酷的主题

我们选择非常受欢迎的next主题来美化我们的主题。首先去到github克隆我们的next主题到我们的项目.可以通过不同的方式下载

通过下载源码方式

首先选择对应版本

然后点击仓库右边的Code绿色按钮,点击Download ZIP 进行源码下载

下载好以后通过解压工具进行解压,解压过后的文件重命名为next,然后复制到我们项目的\themes 文件夹下,如下图所示

通过git克隆仓库下载

通过这种方式下载可能会遇到一些问题,大多是因为网络问题,多试几次或者百度解决就好了。我们可以通过下面命令来下载

1
2
$ cd hexo(自己博客的根目录) //  进入博客根目录
$ git clone https://github.com/theme-next/hexo-theme-next themes/next //克隆仓库

当然你也可以在next文档中复制命令下载
不过文档里的命令克隆下载的是6.0以下版本的next主题,如果你要以上或者最新版本就要通过更新命令来升级版本了。具体哪个方法好,看个人爱好来定夺。

然后打开博客根目录下的\themes 看看里面是否有next文件夹,有点击\next看看里面的目录结构是否完整

如有上图所示的基本目录结构,证明克隆成功了

next 启用

通过以上步骤我们的主题已经下载成功了,那么我们就来启用一下我们的主题。

在 Hexo 中有两份主要的配置文件 其名称都是 _config.yml。 其中,一份位于站点根目录下,主要包含 Hexo 本身的配置;另一份位于主题目录下,这份配置由主题作者提供,主要用于配置主题相关的选项。
为了描述方便,在以下说明中,将前者称为 站点配置文件, 后者称为 主题配置文件。 如下图所示 ,在文件根目录下的 _config.yml 是站点配置文件,在/themes/next中的是主题配置文件。

然后在站点配置文件下把theme设置成next

1
theme: next

运行下我们的项目就好了

1
2
$ hexo g
$ hexo s
-------------本文结束感谢您的阅读-------------
你的打赏,是我的动力

欢迎关注我的其它发布渠道