Hexo 搭建个人博客
Hexo
1、hexo是什么?
Hexo是一个快速、简洁且高效的博客框架。可以把用户的markdown文件,按照指定的主题解析成静态网页。
作用:可以快递搭建个人博客。配置着github 可以免费搭建个人博客。
2、安装hexo
1、前提:安装使用hexo
之前需要先安装Node.js
。
node.js安装 https://blog.csdn.net/m0_47759019/article/details/121874564
# 查询node 版本
node -v
2、安装hexo
npm install -g hexo-cli
3、查看已安装好的版本
hexo version
我这里输出的版本是:hexo-cli: 4.3.0
3、创建项目
1、进到自己项目存放的位置,例如:D:/hexo
# 初始化项目 hexo-project项目名,可自行更换
hexo init hexo-project
# 进行项目内
cd hexo-project
# 更新依赖
npm install
新建完成后,查看项目目录下有:
.
├── _config.yml:博客的配置文件
├── package.json:相关依赖信息
├── scaffolds:文章模板
├── source
| └── _posts :默认创建文件存放位置
└── themes:主题
2、启动项目
# 生成静态文件,简写hexo g
hexo generate
# 启动项目,默认4000端口
hexo server
# 如果端口被占用,如果 -p 指定其它端口
hexo server -p 8080
访问
4、创建一篇新文章
4.1、添加文章
可以执行下面的命令创建一篇新文章
# 创建文件名为 使用hexo的第一天
hexo new 使用hexo的第一天
默认会在source\_posts
创建文件(这个默认位置可以修改)
4.2、文档格式
我们使用文件编辑器打开刚刚新建的文件,会发现其中已经存在内容:
---
title: 使用hexo的第一天
date: 2022-05-26 20:03:10
tags:
---
这些内容是干嘛的呢?事实上,他们就是用于设置 MarkDown 文档在被解析为静态网页文件时的相关配置,这些配置参数一般位于文件中最上方以 ---
分隔的区域。
其中,title
的值是当前文档名,也是将来在网页中显示的文章标题。
date
值是我们新建文档时的当地时区时间。
tags
值是文档的标签,我们可以随意赋值为文档贴标签。其用法如下:
---
title: 使用hexo的第一天
date: 2022-05-26 20:03:10
tags:
- hello
- hexo
- markdown
---
4.3、文章分类
categories
是用来给文章分类的,它跟 tags
不同的是其具有顺序性和层次性。
例如,我们写一篇关于 CSS3 动画的文章,我们可能会为其打标签 ”CSS3“、”动画“等,但是我们却会将其分在 CSS/CSS3 类别下,这个是有一定的相关性、顺序性和层次性。简单来说,categories
有点儿像新建文件夹对文档进行分门别类的归置。
categories
的用法同 tags
一样,只不过斗个 categories 值是分先后顺序的。
可以在文件内写内容, 用Markdown语法。
4.4、文章摘要
有的时候,主题模板配置的不够好的话,Hexo 最终生成的静态站点是不会自动生成文章摘要的。
所以,为了保险起见,我们也自己手动设置文章摘要,这样也方便避免自动生成的摘要不优雅的情况。
设置文章摘要,我们只需在想显示为摘要的内容之后添 <!-- more -->
即可。
在文章中使用 <!-- more -->
,那么 <!-- more -->
之前的文字将会被视为摘要。
被 <!-- more -->
截断前的文字,首页中将只出现这部分文字。
像下面这样:
---
title: 使用hexo的第一天
date: 2022-05-26 20:03:10
tags:
- hello
- hexo
- markdown
---
感觉还不错,挺好的
他的官网是:https://hexo.io/zh-cn/
<!-- more -->
感觉有很多主题,速度快,上手速度
写完之后,可以在页面刷新即可访问到。
创建文件,其实是从scaffolds
中的post.md
复制过来的。
模板内容可以自行修改。
4.2、添加草稿
除了直接添加文章之外,还可以添加草稿
hexo publish 创建一篇草稿
5、更换主题
5.1、自己创建一个主题
官方文档:https://hexo.io/zh-cn/docs/themes
创建 Hexo 主题非常容易,您只要在 themes
文件夹内,新增一个任意名称的文件夹,并修改 _config.yml
内的 theme
设定,即可切换主题。一个主题可能会有以下的结构:
.
├── _config.yml
├── languages
├── layout
├── scripts
└── source
5.2、使用别人上传的主题
这里推荐两个NexT 或者 butterfly
这里以 butterfly 为例,更换主题操作
官方指导文档:https://butterfly.js.org/posts/21cfbf15/
1、通过npm
加载依赖(也可以下载源码)
npm i hexo-theme-butterfly
2、更换主题
修改 Hexo 根目录下的 _config.yml,把主题改为butterfly
3、安裝插件
如果你没有 pug 以及 stylus 的渲染器,请下载安裝:
npm install hexo-renderer-pug hexo-renderer-stylus --save
6、插件
7、发布
发布有多个方式,这里主要讲两种方式:
1、将hexo部署到GITHUB/GITEE(免费搭建博客)
Hexo 部署到 Gitee(需要实名认证):https://blog.csdn.net/qq_38157825/article/details/112783631
2、编译后将静态文件放在自己服务器上
将\public目录的文件,放在服务器上即可。
8、扩展
Hexo 有趣功能盘点:https://blog.csdn.net/weixin_34405332/article/details/88704754
butterfly主题配置:https://blog.csdn.net/YR_112233/article/details/122778691
参考文章:https://blog.csdn.net/sinat_37781304/article/details/82729029
本文作者:黎华扬
本文链接:https://www.cnblogs.com/galenblog/p/16326249.html
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步