启用Hexo开源博客系统

时间  2019-12-21
标签 启用 hexo 开源 博客 系统 繁體版
原文   原文链接
首发于 樊浩柏科学院

前段时间博客一直使用 FireKylin，整体感受挺好，可是扩展开发和社区是弱点。而 Hexo 最大特色为纯静态博客系统，同时社区支持也比较好， 故我转而投向了 Hexo 的怀抱。php

预览图

安装

Hexo 如官方介绍同样，安装方便快捷。安装前请确保 Node 和 Nginx 环境已经存在，须要安装能够参考 CentOS 6 安装 Node 和 Nginx 安装。css

只需使用以下命令便可安装 Hexo。html

$ npm install hexo-cli -g
$ hexo init blog
$ cd blog
$ npm install
$ hexo server

安装完成后目录结构以下：node

├── _config.yml             # 主配置文件
├── package.json            # 应用程序的信息
├── scaffolds               # 模版文件夹，新建文章时根据这些模版来生成文章的.md文件
├── source                  # 资源文件夹
|   ├── _drafts
|   └── _posts
└── themes                  # 主题文件夹

Hexo 默认启动 4000 端口，使用浏览器访问 http://localhost:4000，便可看见 Hexo 美丽的面容。git

说明：Nginx 配置站点根目录为public。github

使用

关于 Hexo 更详细的使用技巧，见官网文档，这里只列举经常使用的使用方法。shell

更换主题

Hexo 提供的可选 主题 比较多，总有一款你如意的，我这里主题选择了 hexo-theme-yilia，没有为何，就是看起来舒服而已，后续相关配置也是基于该主题。npm

找到喜欢的一款后，使用以下命令安装主题：json

# 进入博客目录
$ cd yourblog
# 克隆主题源码到hexo的themes文件夹下
$ git clone https://github.com/fan-haobai/hexo-theme-yilia.git themes/hexo-theme-yilia

最后一步，在_config.yml配置中启用新主题。api

theme: hexo-theme-yilia

关于主题的相关配置，参考主题源码中的 README.md 文档。

hexo-theme-yilia 主题我作了较多的修改，若是你以为个人修改也适合你，那么你只要 pull 下来便可，而不须要再作 自定义修改 部分的修改。

写文章

这里只列举我使用过的方法，更多文章的使用方法，见这里。

1） 新建文章

当须要写文章时，使用以下命令新建文章，会在资源文件夹中生成与 title 对应的 md 文件。

$ hexo new [layout] <title>

md 文件就是 Markdown 格式的文章表述。格式大体为：

title: Hello World
date: 2013/7/13 20:46:25
---                                      # 分隔符
# 如下为文章的Markdown内容

文件最上方以---为分隔符，分隔符以上为 Front-matter，用于指定与文章相关的基本信息，分隔符如下才为文章的内容区域。

2） Front-matter

Front-matter 内容以下：

layout                 布局
title                  标题
date                   创建日期
updated                更新日期
comments               是否开启文章的评论功能
tags                   标签
categories             分类
permalink              覆盖文章网址

其中 title、date、tags、categories 这 4 项，在新建文章时须要进行设置，其余项采用默认值便可，不须要在每篇文章中进行设置，故能够将这 4 项基本设置移到模板文件scaffolds\post.md中，以下：

---
title: {{ title }}
date: {{ date }}
tags:
categories:
---

这样在新建文章时，就会自动在文章 md 文件中加入 4 项基本设置。

特别说明，文章中添加了分类和标签后， Hexo 会自动生成分类页面和统计分类的文章数。关于分类和标签的使用，以下：

categories:           # 分类存在顺序关系
- 语言                 # 1级分类
- PHP                 # 2级分类
- PDO                 # 3级分类    
tags:                 # 标签为无序
- PHP                 # 标签1
- PDO                 # 标签2

3） 正文

文章正文使用 Markdown 格式便可，我使用的 Markdown 编辑器主要有 Typora — Win版 和 马克飞象 — 网页版。

Typora 和 马克飞象 的对比：

  • Typora 能够在本地使用相对路径预览文章图片，文章中插入图片方法，见配置部分。
  • 马克飞象在线编辑，能够同印象笔记时时同步，可是想预览图片，就必须是线上图片地址。

使用编辑器预览编辑完文章后，导出 md 文件替换新建文章时生成的同名 md 文件便可。

编辑完文章后，使用hexo s命令便可实时预览到文章效果。

发布

文章的新增和编辑都是在资源文件夹下（source）操做，完成后须要发布才能生成静态文件（public），进而才能经过浏览器直接访问。

发布更新命令以下：

$ hexo generate
# 能够简写为
$ hexo g

发布后，public文件夹更新到最新状态，此时便可直接访问。

插件

搜索

安装 hexo-generator-search，在_config.yml中添加以下配置代码：

search:
  path: search.xml
  field: all

RSS

安装 hexo-generator-feed，并按照说明配置（atom.xml 的连接写在source/_data/link.json的 social 项中，通常无需更改）

jsonContent

安装 hexo-generator-json-content，便可生成全部文章的 json 描述。需在_config.yml中添加以下配置代码：

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

Sitemap

安装 hexo-generator-sitemap，并在_config.yml中添加以下配置代码：

sitemap:
  path: sitemap.xml

在使用 Hexo 生成器时会自动生成最新的站点地图 sitemap.xml文件。

配置

更多的配置信息，见这里。我这里只列举比较重要的配置。

打开文章资源文件夹功能

在 Hexo 中，相对路径是针对资源文件夹source来说，因此文章的静态图片应放置于资源文件夹下。

能够将全部文章的静态图片统一放置于source/images下，可是这样不方便于管理，推荐方法是将每篇文章的图片放置于与该文章同名的资源文件下，而后使用相对路径引用便可。

在配置文件_config.yml中开启post_asset_folder项，即更改成：

post_asset_folder: true

开启该项配置后，Hexo 将会在你每一次经过hexo new [layout] <title>命令建立新文章时自动建立一个文件名同 md 文件的文件夹。将全部与你的文章有关的资源放在这个关联文件夹中以后，就能够经过相对路径来引用它们。

写文章时你只需在 Markdown 中插入相对 md 文件的 相对路径 的图片便可，hexo-asset-image 自动转化为网站 绝对路径。此时，能够直接使用 Hexo 提供的标签asset_img来插入图片，可是这样违背了 Markdown 语法，没法及时预览，不便于编辑文章。

能够经过如下 Markdown 语法在文章中插入图片，这种方式同时也支持本地 Markdown 编辑器实时预览。

![alt](/post_title/image_name)
# post_title为与文章.md同名的资源文件夹名
# image_name为图片的文件名

URL静态化

Hexo 默认 URL 地址为year/month/day/title/形式，而这种形式并不友好，需更改成year/month/title.html形式。这里我已经将source目录下的 md 文件按year/month手动归档了，因此 Hexo 发布时只须要title.html这部分。配置以下：

permalink: title.html

去除代码块行号

修改_config.yml配置项以下：

highlight:
  line_number: false

部署

若是采用本地编辑博客，博客部署在远程服务器上，那么你就须要部署，才能同步本地更新到远程服务器。

官方推荐

Hexo 提供了 5 种部署方案，见这里，这里只介绍如下 2 种：

1） Git

安装 hexo-deployer-git。

_config.yml配置以下：

deploy:
  type: git
  repo: <repository url>                     # 库地址
  branch: [branch]                           # 分支名称
  message: [message]                         # 提交信息

该方案适用于采用 Github Pages 托管博客的用户，固然使用服务器搭建博客的用户可使用 Webhook 方案来实现。

2） Rsync

安装 hexo-deployer-rsync。

_config.yml配置以下：

deploy:
  type: rsync
  host: <host>                         # 远程主机的地址                       
  user: <user>                         # 使用者名称
  root: <root>                         # 远程主机的根目录
  port: [port]                         # 端口，rsync监听端口
  delete: [true|false]                 # 是否删除远程主机上的旧文件
  verbose: [true|false]                # 显示调试信息
  ignore_errors: [true|false]          # 忽略错误

显然，该方案适用于使用服务器搭建博客的用户，可是须要在本地安装 Rsync 客户端（cwRsync）。同时，须要在服务器搭建和配置 Rsync 服务，见这里。

我尝试在 Win10 下实现这种方案，可是遇到了不少问题，例如 rsync 服务端采用 SSH 认证方式，可是 cwRsync 使用的 SSH 客户端呆板的从 /home/.ssh目录查找 SSH 配置和公钥，很悲剧 Win10 下没法识别这个路径，致使没法免密登陆 SSH，Rsync 同步也没法进行。

总之，部署的目的，就是将发布生成的静态文件public更新到服务器上，若是能实现这个目的，途径却是无所谓了。

个人方案

上述推荐部署方案，明显的缺点是本地须要部署 Hexo 环境，没法实现随时随地的更新博客。为了方便写做，个人部署方案见 个人博客发布上线方案 — Hexo。

自定义修改——非必须

在文章摘要中加入预览图

需修改文件node_modules/hexo/lib/plugins/filter/after_post_render/excerpt.js，内容修改成以下：

// 此处有更改
content.replace(rExcerpt, function(match, index) {
   data.excerpt = content.substring(0, index).trim();
   data.more = content.substring(index + match.length).trim();
   // 去掉img标签
   data.content = data.excerpt.replace(/<img(.*)>/, '') + data.more;
   return '<a id="more"></a>';
});

说明：文章摘要预览图不会在文章正文中显示。

更好地支持Shell代码高亮

因为 highlight.js 对 Shell 语法高亮解析效果并不理想，为此我对 languages/shell.js 部分作了修改来更好地支持 Shell，你只须要 pull 并替换掉原 languages/shell.js 文件便可。

$ git clone https://github.com/fan-haobai/highlight.js.git
$ cp highlight.js/src/languages/shell.js node_modules/highlight.js/lib/languages/shell.js

并将 shell.js 中的以下部分：

function(hljs)

修改成：

module.exports = function(hljs)

评论

因为后来多说的关站，就再也找不到合适的第三方评论服务了。换来换去，最后仍是以为只有 Disqus 合适，可是须要先解决被墙的问题，不过 fooleap 已经提供了一个较好的解决方案—— disqus-php-api。你只须要 pull 代码到境外服务器，部署一个 PHP 服务便可。

我部署后域名为 disqus..com。首先在layout/_partial/article.ejs文件中追加如下内容：

<% if (!index && post.comments){ %>
  <% if (theme.disqus || theme.disqus.shortname){ %>
  <%- partial('post/disqus', {
      title: post.title,
      url: config.url+url_for(post.path)
    }) %>
  <% } %>
<% } %>

而后，在layout/_partial/post目录下建立disqus.ejs文件，内容以下：

<div id="disqus_thread"></div>
<link rel="stylesheet" href="/disqus.css">
<script src="/disqus.js"></script>
<script>
  (function () {
    var disqus = new iDisqus('disqus_thread', {
      forum: '<%= theme.disqus.shortname %>',
      site: '<%= config.url %>',
      api: '<%= theme.disqus.api %>',
      url: '<%= url %>',
      mode: 2,
      timeout: 3000,
      init: true,
      autoCreate: true,
      relatedType: false
    });
    disqus.count();
  })();
</script>

最后，在_config.yml增长以下配置：

disqus:
  shortname: ''
  api: '//disqus..com'
有关 Disqus 更详细的配置，见 Disqus 设置 部分。

百度统计

首先，在layout/_partial/after-footer.ejs文件中追加以下代码：

<%- partial('baidu-analytics') %>

并在layout/_partial目录下建立baidu-analytics.ejs文件，内容为：

<% if (theme.baidu_analytics){ %>
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?<%= theme.baidu_analytics %>";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
<% } %>

而后，在配置文件_config.yml中，增长以下配置信息：

# 百度分析Uid，若为空则不启用
baidu_analytics: 9f0ecfa73797e6a907d8ea6a285df6a5

百度主动推送

为了更好的收录本站文章，这里引进了百度 主动推送功能，只需添加以下 JS代码，每当文章被浏览时都会自动向百度提交连接，这种方式以用户为驱动，较为方便和实用。

在主题模板文件layout/_partial/article.ejs中，追加如下代码：

<% if (!index){ %>
<script>
  (function () {
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'
    } else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js'
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s)
  })();
</script>
<% } %>

到这里，也终于算是搭建结束了。至于 404 页面打算采用 腾讯的公益404页面 来作，见这里。

更新 »

相关文章 »

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程