开篇如何通过hexo创建blog

此为团队博客开篇，让技术部的知识沉淀下来，这是一个好的开始。算是技术部的一个坑，让大家都参与进来。本文介绍通过hexo如何搭建技术博客。

为何选择hexo，支持markdown，最主要是先有个平台有内容产出，有内容了什么都好说，选择其他框架、自定义主题或者自行开发一个适合自己的博客系统。

安装

1	$ npm install -g hexo-cli

注意：安装之前先安装nodejs ，下载地址 https://nodejs.org/en/

初始化

$ hexo init
$ git init // 添加仓库
$ git remote add origin git@github.com:cosmeapp/cosmeapp.github.com.git
$ git clone https://github.com/iissnan/hexo-theme-next themes/next // 安装主题，记得切换到hexo站点目录下

创建文章

1 2	$ hexo new post create-hexo-blog $ hexo new weekly weekly-2017-05-06 // 创建周刊模板

本地预览

1	$ hexo server -g

构建发布

1	$ hexo deploy -g

插件

hexo-deployer-git

Git deployer plugin for Hexo.

1	$ npm install hexo-deployer-git --save-dev

配置_config.yml

deploy:
  type: git
  repo: git@github.com:cosmeapp/cosmeapp.github.com.git
  branch: master

配置主题

1	$ git clone https://github.com/iissnan/hexo-theme-next themes/next

配置_config.yml

1	theme: next

其他具体的配置参考http://theme-next.iissnan.com/

Gitalk

Gitalk 是一个基于 Github Issue 和 Preact 开发的评论插件

因公司业务调整多说项目于2017年6月1日正式关停服务。于是考虑使用Gitalk代替。

NexT主题集成Gittalk，这个可以发个pr

+++ b/layout/_partials/comments.swig
@@ -32,4 +32,5 @@
       <div id="vcomments"></div>
     {% endif %}
   </div>
+  <div id="gitalk-container"></div>
 {% endif %}

+++ b/layout/_third-party/comments/index.swig
 {% include 'valine.swig' %}
+{% include 'gittalk.swig' %}

{% if page.comments %}
<link rel="stylesheet" href="/gitalk/gitalk.css">
<script src="/gitalk/gitalk.min.js"></script>

<script>
var gitalk = new Gitalk({
  clientID: 'cb9d990636e84547cadb',
  clientSecret: '78036da2ca2985c3df477c76c407a120ae664368',
  repo: 'cosmeapp.github.com',
  owner: 'cosmeapp',
  id: '',
  title: '{{ page.title }}',
  body: '{{ page.permalink }}\n\n{{ page.title }}',
  labels: ['Gitalk'{% if page.tags and page.tags.length %}{% for tag in page.tags %},'{{ tag.name }}'{% endfor %}{% endif %}],
  admin: ['huixisheng'],
  distractionFreeMode: true
});

gitalk.render('gitalk-container');
</script>
{% endif %}

不想设置id成为labels。于是下载Gitalk源码修改，但构建的时候报错

ERROR in ./src/index.js
Module parse failed: ~/gitalk/src/index.js Unexpected token (23:18)
You may need an appropriate loader to handle this file type.
|     }
|
|     return render(<GitalkComponent options={this.options}/>, node)
|   }
| }
 @ multi (webpack)-dev-server/client?http://localhost:8000 webpack/hot/dev-server ./index.js

很奇怪，看了相关webpack配置并没有什么问题，提了issue。当然提issue前努力尝试去解决问题，开源的项目不可能连构建都不行。

尝试升级相关的dependencies，推荐npm-check
删除node_moduels,尝试 npm install和 yarn install
问题初步怀疑是jsx不解析，但是babel-loader配置没问题
google You may need an appropriate loader to handle this file type. 尝试添加了webpack、babel-loader、jsx等关键词。折腾到凌晨2点多，无果，媳妇喊睡觉
第二天起来，开始尝试写最简单的demo，demo跑起来没有问题，对比demo的配置，配置无差。后面发现Gitalk的项目是clone在node_modules目录下，换了目录。项目终于可以跑起来了 @todo 深入为何在node_modules目录下不行？初步设想，应该是nodejs查找依赖，通过配置webpack可以解决

问题的出现不是偶然，任何问题的出现都是有原因，有可能是一个字母，不同的环境。当出现不可思议的问题时候，需要静下心，慢慢体会碰到问题的苦恼，最终享受问题解决的快乐。

移除id添加为labels

+++ b/src/gitalk.jsx
@@ -184,7 +184,8 @@ class GitalkComponent extends Component {
       params: {
         client_id: clientID,
         client_secret: clientSecret,
-        labels: labels.concat(id).join(',')
+        labels: labels.join(',')
       }
     }).then(res => {
     return axiosGithub.post(`/repos/${owner}/${repo}/issues`, {
       title,
-      labels: labels.concat(id),
+      labels: labels,

相关的扩展阅读如何评价「多说」即将关闭？有什么替代方案？

| replace(r/\d{4}-/g, ‘’)

其他插件

"hexo-all-minifier": "^0.2.6",
"hexo-generator-feed": "^1.2.2",
"hexo-generator-seo-friendly-sitemap": "0.0.21",
"hexo-wordcount": "^3.0.2",

自定义scaffold

最初是想实现如下title的日期是自动生成的。但1504886299000会含有时间，直觉filter可以处理。然而没并软，且有报错。

---
title: 美妆心得技术周刊2017-05-06
tags:
  - weekly
date: 2017-05-06 22:16:48
---

于是开始啃代码，从hexo-cli开始

根据package.json 的 "main": "lib/hexo", 和bin/hexo。使用的核心模块是Hexo，初步猜测当前项目的node_moduels存在hexo，就加载该目录下的模块，否则加载全局的。这个跟webpack一样。

根据提示的报错

Template render error: (unknown path) [Line 1, Column 22]
  expected symbol, got string
    ...
    at /Users/huixisheng/cosmeapp.github.com/node_modules/hexo/lib/extend/tag.js:66:9
   ...
    at Tag.render (/Users/huixisheng/cosmeapp.github.com/node_modules/hexo/lib/extend/tag.js:64:10)
    at /Users/huixisheng/cosmeapp.github.com/node_modules/hexo/lib/hexo/post.js:111:16

定位到post.js。

1
2
3

Post.prototype.create = function(data, replace, callback) {
  // console.log(data);
  // return;

执行了 _renderScaffold

tag.render(yfmSplit.data, frontMatter)。

var placeholder = '\uFFFC';
var rPlaceholder = /(?:<|&lt;)\!--\uFFFC(\d+)--(?:>|&gt;)/g;

Tag.prototype.render = function(str, options, callback) {

1
2
3

return new Promise(function(resolve, reject) {
  str = str.replace(/<pre><code.*>[\s\S]*?<\/code><\/pre>/gm, escapeContent);
  env.renderString(str, options, function(err, result) {

最后发现是nunjucks模块引擎解析的。那么这样问题就好办了。于是根据相关语法做配置即可。然后并没有提供filter date的方法，需要添加自定义filter。类试的库有nunjucks-date。添加库需要涉及到hexo源码的修改，是否可以从原有的filter做文章。于是找到replace

1 2	--- title: 美妆心得技术周刊{{ date \| replace(r/\s.*/g, "") }}

关于Hexo源码的阅读还需更深入。

参考文章

2017-09-11

添加自定义scaffold