Hexo博客搭建教程整理
记录整理一下自己是如何搭建的Hexo个人博客(超详细)
Git、Nodejs、Hexo安装
Nodejs
首先我们下载安装Nodejs,这是一个开源跨平台的JavaScript
运行环境,简单来说(其实我也不懂)就是能够使我们的js
脚本脱离浏览器运行,以及帮助我们更好地组织代码,提升复用性……etc 有兴趣的朋友请自行wiki。
下载安装好后在命令行中输入:
1 | node -v |
查看node
版本号,如果正常显示了版本号就说明安装的没问题了。
Git
然后我们从Git官网下载Git
,Git
是一个开源的分布式版本控制系统,而github就是基于Git系统开发的。个人的博客规模小,为了方便也为了白嫖一个域名,我们选择将博客部署到github
上。
安装完毕后打开Git bash
,输入以下命令:
1 | npm -v |
同样查看版本号,如果正常显示说明安装成功。
这里为了今后更好地管理自己的博客,建议大家在windows的根目录中新建一个Blog的文件夹,再在当中创建一个专门给npm的文件夹,然后做几个设置。我用来设置npm的文件夹叫做Global
,下列代码以此为例:
1 | npm config set prefix "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主题已经成功应用啦!