Create Blog With Hexo
Table of Contents
- install and init
- hexo server
- hexo deploy
- 切换主题
- 插件配置
- 集成 Emacs
- 开启调试
- 错误解决
- nvm nodejs npm 关系
- fatal: Not a git repository: source/_posts/D:/Documents/MyProject/Private/wolfand11/.git/modules/source/_posts
- ERROR Deployer not found: git
- error git clone
- hexo command not found
- 404 status code downloading 64-bit node.lib
- 404 status code downloading 32-bit node.lib
- Segmentation fault node "$basedir/node_modules/hexo-cli/bin/hexo"
- YAMLException: name of an alias node must contain at least one character at line
- 参考资料
使用 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 即可显示版权信息。
搜索引擎收录
添加网站
googel 网站添加地址
https://www.google.com/webmasters/tools/home?hl=zh-CN
百度网站添加地址
http://www.baidu.com/search/url_submit.htm
选择文件验证方案
- 下载验证文件,放置到 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
- Open a command prompt as administrator
- 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"
- 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
- typed: npm install node-gyp@latest. 注意 node-gyp 应该被安装到 C:\Program Files\nodejs\node_modules\npm\node_modules 目录下
- hit enter
Segmentation fault node "$basedir/node_modules/hexo-cli/bin/hexo"
如果.md 文件导出有错误
- delete dir C:\Users\Administrator\AppData\Roaming\npm
- reinstall $ npm install -g hexo-cli
如果.org 文件导出有错误
检查站点配置文件中,org 的 emacs 路径是否正确
YAMLException: name of an alias node must contain at least one character at line
在博客中使用分隔符时,会出现这个错误。暂时先不要使用分割符号了。