使用Github+Hexo搭建个人博客 | No.2

小伙伴们，后续更新来啦~~~

前言

通过第一期教程，大家应该都有了一个属于自己的hexo博客了。

下面第二期教程将带给大家如何写博客，如何搭配图文以及如何上传部署博客。

首先，准备工具—Markdown编辑器

---

上传部署博客

Markdown 简介

Markdown 是一种可以使用普通文本编辑器编写的 标记语言，通过简单的 标记语法，它可以使普通文本内容具有一定的格式

基于 Markdown 语法的简洁性，它已经成为目前世界上最流行的用于书写博客的语言

---

教程

1、首先在博客文件夹里的根目录下打开Git。

2、 打开命令行进入source然后进入到_posts目录中

_posts文件夹主要就是用来存放博客的文章

$ cd source/_posts/

3、创建新博客文章命令：

$ hexo new "我的第一篇博客文章"

可以看到在_posts文件夹中创建了.md格式的Markdown文件。

但是，如果一篇博客文章中要插入很多的素材，例如图片，音频等等。这时就会出现素材存放很乱的问题，为了解决这一问题呢，Hexo也给出了较好的解决方案。

打开博客配置文件_config.yml

找到：

$ post_asset_folder: ture

默认是false，改为true，注意冒号和true之间有一个空格！

设置好之后再新建.md文件，就会发现_posts文件夹中出现了同名的文件夹和.md文件。那么，以后每篇博客中的素材就可以放在相应的文件夹中了， 是不是很方便呢。

---

4、下载好的Markdown编辑器——Typora

点击左上角文件，然后打开偏好设置，将图像中的优先使用相对路径勾选上

---

5、打开.md进行博文的书写。在插入图片的时候可以看到路径是相对路径

​ 同时，记得将图片等素材放入相应的文件夹里（养成好习惯）。

6、 总结一下常用的命令：

hexo new "name"        #新建文章
hexo new page "name"   #新建页面
hexo g                 #生成页面
hexo d                 #部署
hexo g -d              #生成页面并部署
hexo s                 #本地预览
hexo clean             #清除缓存和已生成的静态文件

发布文章的时候可以用：

hexo clean        #清除缓存和已生成的静态文件
hexo g            #生成页面
hexo s            #本地预览
hexo d            #部署

hexo clean 和 hexo s没必要每次都用，但是hexo g 和 hexo d 每次部署都要用到。

部署到博客界面可能很慢，多刷新或耐心等待下~

---

问题解决

可能有的小伙伴把文章部署上去会出现图片加载不出来的问题，下面提供一下解决方案：

需要加入一个插件，用Git输入命令：

$ npm install https://github.com/CodeFalling/hexo-asset-image --save

添加完这个插件后，其中的内容需要修改。

打开/node_modules/hexo-asset-image/index.js将内容更换为下面的代码

提示：每次更改内容的时候最好先备份一份，以免修改错误回不去！

'use strict';
var cheerio = require('cheerio');

// http://stackoverflow.com/questions/14480345/how-to-get-the-nth-occurrence-in-a-string
function getPosition(str, m, i) {
return str.split(m, i).join(m).length;
}

var version = String(hexo.version).split('.');
hexo.extend.filter.register('after_post_render', function(data){
var config = hexo.config;
if(config.post_asset_folder){
  var link = data.permalink;
if(version.length > 0 && Number(version[0]) == 3)
  var beginPos = getPosition(link, '/', 1) + 1;
else
  var beginPos = getPosition(link, '/', 3) + 1;
// In hexo 3.1.1, the permalink of "about" page is like ".../about/index.html".
var endPos = link.lastIndexOf('/') + 1;
  link = link.substring(beginPos, endPos);

  var toprocess = ['excerpt', 'more', 'content'];
  for(var i = 0; i < toprocess.length; i++){
    var key = toprocess[i];

    var $ = cheerio.load(data[key], {
      ignoreWhitespace: false,
      xmlMode: false,
      lowerCaseTags: false,
      decodeEntities: false
    });

    $('img').each(function(){
if ($(this).attr('src')){
// For windows style path, we replace '\' to '/'.
var src = $(this).attr('src').replace('\\', '/');
if(!/http[s]*.*|\/\/.*/.test(src) &&
  !/^\s*\//.test(src)) {
// For "about" page, the first part of "src" can't be removed.
// In addition, to support multi-level local directory.
var linkArray = link.split('/').filter(function(elem){
return elem != '';
});
var srcArray = src.split('/').filter(function(elem){
return elem != '' && elem != '.';
});
if(srcArray.length > 1)
srcArray.shift();
src = srcArray.join('/');
$(this).attr('src', config.root + link + src);
console.info&&console.info("update link as:-->"+config.root + link + src);
}
}else{
console.info&&console.info("no src attr, skipped...");
console.info&&console.info($(this));
}
    });
    data[key] = $.html();
  }
}
});

更改后保存，然后重新清除缓存上传，这时在网页中就可以看到上传的图片了。

博文格式

「笨小兔」— 有话要说

使用Markdown编写文章

生成的文章上面会有固定的格式——标题、时间、tags标签等，并且生成的文章会通通显示出来，那么如果想让它在首页只显示前言一部分呢？

1、隐藏文章主体部分

<!--- more --->用来分割梗概与正文

效果如下：

因当时没有保存素材，所以这是用的主题美化后的效果，后期会和大家分享的，不要着急一步一步慢慢来~

2、创建文章时固定的格式

创建的文章路径是：Blog-Hexo/source/_posts

categories与tags分别是分类与标签

以tags为例语法是tags: [tag1,tag2,tag3...tagn]

---
title: {{ title }}
date: {{ date }}
comments: true  #是否可评论
categories: hexo
tags: [love,hexo,搭建hexo]
---

如果想将上述格式作为固定格式，也就是每当你创建一篇新的文章时，打开后上面呈现的就是这种固定格式，则可以做以下调整：

打开post.md文件

路径：Blog-Hexo/scaffolds/post.md

将文件里的内容修改为上述格式，根据自己的需求选择，也可以和下面我的一样

注意：属性和属性值之间必须有一个空格，否则会解析错误

---

本期教程就到这里啦，这样Hexo的搭建及文章发布就完成了。
后面的教程就是hexo的美化，用来提升B格哦,嘿嘿嘿~~~”

---

每天进步一点点，Peace

感谢支持！