【开源博客】三个步骤学会Hexo快速生成精美博客!

简介: 最近学委跟小伙伴搞了一个py4ever 开源站点,使用的就是hexo。下面是站点信息:py4ever开源站

image.png

它就是基于hexo来生成的,当然做了一些定制。


这次,学委会一步一步的指导大家建立一个博客站。


什么是hexo

hexo 是一款博客生成工具,它基于Markdown语法的博客生成。


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


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


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


安装

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


npm install -g hexo-cli

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

hexo -v

image.png

第一步 生成站点项目

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

hexo init

该命令会快速的生成博客模版文件。

image.png

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


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


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


然后就是scaffolds:比较简单,就是创建分类/文章等的模板,可以修改的。


image.png

关于这个NodeJS项目更多信息可以补充学习:雷学委之NodeJS爱好系列, 我们继续博客页面的编辑。

修改站点信息

如下,我们把title先修改了:

image.png

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

第二步 生成站点网页

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

hexo generate #或者hexo g

该命令帮我们把网站从md文件模版生成为html文件,可以看到项目目录内有一个public目录:

image.png

这个就是最终博客网站会显示的html文件了,懂html的朋友都知道,这里所见即所得,你在html放什么文字颜色块,浏览器就相应的显示出来。

第三步 预览网站

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

hexo server

运行效果如下:

image.png

我们可以打开浏览器查看:

image.png

hexo 工具启动了一个服务器,渲染了我们刚刚生成的博客站点,非常方便。

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

编辑博客页面

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

image.png

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

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

下面修改一下:

image.png

  • 修改了title为:雷学委博客教程
  • 修改了二级标题为:Quick Start / 快速开始
  • 添加了一行文本: “第一行文本(from 学委)”

我们可以根据需要修改文件内容,重新运行下面命令就能查看效果了

hexo generate #或者hexo g
hexo server #或者hexo s

刷新刚刚的页面,我们看到博客内容变化了。

image.png

总结与延伸

本文展示了一个博客站点的快速生成。


添加新博客,可以复制helloworld.md或者使用‘hexo new 博客名称’。


发布站点到网站简单来说可以复制public目录到服务器,渲染即可。但是Hexo提供了更高效的做法,我们下篇继续讲解。


下一篇,学委会具体介绍py4ever网站的技术搭建细节。



目录
相关文章
|
网络安全 开发工具 git
从零开始搭建属于自己的hexo博客
整个搭建过程大概需要30分钟不到,请各位控制自己的时间~
138 0
|
Web App开发 域名解析 JavaScript
3分钟搭建个人Hexo博客
从账号的创建到一键部署,手把手教你零基础创建个人博客,后续可以继续根据网上的教程来修改代码对博客进行定制化的美化。
YI
|
JavaScript Shell Linux
Hexo博客搭建1
暑假在家学习时,突然感觉学过的知识忘记的很快,所以决定搭建个人博客来记录学习过程。经过前期了解后,决定采用Hexo框架来搭建个人博客。本文将记录博客搭建过程。
YI
100 0
YI
|
Shell
Hexo博客搭建3
之前的文章介绍了博客的本地搭建和线上部署。因为hexo的内置主题不够好看,所以我们可以选择加载其他主题来美化我们的博客页面。本文我将介绍基于hexo框架搭建的博客如何修改主题。
YI
75 0
YI
|
Shell 开发工具 数据安全/隐私保护
Hexo博客搭建2
上一篇介绍了博客的本地环境搭建,但这只能本地访问自己的博客。如果想让自己的博客被互联网上的其他人访问,我们还需要将博客项目进行线上部署。本文我将介绍将博客部署到github上的方法。
YI
71 0
|
JavaScript 搜索推荐 程序员
使用Hexo 搭建你的技术博客
使用Hexo 搭建你的技术博客
251 0
|
弹性计算 人工智能 大数据
我的博客网站初体验
利用博客网站编写和呈现新闻,融合多种媒介,综合性的呈现信息,既满足了当下人们的阅读习惯,也丰富了内容的呈现形式,让一个事件、一个故事变得更加立体、丰富。利用网站编写融合新闻将成为我创建云场景、构建云服务的起点,未来我会充分利用博文网站平台,结合自己的专业讲好生活中的好故事。另外,继续探索新的云服务领域,例如AI、编程、大数据等,文科生也可以“牛”起来。
|
JavaScript Shell Linux
使用Hexo搭建自己的博客
之前一直在用typecho来做自己的博客,因为他操作比较简单,但是前几日修改一些配置的时候,看着满屏的php代码实在有些头疼,在朋友的推荐下,我成功的入坑了hexo,下面分享一些自己搭建博客的过程,尽量让读者避开一些坑。
|
JavaScript 前端开发
VuePress 博客搭建系列 33 篇正式完结
本篇聊一聊我为什么会写这个系列,以及写作这个系列中的一些感悟。
387 0
VuePress 博客搭建系列 33 篇正式完结
|
JavaScript 开发工具 数据安全/隐私保护
hexo博客搭建
关于hexo类型博客的搭建流程