个人博客建站过程

环境准备

nodejs、本地Git bash安装、github注册等等这些之前在学习vue的时候都已经配置过了，所以我一上来就是直接配置Hexo的。

本地搭建Hexo步骤

npm安装hexo

1	npm install hexo-cli -g

重点hexo安装慢和后面hexo init初始化慢的坑：就是要给npm换源，换成国内的镜像源，我用过下面两种方法，建议第二种，因为后面初始化hexo init是要用npm的

使用阿里定制的 cnpm 命令行工具代替默认的 npm

1	npm install -g cnpm --registry=https://registry.npm.taobao.org

直接把npm换为淘宝源
1
npm config set registry https://registry.npm.taobao.org
输入npm config list可以查看是否换源成功

安装好了hexo后，接下来要先初始化一个本地项目，这点有点类似于git的操作。

初始化hexo

首先我是先找了一个比较空的不常用的磁盘作为我的博客的建站地点，然后右击git bash打开git的命令行，并执行一下命令：
1
hexo init
这个地方需要注意，可能到某个地方下载的特别慢，但是如果前面切换了npm，应该很快就好了，我当时觉得感觉到卡住了，所以搜了一下，但是删除这个项目的时候说.git文件正在使用中，然后在配置好了npm镜像源之后果断重启了电脑，然后删掉了项目，重新执行上面的命令

完成了之后会出现在本地下载好如下内容(确实有点像vue)，但是在接下来的各种操作，只需要关注下面几个文件夹就好了。
生成静态页面——-在以上文件夹的public中
1
hexo g
启动本地服务器——-浏览器输入：http://localhost:4000/
1
hexo s
关闭本地服务器——-Ctrl+c

以上命令都是在git bash，也就写git命令的地方执行。执行完以上操作，基本上就完成了本地hexo的搭建，但是他那个界面我不太喜欢，所以还是参考大神博客修改了一番，接下来就开始漫长的博客主题设置模块

博客主题配置

克隆别人的主题

在刚刚hexo init的项目根目录下找到themes文件夹，进去右击git bash，在此处clone别人的github中的主题，我用的是hexo-theme-next，后面有喜欢的主题我也会试着修改一下，暂时先用着这个，简洁清新，很不错~。当然还有很多好看的主题可以到这个页面https://hexo.io/themes/，点击一个喜欢的主题，然后进去点击人家的github链接，复制github中的链接同样的命令克隆到themes文件夹下即可。

1	git clone https://github.com/theme-next/hexo-theme-next.git

下载可能需要等一会，这个等候是在自己的承受范围的哈哈哈，毕竟github是国外的，速度比较慢。下载完在themes文件夹下会多出一个文件夹，建议把这些文件夹先搞明白，不管我们写什么项目，先把常用的文件夹弄清楚我觉得是很有必要的，虽然我一开始被弄得有点乱，但是现在回想起来好像也就那几个目录常用。

配置主题

现在要回到刚刚hexo init的根目录下，然后用记事本打开_config.yml文件，我是用的nodepad++打开的，有高亮而且格式不会乱。这个yml接下来会常用到，毕竟是配置文件，和springboot中的配置文件一样，之前了解过，在启动的时候会自己加载。
然后notepad++中Ctrl+f，搜索theme，然后修改为刚刚的克隆的主题的名称

切换主题风格

这个主题包中应该是自带了几种风格的，进入到这个包中，可以看到如下文件，当然也并不是全部用得到。
进入配置文件修改主题风格，用notepad++打开改目录下的_config.yml，建议notepad++在整个过程中就不要关闭了，而且要记住这两个配置文件，哪个是项目根目录的配置文件，哪个是克隆的主题包的配置文件。
然后修改主题风格如下，人家包中就注释好了几种，只要稍微改一下就好了，直接Ctrl+f搜索scheme，这里我用的是下面的风格

博客左侧导航栏设置

进入根目录的_config.yml，打开后在最上面可以修改博客的导航栏

注意一下language是切换语言为中文的，其他的直接看下效果就好了
导航栏从上往下来，下面就是专栏的设计，也就是首页和归档等，这里我先添加两个专栏，一个是分类，一个是标签。

分类专栏
- 回到项目的根目录下，也就是刚刚hexo init生成的目录，然后在这里右击git bash，输入下面的命令，就会在项目根目录的source文件夹下自动创建一个categories文件夹。
  1
  hexo new page categories
- 打开categories文件夹中的index.md文件，添加下面一行，冒号后面要有个空格
- 然后到MyBlog\themes\hexo-theme-next主题文件夹下的_config.xml中，Ctrl+f搜索menu，然后把categories一行取消注释，也就是去掉前面的#。
- 将文章添加到分类——后面会详细说一下发布文章的整个步骤，这就先提一下，也就是在md文档的最顶端添加一行即可。
  1
  categories: 建站

标签专栏

和分类专栏步骤差不多，首先在根目录下执行下面的命令
1
hexo new page tags
打开tags文件夹中的index.md文件,添加一行
然后到主题文件夹下的配置文件中取消注释的tags一行即可
给文章添加标签，需要注意文章可能有多个标签，所以要用以下方式,记得-后面有个空格！
1
2
3
4
5
tags:
- Hexo
- Github
- 腾讯云域名
- Windows
添加到文章的标签样式，默认标签在文章最下面，标签前面有一个#，要改成一个图标才好看，所以要进去主题文件夹下\MyBlog\themes\hexo-theme-next\layout\_macro，打开post.swig文件，这个文件就类似于我们的HTML文件，进去后Ctrl+f搜索tag_indicate,这里不知道为啥他用了if判断，我根据我的直觉，直接把带有#的那部分删掉了，也就是一出来就让他显示那个图标签的图标就好。

站内搜索专栏
这个地方按照别人的博客来搞，最后部署的时候竟然会出现以下问题，显示乱了，在本地访问是没有问题的。可能是因为我安装的时候不是在根目录下安装的插件

解决方法:在hexo init的项目根目录下，按住shift键右击鼠标，然后在这里打开powershell命令行，然后执行下面的命令，安装站内搜索插件。
1
2
npm install hexo-generator-search --save
npm install hexo-generator-searchdb --save
按装好了后在项目根目录的_config.yml文件的最下面添加下面的代码
1
2
3
4
5
search:
path: search.xml
field: post
format: html
limit: 10000
然后进入主题文件夹的_config.yml文件，Ctrl+f搜索local_search，设置enable为true

个人头像设置
打开主题文件夹下的_config.yml,然后Ctrl+f搜索avatar，然后把一个头像链接替换即可。
这里头像链接的一定要注意

需要在hexo init项目根目录的source文件夹下新建一个images文件夹，然后把图片放到里面，然后在填写路径的时候，直接写相对路径"/images/1.jpg"，

我通过调试工具发现，开启服务器后，http://localhost:4000/所请求到的文件夹就是项目根目录的source文件夹，所以上面直接从images目录写就好了。

给头像加样式，设置旋转以及圆角(因为我的头像是长方形，所以就不设置圆角了)，进入主题文件夹下的\MyBlog\themes\hexo-theme-next\source\css\_common\components目录，打开components.styl，在这里需要解释一波，这里的.styl文件，就和HTML的样式表文件.css文件是同样的效果！然后我们在这个文件下面加入下面的代码，就可以实现圆角和hover时旋转360°了。

.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);
  }
}

最后重启服务器，可以看到经过以上配置后，博客左侧导航栏的初步样式，当然也可以边设置边重新启动来看效果。重启的步骤就是先Ctrl+c关闭服务器，如果正在运行的话，然后hexo g重新生成静态文件，最后hexo s启动服务器，以上两个命令如果没有效果可以先hexo clean一波，然后再试。效果如下：

博客底部设置

去掉底部自带的Hexo链接

打开MyBlog\themes\hexo-theme-next\layout\_partials下的footer.swig，这个文件就相当于html文件，然后我是把下面那部分内容去掉了

网站底部字数统计设置

在项目根目录下安装 hexo 插件
1
npm install hexo-wordcount --save

打开MyBlog\themes\hexo-theme-next\layout\_partials下的footer.swig，在文末添加下面的代码

<div class="theme-info">
  <div class="powered-by"></div>
  <span class="post-count">博客全站共{{ totalcount(site) }}字</span>
</div>

网站底部站点访问量和访问人数

需要注意的是，访问次数和浏览量在本地服务器会出现次数非常大的状况，这是小问题，只要部署在github之后，就不会有这个问题啦

网站底部字数统计设置已经安装了插件，这里不需要再装

然后打开MyBlog\themes\hexo-theme-next\layout\_partials下的footer.swig，在文末添加下面的代码，这段代码加在字数统计的上面

<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

<div class="powered-by">
  <i class="fa fa-user-md"></i>
  <span id="busuanzi_container_site_pv">
    本站访问量:<span id="busuanzi_value_site_pv"></span>次
  </span>
  <span class="post-meta-divider">|</span>
  <span id="busuanzi_container_site_uv">
    本站总访客量：<span id="busuanzi_value_site_uv"></span>人
  </span>
   <span class="post-meta-divider">|</span>
</div>

文章阅读次数设置

我参考的博客中的方法是不行的，而且我查阅了很多博客几乎都是这样，都不行。也就是说不用把busuanzi_count:设置为true，只是用HTML的代码就可以实现了。

解决方法：找到MyBlog\themes\hexo-theme-next\layout\_macro下的post.swig，根据我的理解，这就是每篇文章的布局，相当于文章的HTML文件，然后我进去找，凭借感觉真的发现了问题所在，原来在if判断的时候出了问题，我也是歪打正着，下面删掉了判断中的部分就好了

以上是我在配置博客主题的时候遇到问题的地方吧，文章最后会给出参考链接，链接中给我遇到问题的地方都已经给出了，还有一些我没有用到的效果，可以自行使用，问题不大！！！

部署到github远程仓库

创建github仓库

这里需要注意创建仓库的名称一定要是你的github名称.github.io

链接到本地hexo

复制github仓库的链接
打开项目根目录的_config.yml文件，Ctrl+f搜索deploy，tpye 设置为 git，repo 则设置为刚刚新建的远程仓库链接。
然后在项目根目录下安装插件，记住一定是根目录！！！前面好几处错误都不是根目录导致的。
1
npm install hexo-deployer-git --save
然后在根目录下执行代码部署到github
1
2
3
hexo clean #这句是清除所有本地的静态文件
hexo g #再生成所有静态文件
hexo d #部署到远程仓库
然后就可以看到github仓库中有了内容，但是这样还不行，这样访问链接的话是没有一点样式的，还需要在本地hexo项目根目录下的_config.ym文件中，Ctrl+f搜索url，然后把github仓库的setting中的链接填写到下面的位置

然后再重新部署整个项目，即可看到成功搭建完成了！！！最后需要注意，当你hexo d之后会发现自己的网站并没有及时更新，这时候可以再hexo d一遍，多刷新几下网站就出来啦！

总结

总的来说，搭建个人博客的过程确实有点麻烦，可能还不如直接注册个别的博客来写，可是我觉得最大的好处就是这个写文章以及发表还有主题效果是真的好，最重要的这是个人博客！以后我会将自己在学习中所遇到的问题以及学到的新知识都会记录在这里，之前我都是记录在OneNote中，OneNote是我用了好几年的记笔记软件，但是它的格式什么的确实让我难受了许久(比如没有代码块等)。

我曾经也有过自己开发一个个人博客的想法,但是考虑到自己能力不足，也没有大块的时间去开发，而且部署在各大平台的云服务器还是要收费的，到期了就不能永久存留了，这个就一直拖再拖。直到我了解了hexo之后，我才发现用这个记笔记也是个很不错的选择，至少代码可以永久存在github。以后有时间的话我会把以前记录在OneNote的所有笔记整理到这里来，既可以温故而知新，又可以多备份一份笔记，防止笔记丢失了哈哈哈哈！！！

本文参考链接

建站参考链接

Markdown图片无法显示,建议设置编辑器的图片存储路径，就可以直接贴图了

解决无法显示数学公式

背景图片问题