| Git, Hexo

使用hexo来搭建博客

今天给大家介绍的是如何使用hexo工具来搭建个人博客。

1. 什么是hexo

简单一点的说：hexo是一个快速、简洁且高效的博客框架。

2. hexo相关文件的介绍

打开编辑器在终端先下载hexo-cli，因此执行的命令是:npm install hexo-cli -g。然后再执行命令:hexo init myBlog来新建一个网站，其中myBlog是我自己随意取得名字，这里大家可以取自己喜欢的名字。当下载完成之后执行命令:cd myBlog进入到myBlog文件夹里面。此时我们可以看到myBlog文件夹下面有许多的文件，如下图所示：
myBlog文件夹下面许多文件的相关介绍

下面我给大家挨个介绍一下：

  1. node_modules文件夹是装依赖的文件夹；
  2. scaffolds文件夹是模板文件夹；
  3. source文件夹下面的_posts文件夹下面是所有博客的地方；
  4. themes是主题文件夹，相当于一键换肤的功能；
  5. _config.yml是配置文件；
  6. .gitignore可以在创建git的时候，我们可以忽略一些文件，给它提交成一个版本。
  7. package.json文件定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）

3. hexo的使用

  1. 执行命令:hexo server，此时会在localhost:4000去开一个端口。当打开页面之后会发现我们就创建好一个简单的博客页面了。如下图所示：
    下载好的一个简单的hexo博客

  2. 我们需要注意的是hexo有三种布局：post、page、draft。post就是我们说的博客，默认的就是它；page是关于主页的一些信息；draft是比较私密或者还没有想好的文章，在发布的网页上是看不见的。

  3. 我们再在终端新建一个终端，并执行命令:hexo new post a(此时我们需要注意一点就是我们需要进入到当前所创建的文件夹，如在这里就是cd myBlog)，这个a是我随意取的名字，在这里大家可以随意的去取名字。创建完成之后，就会在source文件夹下面的_posts文件夹下面添加一个a.md文件。执行命令:hexo new page b就会在source文件夹下面创建一个b文件夹，在b文件夹下面有一个index.md文件。执行命令:hexo new draft b就会在source文件夹下面创建一个_drafts文件夹，然后在_drafts文件夹下面有一个c.md文件。

  4. 由于默认创建的是post文件，因此当我们执行命令:hexo new d，就会在_posts文件夹下面创建一个d.md文件。如果我们想修改它的一个默认创建文件的话，可以去_config.yml文件下的Writing处将default_layout进行一个修改即可，如下图所示：
    修改创建文件的默认项

  5. 什么是Front-matter是我们的一个原信息，是文件最上方以”—“分隔的区域，如下图所示：
    Front-matter的解析
    并且可以修改”—“与”—“之间的内容，修改它们的内容有两种格式，第一种格式就是：上图所示内容的yml格式；第二种格式就是：Json格式。但是一般都用的是yml格式。

  6. 由于单个单个的修改文件配置太麻烦了，因此可以去scaffolds文件夹下面的相关文件进行修改，如下图所示：
    对scaffolds文件夹下面的文件进行一个修改

  7. 在scaffolds文件夹下面还可以创建新的模板，如daipi.md文件

  8. 在Front-matter中，我们需要注意tags标签和categories目录

  9. 注意标签插件的使用，在文章中插入引言，可包含作者、来源和标题：{% blockquote [author[, source]] [link] [source_link_title] %} content {% endblockquote %}，我写了一个小小的例子，如下图所示：
    使用插件标签做的一个小小的练习
    标签插件在网页上的一个展示
    关于标签插件的案例还有很多，有兴趣的小伙伴可以去hexo的官网上去搜索一下相关的问题和练习。

4. 资源文件夹（本地使用）

要使用资源文件夹的话，需要先在_config.yml文件中的Writing部分的post_asset_folder:false处，将其改为true，如下图所示：
将post_asset_folder:false改为true

ctrl+c退出，然后再执行命令：hexo new post javascript，此时会在_posts文件夹下面生成javascript文件和javascript.md文件，然后我们就可以将图片资源放到javascript文件夹中了，如下图所示：
将图片资源放到javascript文件夹中

5. 修改主题

在hexo的官网中，点进hexo官网的主题方可进行一个主题的查找，如下图所示：
hexo官网主题的查找

当找到合适的主题后，然后去浏览器中输入：主题+hexo，然后会找到相关主题的github，需要注意的一点是：我们需要进入到自己的blog文件夹中，在这里我的文件夹是myBlog文件夹，当我cd myBlog进入到自己的文件夹之后，在终端执行命令：git clone xxxxxx.......，然后再在_config.yml文件夹下面的Extensions下的theme进行一个修改，修改成我们下载的一个主题名字。需要注意的一点是：在相应主题的github下面一般会给你相应的提示该如何使用相应的主题，因此大家在使用时应该注意看他给你写的提示文档。下面就是给大家操作演示的过程图：

  1. 首先我们先到hexo官网找到自己喜欢的主题，在这里我随便找了一个主题，如下图所示：
    到hexo官网找到自己喜欢的主题

  2. 再到浏览器中去搜索”hexo+Aa-Lx”，然后找到相应的github如下图所示：
    到浏览器中搜索hexo+相应主题，然后找到相应的github

  3. 相应的github下一般会给你相应提示如何使用该主题，如下图所示：
    相应github会给你提示如何使用

  4. 按照相应的提示，先去终端执行命令：git clone https://github.com/blleng/hexo-theme-lx themes/lx，然后去_config.yml文件夹下面的Extensions下的theme进行一个修改，修改成我们下载的一个主题名字，在这里修改成lx，如下图所示：
    修改主题为lx
    最后再执行命令：hexo server，然后开启一个终端，打开之后就是相应的我们选择的主题，此时就完成了我们选择主题的内容，如下图所示：
    显示我们选择的相应主题

6. Plugins的基础使用

不得不说便捷的话，就得考虑Plugins的一个使用了，在这里我只介绍一下hexo-admin的一个使用。hexo-admin是一个图形化工具，使用起来超级的简单，适合喜欢偷懒的人来使用，特别是我。使用过程如下所示：
首先在终端先下载hexo-admin，执行命令：npm install --save hexo-admin，此时我们需要重启服务器，但是需要在后面添加一个”-d”，执行命令：hexo server -d，此时打开网页地址是:localhost:4000，我们只需要在后面加上”/admin”即可，即：”http://localhost:4000/admin"，如下图所示：
在页面链接地址后面添加/admin即可

此时我们就可以在该页面进行添加或者删除等相应的操作了。

7. 如何将其放到服务器上，让大家都能看得见

此时我们需要借助github仓库来完成。
在终端执行命令：hexo generat，此时就会多出一个public文件夹，最后我们只需要将public放到服务器上面即可。如下图所示生成public文件夹：
生成public文件夹

我们在和github仓库配合使用的时候，需要安装一个插件，此时在终端执行命令：npm install hexo-deployer-git --save，然后修改_config.yml配置文件中的Deployment中的type增加git，即”type:git”，还需要增加repo（仓库），repo: git@github.com:……..(github的链接)。最后在终端执行命令：hexo deploy将public文件夹上传到github仓库去了。
最后一点我们需要注意：我们应该先生成即hexo generat，再deploy即hexo deploy。