hexo + yilia +gitalk 搭建github.io博客

介绍

都是基于Mac os 相关的配置

hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章

github page

github Pages就是用户编写的、托管在github上的静态网页。

  • 说白了，你想整个自己不需要花钱，又懒得自己打理的个人blog，那github Page就是个不错的选择

安装 hexo

安装 Hexo之前你得先安装

  • nodejs

  • 通过homebrew安装
    通过 brew -v 查看，如果有相关的版本号，说明安装成功，如果没有就需要安装homebrew

1
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
  • 安装homebrew成功后，就可以用brew命令来安装node
1
2
3
brew link node
brew uninstall node
brew install node
  • 删除已安装的node

–
如果之前已经手动安装过node，再次通过homebrew安装往往产生冲突，可以先删除

  1. 如果是通过homebrew安装的，下发命令brew uninstall node即可
  2. 如果是通过安装包安装的，手动删除node的安装文件即可

–

  • 配置多版本的node，安装nvm
    nvm 管理不同版本的node

  • 安装cnpm

    npm由于源服务器在国外，下载node包速度较慢，cnpm使用国内镜像，下载速度较快

1
npm install -g cnpm --registry=https://registry.npm.taobao.org

Search Packages淘宝 NPM 镜像

  • 安装git （mac 系统一般已经安装好了git）

    安装 Git

安装 hexo

进入主题安装hexo

1
$ npm install -g hexo-cli

  • 在编译时可能会遇到问题，得先安装 Xcode，Xcode 完成后，启动并进入 Preferences -> Download -> Command Line Tools -> Install 安装命令行工具。

  • 初始化 hexo

1
hexo init

之后cd到根目下

1
hexo server

通过localhost:4000访问，就可以看到blog已经初步搭建完成

  • 将blog和github关联

    • 首先得有github账号对吧，然后创建一个仓库

  • 配置SSH keys

  • 先检查自己电脑有没有ssh key

    1
    cd ~/. ssh

如果显示 No such file or directory，说明这是你第一次使用 git

  • 生成新的 SSH Key

    1
    $ ssh-keygen -t rsa -C "注册github的邮箱地址@youremail.com"

然后系统会要你输入密码：

1
2
Enter passphrase (empty for no passphrase):<设置密码>
Enter same passphrase again:<再次输入密码>

找到生成的key，一般在文稿里，会有两个文件 id_rsa, id_rsa.pub,打开d_rsa.pub文件就呢刚看到key了,key复制的时候，前后全部复制

  • 添加SSH Key到GitHub

  • 测试

    1
    $ ssh -T git@github.com

  • 就是这个命令，不需要做任何修改
    然后就是回车，选择Y，回车输入刚才设置的密码

  • 配置文件修改

    修改hexo 根目录
  • 见后边附件

  • 配置文件所有冒号后边记得得有一个空格
    hexo 主题 知乎

  • 找到喜欢的主题，下载选来拖进hexo根目录themes

然后在hexo根目录的配置文件修改主题

1
theme: yilia

启动本地服务看一下效果

1
sudo hexo  server

yilia主题的自定义

  • 个性签名 就是头像下面那就话
1
subtitle: 划船不用桨 一生全靠浪

如果需要修改一些自定义就到文件 yilia->layout
例如需改页尾就去footer.ejs文件

gitalk评论

yilia 支持的评论比较多，但是基本都被封了，Disqus会被墙，畅言要备案，所以选了gitalk,还有gitment，gitalk的UI好看一点

  • 新建一个文件 gitalk.ejs

    在yilia->layout->post下创建gitalk.ejs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="gitalk-container" style="padding: 0px 30px 0px 30px;"></div> 

<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
<script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>

<script type="text/javascript">
if(<%=theme.gitalk.enable%>){
	var gitalk = new Gitalk({
  	clientID: '<%=theme.gitalk.ClientID%>',
  	clientSecret: '<%=theme.gitalk.ClientSecret%>',
  	repo: '<%=theme.gitalk.repo%>',
  	owner: '<%=theme.gitalk.githubID%>',
  	admin: ['<%=theme.gitalk.adminUser%>'],
  	 id: '<%=page.date%>', //页面的唯一标识。长度必须小于50
    //id: window.location.pathname,
     //类似Facebook评论框的全屏遮罩效果.
  	distractionFreeMode: false
})
gitalk.render('gitalk-container') 
}
</script>

  • 在yilia的配置文件_config.yml 的gitment后边添加

1
2
3
4
5
6
7
8
9
10
#6、gitalk评论
gitalk:
  enable: true
  githubID: 'ibambooooo'  
  repo: 'ibambooooo.github.io'
  ClientID: '自己的ClientID'
  ClientSecret: '自己的ClientSecret'
  adminUser: 'ibambooooo'
  #类似Facebook评论框的全屏遮罩效果.
  distractionFreeMode: true
  • 创建 OAuth Apps

  • 在article.ejs里引用评论

    找到yilia->layout->article.ejs

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <% if (!index && post.comments){ %>
     
     <% if(theme.gitalk.enable){ %>
       <%- partial('post/gitalk', {
           key: post.slug,
           title: post.title,
           url: config.url+url_for(post.path)
         }) %>
       <% } %>
     <% } %>

  • 把原来下面代码块的代码删了，换成上边的代码块（因为我出过bug）

    1
    2
    3
    <% if (!index && post.comments){  
    ....
     <% } %>

评论不了的问题

如果自己挂了自己的域名,记得修改回调的url
修改地址

hexo 常用命令

  • 初始化hexo

1
hexo init

  • 清理缓存

    1
    hexo clean
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
hexo n "博客名称"  => hexo new "博客名称"   #这两个都是创建新文章，前者是简写模式
hexo p  => hexo publish
hexo g  => hexo generate  #生成静态页面至public目录
hexo s  => hexo server  #启动本地服务预览
hexo d  => hexo deploy  #将.deploy目录部署到GitHub

hexo server  => heox s #Hexo 会监视文件变动并自动更新，无须重启服务器。

//切换端口
hexo sever -port 4001

//自定义IP
hexo server -i 192.168.1.1   

#清除缓存，网页正常情况下可以忽略此条命令
hexo clean   

hexo g   #生成静态页面至public目录
hexo d   #将.deploy目录部署到GitHub
  • 常用复合命令
1
2
hexo deploy -g
hexo server -g

  • 删除分类或者啥的

    • 先删除 db.json文件
    • hexo clean
    • 根目录配置问价 category_dir:categories 赋值为空

hexo添加分类及标签

  • 创建分类选项

    cd到博客根目录，执行
1
hexo new page categories

在hexo的根目录source->categories->index.md中添加

1
2
3
4
5
6
---
title: categories
date: {{date}}
type: categories
layout: "categories"
---

  • 创建标签选项

    cd到博客根目录，执行
1
hexo new page tags

在hexo的根目录source->tags->index.md中添加

1
2
3
4
5
6
---
title: tags
date: {{date}}
type: tags
layout: "tags"
---

在博文正文配置当前文章的分类、标签、评论

1
2
3
4
5
6
7
title: 文章标题
toc: ture  //显示目录
categories: 
- web前端
tags:
- 算法
comments: true //是否支持评论

主页显示预览

在文章显示更多的地方加上

1
<!---more--->

常用的插件

  • 图片管理

1
npm install hexo-asset-image --save

把在hexo根目下的_config.yml设置

1
post_asset_folder: true

当新建的时候，会生成一个跟文章名一样的文件夹的文字

1
hexo new [layout] test-img-demo

现在可以看到source/_posts里边，除了有test-img-demo.md，还多一个文件夹 test-img-demo

使用图片

1
![](test-img/img.jpg)
  • 如果是手动创建的md文件，只需要在当前创建一个与md文件名一致的文件夹名即可

配置自己域名

  • 在hexo的source创建CNAME文件，没有后缀,添加以下内容，没有http，也没有www
1
starforkwatch.xyz

  • 修改github.io项目的setting（就是blog仓库的setting）

    • 解析域名


附件

  • hexo 根目录配置文件_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
title: ibamboo
subtitle:
description: 划船不用桨，一生全靠浪
keywords:
author: ibamboo
language:
timezone:

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false

#安装hexo-asset-image模块 管理博客图片
post_asset_folder: true
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:
  
# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -date
  
# Category & Tag
default_category: uncategorized
category_map: /
tag_map:

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/

#原来自带的主题
#theme: landscape
#修改主题
theme: yilia  


# Deployment
## Docs: https://hexo.io/docs/deployment.html
#这里记得所有的冒号后边都得加空格

# 和自己的github绑定
deploy:
  type: git
  repo: http://github.com/ibambooooo/ibambooooo.github.io.git
  branch: master
  
archive: true

  • yilia 主题的配置文件_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
menu:
  主页: /.
  目录: /archives


#个性签名
subtitle: 划船不用桨 一生全靠浪

# SubNav
subnav:
  github: "https://github.com/ibambooooo"
  # weibo: "#"
  # rss: "#"
  # zhihu: "#"
  qq: "http://wpa.qq.com/msgrd?v=3&uin=2770123398&site=qq&menu=yes"
  # weixin: "#"
  #jianshu: "#"
  #douban: "#"
  #segmentfault: "#"
  #bilibili: "#"
  #acfun: "#"
  #mail: "mailto:2770123398@qq.com"
  #facebook: "#"
  #google: "#"
  #twitter: "#"
  #linkedin: "#"

# rss: /atom.xml

# 是否需要修改 root 路径
# 如果您的网站存放在子目录中，例如 http://yoursite.com/blog，
# 请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/。
root: /

# Content

# 文章太长，截断按钮文字
excerpt_link: 'More'
# 文章卡片右下角常驻链接，不需要请设置为false
show_all_link: '展开全文'
fancybox: false
# 数学公式
mathjax: false
# 是否在新窗口打开链接
open_in_new: false

# 打赏
# 打赏type设定：0-关闭打赏； 1-文章对应的md文件里有reward:true属性，才有打赏； 2-所有文章均有打赏
reward_type: 0
# 打赏wording
reward_wording: '谢谢你请我吃糖果'
# 支付宝二维码图片地址，跟你设置头像的方式一样。比如：/assets/img/alipay.jpg
alipay: 
# 微信二维码图片地址
weixin: 

# 目录
# 目录设定：0-不显示目录； 1-文章对应的md文件里有toc:true属性，才有目录； 2-所有文章均显示目录
toc: 0·
# 根据自己的习惯来设置，如果你的目录标题习惯有标号，置为true即可隐藏hexo重复的序号；否则置为false
toc_hide_index: true
# 目录为空时的提示
toc_empty_wording: '目录，不存在的…'

# 是否有快速回到顶部的按钮
top: true

# Miscellaneous
baidu_analytics: ''
google_analytics: false
favicon: /assets/image/竹子2.png

#你的头像url
avatar: /assets/image/header.jpg

#是否开启分享
share_jia: false

#评论：1、多说；2、网易云跟帖；3、畅言；4、Disqus；5、Gitment
#不需要使用某项，直接设置值为false，或注释掉
#具体请参考wiki：https://github.com/litten/hexo-theme-yilia/wiki/

#1、多说
duoshuo: false

#2、网易云跟帖
wangyiyun: false

#3、畅言
changyan_appid: false
changyan_conf: false

#4、Disqus 在hexo根目录的config里也有disqus_shortname字段，优先使用yilia的
#disqus: "ibambooooo"

#5、Gitment
#查看github id 方法  https://api.github.com/users/ibambooooo（你的用户名）
gitment:
  enable: false
  gitment_owner: #'ibambooooo'  #你的 GitHub ID 16451695
  gitment_repo:  #'ibambooooo.github.io' #存储评论的 repo ibambooooo.github.io
  gitment_oauth:
    client_id: #''    #client ID
    client_secret: #''   #client secret

#6、gitalk评论
gitalk:
  enable: true
  githubID: 'ibambooooo'  
  repo: 'ibambooooo.github.io'
  ClientID: 'ClientID'
  ClientSecret: 'ClientSecret'
  adminUser: 'ibambooooo'
  #类似Facebook评论框的全屏遮罩效果.
  distractionFreeMode: true

# 样式定制 - 一般不需要修改，除非有很强的定制欲望…
style:
  # 头像上面的背景颜色
  header: '#4d4d4d'
  # 右滑板块背景
  slider: 'linear-gradient(200deg,#a0cfe4,#e8c37e)'

# slider的设置
slider:
  # 是否默认展开tags板块
  showTags: ture

# 智能菜单
# 如不需要，将该对应项置为false
# 比如
#smart_menu:
#  friends: false
smart_menu:
  innerArchive: '所有文章'
  friends: false
  aboutme: false




friends:
  友情链接1: http://localhost:4000/
  友情链接2: http://localhost:4000/
  友情链接3: http://localhost:4000/
  友情链接4: http://localhost:4000/
  友情链接5: http://localhost:4000/
  友情链接6: http://localhost:4000/

aboutme: 很惭愧<br><br>只做了一点微小的工作<br>谢谢大家

致谢：yilia

标签:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true