『技术分享』— 个人博客全新上线(阿里域名+GitPages+hexo+Yelee)

  |     |   本文总阅读量:

前言

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

http://xiaweizi.cn

在来一波动态图演示:

电脑端:

电脑端.gif

手机端:

手机博客

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

GitHub Pages + Hexo

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

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

域名

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

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

域名选择

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

解析

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

添加解析

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

解析1

解析2

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

获取 ip 地址

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

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

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

github pages

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

添加 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/bloghexo/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>

GitHub 小挂件

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

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

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

新年快乐

#rewardButton { background-color: #ea6f5a; } .btn-pay { margin-bottom: 20px; padding: 8px 25px; font-size: 16px; color: #fff; background-color: #ea6f5a; } .btn { display: inline-block; margin-bottom: 0; font-weight: 400; text-align: center; vertical-align: middle; touch-action: manipulation; cursor: pointer; background-image: none; border: 1px solid transparent; white-space: nowrap; padding: 6px 12px; font-size: 14px; line-height: 1.42857; border-radius: 4px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #QR img{ height: 200px; height: 200px; margin: 20px; }
文章目录
  1. 1. 前言
  2. 2. GitHub Pages + Hexo
  3. 3. 域名
  4. 4. 主题选择
您是第 位小伙伴 | 本站总访问量 | 已经写了 120.4k 字啦

载入天数...载入时分秒...