| |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
-> JavaScript知识库 -> 【开源博客】三个步骤学会Hexo快速生成精美博客! -> 正文阅读 |
|
[JavaScript知识库]【开源博客】三个步骤学会Hexo快速生成精美博客! |
下面是站点信息:py4ever开源站 它就是基于hexo来生成的,当然做了一些定制。 这次,学委会一步一步的指导大家建立一个博客站。 什么是hexo
hexo它也发行了基于NodeJS的cli库(命令行工具),在npm上面可以查找到,下面进入安装。 可以简单理解,它就是一个博客网站工厂,专门生成博客网站的, 但是需要安照它的方式。 下面学习hexo生成博客的步骤。 安装全局安装,把hexo命令添加到运行环境的PATH变量上,这样随处可用。
通常我们安装完一个库,马上就查看版本/或者查看帮助,确保安装正常
第一步 生成站点项目运行下面的命令创建博客项目:
该命令会快速的生成博客模版文件。 我们这里来看这个站点就是一个标准的NodeJS项目。 如下图,文件很多,重点是package.json,它复制管理项目的其他依赖工具库。 然后就是themes,这是博客的主题风格,也就是整体样式,布局方面的。就像音乐的中国风,R&B之类的,它限制了整首歌的曲调,对我们博客来说就是整个观感,整体的排版。 然后就是scaffolds:比较简单,就是创建分类/文章等的模板,可以修改的。 修改站点信息如下,我们把title先修改了: 还有其他细节操作,我们先生成站点。 第二步 生成站点网页预览站点之前需要先生成网站的页面,这里使用下面的命令
该命令帮我们把网站从md文件模版生成为html文件,可以看到项目目录内有一个public目录: 第三步 预览网站我们继续使用默认主题,运行下面的命令,先看修改后的网站效果。
运行效果如下: 同时,博客自带了一篇博客文章“Hello World”, 这是hexo默认生成的。 编辑博客页面我们打开博客文件夹内的source目录。它放置了站点的文章。 这里就很好弄了,它是一个markdown(MD)格式的文件。 小白可以简单理解,它一种文档风格规范。比如‘# ’ 开头表示一个大标题,一级标题。‘## ’ 开头表示二级标题。 下面修改一下:
我们可以根据需要修改文件内容,重新运行下面命令就能查看效果了
刷新刚刚的页面,我们看到博客内容变化了。 总结与延伸本文展示了一个博客站点的快速生成。 添加新博客,可以复制helloworld.md或者使用‘hexo new 博客名称’。 发布站点到网站简单来说可以复制public目录到服务器,渲染即可。但是Hexo提供了更高效的做法,我们下篇继续讲解。 下一篇,学委会具体介绍py4ever网站的技术搭建细节。 喜欢Python的朋友,请关注学习 十年老将带你做开源项目 or Python基础专栏 or Python入门到精通大专栏
|
|
JavaScript知识库 最新文章 |
ES6的相关知识点 |
react 函数式组件 & react其他一些总结 |
Vue基础超详细 |
前端JS也可以连点成线(Vue中运用 AntVG6) |
Vue事件处理的基本使用 |
Vue后台项目的记录 (一) |
前后端分离vue跨域,devServer配置proxy代理 |
TypeScript |
初识vuex |
vue项目安装包指令收集 |
|
上一篇文章 下一篇文章 查看所有文章 |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年12日历 | -2024/12/29 3:04:04- |
|
网站联系: qq:121756557 email:121756557@qq.com IT数码 |
数据统计 |