用Hexo在github搭建个人博客

首先什么是Hexo？Hexo就是一个用Nodejs写的一个框架，这个框架是专门用来搭建博客的。注意是专门用来搭建“博客”的，而不是专门用来搭建“网站”的，博客不就是网站吗？是的，但是说博客是网站的一个重要的分支，Hexo是专门用来搭建博客的，就能暗示出，它有便捷的方式来进行文章的编辑和发布的功能。

Hexo可以把一个博客从无到有的建立起来，也能在本地编辑之后，能更简便的发布到网上，而不用像想象中的修改Web的Dom树。

其实搭建一个网站是大体上要分两步的。第一步，域名部分，首先要去买个域名，我的是在阿里云上买的，买了域名，就需要DNS解析，域名是干什么的，是为了让人更好记住的，域名是服务器ip的名字。有域名就需要有服务器，这里的服务器可以指定到github统一的服务器上，当然我们也可以自己买一个服务器，来进行更复杂的网页交互。

Hexo上搭建的是一个静态博客，更多的是为展示用的。同时Hexo支持MarkDown语法，和多种主题。夫复何求？

搭建Hexo框架

• 有node环境

  1

  node -v

• 下载Hexo（Mac电脑）

  1	sudo npm install hexo-cli -g

• 创建本地文件

  1 2 3

  hexo init manuones.github.io cd manuones.github.io npm install

• 生成静态页面

  1 2	hexo clean hexo generate //generate可以用g做简写

• 启动服务，本机作为服务器

  1	hexo server //server可以用s做简写

  
  启动成功，就可以去localhost:4000查看了。

部署到GitHub上

按说这时候本地其实已经是一个简单的博客了，可以先尝试着把它部署上去，初学者容易犯的错误就是把整个本地的代码都直接git push到GitHub上，不能这样。

首先在GitHub上建一个repository，这个repository的名字必须是

1

<GitHub账号名>.github.io

我们部署到GitHub上，并不是用的git命令，而是用的Hexo中的deploy部署命令。需要在配置文件中去配置一下，打开本地文件根目录的_config.yml文件。拉到最后，会看到这里，然后根据你的项目，更换一下repo。

配置好了以后保存，用

1

hexo d /d为deploy的缩写

这个命令就可以部署到GitHub上的相应的项目中去了，但这时候如果去访问我们的页面，发现还是404报错，找不到页面。这时我们回到GitHub上的项目的根目录，添加一个CNAME文件，注意的是，这个文件不是txt格式，不要加格式，然后在这个文件中，写入你的域名，然后保存，这时再去访问你的域名，就有部署上去的博客了。

新建文章

网站上有内容了，基本上就已经有了很大的成就感了，也放心了很多，接下来就是如何丰富这个网站了。我们搭建的是博客，当然要写文章了，接下来就是用Hexo写文章，并部署到线上。

• 新建文章名为“测试”的文章。

  1	hexo new 测试

  在这个目录source/_posts，就会看到刚刚新建的文章，测试.md。md是markdown的格式。
• 写文章
  打开md文件

  1

  vim 测试.md

  打开后，如图
  
  title自然是文章题目，data是文章的写作日期，这个可以更改，tags是标签，这个标签可以用于文章的归类。

  1 2 3

  tags: - 测试 - 计算机

  注意“-”之后要空一格。
  标签怎么用？如图

点击标签后

第五行隔开，第六行就是正文了，就可以用MarkDown语法写文章了。写完后，保存。在本地查看效果

1
2
3

hexo clean
hexo g
hexo s

本地没问题就可以部署上去了。

1

hexo d

选择主题

Hexo提供很多博客网站的主题，可以到这个网站去查看。比如说我的网站的主题点进去后是这个Daily主题，其中就有教你使用的方法，比如到项目的根目录去进行，一定要在项目的根目录。

1
2

git clone https://github.com/GallenHu/hexo-theme-Daily.git themes/Daily
npm install --save hexo-renderer-sass

这时查看themes/目录下就多了个Daily主题。
然后在项目的根目录的_config.yml中theme更改为Daily。
同时在themes/Daily中也有一个_config.yml文件，这个文件是用来负责这个主题中的一些配置的。

其他功能与扩展。

为博客增加其他功能，比如说增加评论功能啊，增加页面访问统计啊，添加百度站内搜索，添加404公益页面等等，这个功能的添加并不是很难，可以参考手把手教你使用Hexo + Github Pages搭建个人独立博客

而我常用的就是，在首页增加预览图，只需要增添两行就可以了

1
2

photos:
 - http://i.imgur.com/0dZAI8y.jpg

添加同步搜索功能

还是要先说下hexo的工程结构：

其中themes存放的是hexo的模板，我的网站用的是Daily模板，比较好看，比较小众，极简风格，所有当我想做一个搜索时，这个模板都不像其他模板一样已经写好了搜索模块。

public文件夹，是通过模板生成的文件，github上的文件就是public的文件。

源码直接找的这篇文章：
让 Hexo 博客支持本地站内搜索

用WebStorm调试时候，直接打开html可能会不能找到对应的js文件和css文件。记得要去掉“/js/search.js”中的第一个“/”。

如果直接用那篇文章中的代码，可能呈现的结果是：1.搜索结果铺满整个页面，2.滑动页面时，不能滑动搜索结果。

解决：1.搜索结果铺满整个页面

可以归结为一个div覆盖另一个div，将一个div覆盖在另一个div上有两种手段：一是设置margin为负值，二是设置绝对定位。详情可以参见这篇文章
CSS中div覆盖另一个div
在我这里，是为其div增加了一个名为base的属性

1
2
3
4
5

#base {
  position: absolute;
  margin-left: 30px;
  width: 250px;
  height: 300px; }

这样就可以把搜索结果限定在这个宽度范围，且在另一个div上面。

解决：2.滑动页面时，不能滑动搜索结果

这个问题可以描述为
移动页面滚动穿透如何解决
千言万语汇成一句话就是，在它上层的div的css文件增加

1

overflow：auto

我的是在even这个class的css属性中增添的。

更改Daily模板

在上面的更改，只能更改public中的文件，如果用hexo s命令运行，发现我们之前的更改是无效的，因为hexo会重新生成public文件夹中的内容。所以要想要保持修改有效，需要到模板中去修改。

比如我的search.js文件直接添加到模板中，css文件中增加的部分重新写入图中的css文件夹中的文件。

搜索框的div部分，我就直接加在了index.ejs文件中。

参考文章：
最好入门：Hexo 博客搭建指南
手把手教你使用Hexo + Github Pages搭建个人独立博客
搭建Hexo博客中碰到的坑