Tip

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