hexo+github+hexo-theme-matery搭建个人免费博客

个人博客

前言

GitHub page提供了免费的服务搭建

免费域名 xxx.github.io xxx是你的GitHub用户名
免费的代码存储空间
全是静态文件，快速访问
git版本管理，能快速回滚或者切换的某个版本

准备工作

注册GitHub账号

（如果已拥有GitHub账号无需重新注册）

点击sign in 页面的Create an account

注册页面信息填写：

注册完成之后直接登录

node环境

本地安装nodejs环境，此处就不在详细介绍安装了。

安装git

为了把本地的网页文件上传到github上面去，我们需要用到分布式版本控制工具————Git[下载地址]。

安装选项还是全部默认，只不过最后一步添加路径时选择Use Git from the Windows Command Prompt，这样我们就可以直接在命令提示符里打开git了。

安装完成后在命令提示符中输入git --version验证是否安装成功。

window需要安装git bash或者其他工具来支持git命令的使用

GitHub博客注册

接下来就是去GitHub上注册一个git page来存放我们的博客静态页面

点击新增项目

打开新增页面

填写新增信息。

填写注意事项:

name填写XXX.github.io
上面的XXX就是你的GitHub用户名owner
一定要填写.github.io后缀不然就创建成普通项目了

创建完成会自动生成https://gongchenghuigch.github.io/ 这样的访问地址

Repository那么一定要按规则填写不然后期会出现博客代码提交不上去的问题

如果你的这个page地址已占用看是否能把它迁移到别的page下面

配置SSH key

在本地代码push是需要你的GitHub权限，但是直接使用用户名和密码太不安全了，所以我们使用ssh key来解决本地和服务器的连接问题。

本地公钥生成

ssh-keygen -t rsa -C "邮箱地址"

如果本地目录下面已存在直接覆盖原有的就可以

GitHub配置

setting>SSH and GPG keys>New SSH key

copy本地刚刚生成的.ssh/id_rsa.pub里面的全部内容

每个人生成的目录地址可能是不一样的，可以在ssh生成的时候看到你本地的生成地址

检测是否添加成功

ssh -T git@github.com # 注意邮箱地址不用改

如果提示Are you sure you want to continue connecting (yes/no)?，输入yes，然后会看到：

Hi gongchenghuigch! You’ve successfully authenticated, but GitHub does not provide shell access.

看到这个信息说明SSH已配置成功

git全局设置

git config --global user.name "xxx"// 你的github用户名，非昵称
git config --global user.email  "xxx@163.com"// 填写你的github注册邮箱

使用hexo

简介

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

hexo中文文档

原理

由于github pages存放的都是静态文件，博客存放的不只是文章内容，还有文章列表、分类、标签、翻页等动态内容，假如每次写完一篇文章都要手动更新博文目录和相关链接信息，相信谁都会疯掉，所以hexo所做的就是将这些md文件都放在本地，每次写完文章后调用写好的命令来批量完成相关页面的生成，然后再将有改动的页面提交到github。

安装hexo

npm install -g hexo-cli

初始化

在你电脑找一个文件目录下执行

$ hexo init <folder>
$ cd <folder>
$ npm install

执行完成会出现以下的目录结构：

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

_config.yml网站的配置信息，您可以在此配置大部分的参数。

本地启动

hexo server 或者 hexo s

浏览器窗口访问http://localhost:4000 会出现以下页面：

这个是默认主题比较丑陋；下面会介绍一些个人比较喜欢的主题。

发布

配置_config.yml中有关deploy的部分：

deploy:type: gitrepository: git@github.com:gongchenghuigch/gongchenghuigch.github.io.gitbranch: master

注意：

repository不要写成git clone的https的地址

错误写法：

deploy:type: gitrepository: https://github.com/gongchenghuigch/gongchenghuigch.github.io.gitbranch: master

配置完之后直接执行命令：

hexo d

执行完命名之后会在本地生成public打包的静态文件和.deploy_git提交git的编译之后的静态文件

public和.deploy_git下编译的静态文件如下：

如果在开发过程中想看的编译的静态文件直接执行命令：

hexo generate

注意：

在发布时如果本地已存在public需要执行hexo clean或者手动删除public目录，不然不会提交最新代码

新增文章

hexo new page test

hexo会创建source/test/index.md

hexo new page --path _posts/text "测试页面"

hexo会创建source/_posts/text.md同时页面title为“测试页面”

主题个性化设置

个人比较喜欢的主题是hexo-theme-matery，下面也都是基于这个主题的一些配置

主题下载

项目下面执行

git clone https://github.com/blinkfox/hexo-theme-matery.git themes/matery

更换根目录下的_config.yml配置文件中的theme参数

## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: matery

修改成你刚刚clone到本地要更换的主题

文章头部设置

将/scaffolds/post.md修改为如下代码：

---
title: {{ title }}
date: {{ date }}
top: false
cover: false
password:
summary:
tags:
categories:
---

效果示例：

---
title: TypeScript声明文件
date: 2019-09-05 10:29:29
categories:
- TypeScript
tags:
- TypeScript
---

导航配置

根目录_config.yml配置

title: gongchenghui
subtitle: 浅夏晴空
description: 北冥有鱼，其名为鲲，鲲之大，不知其几千里也；化而为鸟，其名为鹏.
keywords: gongchenghui,github
author: 浅夏晴空
language: zh-CN
timezone:

主题配置themes/matery/_config.yml

menu:主页:url: /icon: fa-home标签:url: /tagsicon: fa-tags分类:url: /categoriesicon: fa-bookmark工具:url: /friendsicon: fa-rocket归档:url: /archivesicon: fa-archive关于:url: /abouticon: fa-user-circle-o

效果：

分类

文章分类配置：

---
title: nvm版本管理
date: 2019-09-05 10:29:29
categories:
- nodejs
---

文章内部展示效果如下（右侧）：

导航上配置完分类之后需要在本地新建分类的目录

hexo new page categories

切换到分类页展示如下：

404页面

原来的主题没有404页面，首先在/source/目录下新建一个404.md，内容如下：

---
title: 404
date: 2017-07-19 16:41:10
type: "404"
layout: "404"
description: "你访问的页面被外星人叼走了 :("
---

然后在/themes/matery/layout/目录下新建一个404.ejs文件，内容如下：

<style type="text/css">/* don't remove. */.about-cover {height: 75vh;}
</style><div class="bg-cover pd-header about-cover"><div class="container"><div class="row"><div class="col s10 offset-s1 m8 offset-m2 l8 offset-l2"><div class="brand"><div class="title center-align">404</div><div class="description center-align"><%= page.description %></div></div></div></div></div>
</div><script>// 每天切换 banner 图.  Switch banner image every day.$('.bg-cover').css('background-image', 'url(/medias/banner/' + new Date().getDay() + '.jpg)');
</script>

效果如下：

添加建站时间

修改/themes/matery/layout/_partial/footer.ejs文件，在最后加上

<script language = javascript >function siteTime() {window.setTimeout("siteTime()", 1000);var seconds = 1000;var minutes = seconds * 60;var hours = minutes * 60;var days = hours * 24;var years = days * 365;var today = new Date();var todayYear = today.getFullYear();var todayMonth = today.getMonth() + 1;var todayDate = today.getDate();var todayHour = today.getHours();var todayMinute = today.getMinutes();var todaySecond = today.getSeconds();var t1 = Date.UTC(2018, 08, 11, 00, 00, 00); //北京时间2018-2-13 00:00:00 var t2 = Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond); var diff = t2 - t1; var diffYears = Math.floor(diff / years); var diffDays = Math.floor((diff / days) - diffYears * 365); var diffHours = Math.floor((diff - (diffYears * 365 + diffDays) * days) / hours); var diffMinutes = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) / minutes); var diffSeconds = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours - diffMinutes * minutes) / seconds); document.getElementById("sitetime").innerHTML = "本站已运行 " +diffYears+" 年 "+diffDays + " 天 " + diffHours + " 小时 " + diffMinutes + " 分钟 " + diffSeconds + " 秒"; } siteTime();
</script>

然后在适当位置加上一下代码

<span id="sitetime"></span>

如：

 <div class="col s12 m8 l8 copy-right"><span id="sitetime"></span> <br>本站由&copy;<a href="https://gongchenghuigch.github.io/" target="_blank">gongchenghui</a>基于<a href="https://hexo.io/" target="_blank">Hexo</a> 的<a href="https://github.com/blinkfox/hexo-theme-matery" target="_blank">hexo-theme-matery</a>主题搭建.

添加萌萌的动漫人物

先看看添加卡通人物之后的效果：

安装插件

npm install --save hexo-helper-live2d

安装下载动画人物库如：

npm install live2d-widget-model-z16 -D

根目录_config.yml配置里面添加：

live2d: enable: true scriptFrom: local pluginRootPath: live2dw/ pluginJsPath: lib/ pluginModelPath: assets/ tagMode: false log: false model: use: live2d-widget-model-z16 display: position: right width: 150 height: 300 mobile: show: true react: opacity: 0.7

动画库的样式示例：

Epsilon2.1

Gantzert_Felixander：

ni-j：

nico：

shizuku：

z16：

动漫人物只好不要和不蒜子一起使用，不然不蒜子会显示不出来。

添加网易云音乐

如何在文章里面插入音乐呢？

打开网易云音乐网页版，找到你自己想听的音乐

点击生成外链接：

然后把里面的HTML代码复制到你的文章里面就可以了。

添加搜索

安装搜索插件：

npm install hexo-generator-search --save

根目录_config.yml配置：

search:path: search.xmlfield: post