使用基于Hexo的matery主题搭建blog

最新推荐文章于 2024-05-14 11:37:46 发布

Thunder Stone

最新推荐文章于 2024-05-14 11:37:46 发布

阅读量711

点赞数 3

分类专栏： blog 文章标签： hexo html5 git

本文链接：https://blog.csdn.net/qq_31445521/article/details/110004971

版权

blog 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

基于Hexo的主页搭建

文章目录

基于Hexo的主页搭建

0.前言

大一上学期正好在学H5+CSS+JS，于是在网上搭建了一个部署在GitHub上的自己的blog。搭建时也踩了不少的坑，在这里分享一下搭建的过程供大家参考。

为什么部署在GitHub上呢？

穷免费方便，不需要花钱购买服务器
基于GitHub的版本控制，可以回退版本，挽回误操作的损失

1.安装环境

安装git

Git是一个开源的分布式版本控制系统，可以有效、高速地处理从很小到非常大的项目版本管理。前往git官网下载适合自己的版本。安装完成后，在文件夹或桌面右键，如果有Git Bash Here就安装成功了。

安装node.js

下载node.js

在这里插入图片描述

选择合适自己的版本下载，安装时疯狂点击下一步

安装完成后可以在Git Bash键入node如果没有报错，显示了版本号就安装成功了。

安装Hexo

新建一个文件夹，用于存放blog的内容

在文件夹里右键，选择Git Bash Here，安装Hexo

npm install hexo-cli -g

查看Hexo版本

hexo -v

hexo初始化

hexo init

初始化完成后，在文件夹里可以看到已经有了初始文件

node_modules：依赖包
public：存放生成的页面
scaffold：生成文章或页面的模板
themes：主题
_config.yml：博客的配置文档
package.json：项目所需模块项目的配置信息
db.json：缓存文件

分别执行命令

hexo clean
hexo g
hexo s

如果输出

INFO  Validating config
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

你就可以在 http://localhost:4000 看到自己的网页

2.部署到GitHub

创建GitHub账号

这一部分需要发挥你的聪明才智

创建一个repository（仓库）

点击加号下的New repository

repository的名字一定要是你的名字.github,io，例如我的仓库名ThunderStones.github.io。勾选Add a README file，其他不用做修改

配置git

打开git bash，配置个人信息

git config --global user.name "Your Name"
git config --global user.email "Your Email"

将命令中的Your Name和Your Email改成注册GitHub时的用户名和邮箱

创建密钥

ssh-keygen -t rsa -C "Your Email"

此处的Your Email为注册GitHub时的邮箱，该密钥根据当前的机器和邮箱生成，用于远程仓库的鉴权。在生成过程中会让你输入密码之类的信息，可以不输入直接回车。当看到如图所示的内容时，密钥就生成成功了。在这里插入图片描述

添加GitHub密钥

找到生成的id_rsa.pub文件（Windows在C:\users\⽤户名\.ssh，macOS、Linux在~/.ssh），用文本编辑器打开，复制全部内容。

打开GitHub，点击右上角头像，进入setting，在左侧列表中找到SSH and GPG keys，点击右上角New SSH key，粘贴刚才的内容到key里面，点击Add SSH key

在git bash中验证是否添加成功

ssh -T git@github.com

Hi Your Name! You've successfully authenticated, but GitHub does not provide shell access.

出现如上字样则配置成功

配置_config.yml

回到blog文件夹，用文本编辑器（Notepad++或vscode等）打开_config.yml，添加以下配置，如果原来有deploy配置先删除或直接更改

deploy:
  type: git
  repo: 填入刚刚创建的仓库地址
  branch: main

每一个参数的冒号后面都要加一个空格

发布到GitHub

hexo deploy

3.主题美化

hexo-theme-matery主题

hexo-theme-matery 是一个采用 Material Design 和响应式设计的 Hexo 博客主题。具体特性可以去GitHub上查看，作者闪烁之狐 (blinkfox)也给出了中文的文档。

下载hexo-theme-matery主题

在根目录下的theme文件夹里，打开git bash，克隆仓库

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

克隆后，文件夹里会多出一个hexo-theme-matery目录

修改`_config.yml`配置文档，切换主题

打开根目录下的_config.yml配置文档，找到theme，将其值修改为hexo-theme-matery

配置主题

此部分内容整理于hexo-theme-matery的中文文档

blog根目录下`_config.yml`修改建议

将language的值修改为zh-CN
将 url 的值为你的网站的 URL（例如：http://YourName.github.io）

新建分类 categories 页

categories 页是用来展示所有分类的页面，如果在你的博客 source 目录下还没有 categories/index.md 文件，那么你就需要新建一个，命令如下：

hexo new page "categories"

编辑你刚刚新建的页面文件 /source/categories/index.md，至少需要以下内容：

---
title: categories
date: 例如2018-09-30 17:25:30
type: "categories"
layout: "categories"
---

新建标签 tags 页

tags 页是用来展示所有标签的页面，如果在你的博客 source 目录下还没有 tags/index.md 文件，那么你就需要新建一个，命令如下：

hexo new page "tags"

编辑你刚刚新建的页面文件 /source/tags/index.md，至少需要以下内容：

---
title: tags
date: 例如2018-09-30 18:23:38
type: "tags"
layout: "tags"
---

新建关于我 about 页

about 页是用来展示关于我和我的博客信息的页面，如果在你的博客 source 目录下还没有 about/index.md 文件，那么你就需要新建一个，命令如下：

hexo new page "about"

编辑你刚刚新建的页面文件 /source/about/index.md，至少需要以下内容：

---
title: about
date: 例如2018-09-30 17:25:30
type: "about"
layout: "about"
---

新建留言板 contact 页（可选的）

contact 页是用来展示留言板信息的页面，如果在你的博客 source 目录下还没有 contact/index.md 文件，那么你就需要新建一个，命令如下：

hexo new page "contact"

编辑你刚刚新建的页面文件 /source/contact/index.md，至少需要以下内容：

---
title: contact
date: 例如2018-09-30 17:25:30
type: "contact"
layout: "contact"
---

注：本留言板功能依赖于第三方评论系统，请激活你的评论系统才有效果。并且在主题的 _config.yml 文件中，第 19 至 21 行的“菜单”配置，取消关于留言板的注释即可。

新建友情链接 friends 页（可选的）

friends 页是用来展示友情链接信息的页面，如果在你的博客 source 目录下还没有 friends/index.md 文件，那么你就需要新建一个，命令如下：

hexo new page "friends"

编辑你刚刚新建的页面文件 /source/friends/index.md，至少需要以下内容：

---
title: friends
date: 例如2018-12-12 21:25:30
type: "friends"
layout: "friends"
---

同时，在你的博客 source 目录下新建 _data 目录，在 _data 目录中新建 friends.json 文件，文件内容如下所示：

[{
    "avatar": 图片,
    "name": 名称,
    "introduction": 介绍,
    "url": 链接地址,
    "title": 按钮内容
}]
//例如：
[{
    "avatar": "http://image.luokangyuan.com/4027734.jpeg",
    "name": "闪烁之狐",
    "introduction": "编程界大佬，本博客主题hexo-theme-matery由这位大佬制作",
    "url": "https://blinkfox.github.io/",
    "title": "前去学习"
}]

新建 404 页

如果在你的博客 source 目录下还没有 404.md 文件，那么你就需要新建一个

编辑你刚刚新建的页面文件 /source/404.md，至少需要以下内容：

---
title: 404
date: 例如2018-09-30 17:25:30
type: "404"
layout: "404"
description: "Oops～，我崩溃了！找不到你想要的页面 :("
---

菜单导航配置

配置基本菜单导航的名称、路径url和图标icon.

1.菜单导航名称可以是中文也可以是英文(如：Index或主页)
2.图标icon 可以在Font Awesome 中查找

menu:
  Index:
    url: /
    icon: fas fa-home
  Tags:
    url: /tags
    icon: fas fa-tags
  Categories:
    url: /categories
    icon: fas fa-bookmark
  Archives:
    url: /archives
    icon: fas fa-archive
  About:
    url: /about
    icon: fas fa-user-circle
  Friends:
    url: /friends
    icon: fas fa-address-book

二级菜单配置方法

如果你需要二级菜单则可以在原基本菜单导航的基础上如下操作
1.在需要添加二级菜单的一级菜单下添加children关键字(如:About菜单下添加children)
2.在children下创建二级菜单的名称name,路径url和图标icon.
3.注意每个二级菜单模块前要加 -.
4.注意缩进格式

menu:
  Index:
    url: /
    icon: fas fa-home
  Tags:
    url: /tags
    icon: fas fa-tags
  Categories:
    url: /categories
    icon: fas fa-bookmark
  Archives:
    url: /archives
    icon: fas fa-archive
  About:
    url: /about
    icon: fas fa-user-circle-o
  Friends:
    url: /friends
    icon: fas fa-address-book
  Medias:
    icon: fas fa-list
    children:
      - name: Musics
        url: /musics
        icon: fas fa-music
      - name: Movies
        url: /movies
        icon: fas fa-film
      - name: Books
        url: /books
        icon: fas fa-book
      - name: Galleries
        url: /galleries
        icon: fas fa-image

执行 hexo clean && hexo g 重新生成博客文件，然后就可以在文章中对应位置看到你用emoji语法写的表情了。

代码高亮

由于 Hexo 自带的代码高亮主题显示不好看，所以主题中使用到了 hexo-prism-plugin 的 Hexo 插件来做代码高亮，安装命令如下：

npm i -S hexo-prism-plugin

然后，修改 Hexo 根目录下 _config.yml 文件中 highlight.enable 的值为 false，并新增 prism 插件相关的配置，主要配置如下：

highlight:
  enable: false

prism_plugin:
  mode: 'preprocess'    # realtime/preprocess
  theme: 'tomorrow'
  line_number: false    # default false
  custom_css:

搜索

本主题中还使用到了 hexo-generator-search 的 Hexo 插件来做内容搜索，安装命令如下：

npm install hexo-generator-search --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

search:
  path: search.xml
  field: post

中文链接转拼音（建议安装）

如果你的文章名称是中文的，那么 Hexo 默认生成的永久链接也会有中文，这样不利于 SEO，且 gitment 评论对中文链接也不支持。我们可以用 hexo-permalink-pinyin Hexo 插件使在生成文章时生成中文拼音的永久链接。

安装命令如下：

npm i hexo-permalink-pinyin --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

permalink_pinyin:
  enable: true
  separator: '-' # default: '-'

注：除了此插件外，hexo-abbrlink 插件也可以生成非中文的链接。

文章字数统计插件（建议安装）

如果你想要在文章中显示文章字数、阅读时长信息，可以安装 hexo-wordcount插件。

安装命令如下：

npm i --save hexo-wordcount

然后只需在本主题下的 _config.yml 文件中，将各个文章字数相关的配置激活即可：

postInfo:
  date: true
  update: false
  wordCount: false # 设置文章字数统计为 true.
  totalCount: false # 设置站点文章总字数统计为 true.
  min2read: false # 阅读时长.
  readCount: false # 阅读次数.

修改页脚

页脚信息可能需要做定制化修改，而且它不便于做成配置信息，所以可能需要你自己去再修改和加工。修改的地方在主题文件的 /layout/_partial/footer.ejs 文件中，包括站点、使用的主题、访问量等。

修改社交链接

在主题的 _config.yml 文件中，默认支持 QQ、GitHub 和邮箱等的配置，你可以在主题文件的 /layout/_partial/social-link.ejs 文件中，新增、修改你需要的社交链接地址，增加链接可参考如下代码：

<% if (theme.socialLink.github) { %>
    <a href="<%= theme.socialLink.github %>" class="tooltipped" target="_blank" data-tooltip="访问我的GitHub" data-position="top" data-delay="50">
        <i class="fab fa-github"></i>
    </a>
<% } %>

其中，社交图标（如：fa-github）你可以在 Font Awesome 中搜索找到。以下是常用社交图标的标识，供你参考：

Facebook: fab fa-facebook
Twitter: fab fa-twitter
Google-plus: fab fa-google-plus
Linkedin: fab fa-linkedin
Tumblr: fab fa-tumblr
Medium: fab fa-medium
Slack: fab fa-slack
Sina Weibo: fab fa-weibo
Wechat: fab fa-weixin
QQ: fab fa-qq
Zhihu: fab fa-zhihu

注意: 本主题中使用的 Font Awesome 版本为 5.11.0。

修改打赏的二维码图片

在主题文件的 source/medias/reward 文件中，你可以替换成你的的微信和支付宝的打赏二维码图片。如果不想被打赏，可以修改hexo-theme-matery文件夹下 _config.yml文件，将reward下的enable的值改为false

配置音乐播放器（可选的）

要支持音乐播放，在主题的 _config.yml 配置文件中激活music配置即可：

# 是否在首页显示音乐
music:
  enable: true
  title:     	    # 非吸底模式有效
    enable: true
    show: 听听音乐
  server: netease   # require music platform: netease, tencent, kugou, xiami, baidu
  type: playlist    # require song, playlist, album, search, artist
  id: 503838841     # require song id / playlist id / album id / search keyword
  fixed: false      # 开启吸底模式
  autoplay: false   # 是否自动播放
  theme: '#42b983'
  loop: 'all'       # 音频循环播放, 可选值: 'all', 'one', 'none'
  order: 'random'   # 音频循环顺序, 可选值: 'list', 'random'
  preload: 'auto'   # 预加载，可选值: 'none', 'metadata', 'auto'
  volume: 0.7       # 默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
  listFolded: true  # 列表默认折叠

server可选netease（网易云音乐），tencent（QQ音乐），kugou（酷狗音乐），xiami（虾米音乐），

baidu（百度音乐）。

type可选song（歌曲），playlist（歌单）,album（专辑），search（搜索关键字），artist（歌手）

id获取方法示例: 浏览器打开网易云音乐，点击我喜欢的音乐歌单，浏览器地址栏后面会有一串数字，playlist的id即为这串数字。

4.写blog

介绍

Hexo 支持以任何格式书写文章，只要安装了相应的渲染插件。

例如，Hexo 默认安装了 hexo-renderer-marked 和 hexo-renderer-ejs，因此你不仅可以用 Markdown 写作，你还可以用 EJS 写作。如果你安装了 hexo-renderer-pug，你甚至可以用 Pug 模板语言书写文章。本文介绍Markdown语言

下载markdown编辑软件

Markdown是一种轻量级标记语言，创始人为约翰·格鲁伯。它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的XHTML（或者HTML）文档。由于Markdown的轻量化、易读易写特性，并且对于图片，图表、数学式都有支持，目前许多网站都广泛使用Markdown来撰写帮助文档或是用于论坛上发表消息。

目前Markdown编辑器有很多，Typora是其中比较好用的一个，它支持即时预览，界面也十分简介。

下载Typora

创建新的blog

在根目录下打开Git Bash

hexo new "文章名称"

这里的文章名称会作为文章的标题，后续也可以更改，所以最好不要使用中文名，在文章的front-matter可以把名字改为想要的中文名

创建的文件保存在 source/_post/文件夹下

配置文章`front-matter`

打开创建的md文件，发现front-matter里已经有了title和date两个参数。Front-matter 选项中的所有内容均为非必填的。但我仍然建议至少填写 title 和 date 的值。

front-matter参数参考如下，某些参数为hexo-theme-matery主题特有参数

配置选项	默认值	描述
title	`Markdown` 的文件标题	文章标题，强烈建议填写此选项
date	文件创建时的日期时间	发布时间，强烈建议填写此选项，且最好保证全局唯一
author	根 `_config.yml` 中的 `author`	文章作者
img	`featureImages` 中的某个值	文章特征图
top	`true`	推荐文章（文章是否置顶），如果 `top` 值为 `true`，则会作为首页推荐文章
cover	`false`	`v1.0.2`版本新增，表示该文章是否需要加入到首页轮播封面中
coverImg	无	`v1.0.2`版本新增，表示该文章在首页轮播封面需要显示的图片路径，如果没有，则默认使用文章的特色图片
password	无	文章阅读密码，如果要对文章设置阅读验证密码的话，就可以设置 `password` 的值，该值必须是用 `SHA256` 加密后的密码，防止被他人识破。前提是在主题的 `config.yml` 中激活了 `verifyPassword` 选项
toc	`true`	是否开启 TOC（目录），可以针对某篇文章单独关闭 TOC 的功能。前提是在主题的 `config.yml` 中激活了 `toc` 选项
mathjax	`false`	是否开启数学公式支持，本文章是否开启 `mathjax`，且需要在主题的 `_config.yml` 文件中也需要开启才行
summary	无	文章摘要，自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要
categories	无	文章分类，本主题的分类表示宏观上大的分类，只建议一篇文章一个分类
tags	无	文章标签，一篇文章可以多个标签
keywords	文章标题	文章关键字，SEO（搜索引擎优化）时需要
reprintPolicy	cc_by	文章转载规则，可以是 cc_by, cc_by_nd, cc_by_sa, cc_by_nc, cc_by_nc_nd, cc_by_nc_sa, cc0, noreprint 或 pay 中的一个

5.常见问题

markdown发布后插入的图片不显示

markdown文件发布后，由于生成的html文件与图片的位置发生变化，无论是相对路径还是绝对路径，图片都无法正常显示。网上也有很多方法，但大多数都无法解决这个问题。最终，我找到了这个插件hexo-image-link

安装插件

npm install hexo-image-link --save

修改配置文档

打开根目录文件夹下的_config.yml，将post_asset_folder的值修改为true

修改Typora的偏好设置

在偏好设置左侧点击图像，将插入图片的设置修改如下
在这里插入图片描述

之后插入图片会自动保存到文件名/的目录里，发布后也可以正常显示。

如果你用的不是Typora，可以在md文件同目录下新建一个与md相同名字的文件夹，将想插入的图片放在文件夹内，使用相对路径引用图片，路径中的斜杠不能为反斜杠，必须用/

下载Typora，请移步Typora

Thunder Stone

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
4
评论
使用基于Hexo的matery主题搭建blog

基于Hexo的主页搭建文章目录基于Hexo的主页搭建0.前言1.安装环境安装git安装node.js安装Hexo2.部署到GitHub创建GitHub账号创建一个repository（仓库）配置git打开git bash，配置个人信息创建密钥添加GitHub密钥配置_config.yml发布到GitHub3.主题美化hexo-theme-matery主题下载hexo-theme-matery主题修改`_config.yml`配置文档，切换主题配置主题blog根目录下`_config.yml`修改建议新建分
复制链接

扫一扫