2019-01-09

wordpress to hexo

文章目录

1. 配置环境
2. 安装Hexo
3. 使用Hexo
4. 更换主题与配置
5. WordPress迁移
6. 配置Github
7. 部署代码到Github
8. 效果展示
9. 绑定域名
10. 性能优化
11. 文档推荐
1. 11.1. 参考文章

1. 一，安装nodejs npm
2. 二，安装hexo
3. 三，从wordpress后台导出所有内容
4. 四, 把该xml传到服务器hexoblog目录
5. 五，迁移数据
6. 六,生成静态文件
7. 七，安装next主题
8. 八，各种插件
9. 九，nginx配置
10. 十，git配置
11. 十一，一些常见的错误
12. 十二，心得体会

配置环境

1.安装Node.js
Centos之类的,yum install nodejs && sudo yum install npm
Mac OS X系统,使用brew install node 安装一下
如果需要源码安装，可以去Node官网下载,然后编译安装
2.安装git
和上面一样，yum或brew或源码安装一下，这里就不再多说。可以参考此文档:https://git-scm.com/book/en/v2/Getting-Started-Installing-Git 进去可以选择中文,

安装Hexo

所有必备的应用程序安装完成后，即可使用 npm 安装 Hexo。

1 2	$ npm install -g hexo-cli $ npm install hexo-server --save

使用Hexo

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

浏览器输入http://localhost:4000
效果图如下:

hexo-default-web

更换主题与配置

默认的主题不是特别好看，我们可以在Hexo官网的主题页选择自己喜欢的主题，我选的是yilia。
1.安装

$ cd blog
$ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
$ cd themes/yilia
$ git pull

2.主题修改配置
修改blog目录下的 _config.yml ： theme: yilia

3.yilia配置

1 2	$ cd blog/theme/yilia $ vim _config.yml

然后根据里面的提示填写就行了，这里就不多说了。里面有个多说的配置，litten可能有点没说清楚，其实填写的是多说站点设置里的多说域名你填写的部分。

duoshuo-domain

1	duoshuo: jsyzchen

WordPress迁移

现在我们将WordPress的文章迁移到Hexo，如果你不需要迁移，跳过即可。
首先，安装 hexo-migrator-wordpress 插件。

1	$ npm install hexo-migrator-wordpress --save

在 WordPress 仪表盘中导出数据(“Tools” → “Export” → “WordPress”)（详情参考WP支持页面）。
插件安装完成后，执行下列命令来迁移所有文章。source 可以是 WordPress 导出的文件路径或网址。

1	$ hexo migrate wordpress <source>

完成之后可以

1	$ hexo server

浏览器输入http://localhost:4000 查看效果

配置Github

1.申请GitHub
GitHub直接申请一下就好了。

2.新建Repository(仓库)

登陆Github账号后，点击右上角的“+”号按钮，选择“New repository”

new-repository

在Create a new repository界面填写格式如下图所示: 用户名.github.io，固定写法

create-a-new-repository

3.设置你的git用户名和密码

Git会根据用户的名字和邮箱来记录提交，GitHub也是用这些信息来做权限的处理。
git config –global user.name”这里是你申请Github账号时的name”
git config –global user.email”这里是你申请Github账号时的邮箱”

3.SSH配置

SSH配置，有些麻烦。可以参考此文档：https://git-scm.com/book/en/v2/GitHub-Account-Setup-and-Configuration,进去可以选择中文,还是比较详细的。
4.部署

进入blog目录下,编辑 _config.yml，把下面的your_username换成你的github用户名，注意冒号后面有一空格。

deploy:
    type: git
    repo: https://github.com/your_username/your_username.github.io.git
    branch: master

部署代码到Github

1.清除缓存文件 (db.json) 和已生成的静态文件 (public)。

1	$ hexo clean

2.生成静态文件

1	$ hexo generate

3.部署

1	$ hexo deploy

上面2、3两个命令可以合起来

1	$ hexo d -g

如果你此时没有看到一大段执行代码，一般是SSH配置有误。
如果成功了，你进入Github repository,就是your_username.github.io是有代码的
此时，你在浏览器里输入http://your_username.github.io 就可以看到你的博客了

效果展示

我的WordPress和Hexo博客对比图:
1.原来的WordPress

wordpress-blog-pictures

hexo-blog-pictures

绑定域名

虽然使用your_username.github.io可以直接访问博客，但如果你想用自己的域名打开博客。
1.域名解析

进入你的域名解析管理控制台，设置主机记录@，类型A，到IP 192.30.252.153(GitHub IP)。
我用的是万网,设置如下:

hexo-blog-pictures

2.GitHub设置

在github项目中，blog/source目录下,新建一个文件CNAME，文件中写出你要绑定的域名,比如我的是jsyzchen.com

3.部署更新文件

1 2	$ hexo clean $ hexo g -d

然后在浏览器输入你绑定的域名就可以看到你的Hexo博客了

性能优化

所谓的性能优化，也就是把能一些图片,js,css放入cdn里,这样的话加载速度会大大加快，我这里推荐的七牛云存储,它有免费的额度，一般像博客这样的系统文件不会超的，而且七牛的CDN挺不错的，加载速度挺快。至于如何设置，可以查看七牛的帮助文档，你可以使用七牛的镜像存储，这样你就不需要把你的文件一个一个地往七牛存了，你可能还需要改些你选择主题的源码，就是把它以前调的图片，js，css地址改为CDN的访问地址就行了，这里不在啰嗦了。

文档推荐

1.Hexo官方文档: https://hexo.io/zh-cn/docs/
2.Git文档,里面有Git介绍、安装和使用等等，GitHub讲解也有: https://git-scm.com/doc
3.Node.js官网: https://nodejs.org
4.MakeDown语法中文版: http://www.markdown.cn/

参考文章

1.HEXO+Github,搭建属于自己的博客
2.hexo–搭建
3.Hexo在github上构建免费的Web应用

原地址，Jsyz Chen的文章：http://www.jianshu.com/p/75989cd399a6 谢谢！

安装步骤

一，安装nodejs npm

不要直接apt-get install安装，版本太老了。不兼容最新版的hexo(3.6.0)，有很多问题。
最好是下载最新版源码进行编译

wget https://nodejs.org/dist/v8.9.4/node-v8.9.4.tar.gz
tar xvf node-v8.9.4.tar.gz
./configure
make
sudo make install

耐心等待，喝杯咖啡回来就装好了。
nodejs自带npm工具，无需另外安装。

二，安装hexo

假设你的blog项目路径在/home/www/hexoblog/下面

sudo npm install -g hexo
hexo init blog
cd blog
npm install

三，从wordpress后台导出所有内容

从wordpress后台导出所有内容

四, 把该xml传到服务器hexoblog目录

1	scp zouhongzhao.wordpress.2018-03-06.xml name@ip:/home/www/hexoblog/

五，迁移数据

需要安装hexo-migrator-wordpress插件

1	npm install --save hexo-migrator-wordpress

停住，别直接导入，会各种报错，我因为这个报错问题搞了很久，妈的，当时恨不得把hexo打一顿。
比如有如下报错：
YAMLException: can not read a block mapping entry; a multiline key may not be an implicit key at line 2

Template render error: Error: expected end of comment, got end of file

Template render error: ….,)
总之各种错误，一言难尽，搞得我怀疑人生。

你需要把xml的数据先过滤下。
也就是修改下hexo-migrator-wordpress的源码。
主要有3个地方：

1
2
3

1，把`{{`改成`{ {`
2, 把`<pre></pre>`这些代码标签改成```,也就是md的代码标签。我就是因为这个吃了大亏。
3, 把`<title>内容</title>`，改成`<title><![CDATA[$1]]></title>`

我是这么改的。
第一步:

1	perl -pi -e 's,<title>(.*)</title>,<title><![CDATA[$1]]></title>,' zouhongzhao.wordpress.2018-03-06.xml

第二步：
修改hexo-migrator-wordpress的index.js。
在node_modules/hexo-migrator-wordpress/index.js。
你可以直接替换成我的

var xml2js = require('xml2js'),
  async = require('async'),
  tomd = require('to-markdown').toMarkdown,
  request = require('request'),
  file = require('fs');

var captialize = function(str){
  return str[0].toUpperCase() + str.substring(1);
};
function replaceTwoBrace(str){
    str = str.replace(/{{/g, '{ {');
    return str;
};
function replaceHTMLEntity(str){
    str = str.replace(/amp;/g, '');
    str = str.replace(/&lt;/g, '<');
    str = str.replace(/&gt;/g, '>');
    str = str.replace(/&quot;/g, '"');
    str = str.replace(/&#92;/g, '\\');
    str = str.replace(/&#48;/g, '0');
    return str;
};
function replaceCodeTag(str){
    str = str.replace(/(<pre class=).*?>/g, '<pre>');
    str = str.replace(/\<pre\>/gi, '```\r\n');
    str = str.replace(/\<\/pre\>/gi, '```');
    //str = str.replace(/<pre>(.*)<\/pre>/ig, '```$1```');
    //console.log(str);
    // str = str.replace(/\[python\]/gi, '```');
    // str = str.replace(/\[\/python\]/gi, '```');
    // str = str.replace(/\[java\]/gi, '```');
    // str = str.replace(/\[\/java\]/gi, '```');
    // str = str.replace(/\[php\]/gi, '```');
    // str = str.replace(/\[\/php\]/gi, '```');
    // str = str.replace(/\[c\]/gi, '```');
    // str = str.replace(/\[\/c\]/gi, '```');
    return str;
};
hexo.extend.migrator.register('wordpress', function(args, callback){
  var source = args._.shift();

  if (!source){
    var help = [
      'Usage: hexo migrate wordpress <source>',
      '',
      'For more help, you can check the docs: http://hexo.io/docs/migration.html'
    ];

    console.log(help.join('\n'));
    return callback();
  }

  var log = hexo.log,
    post = hexo.post;

  log.i('Analyzing %s...', source);

  async.waterfall([
    function(next){
      // URL regular expression from: http://blog.mattheworiordan.com/post/13174566389/url-regular-expression-for-links-with-or-without-the
      if (source.match(/((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[.\!\/\\w]*))?)/)){
        request(source, function(err, res, body){
          if (err) throw err;
          if (res.statusCode == 200) next(null, body);
        });
      } else {
        file.readFile(source, next);
      }
    },
    function(content, next){
      xml2js.parseString(content, next);
    },
    function(xml, next){
      var count = 0;

      async.each(xml.rss.channel[0].item, function(item, next){
        if (!item['wp:post_type']){
          return next();
        }
        //console.log(item.title[0]);
        var title = item.title[0],
          id = item['wp:post_id'][0],
          date = item['wp:post_date'][0],
          slug = item['wp:post_name'][0],
          content = item['content:encoded'][0],
          comment = item['wp:comment_status'][0],
          status = item['wp:status'][0],
          type = item['wp:post_type'][0],
          categories = [],
          tags = [];

        if (!title && !slug) return next();
        if (type !== 'post' && type !== 'page') return next();
        if (typeof content !== 'string') content = '';
        content = replaceTwoBrace(content);
        content = replaceHTMLEntity(content);
        content = replaceCodeTag(content);
        content = tomd(content).replace(/\r\n/g, '\n');
        count++;

        if (item.category){
          item.category.forEach(function(category, next){
            var name = category._;

            switch (category.$.domain){
              case 'category':
                categories.push(name);
                break;

              case 'post_tag':
                tags.push(name);
                break;
            }
          });
        }

        var data = {
          title: title || slug,
          id: +id,
          date: date,
          content: content,
          layout: status === 'draft' ? 'draft' : 'post',
        };

        if (type === 'page') data.layout = 'page';
        if (slug) data.slug = slug.toString();
        if (comment === 'closed') data.comment = false;
        if (categories.length && type === 'post') data.categories = categories;
        if (tags.length && type === 'post') data.tags = tags;
        log.i('%s found: %s', captialize(type), title);
        data.title = data.title.toString();
        data.date = data.date.toString();
        //console.log(data.slug);
        //console.log(data.date);
        post.create(data, next);
      }, function(err){
        if (err) return next(err);

        log.i('%d posts migrated.', count);
      });
    }
  ], callback);
});

最后再导入wp的数据。

1 2	cd blog hexo migrate wordpress ../zouhongzhao.wordpress.2018-03-06.xml

耐心等待，不报错的话就是大吉大利。

六,生成静态文件

1	hexo clean & hexo generate —debug

加debug是为了看调试信息，看命令是否在工作。不然一等十几分钟终端没任务提示，还以为系统卡死了。

如果没报错的话，那就是万幸。

友情提醒下：
这个-debug的输出信息并不能准确的告诉你是哪个文件出错了。我就被坑了，以为是hexo核心文件的问题损坏了，重装了几次。
其实不是，多半是post文件有问题。
打开 node_modules/hexo/lib/extend/tag.js
搜索 env.renderString(str, options, (err, result)
在里面加上console.log(str);

console.log(str);
env.renderString(str, options, (err, result) => {
      if (err) {
        console.log(str);
        return reject(err);
      }

这样的信息才是最准确的。
你根据这个str的内容搜索关键字找到post文件再检查就知道了。

七，安装next主题

见
https://github.com/ahonn/hexo-theme-even

过程不表，很简单。
完事后。打开项目的_config.yml文件，把theme改成next就行。

在hexo g下就ok了。

主题的使用说明。见http://theme-next.iissnan.com/。
非常全面，该有的都有。

八，各种插件

见http://theme-next.iissnan.com/
我装的有

评论系统: 来必力
搜索: Algolia
git自动提交: npm install hexo-deployer-git --save
七牛: https://github.com/gyk001/hexo-qiniu-sync
cdn: https://github.com/zqjimlove/hexo-cdnify (将本地的js/css/images的url加入http://cdn.mallol.cn前缀。

九，nginx配置

生成的静态文件一般放在public下，
我的是/home/www/hexoblog/blog/public
直接在nginx里指定改目录即可

server {
    listen 80;
    server_name  blog.mallol.cn;
    root   /home/www/hexoblog/blog/public;
    index index.html index.htm default.html default.htm;
    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
    {
        expires      30d;
    }
    location ~ .*\.(js|css)?$
    {
        expires      12h;
    }
}

十，git配置

我文章很多，有400多篇。在服务器里直接hexo generate的话，要等20分钟，太尼玛慢了，搞得服务器很卡。没办法，我只好把代码下载到本地电脑上。
在本地电脑里hexo generate后，把最新生成的public文件push到服务器。

所以我在ubuntu服务器里配置了git。
1，创建git用户，在/home/git里mkdir blog.git

1	git init && git config --bool core.bare true

2,在服务器项目路径下

cd /home/www/hexoblog/blog/public
git init && git add . && git commit -a
git remote add origin /home/git/blog.git
git push origin master

3,本地电脑里也安装git，但是不需要git init这些，因为hexo已经帮你做好了。
hexo deploy这个命令就是push到服务器的
所以只需要在项目_config.yml里定义。找到deploy

deploy:
  type: git
  repo: git@ip:/home/git/blog.git
  branch: master

这样就行了。
比如，在本地电脑的blog目录下执行hexo d
会提示你输入git密码。

hexo-deploy

这样就成功push到服务器了。

提示下：你们可能会跟我显示不一样，我装了七牛，以及设置了git hooks。
git hooks就是当push到git服务器后，git服务器会自动更新/home/www/hexoblog/blog/public的内容。就不需要我手动登陆服务器再pull了。

十一，一些常见的错误

WARN No layout: index.html
这个是没有在_config.yml定义主题，或者说themes下不存在_config.yml里的主题

title [object Object]
这个是hexo的文件有损坏了，需要重新init blog，再migrate和generate

好了，核心的东西就这些了。这些基本上就够你折腾了。

十二，心得体会

hexo目前最大的缺点就是hexo generate太慢太慢了，我400篇文章，耗时20分钟才搞完。
可能是我开启了category和tags的原因。

优点也很明显，极客风，自由配置，全命令行操作，简单粗暴，逼格高。
本地sublime text写文章比在网站后台写文章要好太多了，在线写的话文章太长经常会卡死。

原地址：http://blog.mallol.cn/2018/ffde19de.html