Svekyll is a static site generator that combines the simple convention of Jekyll with the amazing power of Svelte. With Svekyll, you can easily apply themes with a single change to your config.yml file. Additionally, Svekyll supports Tailwind CSS and daisyUI. Extending these themes requires less work than using a CSS framework.
In this article, we’ll learn how to get started with Svekyll, Jekyll, and Svelte. We’ll also cover the best use cases for each, as well as some existing and upcoming features of Svekyll. Let’s get started!
To follow along with this article, you’ll need the following:
Jekyll is an open source static site generator that allows you to write your code in markdown and turn it into layouts. When you make a template with contents, you can run Jekyll, and you’ll get a whole site of individual static HTML pages. Afterward, you can upload the pages to any server of your choice, leaving your static website up and running.
To get a clearer understanding of Jekyll, let’s briefly review some of its use cases.
When a request is made from the client to your application’s server, usually, your server would have to communicate with the database to get a response from your application’s database.
However, with Jekyll, your server does not have to communicate with the database upon every request made, invariably leading to faster and more proficient delivery of pages to your application’s users.
As explained previously, the application’s server does not have to communicate with the database upon every request. Typically, in the case of a security breach in your application’s database, you could risk losing your data. However, with Jekyll, your app is more secure.
Jekyll is a cheap way of hosting websites. Because Jekyll lacks a database, it requires less maintenance, therefore saving the cost of maintenance fees. In addition, web applications built with Jekyll are hosted for free on GitHub pages.
Jekyll is blog-aware, meaning you can write your content in markdown.
Svelte is a JavaScript tool for building UI components like React, Angular, or Vue. However, unlike these libraries and frameworks, Svelte is a compiler that converts the declarative code into imperative code that works with the native browser API. As a result, you can get high-performance code in small packages.
Components are created in .svelte files, which consist of three main parts:
<style> for your CSS, which can also use a preprocessor like SASSIn a situation where you need a reactive state, you can define a variable with the let keyword, then reference it in the HTML file using braces [].
When it comes to cross-component communication, Svelte provides multiple strategies for sharing data between components. For more complex components, Svelte has a Context API, just like React.
Svelte also has stores that are like observables. You can share them anywhere in the components and subscribe to them in the template by putting a dollar sign in front of them.
Svekyll takes the power of Jekyll to make static sites and combines it with the power of Svelte for a great UI, giving you a powerful static site with a wonderful UI! Now, let’s check out some use cases for Svekyll.
Svekyll blogs are very responsive and fast; you can build a vanilla blog in less than five seconds. Let’s look at some of Svekyll’s use cases.
Svekyll uses Svelte for its static site UI, providing performance gains that come from a framework with no runtime. Therefore, interactive pages with a large number of DOM elements and user interactions are faster and responsive.
Svekyll has a simple learning curve that requires only basic knowledge of HTML, CSS, and JavaScript, as well as familiarity with Jekyll and Svelte.
Sites built with Svekyll are faster and have smaller bundle sizes, which work well with devices that have limited processing power and slower network connections.
Now that we’re familiar with Svekyll, let’s review some of its current and upcoming features.
YAML front matter is used for maintaining metadata for a page and its contents. You can customize any .md file using YAML front matter. Svekyll allows you to add YAML front matter inside your post, then use it inside your template as follows:
Learn more →___
Title: "YAML front matter"
description: "A simple way to include yfm"
published: true
my key: "some value"
___
Mykey: {my key}
The information inside the code block is front matter, which defines some basic information about the content stored in key-value pairs, while YAML is the default language for front matter in Svekyll.
Tailwind CSS is a utility-first CSS library for building custom user interfaces. Instead of defining classes like button, Tailwind CSS defines classes like display-flex.
Rather than defining a card, we define all the pieces that make up that card. This may seem stressful because there are so many classes to define, however, it will make it easier when you want to make changes and redefine classes in your code. Tailwind CSS takes out unused classes, working extraordinarily well with Svekyll.
To style Svekyll, add to the user.css file. Note that Svekyll’s styling and structure are contained in the Svekyll.css file. To avoid upstream merge conflicts, you shouldn’t change this file.
It’s not difficult to tweak individual classes in Tailwind CSS, making any future editing easy. Take a look at an example of Tailwind CSS in the code block below:
.sveyll-header {
@apply p-8
bg-green 300
border-green 600
hover: bg-red-600;
}
You can check the themes supported by Svekyll.
daisyUI is a Tailwind CSS component library for creating clean HTML with component classes and customizable themes. You can use Svekyll with Tailwind CSS component frameworks like daisyUI due to Svekyll’s out-of-the-box support for Tailwind CSS. Although you can use standard CSS with Svekyll, I highly recommend Tailwind CSS.
Webmention is a JSON feed and comment tool that you can embed in your blog. At the time of writing, Webmention is in alpha and not readily available for use. Webmention l display it however you want by customizing its styling. To use Webmention, you must add a site, but first, you must add your _config.yml.:
Site:logrocket.com
comments:
webmentions:
enabled:true
#feed:"https:// your url goes here....
Links:
link:https//githib.com/logrocket
text:"Github"
icon:'github'
You must have both comments with Webmention configured. You should also have a social network presence, like a Twitter or GitHub account, so that Webmentions can authenticate you.
Next, visit Webmentions.io, then enter the address of your webpage and authenticate. Now, you’ll login at birdy.gy to start a collection. Webmentions will provide comments made over social services and then provide you with a JSON feed.
ExtraStatic provides one of the fastest ways to manage your page on the internet. ExtraStatic offers first-class Svekyll hosting. ExtraStatic hosts only static blogs, and Svekyll has optimized its CI specifically for Svekyll. With ExtraStatic Svekyll hosting, changes are updated in less than ten seconds.
One feature that will be added to ExtraStatic is the option to collect Ethereum micro-payments, enabling you to easily receive Ethereum payments from your readers.
SEO, search engine optimization, increases your site’s visibility by improving your site’s ranking on search engines.
A major benefit of using a static website is that they are faster than dynamic websites. By default, Svekyll optimizes every post and page for SEO, helping your site rank higher than many dynamic websites. Each blog post is optimized according to the title and description found in the YAML front matter.
To customize the SEO, you’ll have to import the SEO store, then set the title and description you choose as follows:
<script>
import seo from '$lib/store';
$seo { tittle: "This is my title", description: "This is my description"}
</script>
Modifying the SEO provides you with all the benefits of single page static indexing in search engines.
In this article, we covered Svelte and Jekyll, learning how they are combined by Svekyll to produce amazing static websites. Although some of Svekyll’s features are unavailable at the time of writing, Svekyll is an amazing tool for building static sites that you should try out. Leave us a comment below and let us know what you think. I hope you enjoyed this article!
Install LogRocket via npm or script tag. LogRocket.init() must be called client-side, not
server-side
$ npm i --save logrocket
// Code:
import LogRocket from 'logrocket';
LogRocket.init('app/id');
// Add to your HTML:
<script src="https://cdn.lr-ingest.com/LogRocket.min.js"></script>
<script>window.LogRocket && window.LogRocket.init('app/id');</script>
Would you be interested in joining LogRocket's developer community?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up now
Compare Prisma and Drizzle ORMs to learn their differences, strengths, and weaknesses for data access and migrations.
It’s easy for devs to default to JavaScript to fix every problem. Let’s use the RoLP to find simpler alternatives with HTML and CSS.
Learn how to manage memory leaks in Rust, avoid unsafe behavior, and use tools like weak references to ensure efficient programs.
Bypass anti-bot measures in Node.js with curl-impersonate. Learn how it mimics browsers to overcome bot detection for web scraping.
