github+hexo搭建博客

gitpages hexo 博客

安装

1.安装hexo生成blog

步骤：

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

会看到，blog文件夹下的目录为：

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

【补充】常用命令

• 新建

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

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

• 预览

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

2,配置github

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

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

• git clone 新建的repository

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

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

3,部署

• 更改hexo的config.yml

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

注意点：

（1）type：【空格】...，然后才会生效
（2）deploy插件要安装

npm install hexo-deployer-git --save

（3）每次更改文件后，都得重新 hexo generate以生效，然后才能最终部署。否则会遇到莫名其妙的443,github打不开的问题

hexo g

• 部署生效

hexo deploy

会让你输入github的用户名，密码
完成后，会显示下图

更换主题

下载主题

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

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

配置config

更改config.yml的theme:
theme:next

清理缓存并验证

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

个性化设置

添加多说评论框

申请多说域名

1. 点击多说官网的我要安装,填写相关的信息，注意多说域名中要填写的部分即为站点配置文件中要增加的short_name。

# comment duoshuo
duoshuo_shortname: luchen-blog

更改themes中的模板

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

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

```

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

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

4，查看效果

• 把public文件夹下的所有内容复制到liz282907.github.io文件夹下

references:

1. build-github-blog-page
2. hexo api
3. next主题
4. 多说教程

todo

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