在上一篇文章 Github Pages + Hexo搭建个人博客(上) 写了 Hexo 的搭建和基本使用,因为内容太多,所以只能分两篇写,这一篇主要是 Github Pages 的域名设置和其他的一些配置。

设置域名

Github Pages 默认的域名都是 github.username.io,域名中还包括 github 的名称,别人一看就知道是使用 Github Pages 搭建的,还能直接通过域名找到你的 Github 账户,如果设置一个域名,至少不会在域名中暴露你的 Github 用户名,而且别人一看就知道是独立博客。不过一个域名一年至少也需要几十元,而 Github 的域名是免费的。

关于域名提供商,我个人比较推荐 namesilo ,如果要在 namesilo 购买域名可以看: 在namesilo购买域名 ,如果要在国内购买的话 阿里云这一类的都可以,但是国内购买的域名需实名认证后才能解析。设置域名解析 打开你的域名的控制面板,找到设置DNS之类的,添加一条 CNAME 记录,解析到你的 Github Pages 的域名,也就是 your username.github.io ,其中的 your username 就是你的 Github 用户名。设置完成后打开你的 Hexo 网站目录下的 source 目录,新建一个名为 CNAME的 文件,文件名没有任何后缀,在 CNAME 文件中输入你的域名,注意!域名前面没有www、也没有https和http ,如下:

changbin.me

输入完成后保存,进入命令行,切换到你的 Hexo 网站目录,输入:

hexo g

重新生成网页文件,然后接着输入:

hexo d

把网站同步到 Github,这时候在输入你的域名就可以访问你的 Github Pages 博客了,如果还不能访问的话可能是域名解析还没有生效,等一段时间在访问。

设置分类和标签

Hexo 默认是没有分类的,这样的话文章多了以后就会比较乱,读者也不方便寻找相关类型的文章,所以还需要手动开启分类功能。打开命令行,切换到 Hexo 网站目录,输入:

hexo new page categories

新建一个分类页,如果成功会提示:

Created: ~\hexo\source\categories\index.md

根据 Hexo 文件夹名称的不同,显示的内容也会有些不一样,打开 Hexo 网站目录下的 source 目录下的 categories 目录下的 index.md 文件,把内容改为如下:

---
title: 文章分类
date: 2019-02-27 19:18:38
type: "categories"
---

默认的 title 是英文的,可以改为中文,date 可以不用改,加入一个 type: "categories" ,修改完成后保存。打开你的文章,给没有分类的文章加入分类,如下:

---
title: 文章标题
date: 2019-02-27 00:28:43
categories: 
    "实用教程"
---

其中的 categories 下面的 实用教程 就是类型,一篇文章只能属于一个类型,以后写文章的时候也可以加入分类。修改完成后输入:

hexo g

重新生成网页,如果要在本地预览的话输入:

hexo s

进入 https://localhost:4000/ 就可以看到分类了。

hexo分类截图

标签相当于是文章的一些关键词,他能让读者更准确的找到所需要的文章,一篇文章可以有多个关键词,例如 PHP 实现图片验证码 就可以有 PHP、验证码 两个标签,hexo 默认也是没有开启标签,开启的方法是打开命令行,切换到 hexo 的网站目录,输入:

hexo new page tags

如果成功的话会提示一个文件路径,按照提示打开你的 hexo 网站目录下的 source 目录下的tags目录下的 index 文件,把文件修改为如下:

---
title: 标签
date: 2019-02-27 19:48:08
type: "tags"
---

date 可以不用改,完成后保存,打开你要添加标签的文章,输入标签,如下:

---
title: PHP实现图片验证码
date: 2019-02-27 00:28:43
categories: 
    "PHP"
tags:
- PHP
- 验证码
---

其中 tags 下面的 PHP验证码 就是标签,以后写文章也可以设置标签,保存后重新生成网页,然后就可以在文章的下方或侧边看到标签了。

Hexo标签截图

首页显示文章摘要

Hexo 默认首页是显示全文的,因为显示的文章过长,不利于浏览,所以需要设置文章摘要,Hexo 有的主题自带有摘要功能,但有的主题就没有。Hexo 本身是有摘要功能的,但需要在写文章的时候手动设置,设置的方法如下:

---
title: Hello Hexo
date: 2019-02-27 16:40:17
tags:
---
这里是摘要
<!-- more -->
这里是正文

主要就是加入一个类似于 HTML 的注释,把摘要和正文用 <!-- more --> 隔开,这样在首页 设置过的文章只会显示摘要内容,需要点击 阅读全文 或点击标题才能查看全文。

插件

Hexo和Wordpress 一样也能装插件,下面推荐几个插件:

网站地图生成插件

网站地图就是一个记录了网站的各种页面信息以及页面之间的关系的文件,主要是为了方便搜索引擎抓取网页,要安装网站地图生成插件可以打开命令行,输入:

npm install hexo-generator-sitemap

安装完成后只需要输入:

hexo g

插件就能自动生成网站地图,网站地图在Hexo网站目录下的 public 目录,使用:

hexo d

同步网站的时候也会把网站地图上传到 Github 的网站根目录。

网站资源压缩

主要功能就是压缩生成的网页资源,HTML、CSS、JS 等, 可以减少对存储空间的占用,同时也能加快网页的加载速度,尤其是对于国内访问来说。安装方法 在命令行输入:

npm install hexo-all-minifier

如果要查看更多插件可以访问: https://hexo.io/plugins/

关于图片

如果图片不多的话可以把图片放到 Hexo 目录下的 public 目录下的 img 目录,写文章的时候图片地址直接写 域名/img/图片名称 ,例如我的博客域名是 https://www.misterma.com ,我把一张名为 1.jpg 的图片放到 Hexo 目录下的 public 目录下的 img 目录,图片地址就是: https://www.misterma.com/img/1.jpg ,不过要先把网页同步到 Github 才能访问图片,虽然 Hexo 可以直接用相对路径引用图片,但是语法很乱,不利于移植到其他地方,还有在 public 目录下存储图片 在清理缓存和静态文件的时候记得备份图片。

如果图片比较多的话可以考虑使用图床,目前免费的图床有: SM.MS ,只需要上传图片就能自动生成图片url,只需要把生成的 url 粘贴到 Markdown 或者 img 图片标签中就能直接使用,但是我个人使用的移动网络图片加载比较慢,也不知道其他网络的情况,而且这一类的图床没有像 Github 一样的大公司背景,说不定哪一天就不能用了。还有一种方式就是在注册一个 Github 账户,在开一个 Github Pages 来存储图片,但是听说空间只有 300M。如果条件允许的话也可以自己买云服务器来搭建图床,现在国外的服务器也比较便宜,而且基本上都是1G的带宽。

相关文章: