使用hexo和GitHub搭建自己的个人博客(初步搭建)

前言

一直想建一个属于自己的个人博客，用来记录自己学过的一些知识和踩过的坑，发现使用hexo和GitHub可以很便捷的创建一个比较美观的博客，下面是自己在这个过程中遇到的一些问题，供大家参考。

配置

node

注意： 要使用node8.0以上的版本

git

github

自行注册一个

GitHub新建项目

注意：项目必须遵循格式：账户名.github.io,并且需要勾选Initialize this repository with a README

开启GitHub-page功能

点击右侧的Settings，你将会打开这个库的setting页面

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

过程

安装Hexo

在自己认为合适的地方创建一个文件夹，这里我以E：/hexo 为例子讲解，首先在E盘目录下创建Hexo文件夹，并在命令行的窗口进入到该目录

安装hexo

1	npm install hexo-cli -g

可能你会看到一个WARN，但是不用担心，这不会影响你的正常使用。然后输入

1	npm install hexo --save

然后你会看到命令行窗口刷了一大堆白字，下面我们来看一看Hexo是不是已经安装好了。在命令行中输入：

hexo -v

如果你看到了如图文字，则说明已经安装成功了。

hexo的相关配置

初始化Hexo

接着上面的操作，输入：

hexo init

然后

1	npm install

之后npm将会自动安装你需要的组件，只需要等待npm操作即可。

首次体验Hexo
继续操作，同样是在命令行中，输入：

hexo g

然后输入：

hexo s

在浏览器中打开http://localhost:4000/，你将会看到：

将hexo和GitHub page联系

配置git个人信息

如果你之前已经配置好git个人信息，请跳过这一个步骤，直接来到

1、设置Git的user name和email：(如果是第一次的话)

1 2	git config --global user.name "xujun" git config --global user.email "gdutxiaoxu@163.com"

2、生成密钥

1	ssh-keygen -t rsa -C "gdutxiaoxu@163.com"

配置Deployment

首先，应该介绍一下hexo的配置文件_config.yml,基本上配置都是在这里设定

_config.yml配置

在_config.yml文件中，找到Deployment，然后按照如下修改：

deploy:
  type: git
  repo: repo: git@github.com:yourname/yourname.github.io.git ##这里填写的格式要正确
  branch: master

注意：repo: git@github.com:yourname/yourname.github.io.git这里yourname记得要换成你自己的GitHub账户名

比如：我的账户名为GpingFeng

deploy:
  type: git
  repo: https://github.com/GpingFeng/GpingFeng.github.io.git ##这里填写的格式要正确
  branch: master

写博客、发文章

到目前为止，整个博客已经搭建好了，接下来就是愉快的写文章了
新建一篇博客，执行下面的命令：

1	hexo new post "article title"

这时候在我的电脑的目录下 F:\hexo\source\ _posts 将会看到 article title.md 文件

用MarDown编辑器打开就可以编辑文章了。文章编辑好之后，运行生成、部署命令：

1 2	hexo g // 生成 hexo d // 部署

当然你也可以执行下面的命令，相当于上面两条命令的效果

1	hexo d -g #在部署前先生成

部署成功后访问你的地址即可。

注意：很多时候很多问题需要在生成之前使用hexo clean清除一下

自己的踩坑：

注意需要提前安装一个扩展：

1	npm install hexo-deployer-git --save

如果没有执行者行命令，将会提醒

1	deloyer not found:git

hexo本地测试运行重启后页面空白,提示 : WARN No layout: index.html?

运行git clone 指令获得主题后（假设是NEXT主题），在theme主题下保存文件夹的名称为：hexo-theme-next-0.4.0那么如果在config里设置的是next，就会出现这样的WARN，http://localhost:4000/显示的是空白。只要把theme下的文件夹名称改为next就显示正常了。

hexo 下的分类和表签无法显示，怎么解决？

步骤1

新建一个文件夹，命名为 tags 。命令如下：

1	hexo new page "tags"

步骤2
编辑刚新建的页面，将页面的类型设置为 tags ，主题将自动为这个页面显示标签云。页面内容如下：

title: tags
date: 2018-01-07 00:04:06
type: "tags"
comments: false

步骤3

在菜单中添加链接。编辑主题配置文件，添加 tags 到 menu 中，如下:

menu:
  home: /
  archives: /archives
  tags: /tags
  categories: /categories

后记

这里只是搭建起来而已，要实现自己的私人定制可以配置不同的主题，添加不同的功能等等，hexo官网有比较详细的介绍

hexo官方文档

推荐主题
next主题