github+hexo搭建博客

安装

1.安装hexo生成blog

步骤:

1
2
3
4
npm install hexo-cli -g
hexo init blog
cd blog
hexo server //localhost:4000打开即可

会看到,blog文件夹下的目录为:

其中一些hexo的插件是在node_modules里面被默认安装了。
package.json里面也可以看到相关版本及插件

【补充】常用命令

  • 新建

    1
    2
    3
    hexo new fileName
    //输出的信息如下
    INFO Created: e:\GraduateSemester2\summer\blog\source\_posts\测试.md

    可以看到,我们进入source文件夹里面的_posts文件夹,里面编辑markdown文件即可

  • 预览

    1
    2
    hexo s
    //打开localhost:4000直接预览

2,配置github

  • 新建一个与github username同名的repository

    假设我的名字是pokemon,则repository新建为pokemon.github.io,

  • git clone 新建的repository

  • 转到刚刚hexo的文件夹,运行

1
2
hexo g
//生成public静态资源文件,会看到blog文件夹下多了一个public文件夹

3,部署

  • 更改hexo的config.yml
1
2
3
4
deploy:
type: git
repo: https://github.com/liz282907/liz282907.github.io.git
branch: master
**注意点**: (1)type:【空格】...,然后才会生效 (2)deploy插件要安装
1
npm install hexo-deployer-git --save
(3)每次更改文件后,都得重新 hexo generate以生效,然后才能最终部署。否则会遇到莫名其妙的443,github打不开的问题
1
hexo g
  • 部署生效
1
hexo deploy
会让你输入github的用户名,密码 完成后,会显示下图 ![deploy成功图](http://i2.buimg.com/567571/a70832f19113fb9d.png)

更换主题

下载主题

hexo中有多种主题可供选择,萝卜青菜各有所爱啦,楼主喜欢简洁风,就选择的是next主题

1
2
cd blog
git clone https://github.com/iissnan/hexo-theme-next themes/next

配置config

1
2
更改config.yml的theme:
theme:next

清理缓存并验证

1
2
hexo clean
hexo s --debug //预览并打开调试模式

个性化设置

添加多说评论框

申请多说域名

  1. 点击多说官网的我要安装,填写相关的信息,注意多说域名中要填写的部分即为站点配置文件中要增加的short_name。
    1
    2
    # comment duoshuo
    duoshuo_shortname: luchen-blog

更改themes中的模板

  1. 修改themes你的主题文件夹(这边为next)的模板文件:
    themes\next\layout_partials\comments.swig

    添加如下代码(因为新版本的next已经做了兼容了,即duoshuo+facebook+disqus,只需要增加多说的评论框即可)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <script type="text/javascript">
    var duoshuoQuery = {short_name:"luchen-blog"};
    (function() {
    var ds = document.createElement('script');
    ds.type = 'text/javascript';ds.async = true;
    ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
    ds.charset = 'UTF-8';
    (document.getElementsByTagName('head')[0]
    || document.getElementsByTagName('body')[0]).appendChild(ds);
    })();
    </script>

补充:获取user_id:
访问多说后台 ,点击用户名,网页上会显示href,其中profile后面的一串就是你的user_id


此时再打开如
username.github.io就可以啦

4,查看效果

添加站点统计信息

注册百度统计

给自己的站点,如yoursite.github.io 增加统计信息。

插入统计代码

放置于之前,具体来说,找到
blog/themes\next\layout_partials\head.swig,在最后一行加入上面的统计代码即可。

更改站点配置文件

增加baidu_analytics: your site id

即可在百度统计网站里看到访问情况了


更新(Windows->Mac迁移后的一系列问题fix)

划重点就是,删除不必要的文件,按照以前的方式部署,有问题去GitHub看下当前repo的setting里面有没有报warning或者有没有收到build error的邮件。

需要注意一下几点:

  • 如果主题是通过git管理的,需要将主题文件夹下的.git文件夹删除或者使用git submodule的形式进行管理,才能同步Blog文件夹,submodule的话是添加.gitsubmodules文件,将依赖的submodule添加进去,楼主这边是theme/next,但是声明了以后没有用,就直接删除了themes/next下面的.git 文件夹

  • Blog目录下自带的.gitignore文件,node_modules文件夹是不会同步的,所以同步之后需要自己再次进行npm install,但是注意,不要进行hexo init了,否则_config.yml会被覆盖。

hexo generate出现yaml解析错误等等

检查下config.yaml是否写错,主题或者文章里面是否有中英文标点符号的问题,space not tab等等。

hexo deploy 无限等待


一直卡在这边,需要输入以下命令看看出错点
sudo hexo deploy --debug

免密部署

之前每次部署前都要输入密码,现在可以生成rsa-key,添加到GitHub上。具体的步骤见官网,最后验证下图

以及执行:

1
2
//openssh 6.8以上
ssh-add -l -E md5

查看md5与GitHub上的md5是否匹配。

注意:
mac中要添加下面的命令:

1
ssh-add -K ~/.ssh/id_rsa

ssh-add 默认将制定的秘钥添加在当前运行的 ssh-agent 服务中,但是你可以改变这个默认行为让它添加到 keychain 服务中,让 Mac 来帮你记住、管理并保障这些秘钥的安全性。

在修改主题文件之后,页面的文件依然没有更新。

解决方案:

hexo clean并且删除.deploy_git文件夹之后,hexo d -g。为了强制浏览器更新资源文件,可以强制刷新。
删除.deploy_git时如果有 directory not empty的问题,应该是文件夹还被占用,推出占用的程序即可。

permission denied


解决方案:

sudo hexo deploy -g

references:

  1. build-github-blog-page
  2. hexo api
  3. next主题
  4. 多说教程
  5. Hexo常见问题解决方案

todo

  1. hexo插件
  2. 阅读次数
  3. 分享链接
  4. 高亮、jsfiddle引入、read more