github上hexo-theme-matery主题搭建博客介绍
hexo github hexo-theme-matery 博客
前端
发布日期:   2019-10-10
阅读次数:  

参考链接1| 参考链接2 | 参考链接3 | 演示示例

捣捣鼓鼓了许久，终于在github上发布了我的博客，中间遇到好多问题，不管是github上的仓库还是主题中的设置配置，也是因为第一次接触ejs这种类似模板语法的语言，边百度边学习，才捣鼓出一个大概的博客该有的样子了，最后整理一下之前的操作和遇到的问题，有不足或者需要改进的在关于我中联系我，^_~ !!!

开始

在github创建账号搭建仓库

创建仓库，如下图：（仓库名要以自己的github名作为前缀，后面的夹 .github.io）

在GitHub Pages中选择正确的分支，在页面上明显看得见Your site is published at https://linjinglj.github.io/ 等字样，如下图。如果是出现两级 https://linjinglj/linjinglj.github.io/ 样式图片可能会丢失，改成一级目录比较好，就是上图的仓库名称改成linjinglj.github.io

搭建博客环境

安装Git、node.js（安装不懂的可以自行去百度）

本地git环境

右键选择 git bash here ，弹出Git Bash窗口；执行命令：

1
2
git config --global user.name "你的GitHub用户名"
git config --global user.email "你的GitHub注册邮箱"

生成ssh密钥文件：

1
ssh-keygen -t rsa -C "你的GitHub注册邮箱"

然后直接三个回车即可，默认不需要设置密码
然后找到生成的.ssh的文件夹中的id_rsa.pub密钥，将内容全部复制

打开GitHub_Settings_keys 页面，新建new SSH Key

Title为标题，任意填即可，将刚刚复制的id_rsa.pub内容粘贴进去，最后点击Add SSH key。
在Git Bash中检测GitHub公钥设置是否成功，输入 ssh git@github.com ：

如上则说明成功。

安装Hexo

使用npm命令安装Hexo，控制台输入命令：

1
npm install -g hexo-cli

这个安装时间较长耐心等待，安装完成后，初始化我们的博客，输入：

1
hexo init blog

注意，这些命令都作用于我们刚刚新建的Blog文件夹中。
此时我们检测一下我们网站的雏形，按顺序输入以下三条命令：

1
2
3
hexo new hello Hexo    //新建一篇名为"hello Hexo"的博客
hexo g                 //生成静态文件
hexo s                 //本地部署预览

此时，我们的网站已经初步成型，可以输入 localhost:4000 访问。

搭建博客项目

发布

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

1
2
3
4
deploy:
  type: git
  repository: git@github.com:linjinglj/linjinglj.git
  branch: master

注意：repository不要写成git clone的https的地址

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

1
hexo d

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

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

1
hexo generate

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

新增文章

1
hexo new page test

hexo会创建source/test/index.md

1
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参数

1
theme: matery

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

文章头部设置

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

1
2
3
4
5
6
7
8
9
10
---
title: {{ title }}
date: {{ date }}
top: false
cover: false
password:
summary:
tags:
categories:
---

导航配置

根目录_config.yml配置

1
2
3
4
5
6
7
title: YiXia
subtitle: 一夏
description: 如果不出发，就永远不知道你能走多远。
keywords: YiXia,github
author: 一夏
language: zh-CN
timezone:

主题配置themes/matery/_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
menu:
  主页:
    url: /
    icon: fa-home
  标签:
    url: /tags
    icon: fa-tags
  分类:
    url: /categories
    icon: fa-bookmark
  工具:
    url: /friends
    icon: fa-rocket
  归档:
    url: /archives
    icon: fa-archive
  关于:
    url: /about
    icon: fa-user-circle-o

标签

页面文章标签配置：

1
2
3
4
5
6
7
8
---
title: nvm版本管理
date: 2019-09-05 10:29:29
tags: 
- nodejs
- npm
- nvm
---

导航标签页配置，先创建页面（在根目录/source/tages可见，已经有了就不需要创建）：

1
hexo new page tags

修改标签页里面的内容

1
2
3
4
5
6
---
title: tags
date: 2019-10-10 17:25:30
type: "tags"
layout: "tags"
---

同理可以创建，分类categories、关于about的导航，title、type、layout相应变化

添加萌萌的动漫人物

安装插件

1
npm install --save hexo-helper-live2d

安装下载动画人物库 如：

1
npm install live2d-widget-model-z16 -D

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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

其他看板娘任务：z16、shizuku、nico、ni-j、Gantzert_Felixander、Epsilon2.1

添加搜索

安装搜索插件：

1
npm install hexo-generator-search --save

根目录_config.yml配置：

1
2
3
search:
  path: search.xml
  field: post
赏
  目录