使用 Hexo 写博客

1、Hexo 简介

  • Hexo 是一个简单、快速、强大的基于 Github Pages 的博客发布工具,支持 Markdown 格式,有众多优秀插件和主题。

  • Hexo 官网:http://hexo.io

  • GitHub 仓库:https://github.com/hexojs/hexo

1.1 Hexo 原理

  • 由于 Github Pages 存放的都是静态文件,博客存放的不只是文章内容,还有文章列表、分类、标签、翻页等动态内容,假如每次写完一篇文章都要手动更新博文目录和相关链接信息,相信谁都会疯掉,所以 Hexo 所做的就是将这些 md 文件都放在本地,每次写完文章后调用写好的命令来批量完成相关页面的生成,然后再将有改动的页面提交到 Github。

2、Hexo 安装

  • 在终端中执行以下命令安装 Hexo。

    1
    $ npm install -g hexo

2.1 安装注意事项

  • 很多命令既可以用 Windows 的 cmd 来完成,也可以使用 git bash 来完成,但是部分命令会有一些问题,为避免不必要的问题,建议全部使用 git bash 来执行;
  • hexo 不同版本差别比较大,网上很多文章的配置信息都是基于 2.x 的,所以注意不要被误导;
  • hexo 有 2 种 _config.yml 文件,一个是根目录下的全局的 _config.yml,一个是各个 theme 下的;

2.2 Hexo 常见命令

  • 常见命令

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    # 新建文章
    $ hexo new "postName"

    # 新建页面
    $ hexo new page "pageName"

    # 生成静态页面至 public 目录
    $ hexo generate

    # 开启预览访问端口(默认端口 4000,'ctrl + c' 关闭 server)
    $ hexo server

    # 部署到 Github
    $ hexo deploy

    # 查看帮助
    $ hexo help

    # 查看 Hexo 的版本
    $ hexo version

    # 清理 public 目录的内容
    $ hexo clean
  • 缩写

    1
    2
    3
    4
    $ hexo n == hexo new
    $ hexo g == hexo generate
    $ hexo s == hexo server
    $ hexo d == hexo deploy
  • 组合命令

    1
    2
    3
    4
    5
    # 生成并本地预览
    $ hexo s -g

    # 生成并上传
    $ hexo d -g

3、Hexo 配置

3.1 初始化

  • 在电脑的某个地方新建一个名为 Hexo 的文件夹(名字可以随便取),比如目录 ~/Hexo,由于这个文件夹将来就作为你存放代码的地方,所以最好不要随便放。

  • 在终端执行下面命令。

    1
    2
    $ cd ~/hexo
    $ hexo init
  • Hexo 会自动下载一些文件到这个目录,包括 node_modules,目录结构如下图:

  • 执行以下命令之后,Hexo 就会在 public 文件夹生成相关 html 文件,这些文件将来都是要提交到 Github 去的:

    1
    2
    3
    4
    5
    # 生成
    $ hexo g

    # 启动服务
    $ hexo s

  • hexo s 是开启本地预览服务,打开浏览器访问 http://localhost:4000 即可看到内容,很多人会碰到浏览器一直在转圈但是就是加载不出来的问题,一般情况下是因为端口占用的缘故。

3.2 修改主题

  • 第一次初始化的时候 Hexo 已经帮我们写了一篇名为 Hello World 的文章,默认的主题比较丑,打开时就是这个样子:

  • 既然默认主题很丑,那我们别的不做,首先来替换一个好看点的主题。

  • 以 yilia 主题为例,首先下载这个主题:

    1
    2
    $ cd ~/hexo/
    $ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
  • 下载后的主题都在这里:

  • 修改博客根目录 _config.yml 中的 theme: landscape 改为 theme: yilia,然后重新执行 hexo g 来重新生成。

  • 如果出现一些莫名其妙的问题,可以先执行 hexo clean 来清理一下 public 的内容,然后再来重新生成和发布。

3.3 yilia 主题下显示所有文章

  • 1)请确保 node 版本大于 6.2。

  • 2)在博客根目录(注意不是 yilia 根目录)执行以下命令:

    1
    $ npm i hexo-generator-json-content --save
  • 3)在根目录 _config.yml 里添加以下配置:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    # yilia 主题显示所有文章列表
    jsonContent:
    meta: false
    pages: false
    posts:
    title: true
    date: true
    path: true
    text: false
    raw: false
    content: false
    slug: false
    updated: false
    comments: false
    link: false
    permalink: false
    excerpt: false
    categories: false
    tags: true

3.4 上传博客到 Github

  • 在上传代码到 Github 之前,一定要记得先把你以前所有代码下载下来(虽然 Github 有版本管理,但备份一下总是好的),因为从 Hexo 提交代码时会把你以前的所有代码都删掉。

  • 如果你一切都配置好了,发布上传很容易,一句 hexo d 就搞定,当然关键还是你要把所有东西配置好。

    • 1)首先,ssh key 肯定要配置好。
    • 2)其次,配置博客根目录 _config.yml 中有关 deploy 的部分,需要特别注意的地方是冒号后面必须有一个空格,否则可能会出问题。
  • 正确写法:

    1
    2
    3
    4
    deploy:
    type: git
    repository: git@github.com:qianchia/qianchia.github.io.git
    branch: master
  • 错误写法:这种写法是 hexo 2.x 的写法,现在已经不行了。

    1
    2
    3
    4
    deploy:
    type: github
    repository: https://github.com/qianchia/qianchia.github.io.git
    branch: master
  • 无论是哪种写法,此时直接执行 hexo d 的话一般会报如下错误:

    1
    Deployer not found: github 或者 Deployer not found: git
  • 原因是还需要安装一个插件,执行下面命令安装,其它命令不确定,部署这个命令一定要用 git bash,否则会提示 Permission denied (publickey)

    1
    $ npm install hexo-deployer-git --save
  • 打开你的 git bash,输入 hexo d 就会将本次有改动的代码全部提交,没有改动的不会。

3.5 保留 CNAME、README.md 等文件

  • 提交之后网页上一看,发现以前其它代码都没了,此时不要慌,一些非 md 文件可以把他们放到 source 文件夹下,这里的所有文件都会原样复制(除了 md 文件)到 public 目录的:

  • 由于 Hexo 默认会把所有 md 文件都转换成 html,包括 README.md,所有需要每次生成之后、上传之前,手动将 README.md 复制到 public 目录,并删除 README.html。

3.6 自定义 404 页面

  • GitHub Pages 有提供制作 404 页面的指引:Custom 404 Pages

  • 直接在根目录下创建自己的 404.html 或者 404.md 就可以。但是自定义 404 页面仅对绑定顶级域名的项目才起作用。

  • 推荐使用腾讯公益 404

3.7 向 Hexo 文章中插入图片

  • 设置站点配置 _config.yml:将 post_asset_folder: false 改为 post_asset_folder: true

  • 安装插件: npm install hexo-asset-image --save

  • 运行 hexo n "XXXXXX",生成 XXXXX.md 博文时就会在 /source/_posts 目录下生成 XXXXXX 的文件夹,将你想在 XXXXX 博文中插入的照片放置到这个同名文件夹中即可,图片的命名随意。

  • 添加图片:在想添加的位置写入![](图片名字.图片格式),例如![](1.png)

  • 注意插件 hexo-asset-image 包中 index.js 里的一段话。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    // In hexo 3.1.1, the permalink of "about" page is like ".../about/index.html".
    // if not with index.html endpos = link.lastIndexOf('.') + 1 support hexo-abbrlink

    if(/.*\/index\.html$/.test(link)) {

    // when permalink is end with index.html, for example 2019/02/20/xxtitle/index.html
    // image in xxtitle/ will go to xxtitle/index/

    appendLink = 'index/';
    var endPos = link.lastIndexOf('/');
    }
    else {
    var endPos = link.length-1;
    }
    • 将 hexo-asset-image 包中 index.js 里的 var endPos = link.length-1; 行替换为 var endPos = link.lastIndexOf('.');

3.8 向 Hexo 主题中添加百度分享功能

  • 因为 next\layout_partials\share\baidushare.swig 文件中代码显示:

    1
    2
    3
    4
    5
    {% if theme.baidushare.type === "button" %}
    ...
    ...
    {% elseif theme.baidushare.type === "slide" %}
    ...
  • 在配置百度分享功能时需指定其type,所以将主题配置 _config.yml 文件中关于 baidushare 部分的内容改为(其中 type 亦可以选择 button):

    1
    2
    3
    baidushare:
    type: slide
    baidushare: true
  • _config.yml 中提示:Warning: Baidu Share does not support https. 因为百度分享不支持在 https 上使用,所以一种解决方法便是,直接放文件到我们自己的目录下面。

  • 访问链接:static 文件夹,提取码:nvxf,下载压缩包到本地,解压后,将 static 文件夹保存至 themes\next\source 目录下。

  • 修改文件:themes\next\layout_partials\share\baidushare.swig 将文件末尾部分的代码进行修改:

    1
    2
    3
    4
    5
    .src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];

    改为

    .src='/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];
  • 最后重新生成下,就能展示分享功能了。

3.9 向 Hexo 添加搜索功能

  • 安装插件

    1
    npm install hexo-generator-searchdb --save
  • 修改 站点配置 文件

    1
    2
    3
    4
    5
    search:
    path: search.json
    field: post
    format: html
    limit: 10000
  • 修改 主题配置 文件

    1
    2
    local_search:
    enable: true
  • 添加搜索显示代码

    1
    2
    3
    4
    5
    6
    7
    8
    <div>
    <h3 class="catListTitle">搜索</h3>
    <form>
    <input type="text" class="st-default-search-input search" id="local-search-input" placeholder="搜索一下" autocomplete="off">
    </form>
    </div>

    <div id="local-search-result"></div>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    (function() {
    'use strict';
    function getMatchData(keyword, data) {
    var matchData = [];
    for(var i =0;i<data.length;i++){
    if(data[i].title.toLowerCase().indexOf(keyword)>=0)
    matchData.push(data[i])
    }
    return matchData;
    }
    var $input = $('#local-search-input');
    var $resultContent = $('#local-search-result');
    $input.keyup(function(){
    $.ajax({
    url: '/search.json',
    dataType: "json",
    success: function( json ) {
    var str='<ul class=\"search-result-list\">';
    var keyword = $input.val().trim().toLowerCase();
    $resultContent.innerHTML = "";
    if ($input.val().trim().length <= 0) {
    $resultContent.empty();
    $('#switch-area').show();
    return;
    }
    var results = getMatchData(keyword, json);
    if(results.length === 0){
    $resultContent.empty();
    $('#switch-area').show();
    return;
    }
    for(var i =0; i<results.length; i++){
    var url1 = results[i].url
    var url2 = url1.replace(new RegExp("%2F%2F",'g'), "")
    var url3 = url2.replace(new RegExp("%2F",'g'), "/")
    str += "<li><a href='"+ "<%=theme.blog%>" + "/" + url3 +"' class='search-result-title'>"+ results[i].title +"</a></li>";
    }
    str += "</ul>";
    $resultContent.empty();
    $resultContent.append(str);
    $('#switch-area').hide();
    }
    });
    });
    })();
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    #search, .search {
    width: 75%;
    height: 30px;
    margin-top: 1px;
    margin-left: 0;
    color: #000;
    padding: 0;
    border: solid 2px #ccc;
    border-radius: 4px;
    font-size: 14px;
    }

    #search:hover, .search:hover {
    opacity: 1;
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,.3);
    box-shadow: 0 0 10px rgba(0,0,0,.3)
    }

    .search-result-list li {
    margin-top: 10px;
    padding: 5px
    }

3.10 Url 持久化

  • 我们可以发现 hexo 默认生成的文章地址路径是 【网站名称/年/月/日/文章名称】。

  • 这种链接对搜索爬虫是很不友好的,第一它的 url 结构超过了三层,太深了。第二使用了中文路径。这样会导致一个问题,在某些聊天工具或分享链接的时候会造成 url 转码变成很长一串难以读写的链接。而且如果你的页面之前被收录或被转载后,当你再次编辑过后可能会造成之前的 url 失效带来不必要的 404。别担心,我们有好办法来解决它。

  • 第一种方式:

    • 打开 _config.yml 配置文件,找到 permalink

      1
      2
      3
      4
      5
      #permalink: :year/:month/:day/:title/ 

      将之前的改为下面这样

      permalink: /articles/:title.html
    • 上面这种方式是去掉了年月日,保持网站最多三层。

  • 第二种方式:(推荐)

    • 安装 hexo-abbrlink

      1
      npm install hexo-abbrlink --save
    • 配置 _config.yml

      1
      2
      3
      4
      5
      6
      7
      8
      9
      #permalink: :year/:month/:day/:title/  

      将之前的改为下面这样

      permalink: articles/:abbrlink.html

      abbrlink:
      alg: crc32 # 算法:crc16(default) and crc32
      rep: hex # 进制:dec(default) and hex
    • ok,到这里你只需要

      1
      2
      hexo g
      hexo d
    • 你的链接就会变成这样的

      1
      https://soft.qianchia.com/articles/1ab87c10.html

3.11 添加网站访问计数

  • 本文使用 “不蒜子” 网站计数。

  • 安装脚本

    1
    <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
  • 显示站点总访问量

    1
    2
    3
    4
    5
    6
    # 算法 a:pv 的方式,单个用户连续点击 n 篇文章,记录 n 次访问量。

    <span id="busuanzi_container_site_pv">
    <i class="fa fa-eye"></i>
    <span id="busuanzi_value_site_pv"></span>
    </span>
    1
    2
    3
    4
    5
    6
    # 算法 b:uv 的方式,单个用户连续点击 n 篇文章,只记录 1 次访客数。

    <span id="busuanzi_container_site_uv">
    <i class="fa fa-eye"></i>
    <span id="busuanzi_value_site_uv"></span>
    </span>
  • 显示单页面访问量

    1
    2
    3
    4
    <span id="busuanzi_container_page_pv"> 
    <i class="fa fa-eye"></i>
    <span id="busuanzi_value_page_pv"></span>
    </span>

3.12 SEO 优化

3.12.1 站点地图

  • 首先安装 sitemap 和百度版本的 sitemap

    1
    2
    $ npm install hexo-generator-sitemap --save
    $ npm install hexo-generator-baidu-sitemap --save
  • 打开配置文件 _config.yml 添加以下内容,这样会在 hexo g 编译时会在网站目录上 sitemap.xmlbaidusitemap.xml 文件,该文件是提供给搜索爬虫用的。

    1
    2
    3
    4
    sitemap:
    path: sitemap.xml
    baidusitemap:
    path: baidusitemap.xml

3.12.2 robots 配置

  • Allow 表示允许被访问的,Disallow 是不允许的意思,注意后面两个 Sitemap 就是网站地图了,而网站地图前面说了是给爬虫用的,这里配置在 robots 中。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    User-agent: *
    Allow: /
    Allow: /home/
    Allow: /archives/
    Allow: /about/
    Disallow: /vendors/
    Disallow: /js/
    Disallow: /css/
    Disallow: /fonts/
    Disallow: /vendors/
    Disallow: /fancybox/
    Sitemap: http://www.qianchia.com/sitemap.xml
    Sitemap: http://www.qianchia.com/baidusitemap.xml

3.12.3 Google Search Console

  • 针对谷歌我们登陆谷歌搜索控制台在里面添加自己的站点就可以了。添加方法也很简单就是将一个带 key 的 html 从 google 下载下来后放到我们的自己的博客更目录上就可以了。

  • 然后我们找到网站地图,点击添加站点地图,再将我们之前生成好的地图地址贴入即可。

  • 然后我们点击 robots.txt 测试工具,确保没有错误即可。

  • 其他里面还有一些好用的工具可以自行测试玩玩。

3.12.4 百度站长平台

  • 百度的玩法几乎和谷歌一毛一样,没什么区别,首先也是要配置站点认证。

  • 这里有一个坑需要注意,如果你的 hexo 博客是托管在 github 上的就不要用 html 静态 key 来做验证了。应该是域名解析的方式也就是别名解析。

  • 认证成功后找到 Robots,检测更新一下,注意默认协议就是指向你的域名后面加 /robots.txt 文件

3.12.5 nofollow

  • nofollow 是 HTML 页面中 a 标签的属性值。这个标签的意义是告诉搜索引擎 “不要追踪此网页上的链接或不要追踪此特定链接”。

  • 简单来说,就是为了防止搜索引擎的爬虫爬去页面的时候给爬走了到别的页面后就不回来了。所以针对链接标签我们可以添加 nofollow 属性。

    1
    <a  rel="external nofollow" >
  • 这需要在主题里的 html 模版中找,具体有哪些自己找找吧。

3.12.6 页面关键字优化

  • 1)title:文件路径是 your-hexo-site\themes\next\layout\index.swig,打开编辑。其实你也可以添加你自己想要的关键字,只要不太过分就行啦。

    1
    2
    3
    原文件

    {% block title %}{{ config.title }}{% if theme.index_with_subtitle and config.subtitle %} - {{config.subtitle }}
    1
    2
    3
    修改后的

    {% block title %}{{ config.title }}{% if theme.index_with_subtitle and config.subtitle %} - {{config.subtitle }}{% endif %}{{ theme.description }} {% endblock %}
  • 2)keywords:又叫关键词、关键字。keywords 密度是指 keywords 出现的次数和 keywords 关联字词出现的次数与整个网页文本之比,keywords 在文本中出现的次数越多,那么 keywords 密度越高,反之就越低。主题,代表的是当前页面或者栏目内容的主体。keywords 在你 _config.yml 配置文件中就有。注意的是除了根目录上的要修改以外还有主题里的。否则就会出现默认的 keywords。
    比如简书的 keywords 是这样的:

    1
    <meta name="keywords" content="简书,简书官网,图文编辑软件,简书下载,图文创作,创作软件,原创社区,小说,散文,写作,阅读">
  • 3)description:就是这个页面的描述,你想写啥就写啥。比如:

    1
    2
    3
    简书是一个优质的创作社区,在这里,你可以任性地创作,一篇短文、一张照片、一首诗、一幅。。。
    XXX的博客
    关注最前沿的移动端高新技术

4、写博客

  • 定位到我们的 Hexo 根目录,执行命令:

    1
    $ hexo new 'my-first-blog'
  • Hexo 会帮我们在 _posts 下生成相关 md 文件:

  • 我们只需要打开这个文件就可以开始写博客了,默认生成如下内容:

  • 当然你也可以直接自己新建 md 文件,用这个命令的好处是帮我们自动生成了时间。

  • 一般完整格式如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    ---
    title: postName # 文章页面上的显示名称,一般是中文
    date: 2013-12-02 15:30:16 # 文章生成时间,一般不改,当然也可以任意修改
    categories: 默认分类 # 分类
    tags: [tag1, tag2, tag3] # 文章标签,可空,多标签请用格式,注意: 后面有个空格
    description: 附加一段文章摘要,字数最好在 140 字以内,会出现在 meta 的 description 里面
    ---

    以下是正文

4.1 hexo new page ‘postName’ 命令和 hexo new ‘postName’ 的区别

  • hexo new page "my-second-blog" 生成如下:

  • 最终部署时生成:hexo\public\my-second-blog\index.html,但是它不会作为文章出现在博文目录。

4.2 如何让博文列表不显示全部内容

  • 默认情况下,生成的博文目录会显示全部的文章内容,如何设置文章摘要的长度呢?

  • 答案是在合适的位置加上 <!--more--> 即可,例如:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    # 前言

    使用github pages服务搭建博客的好处有:

    1. 全是静态文件,访问速度快;
    2. 免费方便,不用花一分钱就可以搭建一个自由的个人博客,不需要服务器不需要后台;
    3. 可以随意绑定自己的域名,不仔细看的话根本看不出来你的网站是基于github的;

    <!--more-->

    4. 数据绝对安全,基于github的版本管理,想恢复到哪个历史版本都行;
    5. 博客内容可以轻松打包、转移、发布到其它平台;
    6. 等等;
  • 最终效果:

文章目录
  1. 1. 1、Hexo 简介
    1. 1.1. 1.1 Hexo 原理
  2. 2. 2、Hexo 安装
    1. 2.1. 2.1 安装注意事项
    2. 2.2. 2.2 Hexo 常见命令
  3. 3. 3、Hexo 配置
    1. 3.1. 3.1 初始化
    2. 3.2. 3.2 修改主题
    3. 3.3. 3.3 yilia 主题下显示所有文章
    4. 3.4. 3.4 上传博客到 Github
    5. 3.5. 3.5 保留 CNAME、README.md 等文件
    6. 3.6. 3.6 自定义 404 页面
    7. 3.7. 3.7 向 Hexo 文章中插入图片
    8. 3.8. 3.8 向 Hexo 主题中添加百度分享功能
    9. 3.9. 3.9 向 Hexo 添加搜索功能
    10. 3.10. 3.10 Url 持久化
    11. 3.11. 3.11 添加网站访问计数
    12. 3.12. 3.12 SEO 优化
      1. 3.12.1. 3.12.1 站点地图
      2. 3.12.2. 3.12.2 robots 配置
      3. 3.12.3. 3.12.3 Google Search Console
      4. 3.12.4. 3.12.4 百度站长平台
      5. 3.12.5. 3.12.5 nofollow
      6. 3.12.6. 3.12.6 页面关键字优化
  4. 4. 4、写博客
    1. 4.1. 4.1 hexo new page ‘postName’ 命令和 hexo new ‘postName’ 的区别
    2. 4.2. 4.2 如何让博文列表不显示全部内容
隐藏目录