hexo+github搭建博客辛酸史

部署前准备

你需要准备好以下软件

  • Node.js环境
  • Git

    本文适用于WINDOWS 7

配置Node.js环境

下载Node.js安装文件:

根据自己的Windows版本选择相应的安装文件。 如图所示:

保持默认设置即可,一路Next,安装很快就结束了。 然后我们检查一下是不是要求的组件都安装好了,同时按下Win和R,打开运行窗口:

在新打开的窗口中输入cmd,敲击回车,打开命令行界面。(下文将直接用打开命令行来表示以上操作,记住哦~) 在打开的命令行界面中,输入

node -v
npm -v

如果结果如下图所示,则说明安装正确,可以进行下一步了,如果不正确,则需要回头检查自己的安装过程。

配置Git环境

下载Git安装文件:

然后就进入了Git的安装界面,如图:

和Node.js一样,大部分设置都只需要保持默认,建议PATH选项按照下图选择:

这是对上图的解释,不需要了解请直接跳过 Git的默认设置下,出于安全考虑,只有在Git Bash中才能进行Git的相关操作。按照上图进行的选择,将会使得Git安装程序在系统PATH中加入Git的相关路径,使得你可以在CMD界面下调用Git,不用打开Git Bash了。

一样的,我们来检查一下Git是不是安装正确了,打开命令行,输入:
git –version

如果结果如下图所示,则说明安装正确,可以进行下一步了,如果不正确,则需要回头检查自己的安装过程。

配置Github

注册账号

如果已经拥有账号,请跳过此步~

打开https://github.com/,在下图的框中,分别输入自己的用户名,邮箱,密码。

然后前往自己刚才填写的邮箱,点开Github发送给你的注册确认信,确认注册,结束注册流程。

一定要确认注册,否则无法使用gh-pages!

创建代码库

登陆之后,点击页面右上角的加号,选择New repository

进入代码库创建页面:

Repository name下填写yourname.github.ioDescription (optional)下填写一些简单的描述(不写也没有关系),如图所示:

开启gh-pages功能

点击界面右侧的Settings,你将会打开这个库的setting页面,向下拖动,直到看见GitHub Pages,如图:

点击Automatic page generatorGithub将会自动替你创建出一个gh-pages的页面。 如果你的配置没有问题,那么大约15分钟之后,yourname.github.io这个网址就可以正常访问了~ 如果yourname.github.io已经可以正常访问了,那么Github一侧的配置已经全部结束了。

配置Hexo

安装Hexo

在自己认为合适的地方创建一个文件夹,然后在文件夹空白处按住Shift+鼠标右键,然后点击在此处打开命令行窗口。

在命令行中输入:
npm install hexo-cli -g
然后你将会看到:

可能你会看到一个WARNING,但是不用担心,这不会影响你的正常使用。 然后输入
npm install hexo –save
然后你会看到命令行窗口刷了一大堆白字,下面我们来看一看Hexo是不是已经安装好了。 在命令行中输入:
hexo -v
如果你看到了如图文字,则说明已经安装成功了。

初始化Hexo

接着上面的操作,输入:
hexo init
如图:

然后输入:
npm install
之后npm将会自动安装你需要的组件,只需要等待npm操作即可。

首次体验Hexo

继续操作,同样是在命令行中,输入:
hexo g
如图:

然后输入:
hexo s
然后会提示:
INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.
在浏览器中打开http://localhost:4000/,你将会看到:

到目前为止,Hexo在本地的配置已经全都结束了。

使用Hexo

在配置过程中请使用yamllint来保证自己的yaml语法正确

修改全局配置文件

请参考Hexo官方文档

配置Deployment

首先,你需要为自己配置身份信息,打开命令行,然后输入:
git config –global user.name “yourname”
git config –global user.email “youremail”

同样在_config.yml文件中,找到Deployment,然后按照如下修改:
deploy:
type: git
repo: git@github.com:yourname/yourname.github.io.git
branch: master

如果使用git方式进行部署,执行npm install hexo-deployer-git –save来安装所需的插件

然后在当前目录打开命令行,输入:
hexo d

随后按照提示,分别输入自己的Github账号用户名和密码,开始上传。 然后通过http://yourname.github.io/来访问自己刚刚上传的网站。

这里有个小坑,就是输入密码的时候不显示**,这个时候不要担心自己没输上去,是系统自动隐藏了,就按照正常的输入就好

添加新文章

打开Hexo目录下的source文件夹,所有的文章都会以md形式保存在_post文件夹中,只要在_post文件夹中新建md类型的文档,就能在执行hexo g的时候被渲染。 新建的文章头需要添加一些yml信息,如下所示:

title: hello-world   //在此处添加你的标题。
date: 2014-11-7 08:55:29   //在此处输入你编辑这篇文章的时间。
categories: Exercise   //在此处输入这篇文章的分类。
toc: true  //在此处设定是否开启目录,需要主题支持。
---

更换主题

可以点这里寻找自己喜欢的主题 下载所有的主题文件,保存到Hexo目录下的themes文件夹下。然后在_config.yml文件中修改:

# Extensions
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
theme: landscape //themes文件夹中对应文件夹的名称

然后先执行hexo clean,然后重新hexo g,并且hexo d,很快就能看到新主题的效果了~

客官,打赏一下嘛~~