【开源博客】三个步骤学会Hexo快速生成精美博客!_直接把hexo生成的public文件夹做博客

最后

🍅 硬核资料:关注即可领取PPT模板、简历模板、行业经典书籍PDF。
🍅 技术互助:技术群大佬指点迷津,你的问题可能不是问题,求资源在群里喊一声。
🍅 面试题库:由技术群里的小伙伴们共同投稿,热乎的大厂面试真题,持续更新中。
🍅 知识体系:含编程语言、算法、大数据生态圈组件(Mysql、Hive、Spark、Flink)、数据仓库、Python、前端等等。

网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友,可以戳这里获取

一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!

hexo它也发行了基于NodeJS的cli库(命令行工具),在npm上面可以查找到,下面进入安装。

可以简单理解,它就是一个博客网站工厂,专门生成博客网站的, 但是需要安照它的方式。

下面学习hexo生成博客的步骤。

安装

全局安装,把hexo命令添加到运行环境的PATH变量上,这样随处可用。

npm install -g hexo-cli

通常我们安装完一个库,马上就查看版本/或者查看帮助,确保安装正常

hexo -v

在这里插入图片描述

第一步 生成站点项目

运行下面的命令创建博客项目:

hexo init

该命令会快速的生成博客模版文件。
在这里插入图片描述

我们这里来看这个站点就是一个标准的NodeJS项目。

如下图,文件很多,重点是package.json,它复制管理项目的其他依赖工具库。

然后就是themes,这是博客的主题风格,也就是整体样式,布局方面的。就像音乐的中国风,R&B之类的,它限制了整首歌的曲调,对我们博客来说就是整个观感,整体的排版。

然后就是scaffolds:比较简单,就是创建分类/文章等的模板,可以修改的。
在这里插入图片描述
关于这个NodeJS项目更多信息可以补充学习:雷学委之NodeJS爱好系列, 我们继续博客页面的编辑。

修改站点信息

如下,我们把title先修改了:
在这里插入图片描述

还有其他细节操作,我们先生成站点。

第二步 生成站点网页

预览站点之前需要先生成网站的页面,这里使用下面的命令

hexo generate #或者hexo g

该命令帮我们把网站从md文件模版生成为html文件,可以看到项目目录内有一个public目录:
在这里插入图片描述
这个就是最终博客网站会显示的html文件了,懂html的朋友都知道,这里所见即所得,你在html放什么文字颜色块,浏览器就相应的显示出来。

第三步 预览网站

我们继续使用默认主题,运行下面的命令,先看修改后的网站效果。

hexo server

运行效果如下:
在这里插入图片描述
我们可以打开浏览器查看:
在这里插入图片描述
hexo 工具启动了一个服务器,渲染了我们刚刚生成的博客站点,非常方便。

同时,博客自带了一篇博客文章“Hello World”, 这是hexo默认生成的。

编辑博客页面

我们打开博客文件夹内的source目录。它放置了站点的文章。

在这里插入图片描述

这里就很好弄了,它是一个markdown(MD)格式的文件。

小白可以简单理解,它一种文档风格规范。比如‘# ’ 开头表示一个大标题,一级标题。‘## ’ 开头表示二级标题。

下面修改一下:

在这里插入图片描述

在这里插入图片描述

感谢每一个认真阅读我文章的人,看着粉丝一路的上涨和关注,礼尚往来总是要有的:

① 2000多本Python电子书(主流和经典的书籍应该都有了)

② Python标准库资料(最全中文版)

③ 项目源码(四五十个有趣且经典的练手项目及源码)

④ Python基础入门、爬虫、web开发、大数据分析方面的视频(适合小白学习)

⑤ Python学习路线图(告别不入流的学习)

网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友,可以戳这里获取

一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!

  • 12
    点赞
  • 28
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值