博客简单搭建

发表于 | 分类于

准备工作

  • 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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
下载主题：
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:）

设置社交图标：
social:
icons_only: true

设置友链：
links:

添加miku：
npm install --save hexo-helper-live2d
npm install live2d-widget-model-miku
hexo的_config.yml下设置
live2d:
  enable: true
  scriptFrom: local
  model:
    use: live2d-widget-model-miku
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true

部署到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