How to configure 5267 blog in several hours


一、入门篇:镜花水月

第一步:安装Git(64位)、Node.JS(64位)、hexo。

其中,hexo的安装使用git命令:npm install -g hexo

第二步:创建博客文件夹(bloggerMe ),并在本地浏览hello-world网页。

1
2
3
hexo init
hexo generate |可简写位hexo g,下同。
hexo server

执行以上命令,到浏览器中输入localhost:4000查看。

第三步:Git-ssh配置

  • 1、设置Git的user name和email
1
2
$ git config --global user.name "5267"
$ git config --global user.email "tangyang_cool@yeah.net"
  • 2、生成密钥
1
$ ssh-keygen -t rsa -C "humingx@yeah.net"

连续3个回车。如果不需要密码的话。
最后得到了两个文件:id_rsa和id_rsa.pub 。如果不是第一次,就选择overwrite。

  • 3、添加密钥到ssh-agent

确保 ssh-agent 是可用的。ssh-agent是一种控制用来保存公钥身份验证所使用的私钥的程序,其实ssh-agent就是一个密钥管理器,运行ssh-agent以后,使用ssh-add将私钥交给ssh-agent保管,其他程序需要身份验证的时候可以将验证申请交给ssh-agent来完成整个认证过程。

1
2
3
4
5
# start the ssh-agent in the background
$ eval "$(ssh-agent -s)"
Agent pid 59566
$ ssh-add ~/.ssh/id_rsa #添加生成的 SSH key 到 ssh-agent。
$ clip < ~/.ssh/id_rsa #将密匙复制到剪贴板
  • 4、登陆Github, 在ssh 。

setting——>SSH and GPG keys——>SSH keys——>new SSH key
screenShot

  • 5、测试
1
$ ssh -T git@github.com

screenShot

第四步:部署到服务器,并在网页段浏览hello-world网页。

  • 1、注册Github账号( 5267)。

  • 2、创建repository(5267.github.io )。

  • 3、部署文件配置。

打开_config.yml(在bloggerMe文件夹下),定位到deploy哪一行,进行替换。

1
2
3
4
deploy:
type: git
repository: git@github.com:5267/5267.github.io.git
branch: master
  • 4、安装hexo部署工具()
1
2
3
npm install hexo-deployer-git --save
hexo g
hexo d #部署本地网页到github服务器端

看到如下信息则表示部署成功,由于部署有时间差,所以需要过几分钟才能在网页端查看(输入:5267.github.com)看到。
screenShot

小结:几个问题
部分问题解决方案参考Zippera’s blog的bugs部分。这里主要说明一下我在部署过程遇到的一个问题(卡了半天啊,还好最终找到原因了!)。

  1. hexo d部署时,报错:remote: Permission to access ‘https://github.io.git denied to candy-frankie’. 原因:_config.yml中的repository参数配置错误,由于选用的SSH免密码登录方式,所以应选用SSH,而不是https方式。这在个人repository页面可看到,如下:

screenShot
所以需要将https://github.com/5267/5267.github.io.git改成git@github.com:5267/5267.github.io.git。再运行hexo d即可成功部署。

效果图
screenShot

参考资料

  1. git-ssh 配置和使用:https://segmentfault.com/a/1190000002645623和http://www.cnblogs.com/BeginMan/p/3544493.html。
  2. zippera’s blog:http://www.zipperary.com/2013/05/28/hexo-guide-2/和http://www.freehao123.com/hexo-node-js/。

二、入门篇:水中取月

上节中,已成功在本地和github搭建好了自己的hexo博客站点,但并未发表文章,站点也还未配置。在本节,将介绍如何个性化设置,撰文和发表。
站点配置用到两个文件,一个是对整站的配置H:\bloggerMe\_config.yml,另一个是对主题的配置H:\bloggerMe\themes\light\_config.yml ,我们来分别介绍。

注意:这里使用TTstyle作为博客主题

G:\bloggerMe_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
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site 网站配置,对应的设置直接反正在我的博客。
title: 5267's blog
subtitle: if not now, when? if not me, who?
description: 我与她的故事?!
author: 5267
email: tangyang_cool@yeah.net
language: zh-CN
timezone:

# URL | 这项暂不配置,绑定域名后,欲创建sitemap.xml需要配置该项
## 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
post_asset_folder: false
relative_link: false
future: true
highlight:
enable: true
line_number: true
auto_detect: false
tab_replace:

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Archives 默认值为2,这里都修改为1,相应页面就只会列出标题,而非全文
## 2: Enable pagination
## 1: Disable pagination
## 0: Fully Disable
archive: 1
category: 1
tag: 1

# 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 | 每页显示文章数,可以自定义,我将10改成了5
## 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

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repository: git@github.com:5267/5267.github.io.git
branch: master

G:\bloggerMe\themes\hexo-theme-ttstyle——主题配置文件

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
# 统计代码请直接替换 _partial/footer.ejs 文件里的代码
theme_name: TTStyle
site_url: http://5267.github.io
# 社交信息
github: "http://github.com/5267"
qq: "http://shang.qq.com/wpa/qunwpa?idkey=fbb8977b610053616895fc132db8b9abad47b398cf3759bd569e61406de6701b"
# 托管服务器
gitPagesServerAddr: "http://gitcafe.com/signup?invited_by=tangkunyin"
gitPagesServerName: "GitCafe"
# 是否在新窗口打开链接
open_in_new: true
# favicon
favicon: /images/favicon.png
#你的头像url
avatar: /images/favicon.png
#是否高亮代码。默认开启
highlightCode: true
#代码高亮样式名称
## 内置样式名称5种:idea xcode solarized-dark solarized-light googlecode
highlightStyle: xcode
#捐赠相关。默认微信打赏
donateEnable: true
#添加友情链接
widgets:
- category
- tagcloud
- blogroll
- intro
- rss
- tag
- twitter
- weibo
# 添加分类、标签云widget

至此,基本配置完成,对于支付宝二维码定额支付、头像修改、多说评论的添加、一键添加QQ群添加等问题将在后续介绍。
OK,站点配置好了,如何发表一篇文章呢?

1、hexo new “my new post”。

2、在G:\bloggerMe\source\_posts中打开这个文件(打开工具:sublime),配置开头。

1
2
3
4
5
6
7
8
9
10
---
title: 道德经 | 第一章
date: 2016-05-04 20:24:51
categories: 读书笔记 #文章文类 | 这会显示在左边栏上!
tags:
---

## <center>道德经 | 第一章</center>
道,可道也,非恒道也。名,可名也,非恒名也。 “无”,名天地之始;“有”,名万物之母。 故,常“无”,欲以观其妙;常“有”,欲以观其徼。 此两者,同出而异名,同谓之玄。玄之又玄,眾妙之门。
......略......

执行命令hexo g,hexo s ,打开localhost:4000,查看效果。(退出server,用ctrl+c )。
3、 hexo d, 同步到Github,查看网站效果。

screenShot


三、入门篇:渐入佳境

1、Github主页和QQ爱好群的修改(左下角)。
其中,qq对应的那段代码去QQ推广中心获取。
2、支付宝二维码定额打赏、头像修改(右上角)。
定位到G:\bloggerMe\themes\hexo-theme-ttstyle\source\images 文件夹中,将对应图片替换即可。其中,支付宝二维码定额打赏图片获取方式:登陆支付宝手机客户端主页——>收款——>设置金额——>下载图片即可。微信捐赠图片获取方式类似。头像自己照一张喜欢的照片替换即可。
3、多说评论狂的添加(文章末尾)
注册多说——>添加站点:配置好自己主页的信息——>点击左边栏的”工具”,复制”通用代码”。 定位到G:\bloggerMe\themes\hexo-theme-ttstyle\layout\_partial 。打开additional.ejs文件,将”通用代码”替换掉对应的多说评论框。如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
##其中,data-url为站点网址。
<!-- 多说评论框 start -->
<div class="ds-thread" data-thread-key="<%= articleId %>" data-title="<%= articleTitle %>" data-url="http://5267.github.io/<%= page.permalink %>"></div>
<!-- 多说评论框 end -->
<!-- 多说公共JS代码 start (一个网页只需插入一次) -->
<script type="text/javascript">
var duoshuoQuery = {short_name:"5267"};
(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>
<!-- 多说公共JS代码 end -->

4、添加文末脚注(最下角)
定位到G:\bloggerMe\themes\hexo-theme-ttstyle\layout\_partial ,打开footer.ejs文件,简单修改即可,比如我的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<section>
<center> <font size=3 color=purple>专注数据分析、数据挖掘、大数据领域,习惯使用R、Python两把数据分析利器。非常推崇开源理念,我将在这儿和大家分享平时学习、生活的点点滴滴,期待和大伙儿共同进步!曾实习单位:蚂蚁金服*大数据安全部(数据分析师),同花顺*金融研究中心(金融研究员),IBM*CDL(consultant)</font> </center> <br/>

<p id="copyright"><a href="http://hexo.io" target="_blank">Hexo</a>创建&nbsp;&nbsp;|&nbsp;&nbsp;主题<a href="https://github.com/tangkunyin/hexo-theme-ttstyle" target="_blank"><%= theme.theme_name %></a>&nbsp;&nbsp;|&nbsp;&nbsp;感谢<a href="<%= theme.gitPagesServerAddr %>" target="_blank"><%= theme.gitPagesServerName %></a>支持</p>
<!-- 百度统计 -->
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "//hm.baidu.com/hm.js?a01595b492af7e4a793230e3d49ae638";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>

到此,站点配置完毕,hexo g,hexo s预览效果。如下

screenShot

专注数据分析、数据挖掘、大数据领域,习惯使用R、Python两把数据分析利器。非常推崇开源理念,我将在这儿和大家分享平时学习、生活的点点滴滴,期待和大伙儿共同进步!曾实习单位:蚂蚁金服*大数据安全部(数据分析师),同花顺*金融研究中心(金融研究员),IBM*CDL(consultant)

目录