博客简单搭建

准备工作

  • github账号
  • 安装node.js、npm环境

创建博客

  • 创建一个repository,repository name设置为 用户名.github.io
  • 配置SSH key
1
2
3
ssh-keygen -t rsa -C "邮箱"    #然后连续3次回车
然后打开用户目录下,找到.ssh\id_rsa.pub文件,赋值里面内容。打开github主页,进入个人设置-->SSH and GPG keys-->New SSH key
ssh -T git@github.com //测试是否连接成功
  • 用户信息
1
2
git config --global user.name 'github用户名'
git config --global user.email 'github注册的邮箱'

hexo使用

1
2
3
4
npm install -g hexo    //安装
hexo init //初始化,最好是新建个blog目录
hexo g //生成
hexo s //启动服务

修改主题

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
下载主题:
mkdir themes/next
curl -s https://api.github.com/repos/iissnan/hexo-theme-next/releases/latest | grep tarball_url | cut -d '"' -f 4 | wget -i - -O- | tar -zx -C themes/next --strip-components=1

修改根目录下_config.yml文件:
theme: next
language: zh-Hans

修改主题目录下_config.yml文件:

seo: true
scheme: Gemini
post_copyright:
enable: true
avatar: /images/Once.png //路径:next/source/images/

头像旋转:
打开\themes\next\source\css\_common\components\sidebar\sidebar-author.styl
.site-author-image {
display: block;
margin: 0 auto;
padding: $site-author-image-padding;
max-width: $site-author-image-width;
height: $site-author-image-height;
border: $site-author-image-border-width solid $site-author-image-border-color;
/* 头像圆形 */
border-radius: 80px;
-webkit-border-radius: 80px;
-moz-border-radius: 80px;
box-shadow: inset 0 -1px 0 #333sf;

/* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束
(1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/


/* 鼠标经过头像旋转360度 */
-webkit-transition: -webkit-transform 1.0s ease-out;
-moz-transition: -moz-transform 1.0s ease-out;
transition: transform 1.0s ease-out;
}

img:hover {
/* 鼠标经过停止头像旋转
-webkit-animation-play-state:paused;
animation-play-state:paused;*/

/* 鼠标经过头像旋转360度 */
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}

/* Z 轴旋转动画 */
@-webkit-keyframes play {
0% {
-webkit-transform: rotateZ(0deg);
}
100% {
-webkit-transform: rotateZ(-360deg);
}
}
@-moz-keyframes play {
0% {
-moz-transform: rotateZ(0deg);
}
100% {
-moz-transform: rotateZ(-360deg);
}
}
@keyframes play {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(-360deg);
}
}

背景设置透明
themes\next\source\css\main.styl
.post-block {
background: none;
!important;
}

添加分类:
scaffolds/post.md(在默认模板上添加categories:)

部署到github上

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
1、获取对应的repository的连接:git@github.com:cnonce/cnonce.github.io.git
2、修改博客的配置文件:
打开配置文件_config.yml
deploy:
type: git
repository: git@github.com:cnonce/cnonce.github.io.git
branch: master
3、部署:
回到 git bash
输入 npm install hexo-deployer-git --save //进行安装
输入 hexo d
得到 INFO Deploy done: git //即为部署成功

4、上传:
hexo g //生成
hexo d //部署

管理后台(hexo-admin)

1
2
npm install --save hexo-admin
hexo server -d