Blog

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

More whitelisted plugins

Hot on the heels of the Jekyll 3.3.1 update earlier this week, four additional plugins have been whitelisted for GitHub Pages.

These plugins are specifically geared toward software documentation and open source code projects on GitHub, but may come in handy for any type of website.

Read more

Jekyll update & new whitelisted plugins

We have updated our default Jekyll version from 3.3.0 to 3.3.1, to match the recent update at GitHub Pages.

This update includes a few minor enhancements and bug fixes. For a full list of revisions check out the release notes.

Also included in this update are two new whitelisted plugins.

Read more

JAMstack e-commerce with Siteleaf & Snipcart

This is a guest post by Charles Ouellet, co-founder of Snipcart.

If you’re reading this blog, you know static web development is trendy, to say the least. Unless you just got out of a years-long meditation retreat in a cave with no Internet. If that’s your case, well, hum, welcome back!

At Snipcart, our developer-first shopping cart platform, we’ve been diving into static site generators and related tools for 2+ years now. And we believe they are the next big thing.

A short while ago, a friend of ours gave an in-depth conference on why “static” is a bad word for the modern front-end stack, aka the JAMstack (JavaScript, APIs, & Markup).

And he’s right:

Static definition

There’s nothing “undesirable” or “uninteresting” about the modern static websites & apps developers are pushing online. It’s in fact quite the opposite.

As a community, we need to give this new paradigm a name worthy of its actual value, and that’s exactly what the JAMstack is.

But this post isn’t a philosophical essay on the benefits of the API economy and the modular development approach. It’s about putting together a killer e-commerce workflow that ticks all of the boxes on the JAMstack checklist:

  • Entire site on a CDN
  • Atomic deploys
  • Instant cache invalidation
  • Everything lives in Git
  • Automated builds

So today, I’m going to show you how to build an API-centric, fast and secure e-commerce project in 5 simple steps. And I’m going to use the right JAMstack tools to do so.

Let’s do it!

Read more

Creating tag pages with Jekyll and Siteleaf

In this tutorial, we show you approaches for creating tag pages in Jekyll and Siteleaf.

This is part two of a tutorial series on Jekyll and Siteleaf. Check out part one on author pages.

The plugin approach

If you plan to use more than a dozen or so tags, a plugin can save you from having to create individual documents for each. This approach lets authors and content managers easily create new tags on the fly, while having autocomplete available in the Siteleaf UI.

Read more

Creating author pages with Jekyll and Siteleaf

At Oak, we recently launched a new website for our friends at Collaborative Fund, built on Siteleaf. The site features a blog for their prolific content, including author and tag pages.

In this tutorial, we show you how to set up your Jekyll blog with author pages and leverage Siteleaf to maintain your content.

The approach we use in this tutorial can be easily adapted to other sets of content as well, not just authors. It also is plugin-less, which means it can be readily published to GitHub Pages on Siteleaf’s free Developer plan.

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

Jekyll Plugins and Themes are here 🎉

Today’s the day! We’re excited to update to Jekyll 3.2, which brings over 100 improvements including Gem-based themes.

In addition to themes, we’re extremely happy to introduce support for third-party Jekyll plugins. Sites on the new Team, Business, and Enterprise plans can now install and leverage custom plugins to extend the functionality of Jekyll and Siteleaf. As always, whitelisted plugins are supported on all other plans.

Sites on the free developer plan can make use of the new GitHub Pages-approved Minima theme, while all paid plans (including legacy and Personal plans) can take full advantage of custom themes. Themes package layouts, includes, and stylesheets in a way that can be overridden by your site’s content. It is a great way to maintain a separation of content and code, and makes it possible to share themes across multiple sites.

We also gave the Jekyll build process a nice speed boost across the board. In some cases, you may notice your site building up to 2x as fast!

Read more

GitHub Integrations Directory

We’re happy to be included by GitHub in the official GitHub Integrations Directory.

Connect your website repo with Siteleaf and your Markdown content is editable in a friendly CMS designed with non-technical writers and clients in mind. Build sites using the tools you love, and make it easy to others to contribute without having to write code or understand Git.

Visit the Siteleaf integration and start using Siteleaf as a CMS for your Jekyll and GitHub Pages sites today.

Customizing the Siteleaf admin

Watch Customizing the Siteleaf admin on Vimeo

Siteleaf v2 was built to be be customized. In this tutorial, we’ll dive deeper into the Siteleaf admin and learn some tricks on how to tweak the interface to suit our needs. We’ll cover collections, permalinks, metadata, smart fields, defaults, and user roles.

If you followed the previous tutorials, you should now have a basic understanding of Jekyll and the Siteleaf admin. Feel free to check those out first if you haven’t.

Watch the video above, or follow along with the text version below.

Collections

By default, you should have 2 content areas: Pages and Posts.

Pages is your home for standalone content like your about page, contact, FAQ, and so on. Pages can be drag and drop ordered, and nested using the move icon next to each page.

Posts is a default Jekyll collection that’s blog-aware, so each piece of content here (called documents) is stamped with a date, and generally shown in date-descending order.

The Posts collection also comes with some special features: drafts, tags, and categories.

If these features are useful to you, but the name “Posts” isn’t quite doing it for you, you’re welcome to rename this collection under Collection settings. For example, I might want to call mine “Stories” instead.

Read more

Image and video processing for your static site

Static HTML sites are great — there’s no reliance on a server or database, you can host them for cheap, archive an entire copy on a USB drive, and when they’re properly optimized they can be blazing fast. Optimization can be tricky when it comes to static sites though. Since there’s no server processing and generating your pages, you don’t have the benefit of using something like ImageMagick alongside a gem like CarrierWave, which makes it easy to resize and optimize your images when they’re uploaded. The same goes for video. If you’re not hosting your video on YouTube or Vimeo, you’re responsible for transcoding the video into the various formats favored by the different browsers. So what’s a developer to do?

Processing as a service

One option is to use a 3rd party. There’s been a handful of companies who have started offering image and video processing as a service. These services are a great option if you don’t want to maintain your own solution, are “on demand”, and make it really simple to get started. To name just a few:

imgix servers

imgix generates your images on demand. In your image URLs you specify parameters like the dimensions, filters, face detection and type of cropping. Once the image is generated, it’s cached and served via their CDN. imgix charges $3 per “1,000 master images accessed each month” and $0.08 per GB of bandwidth.

Cloudinary offers processing services for images and video and is a bit more robust than imgix. Cloudinary offers a limited free plan with the next step up being $44/month.

Embedly, like Cloudinary, offers processing options for both images and video. They offer a limited free plan with the next step up being $23/month for video and $9/month for images.

Filestack is another. In addition to processing images and video, they offer document transformations and URL screenshots. They offer a limited free plan with the next step up being $49/month.

Rolling your own solution with AWS

What if you don’t want to pay a premium to subscribe to another service to process and serve your media? Typically you don’t need all the whiz-bang options offered by 3rd party services and a straightforward approach is typically enough for simple sites. Static sites can benefit just as much from a microservices approach as any other type of site, and if you host your site on S3, AWS gives us all the tools we need to processes our own images and video for much cheaper, though with a bit more setup and expertise required from our end.

Read more

Connecting GitHub and Siteleaf

Watch Connecting GitHub and Siteleaf on Vimeo

This tutorial will show you how to connect and sync an existing Jekyll site from GitHub to Siteleaf, so you can edit content and preview your site in the cloud.

If you are new to Jekyll, you may want to start with our Jekyll from Scratch first tutorial to catch up on the basics.

What is GitHub sync?

When developing your site, you’ll generally want to keep your theme and content in sync so you can see how everything looks in context.

By enabling GitHub sync, any changes you make in your Git repo will be immediately saved to Siteleaf, and vice versa. So any edit you or anyone on your team makes in Siteleaf is synced and backed up. You can see a log of all changes in GitHub, and revert to any state in case anyone makes a mistake.

We like to think of it as a time machine for your content.

Read more
Older posts