UP | HOME

Create Blog With Hexo

Table of Contents

使用 Hexo 搭建博客。

<!– more –>

install and init

依据官方文档进行安装配置 https://hexo.io/docs/index.html
站点配置文件 为 your-blog-dir/_config.yml
主题配置文件 为 themes/your-theme/_config.yml

<!– more –>

osx linux

# 安装 python2.7
https://www.python.org/downloads/

# 安装 nvm node.js 请查看 NodeJS.org 文档

# 安装 hexo
$ npm install -g hexo-cli
# 如果安装过程中,卡在 node-pre-gyp install --fallback-to-build 这一步,那么,你需要在安装命令前加 sudo
# -g 表示全局安装(global) 默认为本地安装(local) 
# npm config get prefix  //该命令可以查看全局安装的路径
# npm config set prefix  //该命令可以设置全局安装的路径

# 创建 blog 目录,并初始化
$ hexo init <folder>     # hexo init ./wolfand11
$ cd <folder>            # cd ./wolfand11
$ npm install

# 修改 permalink (站点配置文件)
permalink: :title.html

# 添加 About\标签\分类
$ hexo new page about
$ hexo new page tags
$ hexo new page categories
# 站点配置文件
tag_dir: tags
archive_dir: archives
category_dir: categories
# 主题配置文件
menu:
  home: /
  categories: /categories
  about: /about
  archives: /archives
  tags: /tags

# 设置语言 站点配置文件 修改后重新启动 hexo 查看效果
language: zh-Hans

windows

# 安装 python27
# 安装 babun,安装方法参考 InitPC.org 这篇文档
# 安装 nvm node.js 请查看 NodeJS.org 文档
# 在 babun Terminal 下,安装 hexo
$ npm install -g hexo-cli
# 1 初始化 hexo 的步骤请参考前面所列信息
# 2 已经有的 hexo 配置,可以按照下面步骤初始化
# 2.1 先克隆到 wolfand11
$ git clone git@git.dev.tencent.com:wolfand11/blog-config.git ~/Documents/MyProject/Public/wolfand11
# 2.2 将 hexo 初始化文件放到 wolfand12 目录
# 生成 package.json 文件
$ hexo init wolfand12
$ cd wolfand12
$ npm install hexo --save
$ npm install
# 2.3 将 node_modules 文件夹 copy 到 wolfand11 目录下
# 2.4 在 wolfand11 目录下新建 source 目录将 blog 内容 clone 到该目录下
$ cd wolfand11
$ git clone git@git.dev.tencent.com:wolfand11/blog_content.git ./source

hexo server

# 安装 hexo-server
$ npm install hexo-server --save

# 开启 server
$ hexo server
# 开启 server 指定端口号
$ hexo server -p 5000
# 开启 server 打印日志
$ hexo server -l

hexo deploy

# 站点配置文件
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo:
    coding: git@git.coding.net:wolfand11/wolfand11.git,master

# 安装 hexo-deployer-git
$ npm install hexo-deployer-git --save

# 在你的项目托管平台设置 SSH 公钥

# 部署
$ hexo deploy --generate

切换主题

可以参考 Next 主题文档 http://theme-next.iissnan.com/getting-started.html

# 1 安装主题
$ git clone https://github.com/iissnan/hexo-theme-next themes/next
# 2 修改主题配置文件,theme 字段为 next
# 3 重新启动 hexo 查看是否生效
$ hexo server #可以简写为 hexo s

插件配置

配置基本显示信息

# 下面的配置都在 站点配置文件中
# 头像
avatar: /images/m_lambda-320.png
# title
title: wolfand11's blog
# 描述信息
description: I'm a game programer.I will be a very gentle game programer!
# 作者
author: wolfand11

Math Latex 支持

修改 Next 主题配置文件如下

# MathJax Support
mathjax:
  enable: true
  cdn: //cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML

配置侧边栏

# 下面的配置都在 主题配置文件中
# 默认侧边栏隐藏
sidebar:
  # Sidebar Position, available value: left | right
  position: left
  #position: right

  # Sidebar Display, available value:
  #  - post    expand on posts automatically. Default.
  #  - always  expand for all pages automatically
  #  - hide    expand only when click on the sidebar toggle icon.
  #  - remove  Totally remove sidebar including sidebar toggler.
  #display: post
  #display: always
  display: hide
  #display: remove

# 配置显示的社交链接
social:
  #LinkLabel: Link
  GitHub: https://github.com/wolfand11
  Douban: http://douban.com/people/wolfand11
# 配置显示的图标
social_icons:
  enable: true
  # Icon Mappings.
  # KeyMapsToSocalItemKey: NameOfTheIconFromFontAwesome
  GitHub: github
  Twitter: twitter
  Weibo: weibo

站内搜索

# 安装 hexo-generator-search,在站点的根目录下执行以下命令
$ npm install hexo-generator-search --save
# 站点配置文件
search:
  path: search.xml
  field: post
# 编辑 站点配置文件,修改网站 url
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://wolfand11.coding.me

配置多说插件

多说 2017-6-1 就会关闭了

# 站点配置文件 增加配置
duoshuo_shortname: xxx_your_duoshuo_shortname

配置 Disqus

之所以在站点配置文件中添加,是因为这样做的话,改变主题就不需要配置了。

# 站点配置文件 增加配置
disqus_shortname: xxx_your_disqus_shortname

打赏

# 站点配置文件
reward_comment: 
wechatpay: /images/wx_reward.png

版权信息

方案 1

Tips:目前下面的方法对于 hexo-render-org 是无效的,因为 hexo-render-org 没有支持 before_post_render

  • 在博客根目录下(source 同级目录下)创建 scripts 文件夹
  • 在文件夹内新建一个 js 脚本文件,文件内容如下所述。注意:由于该脚本中添加了汉字,需要保存成 UTF8 格式,否则生成的 html 会有乱码。
// Filename: add_tail.js
// Author: Charles Yin
// Date: 2016/03/26
// Described in: https://tono.tk/2016/03/26/Add_copyright_for_hexo/
// Based on the script by KUANG Qi: http://kuangqi.me/tricks/append-a-copyright-info-after-every-post/

// Add a tail to every post from tail.md
// Great for adding copyright info

var fs = require('fs');

hexo.extend.filter.register('before_post_render', function(data){
    if(data.copyright == false) return data;
    
    // Add seperate line
    data.content += '\n___\n';
    
    // Try to read tail.md
    try {
        var file_content = fs.readFileSync('tail.md');
        if(file_content && data.content.length > 50) 
        {
            data.content += file_content;
        }
    } catch (err) {
        if (err.code !== 'ENOENT') throw err;
        
        // No process for ENOENT error
    }
    
    // Add permalink
    var permalink = '\n 本文链接:' + data.permalink;
    data.content += permalink;
    
    return data;
});
  • 在博客根目录下创建 tail.md 文档,其中填写版权声明信息。如下:
/*
// -------------
// you should rm \ from below
// 
// \*\*版权声明\*\*
// 
// ![](/images/m_cc.png)
// 
// [The blog of wolfand11](http://wolfand11.coding.me/) by [Dong Guo](http://wolfand11.coding.me/about/) is licensed under a [Creative Commons BY-NC-ND 4.0 International License](http://creativecommons.org/licenses/by-nc-nd/4.0/). 
// 
// 本文首发于[wolfand11's blog](http://wolfand11.coding.me),版权所有,转载请保留本声明以及本文链接。
// 
// */
方案 2

Tips: 下面方案在 Next 主题中不能使用。

  • step 1

layout\_partial\post\ 目录下新建 copyright.ejs 内如如下:

<div class="article-footer-copyright">
    添加你的版权信息
</div>
  • step 2

layout\_partial\article.ejs 文件下添加如下代码:

<% if (!index && post.copyright==true){ %>
	<%- partial('post/copyright') %>
<% } %>
  • step 3

source\css\_partial\ 下新建 copyright.styl 内容如下:

.article-footer-copyright{
   border-top:1px solid #d3d3d3;
   margin: 20px auto;     
   padding-left:2em;
   width: 80%;
}

.article-footer-copyright p{
  font-size:1.2em;
}

.article-footer-copyright span,.copyright abbr{
  color:#3d3d3d;
}
div.copyright{
    
     font-weight:bold;
    color:#FCB297;
       padding:0.3em 0.5em;
       margin:0 0 1em 0;
       border-bottom:none;
       background-color:#AAD2F0;
       -moz-border-radius: 1em;
       -webkit-border-radius:1em;
       border-radius: 1em;

  -moz-box-shadow:inset 0px 1px 0px 0px #eeeeee;
  -webkit-box-shadow:inset 0px 1px 0px 0px #eeeeee;
  box-shadow:inset 0px 1px 0px 0px #eeeeee;
  background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #aad2f0), color-stop(1, #8bc1ed) );
  background:-moz-linear-gradient( center top, #aad2f0 5%, #8bc1ed 100% );
  /* filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#aad2f0', endColorstr='#8bc1ed'); */
  background-color:#aad2f0;
  border:1px solid #dcdcdc;
  text-shadow:1px 1px 0px #eeeeee;
  
}
div.article-footer-copyright{
    margin-top:2em;
    padding:1.5em;
    border:1px solid #d3d3d3;
    background-color:#DEEBF7;
}
.article-footer-copyright p{
    line-height: 160%;
    margin: 10px;
    font-size: 100%;
}
  • step 4

source\css\styl.styl 文件下新添如下代码:

source\css\styl.styl 文件下新添如下代码:
  • step 5

只要在需要添加版权信息的文章中,添加 copyright: true 即可显示版权信息。

搜索引擎收录

添加网站
选择文件验证方案
  • 下载验证文件,放置到 hexo_root/source/ 目录下面。
  • 重新部署 blog
  • 使用验证文件,代替部署生成的文件

hexo_root/baiduverifyxxxxx.html hexo_root/googelxxxx.html
(因为部署 blog 可能会修改验证文件内容,导致验证失败)

添加 sitemap
  • 安装 sitemap 生成插件
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save
  • 重新部署 blog,生成 sitemap 文件

访问 wolfand11.coding.me/sitemap.xml wolfand11.coding.me/baidusitemap.xml 查看内容是否生成

  • 为搜索引擎设置 sitemap 地址

集成 Emacs

org-mode

hexo-renderer-org 方案

hexo-renderer-org 安装

参考文档 https://github.com/CodeFalling/hexo-renderer-org

下面这个版本是 coldnew 增加新功能后的版本。
https://coldnew.github.io/hexo-org-example/2017/03/05/getting-started-with-hexo-and-org-mode/

# 安装 hexo-renderer-org
$ npm install https://github.com/coldnew/hexo-renderer-org#coldnew --save

# 删除 hexo-renderer-org
npm uninstall hexo-renderer-org --save
blog 插入图片

方案 1: 将所有图片放置在 source/images/目录下,在 blog 中通过 http 链接显示图片。

例如,在 about.org 中对图片的引用
[[http://wolfand11.coding.me/images/m_lambda-320.png]]

方案 2: 将图片放在和 org 文件同名的文件夹下。在站点配置文件中,设置 post_asset_folder: true。

文章 GameAI.org 所在目录创建 GameAI 目录,然后在 GameAI.org 中输入如下文字,即可插入图片
[[file:GameAI/001_ai_architecture.png]]

参考链接:https://coldnew.github.io/hexo-org-example/2017/03/05/getting-started-with-hexo-and-org-mode/

显示更多
#+BEGIN_HTML
<!--more-->
#+END_HTML

hexo-renderer-pandoc 方案

hexo-renderer-pandoc 安装
# 1 安装 hexo-renderer-pandoc
cd your-hexo-blog-proj-dir
npm install hexo-renderer-pandoc --save

# 2 修改 hexo-blog-dir\node_modules\hexo-renderer-pandoc\index.js 如下
##  修改 pandoc 调用参数
var args = [ '-f', 'org-mode', '-t', 'html-smart', math]
##  修改 hexo 注册
hexo.extend.renderer.register('org', 'html', pandoc);

Prodigy

配置

(prodigy-define-service
  :name "Hexo Server"
  :command "hexo"
  :args '("server")
  :cwd "~/Documents/MyProject/Public/wolfand11"
  :tags '(hexo server)
  :kill-signal 'sigkill
  :kill-process-buffer-on-stop t)

(prodigy-define-service
  :name "Hexo Deploy"
  :command "hexo"
  :args '("deploy" "--generate")
  :cwd "~/Documents/MyProject/Public/wolfand11"
  :tags '(hexo deploy)
  :kill-signal 'sigkill
  :kill-process-buffer-on-stop t)

(prodigy-define-service :name "Hexo Clean"
  :command "hexo"
  :args '("clean"):cwd
  "~/Documents/MyProject/Public/wolfand11"
  :tags '(hexo clean):kill-signal'sigkill
  :kill-process-buffer-on-stop t)

使用

开启 prodigy
M-x prodigy 或者 SPC a S
开始执行 s
停止执行 S
显示日志 H
查看帮助 ?

开启调试

hexo 开启 debug

如果 export 某个文件出错,可以使用下面命令,进行调试。

hexo render ./source/_post/HelloWorld.org --debug

hexo-renderer-org 开启 Debug

1. 在站点配置文件中,修改 org 配置如下:
org:
  emacs: '/Applications/Emacs.app/Contents/MacOS/Emacs'
  #emacs: 'D:/Applications/emacs/bin/emacs.exe'
  common: |
          #+OPTIONS: toc:nil
  cachedir: './hexo-org-cache/'
  theme: tango-dark
  # 设置 debug 为 true 开启打印
  debug: true

2. 修改 hexo-renderer-org 源代码
The easiest way for debugging is modify the lib/renderer.js following content

var proc = pty.spawn(emacs_path, exec_args, {
      name: 'xterm-256color',
      cols: 100,
      rows: 30
    });
to

var spawn = require('child_process').spawn;
var proc = spawn(emacs_path, exec_args, {
   stdio: 'inherit'
});
However, this method ONLY work on single page, that is you source/_posts dir should ONLY contain ONE org-mode file.

错误解决

nvm nodejs npm 关系

  • nvm:nodeJs 版本管理工具,管理 nodejs 版本和 npm 版本
  • nodeJs: js 库
  • npm:是随同 nodeJs 一起安装的包管理工具,npm 管理对应 nodeJs 的第三方插件

fatal: Not a git repository: source/_posts/D:/Documents/MyProject/Private/wolfand11/.git/modules/source/_posts

修改 blog git 仓库路径后,会报上面错误,解决办法如下:

# remove submodule
rm -rf source/_posts
git submodule update --init

ERROR Deployer not found: git

# 执行下面命令报错
hexo deploy

# 修改方案为,执行下面命令
npm install hexo-deployer-git --save

error git clone

# 执行下面的命令出错
$ npm install https://github.com/coldnew/hexo-renderer-org#coldnew --save

# 完整错误消息在 npm-debug.log 中,第一个错误消息如下:
# error git clone C:\Users\Administrator\AppData\Roaming\npm-cache\_git-remotes\git-https-github-com-coldnew-hexo-renderer-org-git-coldnew-ae823c90 D:\Applications\babun\.babun\cygwin\tmp\npm-3136-507eab85\git-cache-bf65ba19\19441451b98da806317963be2c770d4b1aaf0083: Cloning into 'D:\Applications\babun\.babun\cygwin\tmp\npm-3136-507eab85\git-cache-bf65ba19\19441451b98da806317963be2c770d4b1aaf0083'...
// 修改方案如下:
// 修改文件中 execGit 函数如下 D:\Applications\nodejs\node_modules\npm\lib\utils\git.js
function execGit (args, options, cb) {
    if(args) {
        for(var i=0; i<args.length; i++) {
            if('C:\\'.indexOf(args[i]) != 0) {
                args[i] = args[i].replace(/\\/g, '/').replace(/C\:\//i, '/cygdrive/c/');
            }
            if('D:\\'.indexOf(args[i]) != 0) {
                args[i] = args[i].replace(/\\/g, '/').replace(/D\:\//i, '/cygdrive/d/');
            }
        }
    }
    log.info('git', args)
    var fullArgs = prefixGitArgs().concat(args || [])
    return exec(git, fullArgs, options, noProgressTillDone(cb))
}

// 参考链接 - https://github.com/npm/npm/issues/7357

hexo command not found

解决方案 1

环境变量 Path 添加 C:\Users\Administrator\AppData\Roaming\npm
如果你的 hexo 被安装在 C:\Program Files\nodejs\目录下,那么你应该添加 C:\Program Files\nodejs\到环境变量 Path 中。

解决方案 2

# 1 查看当前安装了哪些版本的 nodejs
nvm ls
### 6.10.0 5.0.0 4.0.0

# 2 指定使用的版本
nvm use 5.0.0

# 3 确认 hexo 命令是否可用
hexo

404 status code downloading 64-bit node.lib

npm config set msvs_version=2015 –global
参考链接 https://github.com/coldnew/hexo-renderer-org/issues/7

404 status code downloading 32-bit node.lib

  1. Open a command prompt as administrator
  2. Change the current directory to the directory your version of NPM is running from. For me that is "C:\Program Files\nodejs\node_modules\npm"
  3. copy the "C:\Program Files\nodejs\node_modules\npm" to something like "C:\Program Files\nodejs\node_modules\npmOld" in case you want to undo the next step
  4. typed: npm install node-gyp@latest. 注意 node-gyp 应该被安装到 C:\Program Files\nodejs\node_modules\npm\node_modules 目录下
  5. hit enter

参考链接 https://github.com/nodejs/node-gyp/issues/724

Segmentation fault node "$basedir/node_modules/hexo-cli/bin/hexo"

如果.md 文件导出有错误

  1. delete dir C:\Users\Administrator\AppData\Roaming\npm
  2. reinstall $ npm install -g hexo-cli

如果.org 文件导出有错误

检查站点配置文件中,org 的 emacs 路径是否正确

YAMLException: name of an alias node must contain at least one character at line

在博客中使用分隔符时,会出现这个错误。暂时先不要使用分割符号了。

参考资料