开源Jekyll助您构建你的网站

news/2024/5/11 20:59:57/文章来源:https://blog.csdn.net/yaxuan88521/article/details/120859995
Jekyll 是一个开源的静态网站生成器。你可以使用 Markdown 编写内容,使用 HTML/CSS 来构建和展示,Jekyll 会将其编译为静态的 HTML。

开源Jekyll助您构建你的网站开源Jekyll助您构建你的网站

Jekyll 是一个开源的静态网站生成器。你可以使用 Markdown 编写内容,使用 HTML/CSS 来构建和展示,Jekyll 会将其编译为静态的 HTML。

近年来开始流行静态网站生成器和 JAMStack,而且理由很充分,它们不需要复杂的后端,只需要静态的 HTML、CSS 和 Javascript。没有后端意味着更好的安全性、更低的运营开销和更便宜的托管。双赢!

在本文中,我将讨论 Jekyll。在撰写本文时,我的个人网站使用的是 Jekyll。Jekyll 使用 Ruby 引擎将用 Markdown 编写的文章转换成 HTML。Sass 可以将复杂的 CSS 规则应用到普通文本文件中。Liquid 允许对静态内容进行编程控制。

安装 Jekyll

Jekyll 网站 提供了 Linux、MacOS 和 Windows 安装说明。安装完成之后,快速引导 将会安装一个基础的 Hello-World 项目。

现在在你的浏览器访问 http://localhost:4000,你可以看到你的默认“真棒”博客。

开源Jekyll助您构建你的网站开源Jekyll助您构建你的网站

目录结构

这个默认站点包含以下的文件和文件夹:

  • _posts: 你的博客文章。
  • _site: 最终编译成的静态网站文件。
  • about.markdown: “关于页”的内容。
  • index.markdown: “主页”的内容。
  • 404.html: “404 页”的内容。
  • _config.yml: Jekyll 的全站配置文件。

创建新的博客帖子

创建帖子很简单。你需要做的就是在 _post 目录下使用正确的格式和扩展名创建一个新文件,这样就完成了。

有效的文件名像 2021-08-29-welcome-to-jekyll.markdown 这样。一个博客文件必须包含 Jekyll 所谓的 YAML 卷首块Front Matter。它是文件开头的一个包含元数据的特殊部分。如果你查看默认的帖子,你可以看到以下内容:

---
layout: post
title: "Welcome to Jekyll!"
date:  2021-08-29 11:28:12 +0530
categories: jekyll update
---

Jekyll 会使用上面的元数据,你也可以自定义 key: value 键值对。如果你需要一些提示,请查看我的网站的卷首。除了前面的问题,你还可以 使用内置的 Jekyll 变量 来自定义你的网站。

让我们创建一个新的帖子。在 _posts 文件夹下创建 2021-08-29-ayushsharma.markdown。内容如下:

---
layout: post
title:  "Check out ayushsharma.in!"
date:   2021-08-29 12:00:00 +0530
categories: mycategory
---
This is my first post.# This is a heading.## This is another heading.This is a [link]()This is my category:

如果 jekyll serve 命令仍在运行,刷新页面,你将看到下面的新帖子。

开源Jekyll助您构建你的网站开源Jekyll助您构建你的网站

恭喜你创建了你的第一篇帖子!这个过程看起来很简单,但是你可以通过 Jekyll 做很多事情。使用简单的 Markdown,你可以归档博客、高亮显示代码片段以及分类管理帖子。

草稿

如果你还没准备好发布你的内容,你可以创建一个 _drafts 文件夹。此文件夹中的 Markdown 文件仅通过传递 --drafts-- 参数来呈现。

布局和包含

请注意 _post 文件夹中两篇文章的卷首块,你将在其中看到 layout: post。_layout 文件夹中包含所有布局。你不会在源代码中找到它们,因为 Jekyll 默认加载它们。Jekyll 使用的默认源代码在 这里。如果你点击该链接,你可以看到 post 的布局使用了默认(default)布局。默认布局包含的代码 {{ content }} 是注入内容的地方。布局文件还将包含 include 指令。它们从 include 文件夹 加载文件,并使用不同的组件组成页面。

总的来说,这就是布局的工作方式:你在卷首块定义它们并将你的内容注入其中。而包含则提供了页面的其它部分以组成整个页面。这是一种标准的网页设计技术:定义页眉、页脚、旁白和内容元素,然后在其中注入内容。这就是静态站点生成器的真正威力,完全以编程的方式控制,将你的网站组装起来并最终编译成静态的 HTML。

页面

你网站上的所有内容并不都是文章或博客。你需要“关于”页面、“联系”页面、“项目”页面或“作品”页面。这就是“页面”的用武之地。它们的工作方式与“帖子”完全一样,这意味着它们是带有卷首块的 Markdown 文件。但它们不会放到 _posts 目录。它们要么保留在你的项目根目录中,要么保留在它们自己的文件夹中。对于布局和包含,你可以使用与帖子相同的布局或创建新帖子。 Jekyll 非常灵活,你可以随心所欲地发挥你的创意!你的默认博客已经有 index.markdown 和 about.markdown。请随意自定义它们。

数据文件

数据文件位于 _data 目录中,可以是 .yml、.json、.csv 等格式的文件。例如,一个 _data/members.yml 文件可能包含:

- name: Agithub: a@a- name: Bgithub: b@b- name: Cgithub: c@c

Jekyll 在网站生成的时候读取这些内容。你可以通过 site.data.members 访问它们。

 
  • { % for member in site.data.members % }
  • { { member.name } } 
  • { % endfor %}

永久链接

你的 _config.yml 文件定义了永久链接的格式。你可以使用各种默认变量来组合你自己的自定义永久链接。

构建你最终的网站

命令 jekyll serve 非常适合本地测试。但是一旦你完成了本地测试,你将需要构建要发布的最终工作。命令 jekyll build --source source_dir --destination destination_dir 将你的网站构建到 _site 文件夹中。请注意,此文件夹在每次构建之前都会被清理,所以不要将重要的东西放在那里。生成内容后,你可以将其托管在你的静态托管服务上。

你现在应该对 Jekyll 的功能以及主要部分的功能有一个全面的了解。如果你正在寻找灵感,官方 JAMStack 网站上有一些很棒的例子。

开源Jekyll助您构建你的网站开源Jekyll助您构建你的网站

编码快乐。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_700967.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

用WWWGrep来检查你的网站元素安全

WWWGrep是一款针对HTML安全的工具,该工具基于快速搜索“grepping”机制实现其功能,并且可以按照类型检查HTML元素,并允许执行单个、多个或递归搜索。 关于WWWGrep WWWGrep是一款针对HTML安全的工具,该工具基于快速搜索“grepping…

免费下载高质量素材资源的28个网站推荐

Web设计人员经常会去网上搜罗各种各样的素材,这些免费素材不仅能帮助他们节省大量的时间,还能有很好的效果。如今,网络上有很多很多有才华的设计师分享它们的劳动成果,让更多的人可以使用他们的创意设计,谢谢他们。今天…

网站性能优化的常用方法

网站性能的优化是一件大事。它涉及多个方面需要照顾,其中许多取决于网站本身、其复杂性和元素。但是,还有一些适用于任何站点的常用优化方法。集成 CDN 内容交付网络(又名 CDN)是一个非常棒的工具,可以集成到你的网站中,因为它可…

刷了几千道算法题,我私藏的刷题网站都在这里了

作者 | Rocky0429 来源 | Python空间(ID: Devtogether)遥想当年,机缘巧合入了 ACM 的坑,周边巨擘林立,从此过上了"天天被虐似死狗"的生活...然而我是谁,我可是死狗中的战斗鸡,智力不够…

深度学习会议论文不好找?这个ConfTube网站全都有

BDTC大会官网:https://t.csdnimg.cn/q4TY作者 | 刘畅 出品 | AI科技大本营(ID:rgznai1000)最近跟身边的硕士生、博士生聊天,发现有一个共同话题,大家都想要知道哪款产品能防止掉头发?养发育发已经成了茶余饭…

不到顶会现场也能听论文讲解?这个视频集合网站值得收藏

BDTC大会官网:https://t.csdnimg.cn/q4TY作者 | 刘畅出品 | AI科技大本营(ID:rgznai1000)最近跟身边的硕士生、博士生聊天,发现有一个共同话题,大家都想要知道哪款产品能防止掉头发?养发育发已经成了茶余饭…

Nginx搭建静态网站

2019独角兽企业重金招聘Python工程师标准>>> 搭建Http静态服务器环境 搭建静态网站,首先需要部署环境。下面的步骤,将告诉大家如何在服务器上通过 Nginx 部署 HTTP 静态服务。 安装 Nginx 在 CentOS 上,可直接使用 yum 来安装 Ngi…

aes离线解密工具_CTF常用工具、网站、练习平台

常用工具网站CTFtools 比较全的工具下载网站,提供百度云链接BUUCTF 比较全的工具下载网站,提供百度云链接XSS 之旅 xss 攻击练习网站,闯关式设计,难度递增tooleyes 在线工具库,一些编码和算法之类的都有千千秀字常用密…

真爱!微软宣布新开源网站,由 Jekyll 一键生成,代码所见即所得

来源 | Microsoft编辑 | 小匀转自 | 新智元近日,微软上线了一个新的开源网站。这不是微软唯一的开源网站,但却代表了新的起点。网友表示:这次真的拥抱开源了!从「恨」到「爱」,微软与开源有着一段长达30年的故事。微软…

怎样监测微型的网站服务

最终我意识到,我所要写的任何服务器的风险都很低,如果它们偶尔宕机 2 小时也没什么大不了的,我只需设置一些非常简单的监控来帮助它们保持运行。 你好! 我最近又开始运行一些服务器(​​nginx playground​​​、​​mess with dn…

关于mouseenter、mouseover、mouseout、mouseleave的理解

先说结论:enter、leave是元素区域上的进入和离开,over、out是逻辑上的进入和离开。 enter和leave只在离开元素区域时触发,比如下面这个子元素在父元素的区域中,那么进入、离开子元素是不会触发的,因为子元素在父元素的…

php网站首页点击更多时获取数据,jQuery+PHP实现点击按钮加载更多,不刷新页面加载更多数据!附:可用源码+demo...

先上效果:刚打开页面的时候,只显示部分数据,点击加载更多的时候,就会加载我们预先定义的加载数量显示出来!当数据库里面的所有数据都显示出来,就提示全部加载了!新建index.phpjQueryphp实现点击…

整理一周的Python资料,包含各阶段所需网站、项目,2020燥起来!

回复“pythonpdf“,立刻领取100本全品类Python电子书不知怎么的,最近不少关注我的读者都开始私信我怎么学好python?零基础转行是不是合适,还有希望吗?今年30了,还能不能转IT?其实关于零基础转型…

深度学习三巨头也成了大眼萌,这个一键转换动画电影形象的网站竟因「太火」而下线...

机器之心报道作者:魔王、杜伟想不想在动画电影中拥有自己的角色?这个网站一键满足你的需求,不过竟因流量太大成本过高而下线。近期热映的电影《花木兰》总是让人回想起 1998 年上映的同名动画电影。说起来,动漫真人化或动画版翻拍…

网站位置服务器,如何查看网站的服务器位置

如何查看网站的服务器位置 内容精选换一换华为云主机迁移服务帮助中心,为用户提供产品简介、快速入门、用户指南、API参考、最佳实践、常见问题、视频帮助等技术文档,帮助您快速上手使用主机迁移服务。用户云服务器基本网络功能异常,无法完成…

网络安全系列之七 网站提权

上传了webshell之后,我们的目的是获取服务器的系统管理员权限,这也是黑客入侵的最终目的。 “H4ck Door”是一个很牛的大马,提供了很多功能,我比较喜欢的是执行cmd命令来提权。 首先执行“net user”命令查看服务器有哪些用户&…

vue论坛网站的文章自动排版_基于 VuePress 定制个人博客网站

VuePress简单来说,VuePress 是 Vue 驱动的静态网站生成器。VuePress 简单易上手,同时也有足够强大的定制能力,尤其对熟悉 Vue 的前端开发人员而言。相比于知名的博客生成器 Hexo 来说,VuePress 最大优势就是 Vue 带来的灵活性。在…

想自己搭建服务器,永久运行网站?一个U盘大小的树莓派就够了!

点击上方“方志朋”,选择“设为星标”回复”666“获取新整理的面试资料作者:彭小呆来源:https://urlify.cn/nqaQVfNo.1前言由于本人在这段时候,看到了一个叫做树莓派的东东,初步了解之后觉得很有意思,于是想…

HTML 5中SEO可以用那些代码来做优化

头部代码 1、标题标签(title标签) 在HTML5中标题标签依然存在,其仍然具有不可替代的作用;不过我们看到还有更多的可供搜索引擎识别的代码,我们将改代码的等级微降。 2、元标签(meta标签) 字符集编码声明标签 该标签原本就是搜索引擎必看且首先要看的标签…

只需1分钟,这个网站用AI分离歌曲的人声、伴奏和乐器声

整理 | Just出品 | AI科技大本营(ID:rgznai100)疫情期间,在家待着闲来无事,一些技术人员就喜欢以技术的方式找点乐子,顺带赚钱最好了。将歌曲中的人声和乐器声分离是一件让想使用音乐伴奏的人头疼的事情,传…