Mac 下 Hexo 和 GitHub-Pages 搭建个人博客(二)

本文是《Mac 下 Hexo 和 Github-Pages 搭建个人博客》系列文章的第二篇。按照介绍 Hexo 第一篇文章搭建好 Hexo 博客以后,发现并不理想,而且在写文章的过程中遇到了一些问题,本文主要记录一下在完善 Hexo 博客过程中,我的一些收获,包括以下四点内容:

  1. 配置 Hexo 主题
  2. Hexo 草稿箱的使用
  3. 文章中图片的插入
  4. 为 Hexo 绑定个人域名

    配置 Hexo 主题

    NexT 主题预览

    按照《Mac 下 Hexo 和 Github-Pages 搭建个人博客(一)》,已经成功地搭建了 Hexo 博客,下图是默认主题的预览效果


为了达到自己理想的效果,找了一款自认为非常美观而且简洁的主题:NexT,显示效果如下所示:



对比一下,差距是不是很明显。^-^

具体操作

接下来介绍如何配置主题,其实非常简单:

  1. 从 Mac Terminal 进入 hexo/themes 目录下,输入以下命令,将 NexT 主题从 GitHub 上 clone 下来:

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

    等待 clone 完成以后,将该文件重命名为 next,如下图所示:



  2. 打开hexo/_config.yml文件,并修改里面的 theme 属性为 next ,如下图所示:



此时,Hexo 主题配置已经完成,通过命令 hexo s ,即可在本地预览 NexT 主题效果。

Hexo 草稿箱的使用

创建一篇文章的命令是:

1
hexo new "new_page_name"

该命令创建的博客在 hexo/source/_posts 目录下
创建一篇草稿文章的命令是:

1
hexo new draft "new_page_name"

该命令会在 hexo/source/_drafts 目录下创建一个 new_page_name.md 文件。
预览草稿文章:

1
hexo s --draft

当文章创作完成以后,使用以下命令发布文章,即会发表该文章,文章及其所属的同名资源文件夹则会从 hexo/source/_drafts 移到 hexo/source/_posts

1
hexo publish “new_page_name”

文章中图片的插入

  1. 确认 source/_config.yml 中有 post_asset_folder: true 属性。这样设置以后,每次新建文章的时候,Hexo 都会创建一个与文章同名的文件夹,可以把与文章相关的资源都放在该文件夹下,方便管理。
  2. 进入 hexo 目录下,执行以下命令,完成 CodeFalling/hexo-asset-image 插件的安装:

    1
    npm install https://github.com/CodeFalling/hexo-asset-image --save
  3. 在文章中插入图片。首先将图片放入与文章名称相同的文件夹内,然后在文章中用以下方式引用。例如在一篇 test.md 的文章中插入图片,与其对应的文件夹下有一张名为 test.jpg 的图片,那么引用方式则是:

    1
    ![logo]('test'/test.jpg)

用上面这种方式引用图片并不能设置图片的大小,经过查找,可以使用以下方式插入图片,并且可以设置图片的大小:

1
2
3
<div align=center>
<img src="test/test.jpg" width="100" height="80" alt=""/>
</div>

为 Hexo 绑定个人域名

条件

为 Hexo 绑定个人域名需要两个条件:1.个人域名;2.有一个域名解析提供商账号。

  1. 首先,你需要一个域名,在 万网 可以购买,笔者购买的是 lijiankun24.com
  2. DNS 解析的服务推荐使用 DNSPod (速度快,免费),在该网站下注册一个账号,用于 DNS 解析使用。

具体操作

  1. hexo/source/ 路径下创建一个名为 CNAME 的文件(注意:没有扩展名),如下图所示:


  2. 使用文本编辑器打开 CNAME 文件,在首行添加个人域名信息(注意:不加 http://,也不加 www),如下图所示:


  3. 完成第2步之后,重新部署到 github pages 上去,部署简写命令 hexo d -g
  4. 万网 注册,并购买域名。
  5. DNSPod 注册完成以后,进入个人中心控制台,添加个人域名,并添加记录:

    1. 首先添加一个主机记录为 @,记录类型为 CNAME,记录值为 xxx.github.io(例如:lijiankun24.github.io)的记录;
    2. 再添加一个 主机记录为 www,记录类型为 CNAME,记录值为 xxx.github.io(例如:lijiankun24.github.io)的记录;

      第一条记录 @ CNAME lijiankun24.github.io 允许用户以 lijiankun24.com 访问你的博客;第二条记录 www CNAME lijiankun24.github.io 允许用户以 www.lijiankun24.com 访问你的博客。

    添加完成以后,如下图所示:



  6. 万网 个人中心的控制台中,修改你的域名的DNS地址为:f1g1ns1.dnspod.netf1g1ns2.dnspod.net,如下图所示:



这样就可以愉快的使用个人域名访问个人博客啦~

参考资料:

github怎么绑定自己的域名? – 知乎

我的博客是如何搭建的(github pages + HEXO + 域名绑定) – 水瓶座iOSer