美文网首页
Hello Hexo!一款高效的个人博客框架

Hello Hexo!一款高效的个人博客框架

作者: cofbro | 来源:发表于2022-05-09 19:19 被阅读0次

一.前言

什么是Hexo?

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

现在网上大多数的博客系统其实都是别人的框架,比较流行的框架有WordPress, halo , hugo还有我们今天要讲的Hexo。

二.安装准备

  • 本文部分代码可能失效,具体以官网 | Hexo为准
    由于Hexo是基于Node.js的,因此我们需要先下载Node.js,另外只需要安装git工具就ok了。

1.安装Node.js

傻瓜式安装,一直next即可。如有疑惑请自行上网搜索,网上安装教程很全,相信大家不会在这耽搁太多时间。安装完成后我们任意位置单击鼠标右键会有一个Git Bash Here,点击后就会弹出git命令框了。
注意:若想要后面下载速度更快,请打开git输入以下命令

npm config set registry "https://registry.npm.taobao.org"

2.安装Git

上同。

三.Hexo安装

完成上述操作后即可开始安装Hexo。我们通过npm来安装hexo。桌面鼠标单机右键,打开Git Bash Here。

  • 键入以下命令:
$ npm install -g hexo-cli
  • 之后在指定路径新建文件夹(英文名),右键打开git命令框,输入指令:

踩坑点:千万要在你刚建好的文件夹中打开git命令框!

hexo init

到这里Hexo就彻底安装完毕了。我们可以看到刚刚的文件夹里面新增了很多文件以及文件夹:


文件夹概览

四.Hexo使用

1.自定义配置

打开_config.yml进行基础配置,比如修改你的博客的名字之类的,详情见官网 | Hexo

image.png

2.创建文章

a).先整体说一下各个文件是干嘛的

.
├── _config.yml  //这个是配置文件,用于修改文章数据的,点进去之后里面会有详细注解
├── package.json //应用程序信息,依赖的模块列表
├── scaffolds //包含三个文章模板,分别是draft,page,post。博客的定制修改会对模板进行修改。
├── source //我们写的文章文件夹就存在这里,包括我们的 Markdown 文稿,这里面一般也可以新建一个文件夹用来放一些我们博客中需要用到的图片
|   ├── _drafts //就是草稿
|   └── _posts //这就是存文章的文件夹
└── themes //用于修改Hexo主题的

b).我们进入根目录,就是你刚刚新建的文件夹的名字


输入以下命令:

$ hexo new [layout] <title>

也可以不设置 layout ,默认使用 _config.yml 中的 default_layout 参数代替(默认是post)。如果标题包含空格的话,请使用引号括起来。

$ hexo new "My First Post"

之后我们从根目录依次点击 source --> _posts --> My First Post.md 编辑文件。
进入之后他是长这样的:


--- 之间是front-matter,是我们每篇文章的一些变量,我们可以在这里单独进行设置,也可以在_config.yml中统一配置。而在---之外的地方就是我们写自己博客内容的位置了。需要注意要用MarkDown语法哦。
c).写完保存之后,在根目录再次打开git命令框输入
$ hexo clean
  • 每次运行前建议clean一下缓存,免得出现一些奇奇怪怪的问题

d).输入以下命令,生成静态网页文件

$ hexo g

e).最后,输入下列代码

$ hexo s

敲完回车后就在本地服务器上运行了,你的博客就可以在本地浏览了,方法:在浏览器url框中输入http://localhost:4000即可查看。

相关文章

网友评论

      本文标题:Hello Hexo!一款高效的个人博客框架

      本文链接:https://www.haomeiwen.com/subject/hxghurtx.html