SEO with Jekyll and Siteleaf

SEO (Search Engine Optimization) helps your website stand a chance of appearing in search engine results and get people organically discovering your site.

Here are our top tips to consider when optomizing your Siteleaf site’s SEO:


Sitemaps can help search engines find information and content on your site, especially if your website is particularly big. Sitemaps can be generated with a whitelisted Jekyll plugin jekyll-sitemap.

To enable the jekyll-sitemap plugin add the following to your site’s Gemfile:

gem 'jekyll-sitemap'

And run bundle. Then add this to your site’s _config.yml file:

url: "http://example.com" # the hostname & protocol for site
   - jekyll-sitemap

Save, publish, and you’re done! This will automatically create a /sitemap.xml for you.

Read more

Add SSL to your site for free

Add SSL to your site free

Is your website encrypted?

Back in 2014, Google announced it would begin using HTTPS encryption as search ranking signal. If you are still serving your site over basic HTTP in 2017, you may be missing a key part in your SEO strategy.

The good news? It’s never been easier to jump aboard the HTTPS train and secure your traffic.

HTTPS (also known as HTTP over TLS, or Transport Layer Security) uses SSL/TLS certificates to identify your website and encrypt data in transit to your website’s visitors.

Google will be pushing further with the release of Chrome 56 later this month, announcing it will mark all non-HTTPS pages containing password and credit card input fields as “Not Secure”. Eventually, Chrome plans to show a Not Secure warning for all pages served over HTTP, regardless of whether or not the page contains sensitive input fields. Here’s what visitors will see in the new version:

Treatment of HTTP pages with password or credit card form fields in Chrome 56

There are several ways obtain an SSL certificate for your site — many of them are completely free, and only take a few minutes to set up. Since Siteleaf supports publishing to any web host, you can choose the option that best fits your needs.

We’ll review our favorites in this blog post, starting with CloudFront (which we use ourselves for this blog).

Read more

Jekyll environments

When working with Jekyll and Siteleaf, you typically have 3 distinct environments to help you code, preview, and publish your site:

  1. development - this is your local machine where theme development takes place. Run jekyll serve and your site will be accessible at http://localhost:4000.

  2. staging - sites on paid plans come with preview functionality. Hit the “Generate preview” button in Siteleaf, and your site will be built with a unique URL without affecting your live site. This URL is shareable, so you can send it to colleagues outside of Siteleaf for feedback or proofreading.

  3. production - where your final website is generated and hosted. This could be GitHub Pages, Amazon S3, Rackspace Cloud Files, or any host that supports (S)FTP (DigitalOcean, MediaTemple, etc).

Starting today, Siteleaf will now set the {{ jekyll.environment }} variable to one of the environments above (previously both preview and publish used production).

Read more

Footnotes & Highlights

In addition to the Markdown basics, Siteleaf supports some advanced syntax to make formatting your content easier. Here is a sentence showing off a highlight and also a footnote1.

Footnotes are great for citing and referencing sources, or for expanding on ideas. They are created like this:

A cool sentence[^1].

[^1]: A cool footnote.
  1. This is a footnote in Siteleaf! 

Read more

Quick tip: Assets in meta fields

This post refers to a legacy version of Siteleaf.

Siteleaf makes it easy to assign assets in your metadata fields, just drag and drop (as shown above).

Now in your theme, you can easily link to your asset:

<a href="{{ meta['project_link'] }}">
  {{ meta['project_link_title'] }}

This is a great way to reference special assets like featured images or PDF downloads.

To learn more about metadata see our tutorial Metadata in Siteleaf.

Using Markdown in metadata

This post refers to a legacy version of Siteleaf.

In previous posts, we talked about using Markdown for text formatting and Metadata for extending your content in Siteleaf.

Markdown makes it easy to add links and *emphasis* to your content without having to write HTML. While your body content uses Markdown by default, you can also apply this easy-to-use formatting to your metadata.

Read more