丙申九月，建站小记。

这两天趁着双休，学着搭了一下自己的blog，利用的是github的托管页面，用的是hexo的模板，申请了一个免费域名，自己添加了一些工具之类的，再准备陆续把以前自己在CSDN中的blog搬过来。 不知道有没有人能看得到，好像添加搜索那部分还有点问题，sitemap的url报错，不过总算是自己的空间了，虽然还是github提供的，今天忙这个两顿饭都忘记准时吃了，都是吃的汉堡，虽然有点累，但是开辟自己的空间的感觉真的很不错。 不过不知道能不能坚持，我对自己向来是不惮报以最坏的期望的，多少年都在证明这样做的正确性。不过对于进来的人，献上欢迎的花儿，还有飞吻。

现在记一下，博客搭建过程。 安装Nodejs和git自然不用多说。 然后选择主题，我选择的是一个透明的主题，不过这个主题的作者貌似很懒，只有透明效果。 然后布局和插件自己布置。 关于访问统计，一共用了百度统计/谷歌统计/腾讯统计，不过这些都是后台统计，显示在网页用的是不蒜子。 百度统计和腾讯统计直接在_partial下新建一个ejs，然后把获得的代码粘贴进去就行了。谷歌统计也有通用的模板，把id粘贴进去就行。最后在主题的配置文件里写一下。有的主题已经内置了百度和谷歌的统计代码的，只需要填入id就行，上面是说的没有的情况。 添加微博秀，直接到复制微博秀的代码。也是新建一个ejs文件，然后添加一个wedjet 修改背景，添加归档Archives,添加sitemap，提交谷歌搜索。 添加404，添加外链。 hexo方法大致一致，都是在百度谷歌现学现用。 以后有时间自己再做个主题， 以后有时间在用flask搭一个博客， 以后有时间，，， 不知道说什么了。

修改了next主题后的一些配置（后加）

把侧边栏头像变成圆形，并且鼠标停留在上面发生旋转效果

主要方法：修改themes/next/source/css/_common/components/sidebar/sidebar-author.styl

css
.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为循环播放) ]*/
  -webkit-animation: play 2s ease-out 1s 1;
  -moz-animation: play 2s ease-out 1s 1;
  animation: play 2s ease-out 1s 1; 
  /* 鼠标经过头像旋转360度 */
  -webkit-transition: -webkit-transform 1.5s ease-out;
  -moz-transition: -moz-transform 1.5s ease-out;
  transition: transform 1.5s 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);
  }
}
.site-author-name {
  margin: $site-author-name-margin;
  text-align: $site-author-name-align;
  color: $site-author-name-color;
  font-weight: $site-author-name-weight;
}
.site-description {
  margin-top: $site-description-margin-top;
  text-align: $site-description-align;
  font-size: $site-description-font-size;
  color: $site-description-color;
}

添加nest背景特效：

打开next/layout/_layout.swig，在