博客诞生记
Jan 1, 0001 00:00 · 651 words · 4 minute read
序
搭博客的想法被搁置了很久，主要是害怕以后服务器更换之类的迁移博客很麻烦。但是今天发现可以将博客搭建在github上，就来尝试一把。毕竟大网站不会说倒就倒。哈哈
折腾半天，先记录一下，一会继续折腾主题。哈哈哈哈
安装hexo
github工作
现在本机上安装好git，安装连接
https://git-scm.com/download/win .
安装好后与自己的github绑定
打开git bash
git config --global user.name "你的GitHub用户名"
git config --global user.email "你的GitHub注册邮箱"
然后生成ssh秘钥文件
ssh-keygen -t rsa -C "你的GitHub注册邮箱"
三个回车搞定问题
然后会提示将生成的秘钥和公钥路径给出，我们只需要照着路径找到id_rsa.pub密钥，然后将其内容添加到github上就ok，具体步骤就不多说了。
安装node.js
直接到官网下载即可
https://nodejs.org/en/download/
检测是否安装好，在cmd里输入以下内容即可测试。
C:\Users\Administrator>node -v
v8.9.1
C:\Users\Administrator>npm -v
5.5.1
现在就已经把安装hexo的环境准备好了。下来就来安装hexo！
安装hexo
先在自己的本机上安装hexo，我是直接在D盘新建了一个blog文件夹。然后在blog文件夹中打开cmd（就是shift+右键）。
打开cmd后输入
npm install -g hexo-cli
这个执行完直接提示我装在了C盘，当时惊了我一下，不是应该装在D:/blog下吗？
到后来才知道这是hexo的配置文件，不是hexo的网站。。。。。。
执行完毕后输入
hexo init blog //初识化博客
到这里就已经在本地搭建好博客了，可以测试一下，测试命令如下
hexo new test_my_site //发布一个test_my_site博客
hexo g //生成网页，就是将刚写的md文件生成网页
hexo s //在本地启动服务预览
然后直接在浏览器访问’localhost:4000’ ，hexo s 执行后会提示一个url，直接复制粘贴就好。
接下来要做的就是将博客部署在github上。
打开blog文件夹里的_config.yml文件，blog文件夹下的themes里也有一个_config.yml文件。
打开根目录的_config.yml后，找到最后的位置添加为
deploy:
type: git
repo: https://github.com/Yangzcc/Yangzcc.github.io.git //这是github的仓库的url。
branch: master
其实就是给hexo d 这个命令做相应的配置，让hexo知道你要把blog部署在哪个位置。这里我们部署在github的仓库里。
然后安装Git部署插件
npm install hexo-deployer-git --save
执行完毕后，执行下边三条命令
hexo clean
hexo g
hexo d
现在网站就已经上线了，可以通过访问https://yangzcc.github.io/ 来访问。
hexo基本操作
设置标签
给一篇文章添加标签后，就可以将该文章归属于该标签下，可对应多个标签。
1.给文章添加标签的示例
---
title: 基础语法
date: 2017-11-10 09:54:35
tags: 学习
---
2.设置标签页面（即显示所有标签的那个页面）
1.在终端窗口下，定位到 Hexo 站点目录下。使用 hexo new page 新建一个页面，命名为 Yang's tags ：
hexo new page "Yang's tags"
INFO Created: D:\Blog\Blog\source\Yang-s-tags\index.md
2.编辑刚新建的页面Yang-s-tags\index.md，将页面的类型设置为 tags ，主题将自动为这个页面显示标签云。页面内容如下：
---
title: Yang's tags
date: 2017-12-05 10:29:33
type: "tags"
---
3.在菜单中添加链接。编辑 主题配置文件 ， 添加 Yang-s-tages 到 menu 中，如下:
menu:
home: / || home
archives: /archives/ || archive
tags: /Yang-s-tags/ || tags //这里填的名字一定是生成的文件夹的名字。不然hexo会找不到。
categories: /categories/ || th
about: /about/ || user
这样hexo的标签设置结束。
设置分类
1.给文章添加分类的示例
---
title: 火眼金睛
date: 2017-12-3 09:54:35
tags:
- ctf
- python
categories: ctf //添加分类ctf
---
2.设置分类页面（即显示所有标签的那个页面）
1.在终端窗口下，定位到 Hexo 站点目录下。使用 hexo new page 新建一个页面，命名为 Yang's categories ：
hexo new page "Yang's categories"
INFO Created: D:\Blog\Blog\source\Yang-s-categories\index.md
2.编辑刚新建的页面，将页面的 type 设置为 categories，主题将自动为这个页面显示分类。页面内容如下：
---
title: Yang's categories
date: 2017-12-05 10:44:17
type: "categories"
---
3.在菜单中添加链接。编辑 主题配置文件 ， 添加 Yang-s-categories 到 menu 中，如下:
menu:
home: / || home
archives: /archives/ || archive
tags: /Yang-s-tags/ || tags
categories: /Yang-s-categories/ || th
about: /about/ || user
到这分类页面设置好了。
设置阅读全文
在首页显示一篇文章的部分内容，并提供一个链接跳转到全文页面是一个常见的需求。 NexT 提供三种方式来控制文章在首页的显示方式。 也就是说，在首页显示文章的摘录并显示 阅读全文 按钮，可以通过以下方法：
1.在文章中使用 <!-- more --> 手动进行截断，Hexo 提供的方式 推荐
2.在文章的 front-matter 中添加 description，并提供文章摘录
3.自动形成摘要，在 主题配置文件 中添加：
auto_excerpt:
enable: true
length: 150
默认截取的长度为 150 字符，可以根据需要自行设定
设置本地搜索
1.在博客根目录下执行
npm install hexo-generator-searchdb --save
在主题配置文件搜索 local_search:将false改为true即可（）
local_search:
enable: true
写文章注意的地方
每一篇文章的头部都要写这几个东西
---
title: 火眼金睛 //标题
date: 2017-12-3 09:54:35 //发布时间
tags: // 标签
- ctf
- python
categories: ctf // 属于哪个分类
---
还有一些其他的参数，以后用到再说
发表文章时的操作步骤如下：
1.先将写好的.md文件存入到blog的source\_posts文件夹下
2.执行 hexo g
3.执行 hexo d
这是一个比较难受的地方。。。
删除博客的方法
1.删除Blog\Blog\source\_posts下的要删除的文章
2.删除Blog\Blog\public\2017下对应的文件夹
3.重新部署以便即可
解决hexo d报错的情况。
warning: LF will be replaced by CRLF in archives/2017/12/index.html.
可以这样，首先删除hexo 下面的.deploy_git文件夹，然后运行
git config --global core.autocrlf false
重新 hexo clean,hexo g,hexo d就行了
折腾主题
官方文档设置
http://theme-next.iissnan.com/getting-started.html#select-language
设置头像
打开主题配置文件，修改avatar的值，将其换为要修改的外链即可。
添加阅读量统计
弄完后发现很不稳定，有时候可以显示有时候不可以，有点难受。
添加网易云外链
- 在网易云音乐网页版可以找到歌曲的生成外链，将其复制下来。
- 在本地打开Blog\Blog\themes\next\layout\ _macro下的sidebar.swig文件，将其粘贴在该文件中即可。
- 重新部署博客。
添加来必应评论
1.注册来必应获取data-uid（在安装代码里） 2.打开主题配置文件，在livere_uid：后添加data-uid即可。
新版的next主题比较方便，刚开始照着教程找了好久。。。。
小细节优化
下面四个都是在主题的配置文件里修改
设置代码高亮
highlight_theme: night eighties //共有5个可选
设置友链
links_icon:
links_title: Links
#links_layout: block
links_layout: inline
links:
#链接地址
设置右侧社交链
social:
GitHub: https://github.com/yourname || github
E-Mail: http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=863209913@qq.com
更改背景动画
这四个都可以选。
# Canvas-nest
canvas_nest: false
# three_waves
three_waves: false
# canvas_lines
canvas_lines: true
# canvas_sphere
canvas_sphere: false
修改头像为圆形并可转动
打开\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);
}
}
博客底部字数统计
在博客根目录运行
npm install hexo-wordcount --save
然后在/themes/next/layout/_partials/footer.swig文件尾部加上：
<div class="theme-info">
<div class="powered-by"></div>
<span class="post-count">博客全站共{{ totalcount(site) }}字</span>
</div>
添加顶部加载条
打开/themes/next/layout/_partials/head.swig文件，在第四行添加如下代码
<script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
<link href="//cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet">
<style>
.pace .pace-progress {
background: #000000; /*进度条颜色*/
height: 3px;
}
.pace .pace-progress-inner {
box-shadow: 0 0 10px #000000, 0 0 5px #000000; /*阴影颜色*/
}
.pace .pace-activity {
border-top-color: #000000; /*上边框颜色*/
border-left-color: #000000; /*左边框颜色*/
}
</style>
也可直接在主题配置文件中将pace改为true，然后修改pace_theme:
隐藏底部的主题信息
用的人家的主题，还去掉人家的宣传虽然有点不太好，但是就是想去掉。（反正next的名气已经很大。哈哈哈）
打开themes/next/layout/_partials/footer.swig，注释以下代码，想去掉由hexo强力驱动，也是同样的道理。
<div class="theme-info">{#
#}{{ __('footer.theme') }} — {#
#}<a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">{#
#}NexT.{{ theme.scheme }}{#
#}</a>{% if theme.footer.theme.version %} v{{ theme.version }}{% endif %}{#
#}</div>
改logo
修改博客底部的logo
打开themes/next/layout/_partials/footer.swig找到如下代码
<span class="with-love">
<i class="fa fa-rocket" aria-hidden="true"></i>
</span>
然后在 http://fontawesome.io/icons/ 找自己喜欢的图标，点击自己喜欢的图标，网站会自动生成一段<i></i>代码，直接将其替换刚刚找到的代码。OK，效果如图：
美滋滋。。。。
设置网站的图标
到网上下载一个32*32的png图标， 然后将其放入Blog\themes\next\source\images下，这里我的是paper-plane.png. 然后在主题配置文件下找到favicon，然后将原图标名改为paper-plane.png.如下代码
favicon:
small: /images/favicon-16x16-next.png
medium: /images/paper-plane.png
apple_touch_icon: /images/apple-touch-icon-next.png
safari_pinned_tab: /images/logo.svg
感谢大佬的分享
https://zhuanlan.zhihu.com/p/26625249