Open navClose nav

Category: Frontend Friday

Add Functionality to Your Hugo Site With Theme Components

Theme Components are a relatively new addition to Hugo, first appearing in the 0.42 release. When Hugo looks for certain files (such as data and layout files,) it will first look in the top level of your project, and then look in the subdirectory of themes/ that matches the theme you have set in config.toml. Previously, you could only specify a single theme in your config.toml file. The way theme components work is pretty simple: they allow you to specify an array of themes in config.

Harness the Power of Static Site Generators to Create Presentations

As a developer evangelist, I make a lot of presentations. Over the years, I’ve used a variety of different drag-and-drop tools to make slides including Powerpoint, Keynote and Google Docs. I’ve also used more developer-friendly frameworks like Reveal.js. For me, Reveal.js takes the cake. Reveal.js presentations are written in HTML, CSS and JavaScript. I can store the files in git and edit, version, and deploy them with a familiar, git-based workflow.

3 Tips for Mastering Blocks

Last week, we brought you a theme for Jekyll that takes advantage of Forestry’s Blocks feature to build whole page layouts using modular components, called uBuild. This week, I ported uBuild to Hugo to make it available to our Hugo users. When we first announced the Blocks feature, I created a Hugo theme called Sawmill to demonstrate the Blocks’ page-building capabilities. Since creating that theme, I’ve been using Blocks extensively and have learned a lot about how to use this feature effectively.

5 Ways to Handle Forms on Your Static Site

When I first started exploring the potential of static sites, I was attracted by their speed and simplicity. I knew these benefits came at a cost, however: since static sites can’t run backend code, there are limits to what you can accomplish with a static solution. I no longer see things this way. JAMStack is not about sacrificing features for the sake of a performant, easy to maintain website. Rather, it is about re-evaluating how much of your desired functionality should be delegated to your web frontend.

For Static Sites, There’s No Excuse Not to Use a CDN

Are you getting the most out of your static site? If you’re not hosting your site on a CDN, you definitely aren’t. CDNs, or Content Delivery Networks, are commonly used to distribute static resources like images, videos, and client-side code (CSS and JavaScript.) Since a static site is composed entirely of static resources (including the HTML pages,) it is possible to serve the entire website through a CDN! In this article, we will explore why you should be using a CDN to host your static site, and how you can do it with Netlify.

Mastering Image Delivery With Cloudinary

Applying a responsive strategy for displaying images means more than just adding max-width: 100%; to your image tags. You don’t want to display an image that is much larger than the area it occupies, otherwise you’re just wasting bits. You need to deliver scaled-down versions of these images where appropriate. A popular way to generate these scaled-down assets is to automatically resize our images during the build process, using something like a gulp task, but that solution isn’t perfect.

Enhance Your Hugo JSON API Using Custom Output Formats and Netlify Redirects

Hugo makes it super easy to build simple APIs with its built-in output formats. In my previous article, we built a fully functional JSON API. Today we’re going to extend the capabilities of this API and improve the user experience with better URLs. At the moment our API can look up specific items, but can’t look at them in relation to each other. Say you want to know what players are in a specific team: with our current API, you can’t do that easily.

Snipcart Brings E‑Commerce to Your Static Site

Picture this: it’s 2018, and your client needs an online store. You know that static sites are great: they’re easy to scale, have a minimal attack surface, and are very fast. However, since a static site can’t run backend code, it won’t be able to do some things necessary for e-commerce, such as process customer orders. Can you really use a static site to operate an e-commerce storefront? Of course you can!

What's New in Jekyll 3.8

What’s new in Jekyll 3.8 Jekyll 3.8.1 was released on the 1st of May 2018, just two weeks after 3.8.0. The project has come a long way since I last wrote a Jekyll update on Forestry. Olivia is now Jekyll’s new Lead Developer since Parker Moore decided to step down after four years leading the project. So what does Jekyll bring us this time? Performance optimizations Large sites containing a huge amount of posts are going to see a massive reduction in their total build times especially if they are doing multiple calls to the where filter with the same input and property parameter.

Automatically Publish Scheduled Posts For Your Static Site

Part of our mission at Forestry is to dissolve the perceived limitations of static sites. In reality, static sites are easy to understand and integrate with, and the belief that static sites are not capable of feature X is largely a failure of imagination. With a little cleverness and determination, virtually anything is possible on a static platform. Previously, we showed you how to set up Algolia with Jekyll as well as with Hugo to make your content searchable.