Tip

As websites and blogs continue to grow, so can the amount of user-uploaded content like images and videos — especially when your site has multiple team members and writers. Over time, it can be tricky to figure out what’s actually used and what’s just collecting dust.

We recently helped a customer clean up 5 gigabytes(!!) of unused assets, and you might be surprised how much digital clutter is lurking on your site too.

Let’s dive in and see how much data you can free from your Jekyll website (and speed up build time while you’re at it!).

TL;DR You can now use the official Siteleaf Ruby gem to check for unused uploads by running: siteleaf clean. Skip to the end of this post to learn more.

Forestry.io, a fellow static site CMS, has announced it will be shutting down on April 21, 2023 (see Forestry.io’s End of Life announcement).

While this news is definitely a pain for website owners and developers who support these sites, we welcome those looking for a Forestry.io replacement to migrate their static websites to Siteleaf for free (and we’re here to help!). Siteleaf is a content management system with many of the same features, so we think you’ll feel at home here.

Why migrate to Siteleaf CMS?

Siteleaf has been trusted for over 10 years by companies like Microsoft, Kickstarter, Museum of Modern Art, and New York University. We are purpose-driven and here for the long haul.

Siteleaf has tight integration with GitHub Pages, which hosts over a millions websites built with Jekyll. You can also publish static websites to Amazon S3 (or any hosting of your choice), automate tasks with Zapier, and access a fully-featured API.

How do I move my site from Forestry.io to Siteleaf?

For websites built on Jekyll, you can import your site from GitHub with just a couple clicks. We have a free plan for open source developers, as well as affordable plans for personal and businesses (see our plans).

For complex sites or other static site generators (Next.js, Hugo, Gatsby, Eleventy, etc), our Enterprise team is happy to provide our white glove migration service (get in touch).

A quick tour of Siteleaf

Clicking on links that are broken is a bad experience for users, and it can even affect your SEO. Thankfully, it’s really easy to automate the process of checking the links on your site using html-proofer.

You can install html-proofer however you like, for the sake of argument we’ll use bundle by adding the following to your gemfile:

gem 'rake'
gem 'html-proofer'

And then run bundle install. Then you can get html-proofer to check for any broken links using the following commands:

bundle exec jekyll build
bundle exec htmlproofer ./_site`

Then you’ll receive a breakdown of every external and internal link which is broken. Go forth and fix things! Hat’s off to Super Tech Crew for this tip. 

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 optimizing your Siteleaf site’s SEO:

• Sitemap
• Structured URLs
• Jekyll-SEO-Tag
• Optimize for Sharing
• Write with SEO in mind

Sitemap

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 GitHub Pages-approved 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
plugins:
   - jekyll-sitemap

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

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:

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

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

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 footnote¹.

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.

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'] }}
</a>

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.

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.