浅谈个人博客搭建

本文将简要介绍如何搭建个人博客。搭建博客方式数不胜数，读者亦可自行撷取一二更适合自己的。本文将使用一种主流搭站方式，将涉及以下：Github，Hexo，Vercel，以及可选的LeanCloud。

搭站

此步骤在网络上的资源相当多，有很多写得很好。为不造成无意义的重复，兹简要概括之。

  1. 若无Github账号，注册之

  2. Vercel新建一Project，选择Hexo模板，等待部署完毕

  3. 本地安装Node.js，然后安装hexo-cli

    1
    $ npm install -g hexo-cli

至此，搭站完毕。

Hexo命令

搭站完毕后默认有一hello-world.md，其中有对基本操作进行介绍。兹对其做进一步说明。

Hexo原生支持使用markdown和ejs进行写作，其他格式可以安装对应插件进行扩展。

官方文档：Hexo Documentation

当我们想要更新博客时，一般步骤为：

1
2
3
4
5
$ hexo new post-name #创建新文章
#使用md编辑器进行编辑
$ hexo s #本地测试(本地服务是动态渲染的, 无需先打包)
$ hexo g #打包
$ hexo d #部署

创建新文章

1
$ hexo new [layout] <title>

例子

1
$ hexo new hello-world

以下是一些常用的，（原文在此）：

Layout

不同布局的post会存放在不同的目录中。

Layout Directory
post(default) source/_posts
page source
draft source/_drafts

启动本地服务

1
2
$ hexo server
$ hexo s

其中后者为等价简写。后同不述。

访问localhost即可查看效果。

打包为静态页面

1
2
$ hexo generate
$ hexo g

我们的博客部署在Github上，但其Github无法动态渲染，故我们需要先渲染完再上传。

部署

1
2
$ hexo deploy
$ hexo d

此命令即将我们打包完的更新部署至仓库。需要注意部署后可能需等待一段时间才能看到更新。

Hexo主题

Hexo有相当多的主题，网上也有很多相关教程。NexT和Butterfly两者可谓主流，资料相当多。为不重复，本文着重于Hexo的默认主题Landscape。此部分仅用于Landscape的美化，并会长期更新。

按博客的更新时间排序

Landscape默认是按照日期降序排序的。要按照更新时间来降序排序，只需在_config.yml中修改：

1
2
3
4
index_generator:
  path: ''
  per_page: 10
  order_by: -updated

增强的Markdown

Hexo默认的markdown渲染器是hexo-marked。但是，它不能渲染公式。为了使用功能更强的markdown，我们可以使用hexo-markdown-it-plus。

1
2
$ npm un hexo-renderer-marked --save
$ npm i hexo-renderer-markdown-it-plus --save

然后，按照hexo-markdown-it-plus的README，在_config.yml中添加：

1
2
3
4
5
6
7
8
9
10
markdown_it_plus:
    highlight: true
    html: true
    xhtmlOut: true
    breaks: true
    langPrefix:
    linkify: true
    typographer:
    quotes: “”‘’
    pre_class: highlight

网站访问次数统计

目前主流的方案是不蒜子，官方教程在此。

步骤如下。

  1. 在主题的_config.yml中添加不蒜子

    1
    2
    3
    4
    busuanzi:
      enable: true # if you want to use busuanzi, set this value true
      site: true # the total number of visits to the site
      page: true # the number of visits to a single page

  2. 在layout/_partial/after_footer.ejs中引入js

  3. 在layout/_partial/目录下添加并实现busuanzi.ejs

  4. 修改languages/目录下的yml，新增times一项

  5. 修改footer.ejs和article.ejs调用busuanzi

为文章添加目录

Landscape并没有使用Hexo提供的toc功能，因此尽管很多主题都有sidebar显示目录的功能，但Landscape需要自行实现。

  1. 在_config.yml中的widget里添加toc
  2. 自行实现toc.ejs和toc.js
  3. 在article.ejs中调用toc

toc.js的一种实现。此实现可能略有瑕疵。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
(function(){
  if($("#toc").length){
    $("#toc-div .widget").html($("#toc"));
    $("#toc-div").css({"visibility": "visible"});
    $("#toc").css({"visibility": "visible"});
  }
  var position = $('#toc-div').position().top;
  $(window).scroll(function(){
    $("#toc-div").css({
      "position":"relative",
      "top":($("body,html").scrollTop() - position > 0) ? $("body,html").scrollTop() - position : 0
    });
  });
})();

搜索功能

Landscape的搜索功能只是简单粗暴地调用Google。至于重新实现，可以参考hexo-generator-search的README。