Hexo博客搭建备忘手册

发表于 | 分类于
这篇hexo博客的搭建流程只是作为一个备忘罢了，而且由于本人较懒，只能先弄个基本框架，然后以后有空再一点一点填补空缺吧。。。至少有胜于无。

感觉一般的独立博客都会首先介绍自己的所用的博客框架搭建的过程，原来觉得没什么必要。因为这些东西网上都已经泛滥了。不过，前段时间更新hexo的时候出现了一大堆问题，于是才明白，写自己的搭建过程更多地是为了自己啊。一旦出现长时间没有更新博客，很有可能把博客的框架全都忘了，如果没有一个备忘，就只能一点点死扣代码然后去猜去试，或者去hexo官网去拼命地查。如此说来，真的不如写一篇搭建流程，一方面方便了别人多了一种搭建的方式，另一方面也给自己一个备忘。 不过由于一贯懒散，感觉要把整个流程整理出来对我来说还是一个大工程，不过有胜于无，至少可以先整个初版框架，然后一点一点的补。

hexo的框架

首先我想说的就是hexo的框架：

框架是最容易忘的，于是按照习惯思维习惯，我也为hexo的框架画了一张图。

关于hexo的基本介绍

参考博文

Hexo的安装

  1. 安装git 下载链接： git-scm.com/downloads 安装完git之后，我们就需要用到git bash。什么是git bash呢？就是一个虚拟的命令窗口，接下来所有的输入命令的事情都在git bash下完成啦。 点击“开始”，找到git目录，再找到git Bash并点开即可。
  2. 安装node.js 下载链接: https://nodejs.org 安装完node.js之后可以通过以下命令验证安装是否成功。当然是在git bash下输入的。 node -v npm -v 这里面-v的意思就是版本信息(version)的意思，我们就是要查看一下，node和npm的版本，如果有信息说明我们的计算机上已经安装了这个东西。
  3. hexo的初始化 接下来我们就要安装hexo工具，有了它我们的独立博客的生成和管理起来就非常方便。这是一个由台湾小伙开发出来的工具，所以，很荣幸，咱们有中文版的官网可以浏览。 官网地址：https://hexo.io/zh-cn/ 我们的hexo可以通过npm这个工具去下载安装，不用管npm是什么，就是一个能够下载并安装hexo的工具而已。 在git bash下面输入： npm install -g hexo-cli 你可以在某个目录下建立一个博客的根目录，比如blog或者jade_blog。 hexo init npm install
  4. Hexo的部署 要用到部署，我们需要另一个插件，这个插件和git有关，还是在git bash下面： npm install hexo-deployer-git –save 一旦安装了git和node.js，hexo的初始化工作就变得非常简单，本身也是因为其简单才逐渐流行起来的。
  5. 生成网页 hexo clean hexo g hexo s

    github的注册

    注册完之后，我们需要在新建一个repository. 这个repository的名称必须是你的用户名加github.io也就是jayde.github.io

    SSH

  6. 常规部署 cd ~/.ssh ssh-keygen -t rsa -C “4lotus1021@gmail.com” eval “$(ssh-agent)” ssh-add <你的ssh名称> 将XXX.pub里的内容复制到github上面 然后再cd到你的博客目录下就可以啦 cd /d/jayde (cd的d后有括号)

  7. 我遇到过的问题 (1) 当我输入hexo d进行部署的时候，系统报了如下错误 unable to auto-detect email address(got ‘luke@luke-PC.(none)’) 这是因为windows下我们需要设置一下全局变量 命令如下： git config –global user.email “you@example.com”
    git config –global user.name “Your Name”
    值得注意的是，gloabl的用户信息是在~/下的gitconfig文件中，但是它的优先级没有项目下.git/config优先级高。 (2) 卸载git的时候，系统提示我必须先关闭那些ssh-agents，但是不知道怎么关闭 (3) 个人原因，我需要更新github账号。我先配置了global的用户信息和邮箱，但是每次hexo d之后都会报错。
  Error: ERROR: Permission to wangluzhou/wangluzhou.github.io.git denied to lukesummer.
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

    at ChildProcess.<anonymous> (/Users/luke/blog/node_modules/hexo-deployer-git/node_modules/hexo-util/lib/spawn.js:42:17)
    at ChildProcess.emit (events.js:98:17)
    at maybeClose (child_process.js:756:16)
    at Process.ChildProcess._handle.onexit (child_process.js:823:5)

从报错信息来看，似乎是我的用户名还是老的用户名，而不是当前新的用户名wangluzhou，但是我在/blog/.deploy_git/.git/config下没有找到用户信息，而且即使把.deploy_git删除后重新生成仍然报了这个错误。 于是我决定用排除法： 第一步. 我确定我所有的git配置文件都已经改成了新的用户名和邮箱，也重新配置了ssh，因此上传的时候肯定没有用我新建的ssh和新配置的用户信息。 我在命令行下输入ssh -T git@github.com，居然返回的用户民是lukesummer！进一步验证了我的猜想。 于是我觉得问题出在ssh-add上，我可能把ssh添加到某个地方，然后还处于一个最大优先级。 第二步，网上搜一下mac+ssh-add，就找到这篇文章 我想问题的最终答案肯定在keychain里面。果然在keychain里面找到了ssh，虽然不知道原理，但是我知道我必须删除它且再重新创造一个，然后重启。 完成这些之后，终于完成了本地git账户的迁移。

然后到jayde的目录下找到_config.yml去配置你的github的仓库信息。 deploy: type: git repository: git@github.com:jayde721/jayde721.github.io.git branch: master

hexo主题

首先要下载主题： git clone https://github.com/wuchong/jacman.git themes/jacman

markdown 语法

www.appin.com/markdown/

域名和DNS服务器

godaddy

第三方评论系统（多说&disqus）

第三方搜索引擎

swiftype

第三方的统计工具

百度统计

Hexo主题的修改

jacman

主题用了jacman主题，不过后来东改改西改改，有点感觉面目全非了。而且在改的过程没有养成良好的代码的习惯，导致现在也不知道改了什么地方，有些styl的代码都是自己在chrome下不停尝试弄出来，所以也不知其所以然。不过有几点实用的功能需要记得，比如，评论系统如何添加，文章如何添加图片等等。

  1. 我发现如果目录没有二级目录，就被element.style默认设置成display:none，从而无法显示。所以在helper.styl里的toc-article下面加上了display block !important来覆盖element.style的默认设置。
  2. 现在存在archive一页如果文章很少，footer就是停在页面中间，有一个办法就是将index.styl中的container设置min-height 490-px，但是这样治标不治本，不同的显示屏大小肯定不一样。这个问题还需要好好研究。

hueman

  1. hueman有一个问题就是每一篇博文都会有一张缩略图，但是有些博客是不需要图片的，怎么办呢？可以借鉴jacman里面的做法，在图片的class属性上设置index.display:none的语句（不一定准确，以真实代码为主）

  2. Hueman的header.ejs采用的时局部缓存的技术，也就是说一次加载一下以后就不用加载了。 <%- partial(‘_partial/header’, null, {cache: !config.relative_link}) %>

  3. header.ejs直接替换(包括ejs和styl文件)的时候，发生以下错误： ``` ERROR Asset render failed: css/style.css Error: /Users/luke/blog/node_modules/hexo-renderer-stylus/node_modules/stylus/lib/functions/index.styl:128:38 124| 125| // darken by the given amount 126| 127| darken(color, amount) 128| adjust(color, ‘lightness’, - amount) ———————————————^ 129| 130| // lighten by the given amount 131|

TypeError: expected rgba or hsla, but got ident:color-theme ```

  1. 可以通过container-inner的width来调节内容的宽度

  2. 解决搜索问题

  3. 解决footer的问题

  4. 给所有文章加上隐藏图片

  5. 解决百度统计的问题

  6. 向上返回按钮

  7. 解决mathjax和gallery问题

其他辅助工具

slider-master

对于jacman而言，slider-master的js代码一定要加在最后，否则会影响share功能！ 不要忘了jquery2.0.3

swiftype搜索

dewplayer

百度统计

谷歌统计

七牛cdn加速

git page发布器

godaddy域名申请

CNAME

DNS解析申请

注意事项

  1. Hexo的config文件的主题选择中，能输入一个，后面不能加注释
  2. img-topic -> article.styl-> article/.article-content/.img-topic
    复制到hueman的article.styl->article-entry
  3. jacman 有两个 article.ejs
  4. hueman 的多说评论的添加
  5. hexo server在运行过程中，不能更新主题

    问题

  6. 在after-footer中，theme和config是不是一个东西?貌似指的都是主体的config文件
  7. 二级目录怎么解决？
  8. 自定义字体的ttf文件到底是通过什么途径读取到得呢？
打赏还是要有的，万一有人打赏呢！