记录整理一下自己是如何搭建的Hexo个人博客(超详细)

Git、Nodejs、Hexo安装

Nodejs

首先我们下载安装Nodejs,这是一个开源跨平台的JavaScript运行环境,简单来说(其实我也不懂)就是能够使我们的js脚本脱离浏览器运行,以及帮助我们更好地组织代码,提升复用性……etc 有兴趣的朋友请自行wiki。

下载安装好后在命令行中输入:

1
node -v

查看node版本号,如果正常显示了版本号就说明安装的没问题了。

Git

然后我们从Git官网下载GitGit是一个开源的分布式版本控制系统,而github就是基于Git系统开发的。个人的博客规模小,为了方便也为了白嫖一个域名,我们选择将博客部署到github上。

安装完毕后打开Git bash,输入以下命令:

1
npm -v

同样查看版本号,如果正常显示说明安装成功。

这里为了今后更好地管理自己的博客,建议大家在windows的根目录中新建一个Blog的文件夹,再在当中创建一个专门给npm的文件夹,然后做几个设置。我用来设置npm的文件夹叫做Global,下列代码以此为例:

1
2
npm config set prefix "D:\Blog\Global"
npm config set cache "D:\Blog\Global"

Hexo

全部设置好之后安装博客框架(Hexo)

1
npm install -g hexo

安装好之后立马用hexo指令是无效的,这里hexo还没有开始工作,我们要先修改环境变量才能让hexo投入使用:

桌面→此电脑→属性→高级系统设置→环境变量→Path→新建→将刚才新建的Global文件夹的路径加入其中。

重启Git bash,输入以下命令:

1
hexo -v

发现hexo版本正常显示,恭喜你,hexo安装成功啦!

初始化、搭建博客,加入主题

初始化博客

hexo安装成功后,我们进入blog文件夹,在文件夹中打开cmd,输入:

1
hexo init

用来初始化博客,初始化完成后你应该会看到这些文件:

初始化文件

经过漫长的等待后,博客初始化完成,输入:

1
hexo s

命令行中会出现以下语句:

1
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

http://localhost:4000 拷贝到你的浏览器中,你就可以看到初始化的hexo博客啦!

Hexo常用指令

给大家解释一下几个最常用到的hexo命令含义:

hexo 常用指令
hexo g hexo generate 生成静态文件
hexo d hexo deploy 将博客部署至服务器
hexo n name hexo new 加名字 生成新博文文件
hexo clean hexo clean 清除缓存文件

某些情况下,hexo clean可以解决对网页的改动不生效的情况。

回到正题,你的浏览器中所显示的初始化hexo博客应该是这样的:

博客初始化界面

这是hexo博客默认的主题,接下来我们安装新主题,自定义我们博客的外观。

安装新主题

我的博客所使用的主题是butterfly,除此之外也有很多同样流行的主题供大家选择,大家可以在这里找到更多的主题。

个人推荐大家尽量选择大众些的主题,类似butterfly或是next,毕竟是第一次尝试搭建博客,有可能会遇到问题,这时候用户更多的主题可以让你更容易在网上找到解决方案。

butterfly主题的安装在官网有详尽的教程,我这里直接搬运:

在你的博客的根目录中打开cmd

1
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

从github上克隆buttfly主题的代码,克隆完成后找到你的博客的配置文件(_config.yml)注意这里是博客根目录中的配置文件,butterfly主题的文件夹中也存在一个名称相同的配置文件,大家不要搞混。

打开配置文件后:

1
theme: butterfly

将theme参数更改为butterfly,这里注意冒号后面一定要跟空格,不然yaml文件会出错。

更改完成后再用同样的命令hexo s打开博客,就可以看到butterfly主题已经成功应用啦!