A guide to the best way to build fast, efficient websites.
Looking forward to a great Meetup to kick off 2017 with Tom Kraak from AOL on coming to static sites from a CMS world, and Jeff Posnick from Google, who has been working on applying Progressive Web App techniques to static sites.
Latest Showcase Sites
Popular ToolsArticle Count on upper-right corner
- Setting Up Jekyll for GitHub Pages in 60 Secondsby CJ Melegrito, Tutsplus TutorialJan 11, 17
Jekyll can be used with GitHub Pages to create simple, blog-aware, static websites. This video will show you how to setup the bare-bones Jekyll flat file structure in 60 seconds!
- How to Setup a Jekyll Themeby Kezz Bracey, Tutsplus TutorialJan 11, 17
Right now Jekyll themes are not self contained packages need to be applied through an installer. When you download a Jekyll theme you’ll actually also download all the files required to run an entire Jekyll site.
This will be changing in a future version of Jekyll, but for now you’ll need to know how to deal with the fact Jekyll themes come with a whole site attached to them.
- Build a Custom CMS for a Serverless Static Site Generatorby John Polacek, CSS-Tricks TutorialJan 09, 17
- Alerts In Wyamby Digital Tapestry TutorialJan 08, 17
Bootstrap has the concept of “alerts”, which are specially styled divs used to call out notes. I wanted to be able to add these alerts to a Markdown document processed by Wyam.
- JAMstack for Clients: Benefits, Static Site CMS, & Limitationsby Charles Ouellet, Snipcart TutorialJan 05, 17
Today, I want to discuss one of the changes we, as web professionals, are going through: the rise of the JAMstack & “static” sites. A change that’s affecting not only us, but clients too.
- A publishing workflow for teams using static site generatorsby Keybits TutorialJan 02, 17
If your team is semi-technical, and writes content for a static site generator such Jekyll or Hugo, you may have wondered how to approve new content before deploying it to production.
- How to show related posts in Hugoby Peter Y. Chuang TutorialDec 30, 16
The ability to show related posts is not yet a feature in Hugo. At present, one way to achieve this is by showing posts that have common tags or categories with the intersect function, as described in Hugo’s documentation.
- Serve static websites with Caddy web serverby Peter Y. Chuang TutorialDec 30, 16
Initially, I put this website on Github Pages, which is free and fast, but lacks flexibility. For months, I’ve been itching to migrate (the move to Firebase proved short-lived) while dreading the prospect of having to configure and maintain a server. Then I discovered Caddy web server, the easiest-to-set-up web server I’ve ever used.
- Creating responsive video embeds in Jekyllby Eduardo Bouças TutorialDec 26, 16
Making video embeds responsive is not always straightforward. Ideally, we’d have a way of making the embed take up the full width of a container (no more, no less) whilst maintaining the original aspect ratio of the video.
- Moving your blog from WordPress to GatsbyJS - Chiedo Labsby Chiedo TutorialDec 15, 16
Last week, I moved our entire website from WordPress to GatsbyJS. For those curious as to my thought process, it was this.
- Publishing Jekyll updates with gitlab-ciby Lars Olafsen TutorialDec 11, 16
In short, the GitLab CI is a set of commands that can be run when a repository receives a push, when an API is called, or when it is triggered by someone through the GUI. The commands are specified in a given YAML formatted configuration file - .gitlab-cy.yml which contains a set of specific keywords and arguments.
- How to Create a Fast, Secure, and Scalable Open Source Blog with React + Markdownby David Wells TutorialDec 11, 16
Serverless.com’s blog is 100% open source content driven by a GitHub repo and Markdown files. Blog content is fed into our site and rendered with our static website generator of choice Phenomic. Let’s explore the benefits of our blog setup and how they address the problems outlined above.
- Improving Static Comments with Jekyll & Staticmanby Michael Rose TutorialDec 09, 16
In the months after ditching Disqus for a static-based commenting system, Staticman has matured with feature adds like threaded comments and email notifications.
- Hutch Codes — Azure Search for Jekyllby Jeremy Hutchinson TutorialDec 08, 16
I added Azure Search to my static site built with Jekyll through the use of Azure Functions. Best part, it’s free*.
This example is for Jekyll, it will work with any static site. The only thing Jekyll specific is the JSON representation of the site, and any static site generator should be able to build that file.
- Using a Cloudfront CDN for Jekyll Without S3by Joe Buhlig TutorialDec 07, 16
I chose Cloudfront because I’m a fan of AWS (Amazon Web Services) and they are fairly cheap in comparison to the other big names in industry. I’ve worked with AWS enough in the past to trust it. But here’s how I set up Cloudfront to work with Jekyll:
- Dynamic looping in Liquid to build an advent calendarby Leon Paternoster TutorialDec 04, 16
This is one of the best things about Jekyll and Liquid. The syntax is easy to learn and well-documented, which means that, with a bit of thought (and Zapier), you can create some dynamic events on a static website.
- The API-Based CMS Approachby Levi Gable, CSS-Tricks TutorialNov 23, 16
There is a trend in the web development world toward the API-based CMS architecture. Also known as “decoupled” or “headless”, it allows developers to separate the content management from the frontend implementation and connect to the CMS via an API. This is an exciting approach to website and app development, offering more freedom and flexibility. I want to show you my process for setting up and connecting to an API-based CMS.
- Speeding up metalsmith with incremental builds | Mograblogby Guy Mograbi TutorialNov 15, 16
I love metalsmith. Since I transitioned to it I write more on my blog. The only thing that annoyed me is that it became a bit slow. I found myself waiting several seconds between changes. So yesterday I decided to do something about it and I reached to a 500ms build on change. I’d like to share with you what I did.
- Add live reloading to Jekyll with Gulp and Browsersyncby Vladimir Iakovlev TutorialNov 11, 16
Live reloading is a very useful feature and it’s very popular in web development, but why don’t use it for writing blog articles and seeing changes in the real time?
I use Jekyll for this blog, and I already familiar with Gulp and Browsersync, so I decided to use them.
- More Advanced Jekyll/Liquid Template Techniquesby Brian Rinaldi TutorialNov 07, 16
Working on a recent project, I’ve come across several items that were either not well documented or slightly complex - though perhaps calling them “advanced” overstates the case. In this case, we’ll cover using multiple filters on a single value, using Liquid in Markdown, custom sorting posts and displaying posts by category.
- Using GitlabCI to build and deploy your Jekyll Site to Amazon S3by Christ Tarwater TutorialNov 03, 16
I recently switched almost all of my personal projects away from Github to Gitlab. Gitlab offers a ton of cool free features, including a built-in CI tool. I’ve set up and used various CI tools before and currently run a Jenkins server on my Raspberry Pi.
- AWS Lambda Static Site Generator Plugins - Alestic.comby Eric Hammond TutorialOct 31, 16
A week ago, I presented a CloudFormation template for an AWS Git-backed Static Website stack. If you are not familiar with it, please review the features of this complete Git + static website CloudFormation stack. This weekend, I extended the stack to support a plugin architecture to run the static site generator of your choosing against your CodeCommit Git repository content.
- Lektor Static CMS, put the fun back into Content Managementby Donato Rotunno TutorialOct 27, 16
So yet another static website generator, I hear you saying. It’s true that there are a lot of static generators, but if you look a bit closer you’ll soon realise that Lektor is really a different beast.
- Switching to Google AMP and backby Evert Pot TutorialOct 25, 16
This website is built with Jekyll, hosted on Github pages, and behind a Cloudflare proxy. Why cloudflare? Same reason for using AMP! Websites are pretty much my business, and I want my own home to be powered by both TLS and HTTP/2!
What this meant for AMP though is that I had to change my main site into an AMP site. Dynamic websites unlike this might be able to create both an AMP and non-AMP website.
- JAMstack e-commerce with Siteleaf & Snipcartby Charles Ouellet TutorialOct 25, 16
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.
- Cache-busting in Jekyll, GitHub pagesby Todd Motto TutorialOct 24, 16
Implementing cache-busting each time I make a change will allow the user’s browser to download the latest assets, therefore I get no image/style/layout breakages until a hard refresh.
- Optimizing Jekyll Performance with Gulp | Savas Labsby Anne Tomasevich TutorialOct 24, 16
We recently deployed a series of changes to optimize our CSS, JS, and images, and in doing so finally moved away from using built-in jekyll commands to build the site. Instead, we’re using gulp, a task runner — or, as they put so nicely on their website, a “streaming build system”.
- How to Create and Publish a Jekyll Theme Gemby David Darnes TutorialOct 19, 16
One of Jekyll’s noteworthy new features is the ability create official themes in the form of Ruby gems. These themes can be installed by a Jekyll user to style their static blog or website with ease, leaving them to manage their content.
- Jekyll environmentsby Siteleaf TutorialOct 13, 16
When working with Jekyll and Siteleaf, you typically have 3 distinct environments to help you code, preview, and publish your site:
- Passing post variables to includes in Jekyllby Sverrir Sigmundarson TutorialOct 01, 16
By default Jekyll include documents loaded by your layout files do not have access to variables defined in the YAML header in your posts or pages. This can pose a bit of a problem if you want some parts of your site to have access to your post data (e.g. such as its title).