Fortune Ikechi Fortune Ikechi is a frontend engineer based in Rivers State, Nigeria. He is a student of the University of Port Harcourt. He is passionate about community and software engineering processes.

Getting started with Svekyll: Svelte and Jekyll hybrid

5 min read 1500

Svelte Jekyll Hybrid Svekyll

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!

Prerequisites

To follow along with this article, you’ll need the following:

  • Basic knowledge of HTML, CSS, and JavaScript
  • The terminal of your choice
  • A code editor

What is Jekyll?

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.

Jekyll use cases

To get a clearer understanding of Jekyll, let’s briefly review some of its use cases.

Faster delivery of pages

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.

Security

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.

Less maintenance and reduced cost

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.

Support for blogs

Jekyll is blog-aware, meaning you can write your content in markdown.

We made a custom demo for .
No really. Click here to check it out.

What is Svelte?

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:

  1. A script that contains your code written in JavaScript, which could also be written in TypeScript
  2. A style tag represented as <style> for your CSS, which can also use a preprocessor like SASS
  3. A template represented as HTML empowered with various kinds of syntax for writing declarative code

In 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 use cases

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.

Complex visualization

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.

Simple learning curve

Svekyll has a simple learning curve that requires only basic knowledge of HTML, CSS, and JavaScript, as well as familiarity with Jekyll and Svelte.

Faster sites

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.

Svekyll features

YAML front matter

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:

___
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.

Svekyll and Tailwind CSS

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

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

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 looks more like a normal comment/ session tool by default, but you can 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 hosting

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.

Search engine optimization

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.

Conclusion

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!

: Full visibility into your web and mobile apps

LogRocket is a frontend application monitoring solution that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.

In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page and mobile apps.

.
Fortune Ikechi Fortune Ikechi is a frontend engineer based in Rivers State, Nigeria. He is a student of the University of Port Harcourt. He is passionate about community and software engineering processes.

Leave a Reply