个人博客全新上线(阿里域名+GitPages+hexo+Yelee)

前言

新年新气象，狗年也是本命年，因此决定将博客重新搞一波。其实之前已经搭好过博客，因为前段时间换了mac，之前的环境和博客的内容都没有备份，索性就重新开始吧。那展示一下我的新的博客地址:

http://xiaweizi.cn

在来一波动态图演示：

电脑端：

手机端：

整个的搭建，一些的配置和博客的迁移也是花了我一整个下午和晚上加班的时间，自我感觉看起来很舒服，那接下来我就大概讲述一下这个博客搭建的过程。

GitHub Pages + Hexo

没钱买域名，没时间网站备案，那就用GitHub Pages和Hexo搭建属于自己的博客吧。其实网上这个教程真的是一搜一大把，我之前也写过，不过被我弄丢了，所以我就不赘述了，贴几个链接以供参考，只要照着流程走，是肯定可以顺利搭建的，这是件一劳永逸的事情。

1. 如何搭建一个独立博客
2. 搭建属于自己的博客

域名

域名，之前的云服务器套餐就是在阿里云上购买，因此我就顺便在阿里云进行购买域名。

前缀的选择就没有想那么多，也没有想的那么商业化，直接就是本人姓名的中文拼音。至于后缀，一开始对这块不熟悉，就先购买一个最便宜的尝试一下.top，成功后，索性花点钱买了个.cn——全球唯一由中国管理的英文国际顶级域名。

首先选择你喜欢和合适的域名，然后进行购买，购买成功并通过实名审核后，就可以在控制台找到您刚刚注册的域名。

我购买了两个，因此xiaweizi.cn和xiaweizi.top就会展示在首页，如果想绑定到GitHub Pages上,点击所选域名对应的「解析」按钮。

这里我之前已经添加过两个解析，第一次的时候需要你自行添加相应的解析。

按照上图添加两条解析。方式有很多种，我选择A的记录类型，即将域名指向一个 IPV4 地址，那记录值对应的就是你的GitHub Pages对应的地址，那这个地址如何获取呢？

直接通过ping + "your name".github.io的方式获取IP地址，也就是解析的记录值。

域名的配置已经完成了，剩下的就是GitHub Pages上的配置，有两种方式：

第一种，登录你的GitHub，找到名为"your name".github.io的仓库，点击settings的选项，找到GitHub Pages区域，即可看到Custom Domian的配置，这里输入您购买的域名即可。

第二种，在hexo的对应的目录下创建CNAME文件，里面输入您购买的域名。

不到一天的时间，即可通过审核并解析成功，直接就可以访问您的域名并定向到您的博客位置。

xiaweizi

到此，博客的大概框架和域名已经配置成功了，可以大致看到效果了。

主题选择

至于主题的选择完全是看个人的喜好了，有的人喜欢简洁大方，有的喜欢色彩张扬，有的喜欢品质内涵，找到自己合适的就行，如果实在没有满足您的胃口的，不妨可以根据自己的想法编写属于您自己的主题。

截止今日hexo 主题已经有 189 个样式供选择，或者可以参考知乎上的一篇文章选择：有哪些好看的 hexo 主题。

我 选择了yelee主题 —— 简而不减 Hexo 双栏博客主题，独具匠心的设计风格，突出内容为主题，凸显博主个性！

那接下来我就大概总结一下yelee主题的相关配置，当然官网是有详细的配置文档的：中文使用文档，举一反三，其他的主题配置大同小异。

使用 yelee 主题

打开终端，cd到您hexo/blog的目录,

git clone https://github.com/MOxFIVE/hexo-theme-yelee.git themes/yelee

下载yelee主题，那此时，分别在hexo/blog和hexo/blog/theme/yelee下有两个_config.yml的配置文件，前者是「站点配置文件」，后者是「主题配置文件」，大致所有的配置都在这里完成。

第一步就要在站点配置文件中，选择你刚下载的yelee主题。

在hexo/blog目录下输入相应的hexo命令完成生成、测试和部署的工作。

// 1. 生成
hexo g
// 2. 测试(localhost:4000)
hexo s
// 3. 部署
hexo d

编写文章

头部即为每次编写文章的配置信息。

title: 文章的标题
date: 文章的创建时间
updated: 文章的更新时间
categories: 文章所属的分类(一般有且只有一个)
tag: 文章所打的 tag(这个根据文章特点添加)

需要注意的是，主页展示每个文章，并不是展示摘要而是直接全文，这样的体验很不好，这个时候需要添加一行摘要分割标识：<!-- more -->

<!-- more -->之前的正文部分就是展示在主页的摘要。

第三方服务

首先在主题配置文件中找到github_widget:并设置为true，开启后在正文中插入如下代码即可

<div class="github-widget" data-repo="<GitHub 用户名>/<仓库名>.js"></div>

<!-- e.g. -->
<div class="github-widget" data-repo="xiaweizi/QNews"></div>

这个小挂件展示了对应仓库的链接地址、star和fork的数量等等信息。

至于其他的三方服务，只要按照官方的配置都可以完成，我就不赘述了，在配置的过程中遇到什么问题，咱们可以共同交流！

快过年了，今天也是情人节，祝撸友们新年快乐，新年脱单！