《博客框架 学习笔记 之 hexo》

最新推荐文章于 2024-02-02 12:46:20 发布
最新推荐文章于 2024-02-02 12:46:20 发布
阅读量707 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端 文章标签： hexo node.js Butterfly blog iconfont
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yk_ddm/article/details/119902268
本文详细介绍了如何使用Hexo搭建个人博客，包括安装、部署到GitHub、添加搜索功能、GitHubCorners插件和音乐播放器。涉及主题定制、图标设置、头像管理及常见问题解决方案。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目录

博客框架

个人博客 访问地址如下：

在这里插入图片描述

  • 常见的博客框架 ： hexo 、WordPress、VuePress、Hugo、Solo、Halo 、Typecho、…

博客主题

  • 常见的 博客主题 ：jekyll 、Fluid 、Butterfly、Matery、Akina、Muse、Mist、Pisces、Gemini、 Mirages、…

主题：NexT 、Yilia、Melody、mellow、、、、、、、

hexo 主题查找

hexo

  • 简介

Hexo 是一个基于Node.js的快速、简洁且高效的静态博客框架。Hexo 支持 Markdown 解析文章，在几秒内，即可利用靓丽的主题生成静态网页

hexo 默认主题： —> landscape

在这里插入图片描述

  • hexo 版本
    在这里插入图片描述

Hexo官网
Hexo中文网

安装hexo

  • 安装 hexo 的基础依赖 —> git 和 nodejs 的安装
    在这里插入图片描述

  • step1: 创建文件夹 personal_blog_yk-ddm, 进入此文件夹
    在这里插入图片描述

  • step2: 执行 npm 包管理命令 —> 安装 hexo-cli ( hexo 命令行界面)：cnpm install hexo-cli
    在这里插入图片描述
    在这里插入图片描述

  • step3: 查看 hexo 版本 ： hexo -v
    在这里插入图片描述

  • step4: 初始化 hexo : hexo init myblog
    在这里插入图片描述
    在这里插入图片描述

  • step5: 进入 myblog 文件夹中，开启服务 —> hexo server
    在这里插入图片描述

关闭服务 —> Ctrl + C

在这里插入图片描述

将 hexo 部署到 GitHub
  • 修改配置文件 _config.yml
    在这里插入图片描述
  • 安装deploy-git : npm install hexo-deployer-git --save
    在这里插入图片描述

执行 hexo clean ----> 清空
执行 hexo generate -----> 生成静态文章
执行 hexo deploy ------> 部署发布至 github

在这里插入图片描述

  • 查看效果
    在这里插入图片描述
    在这里插入图片描述
为 hexo 个人博客添加站内搜索

先安装插件 cnpm install hexo-generator-search --save

在这里插入图片描述

执行 cnpm install hexo-generator-searchdb --save

在这里插入图片描述

修改项目的配置文件 _config.yml

# 添加如下内容：
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

在这里插入图片描述

编辑主题文件夹的 _config.yml 配置文件，设置 Local search 的 enable 为 ture

在这里插入图片描述

为 个人博客添加 GitHub Corners

GitHub Corners 地址

在这里插入图片描述

编辑代码如下

在这里插入图片描述
在这里插入图片描述

效果展示

在这里插入图片描述

Butterfly 添加全局吸底Aplayer ( 音乐播放器 )

Butterfly添加全局吸底Aplayer教程

前往 aplayer 官网

插件安装

cnpm install hexo-abbrlink --save : 博客链接永久化

在这里插入图片描述

npm install hexo-generator-search --save ----> 搜索插件安装

在这里插入图片描述

npm i hexo-generator-feed -----> 订阅插件 RSS 安装

在这里插入图片描述

使用 iconfont 图标

step1: 从 阿里图标 官网 下载 iconfont.css 文件

step2: 将 iconfont.css 文件复制到 hexo 主题theme/source/css/ 中

在这里插入图片描述

在主题的配置文件中进行如下配置，引入刚刚存入的 css 文件

在这里插入图片描述

设置完毕，即可使用 iconfont icon-csdn1: https://blog.csdn.net/yk_ddm || CSDN

在这里插入图片描述

测试查看效果

在这里插入图片描述

设置 avatar 头像
  • 在 主题的 _config.yml 中配置
    在这里插入图片描述
草稿 draft 的使用
  • hexo new draft draft-test01
    在这里插入图片描述
  • 将 草稿文章发布到 post 中 ：hexo publish draft newspapername , 系统会自动删除 _drafts 中对应的草稿文章
    在这里插入图片描述
常见操作

语言修改; 配置文件 _config.yml; 默认语言是 en
主题支持三种语言: default(en)、zh-CN (简体中文)、zh-TW (繁体中文)

Front-matter 即 文章开头部分（-----）

在这里插入图片描述

Butterfly 主题的使用

在这里插入图片描述

书写文章：hexo new newspapername， 注意事项 —> 文章名称不要包含空格，否则会出现文件名称不对应的情况（例如：我使用 hexo new post 《博客框架 学习笔记 之 hexo》最后得到的Markdown文件名称却为 hexo》）

hexo new [layout] ----> layout 布局方式，默认 post 布局

layout 布局方式：post 、page 、draft

在这里插入图片描述

_config.yml : 作为 hexo框架 的配置文件

配置文章的 永久链接 格式，方法如下：第一步，在 _config.yml 配置文件中修改 permalink 的值；第二步，在自定义文章开头书写 category 文章类别

在这里插入图片描述
在这里插入图片描述

  • 查看效果
    在这里插入图片描述
  • layout 中 page 的使用
    在这里插入图片描述
遇到的问题

{ err: TypeError: line.matchAll is not a function
在这里插入图片描述

  • 分析原因：是 node 版本问题, node 12.0.0 以上就没有此问题
    在这里插入图片描述

  • 解决： 尝试 将 _config.yml文件 修改一下
    在这里插入图片描述
    在这里插入图片描述

  • 浏览器运行查看
    在这里插入图片描述

  • problem Two:
    在这里插入图片描述

  • 分析原因： 是没有正确安装 hexo-deployer-git
    在这里插入图片描述

  • problem Three
    在这里插入图片描述

  • 分析原因： 权限问题，我之后采用 ssh 方式之后，解决问题
    在这里插入图片描述
    在这里插入图片描述

  • problem fourth : TypeError: Cannot read property 'enable' of undefined
    在这里插入图片描述

  • 分析原因： …

  • problem
    在这里插入图片描述

  • 分析原因： 需要 下载包 hexo-renderer-jade hexo-generator-feed hexo-generator-sitemap hexo-browsersync hexo-generator-archive

执行 cnpm install --save hexo-renderer-jade hexo-generator-feed hexo-generator-sitemap hexo-browsersync hexo-generator-archive

theme: butterfly

在这里插入图片描述

在这里插入图片描述

个人博客网站html源码_30分钟搭建一个自己的个人博客网站
weixin_39535283的博客
11-29 9020
前言目前市场上比较火的一些博客框架：Hexo、Solo、Halo 、jekyll 、gohugo、VuePress、wordpress等等 ，这些都是开源的静态博客框架(没有登录注册，后台管理等等)好处就是能够非常快速的搭建好自己的个人博客(也是要一定前端知识的)，也是因为我之前的blog网站实在没票子继续维护服务器了~~  我这里就使用 Hexo 框架搭建了，因为 Hexo 要求的...
丢掉烂大街的Hexo吧，用Vuepress搭建专属你的博客吧
doMyselfZy越努力、越幸运
07-11 1822
一、先来聊聊搭建博客 1.1. 什么人喜欢折腾博客 通常如果不是爱折腾或者有特别需求的普通人，一般对于搭建博客的需求其实不大，通常主要一下几类人会搭建博客自己玩玩。 程序员 (喜欢写一些技术博客，分享一些问题) 设计工作者 (需要一个平台暂时自己，通常的网站满足不了他们) 技术爱好者 (不一定是干IT的，但是希望搞一个博客交流的) 文艺青年 (喜欢写写文章分享给大家的) 极客 (喜欢追求极致，...
Hexo 个人博客搭建完整版笔记
pitt1997的博客
07-10 2129
Hexo 个人博客搭建完整版笔记
Hexo Hugo Vuepress Gatsby，各种静态网站生成器应该如何选择？
生化环材
06-07 4307
静态网站生成器有哪些 静态网站相比对是动态网站，而动态网站则不用说了，目前互联网各大平台可以说都是属于动态网站类型。用户基数大，总是要考虑运营的，而用户运营是运营必不可少的一环节。 静态网站的交互性过于薄弱，因此不适合构建大型网站。更适合官方文档，企业网站，或者喜欢“极客”风的个人博客用户。而优点则是安全性好，加载速度快，有多大流量就能撑起多少用户。 因事先生成好html相关文件，所以不用担心数据查询等问题导致的性能瓶颈。要事先生成好这些html页面文件，就得有静态网站生成器（Static site gen
VuePress 完整使用教程
Jumbo
11-06 4412
官网 官网地址：https://vuepress.vuejs.org/zh/ 环境 1.node hexo 基于 node，所以首先要安装node环境 2.npm 包管理工具 环境配置请参考本站对应安装教程 快速开始 创建并进入一个新目录 mkdir vuepress-starter && cd vuepress-starter 使用你喜欢的包管理器进行初始化 yarn init # npm init 将 VuePress 安装为本地依赖 我们已经不再推荐全局安装 V.
Hexo+Github博客搭建教程
热门推荐
分享思想，留下痕迹。
05-08 3万+
注意，这篇文章篇幅较长，主要针对新手，每一步很详细，所以可能会显得比较啰嗦，所以建议基础比较好小伙伴根据目录选择自己感兴趣的部分跳着看，不要文章没看，上来先喷一下！谢谢*[Math Processing Error]⊙o⊙*。 教程内容随意复制使用，引用的话请加一个参考链接，谢谢！去年在博客园注册了自己的第一个博客，当时初衷就是想拿来作为自己的在线笔记本，做做学习记录，分享一些学到的东西，使用第三方提供的博客服务其实也挺方便，现在市面上提供类似服务的博客网站也很多，如CSDN，博客园，简书等平台，可以直接在
搭建个人博客学习笔记--hexo
Tangweijie_的博客
09-22 164
项目1:本地部署hexo — #安装Nodejs node -v #查看node版本 npm -v #查看npm版本 npm install -g cnpm --registry=http://registry.npm.taobao.org #全局（-g）安装淘宝的cnpm 管理器 cnpm -v #查看cnpm版本 cnpm install -g hexo-cli #安装hexo框架 hexo -v #查看hexo版本 mkdir blog #创建blog目录 cd blog #进入blog目..
Hexo博客搭建与Mybatis学习笔记分享
作者的博客就是建立在Hexo框架之上，这表明了Hexo在个人站长群体中的流行度和易用性。 知识点二：Mybatis学习笔记 Mybatis是一个流行的Java持久层框架，它提供了数据库操作的接口和映射，让开发者可以更专注于业务...
Hexo + GitHub搭建个人博客（Mac版）
最新发布
yijing_jia的博客
02-02 2638
基于Hexo+GitHub在Mac系统进行了博客搭建，将搭建过程进行了完整记录，并添加了建站过程中遇到的问题及解决方法。
使用Hexo免费搭建个人博客教程
csdnxia的博客
10-18 3880
前言 现在各种互联网博客非常的，常见的如CSDN、简书、掘金、博客园等平台，这些博客平台做的都很好，可以直接在上面注册自己的账号写文章，发表的文章在百度、Bing等搜索引擎上也能收到，但缺点是受于平台的各种限制，个人定制化不自由，而且大多数平台都会有各种广告。 于是想到自己搭建一个博客网站，但对大多数人而言，自己购买服务器和域名来搭建博客成本实在太高的了，而且有点浪费，还需要定期维护，这时一种不错的选择就是使用第三方开源托管平台（GitHub、GitLab等）来当作我们的服务器，并使用快速简洁的博客搭建框架
Hexo框架Ayer主题搭建我的博客
weixin_44546855的博客
11-15 794
关于Hexo ayer主题搭建Blog使用的框架、插件下面页面展示 我的博客链接: RainのBlog. 使用的框架、插件 Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。 Ayer Ayer 是一个干净且优雅的 Hexo 主题，自带响应式，加载速度很快。——Ayer 在马来语中是“水”的意思，在西班牙语中是“昨天”的意思。 Valine 一款快速、简洁且高效的无后端评论系统。 hexo-helper
Tranquilpeak主题：Hexo博客框架的响应式设计
### Hexo博客框架与Tranquilpeak主题概述 Hexo是一个快速、简洁且强大的博客框架，它允许用户将本地文档快速转换成静态网站。Hexo使用Markdown（或其他渲染引擎）解析文章内容，并通过Node.js提供支持，可以方便地...
七大开源blog框架介绍
遇见0和1的博客
08-06 3万+
前言   由于前面一期介绍Hexo搭建个人blog时，一时吹牛皮说了好几种博客框架，最后却只介绍了Hexo（我这张臭 嘴），有小伙伴在公众号询问到了其他的blog框架，由于我个人能力有限，这期就简单介绍下其他几个吧！ Hexo、WordPress、VuePress、Hugo、Solo、Halo 、Jekyll   开始前，先看下目前Gitee Pages 服务支持的有那几个？（又不想自己租服务器，不想掏钱买域名的白嫖党乐 趣）如下，目前支持 Jekyll、Hugo、Hexo 这三个静态框架。开始前再分享一下
使用hexo搭建本地网站（管理论文阅读笔记）（及hexo异常处理）
the Blog of 等不到天亮丶等时光
12-07 2100
读的论文以及做的相应笔记一多，发现很多之前读的又有些忘了，且之前论文及相关笔记又较难找到...虽然有Mendelay、Zotero这样的文献管理工具，但是感觉这些都不适用于论文阅读笔记的管理，所以想在本地搭建一个网站来管理自己的阅读笔记，方便检索、复习等操作。
《Parcel打包工具的使用》
yk_ddm的博客
09-24 4655
目录Parcel 学习笔记Parcel 初始化Parcel 安装Parcel 入口文件构建效果图： Parcel 学习笔记 Parcel是一款零配置的打包工具; 打包速度快; 内部使用多线程打包; 可以快速构建前端应用程序; Parcel 初始化 npm init Parcel 安装 npm i parcel-bundler -D Parcel 入口文件 HTML <!DOCTYPE html> <html lang="zh-cn"> <head>
Element-UI 前端UI 组件库
yk_ddm的博客
03-19 3345
Element-UI 前端UI 组件库 Element-UI 前端UI 组件库
《软件需求分析 复习 的参考资料》
yk_ddm的博客
04-02 2615
软件需求分析 复习 的参考资料 内容如下： 一、选择类 1、UML 的 （ B ）模型图由类图、对象图、包图、构件图和配置图组成。 A. 用例 B. 静态 C. 动态 D. 系统 2、UML的 （ C ）模型图由活动图、顺序图、状态图和合作图组成。 A. 用例 B. 静态 C. 动态 D.系统 3、UML的最终产物就是最后提交的可执行的软件系统和（　D　）。 　A．用户手册　　Ｂ.类图　　Ｃ.动态图　　　Ｄ.相应的软件文档资料 4、在UML的需求分析建模
《VS Code 开发工具使用 学习笔记》
yk_ddm的博客
08-04 2018
目录VS Code开发工具详细使用开启面包屑（Breadcrumb）导航 VS Code 开发工具 详细使用 开启面包屑（Breadcrumb）导航 todo
HTML/CSS/JS相关知识集锦
yk_ddm的博客
10-24 1552
前端 前端是从网页制作进化而来的一种叫法。 早期是网页制作，现在叫大前端。 早期是开发网页，现在随着NodeJs的兴起，前端职责范围变大（大前端） pc端开发（网页开发，app开发（电脑上的软件）） 移动端开发（移动端网页开发，移动端APP开发） 移动端APP开发：1）原生app开发 2）webapp(h5开发) 3）混合app(qq,微信。。。) 3）微信小程序、抖音小程序、支付宝小程序、百度小程序等等 HTML css js 浏览器 浏览器 内核 IE Trident FireFox
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值