DEV Community: CloudCannon

HugoConf 2023

David Large — Wed, 12 Jul 2023 01:02:42 +0000

After last year’s successful HugoConf, with 32 speakers and more than 500 registered attendees from 49 countries, we had so much fun producing and taking part that we decided to do it again!

Since its first public version, released back in 2013, Hugo has become an incredibly popular static site generator, most well known for its build speeds. Hugo is also the go-to tool of many of CloudCannon’s Partners and Experts, who bring live visual editing to their non-technical clients with the help of our CMS.

When we first added Hugo support to our CMS we knew that there was a dedicated community of developers who felt strongly about Hugo, its lightning build speeds, and its ability to create lean and performant static websites. We followed up by releasing Bookshop support for live visual editing within Hugo, which we debuted at last year’s HugoConf:

Save the date: Thursday 21 September

Are you planning on attending HugoConf this year? I hope so! We’ll be kicking off on Thursday September 21 (PDT) over at hugoconf.io. If you’ve already registered you’ll be all set to receive our conference updates, as well as regular helpings of Hugo-specific links, showcases, tutorials, tips and tricks.

If you haven’t yet signed up, now’s the time! Simply fill out the form at the HugoConf homepage, and you’ll be first in line for updates, Hugo news, and (if you’d like), in the draw for secret swag.

Speaking at HugoConf: call for proposals

Want to speak at HugoConf? We’ll offer the same three types of presentation as last year:

Tech talk

Pre-recorded, 20 minutes

Great for workflow, product, and feature demonstrations or tutorials that require additional context or explanations.

Past tech talks have included Custom Shortcodes for the Win, Beyond the Static: adding interactivity to your Hugo sites, and Going wild with Hugo modules.

Lightning talk

Pre-recorded, 10 minutes

A fast walkthrough of a workflow, showcase of a new feature or module, or that ‘one weird trick’ you’ve discovered for Hugo. Ideal for topics that are reasonably self-explanatory, or rely more on a single dependency.

Past lightning talks have included Using Purge CSS with Hugo, Resize all images, and Word to Web with Hugo in 5 Minutes.

Workshop

Live, 45 minutes

Suitable for long-form examples or workflows that may require full explanation, live code commentary, or may depend on chaining multiple (3+) software tools.

Past workshops have included Building an open-source blogging platform with Appwrite and Hugo, Using GitHub Pages with Actions to deploy Hugo sites in seconds, and How to achieve perfect Google Lighthouse Scores using Hugo.

Get in touch

Even if you’re new to Hugo, do get in touch — fill out the form at hugoconf.io, and send us your ideas for a talk before 1 August.

A large part of celebrating the Hugo community is being consciously welcoming to newcomers, so we’d love to showcase a range of Hugo topics, workshops, and tutorials, from beginner to expert level.

Perhaps you’d like to show off a new theme you’ve made, or launch a new module. Maybe you’ve found a publishing workflow you want to share with the world. Whatever the case, I’m happy to discuss your ideas for talks, however rough they may be.

You can get in touch with me at hello@hugoconf.io, or on Twitter @hugoconf.

Eleventy (11ty) vs. Gatsby in 2023 – which SSG is best for you?

David Large — Sat, 24 Jun 2023 12:00:00 +0000

By Jaimie McMahon

With Netlify’s recent acquisition of Gatsby Inc, and their sponsorship last year of full-time open-source development on Eleventy (11ty), it’s an exciting time to be choosing a new static site generator (SSG) — particularly if and when Netlify makes Gatsby’s composable architecture primitives available across the web. While GatsbyJS has certainly carved out a name for itself in the Jamstack community, for certain use cases its single-page application (SPA) approach is being challenged by lighter-weight static site generators such as Eleventy.

Eleventy’s recent adoption of interactive island architecture means that this previously purely static site generator can more effectively compete with heavyweight frameworks like Gatsby. 11ty’s use of progressive enhancement and multi-page application (MPA) approach to web development makes it easier than ever to achieve top Lighthouse scores, which is often a challenging feat using Gatsby. What’s more, Eleventy is well known for easy site migrations owing to its framework-agnostic approach and its focus on flexibility. So let’s compare 11ty vs. Gatsby to find out whether its worth making the switch from one to the other or, if you’re just starting out, which technology you should choose.

Whichever SSG you choose, with CloudCannon’s Eleventy and Gatsby support, you and your team can benefit from flexible development tooling, accessible content management, and visual page building and content editing. Now that CloudCannon’s Eleventy support and Gatsby support have both been released out of beta, there’s no better time to get started on a new project.

What is Eleventy?

Eleventy (11ty) is the “simpler static site generator” that focuses on speed and flexibility. Let’s focus on speed first. Eleventy uses a MPA approach, leveraging progressive enhancement to reduce your site’s time to interactive (TTI) by selectively hydrating interactive components, while keeping the rest of the page static and stripping away unnecessary JavaScript. As such, 11ty helps developers build faster sites than what is possible using Gatsby, which requires more JavaScript to hydrate the web application, costing in longer TTI and input latency.

Now for the flexibility. Eleventy exploits the flexibility of 11 different template languages, without tying you up to any client-side frameworks (although you can still choose to use a framework in 11ty if you like). Eleventy lets you mix and match HTML, Markdown, WebC, JavaScript, Liquid, Nunjucks, Handlebars, Mustache, EJS, Haml, and Pug for templating. Eleventy also offers flexible configuration options and incremental adoption, making it easy to work with your project’s existing directory structure.

Eleventy’s simplicity and customizability flattens the learning curve for getting started; this static site generator effectively adapts to you and your preferences. With Eleventy you can build static sites your way, with full control over the performance of your website and the option to extend complexity as needed. Learning to use 11ty is made easier with helpful documentation and an active community of passionate developers answering questions, and sharing starters (11ty’s term for structured themes) and plugins. Eleventy is ideal for use cases such as marketing websites with progressive enhancement, blogs, portfolios, documentation sites, and mostly static ecommerce websites.

Sites made with 11ty

What is Gatsby.js?

Gatsby is a React-based open source framework for building ‘blazing fast’ websites with a SPA approach. It uses React (JSX) for templating and GraphQL for queries. This static site generator was a trail-blazer in the Jamstack world, being the first to incorporate dynamic React components into static sites.

Gatsby has since focused on expanding the composable architecture ecosystem by building Gatsby Cloud as a deploy and hosting platform, and incorporating automatic dependency tracking, scalable data layers, and superior image processing. In early 2023, Gatsby officially joined Netlify, meaning that while Gatsby will continue to evolve, its composable architecture primitives will be integrated into Netlify and made available across other frameworks.

Gatsby is a highly opinionated static site generator with many built-in features including code splitting, prefetching, routing and caching. Although, Gatsby’s approach to data-fetching is arguably the most opinionated; Gatsby creates an internal GraphQL API as a middleware between the frontend template and content sources. This means that you can mesh sources into one big graph in a single GraphQL query, making it easier to use many data sources.

Gatsby’s well-established position in the world of web development makes for a large user base and plugin ecosystem. This active community along with Gatsby’s breadth of built-in features create an excellent developer experience. Gatsby is ideal for use cases such as ecommerce and marketing websites that use React-based interactive components and multiple data sources with APIs, or for building pre-rendered static sites as single page applications (SPAs).

Sites made with Gatsby

Which should I choose?

The choice between Eleventy and Gatsby will depend on your web development experience to date, as well as the type of static sites you want to build. These two static site generators have significantly different learning curves and are generally intended for different use cases. When choosing between 11ty and Gatsby you must consider what you already know, what you are willing to learn, and what type of site you need.

Choose Eleventy if you are relatively new to web development and want to build mostly (or even purely) static sites like blogs, portfolios, documentation, or simple business websites. Eleventy’s simplicity makes it much easier to learn compared to Gatsby. With 11ty you can get a site up and running only using HTML and CSS; there is no need to learn how to use any frameworks. Eleventy is also the clear choice for more experienced web developers wanting to mix and match multiple templating languages and frameworks in one project, or wanting to prioritize performance. The flexibility 11ty affords will allow you to build your way and add in as much complexity as you need with progressive enhancement and partial hydration for interactive components. This means you can keep JavaScript to a minimum and easily achieve top Lighthouse scores. Eleventy lets you do this while giving you full control over your sites HTML, since the focus is on customizability rather than built-in features. It also doesn’t lock you into any one framework and offers incremental adoption, meaning it is easy to migrate an existing site to or from Eleventy.

Choose Gatsby if you are already familiar with React and GraphQL (or are highly motivated to learn) and want to build static sites with more interactivity, like complex ecommerce or marketing websites. While choosing Gatsby will come at the cost of your websites speed due to needing to run more JavaScript, Gatsby’s client-side routing does helps optimize performance a bit. Although it still cannot come close to the speed of sites built with lighter static site generators like 11ty, though this may not matter if speed is not a top priority for your project. Gatsby is also a great choice for developers who want to use a single internal API to manage multiple data sources, or those who prefer more opinionated static site generators with many built-in features. You may also be swayed to choose Gatsby for access to a bigger community with more plugins available compared to Eleventy.

It is also worth nothing that while Gatsby’s composable architecture primitives such as image processing, scalable Valhalla data layers, and automatic dependency tracking for real-time preview and deployment services, may have previously been unique to Gatsby, these features will soon be available across all static site generators (where it makes sense) thanks to Netlify. This means you will be able to take advantage of these features for building more complex website in lighter-weight static site generators that can better optimize your site for speed.

Choose either – or both – with CloudCannon

Whether you choose Eleventy or Gatsby for your next static site, CloudCannon is here to help make static site generation even easier, with instant (and free) testing domains and a robust Visual Editor. Our focus is, and always has been, making content editing and production more accessible to everyone, no matter the use case. With CloudCannon’s Git-based CMS, your content team can build and edit site pages in our intuitive Visual Editor, while developers enjoy our flexible approach to configuration and content management.

We have published both an Eleventy starter guide and a Gatsby starter guide to help you get your project set up in CloudCannon with ease. Or if you’re just getting started with 11ty for the first time, we have a comprehensive Eleventy beginner tutorial series to lend you a helping hand while you learn.

How CloudCannon’s live editing works with Astro and Bookshop

David Large — Fri, 23 Jun 2023 14:00:00 +0000

CloudCannon supports live visual editing on a wide range of static site generators, bringing intuitive composition, editing, and publishing workflows to everyone. But how do we do it? The short answer: Bookshop, our component development workflow for static websites, which we’ve just expanded to support live visual editing and page-building with Astro.

To help you integrate your existing Astro sites with Bookshop, we’ve created a new Bookshop Astro Guide as part of our documentation. Our Astro Sendit template is also a very helpful reference, as it contains an example site that’s fully integrated with Bookshop’s live visual editing.

While many Astro developers will be accustomed to creating, updating, and removing pages, components, and posts in their IDE, you (and other site users) can also complete all of these tasks within the CMS’s intuitive interface, as pictured above. With the Sendit template, we’ve also allowed users to easily edit our data files with CloudCannon’s Data Editor — meaning information like company details, navigation, footers, and theme colours, stored in .json files in data/, can be accessible and editable for all site users.

Getting started with Astro and CloudCannon

Let’s first spin up a new Sendit site on CloudCannon, explore its features, and then poke around the files together. (If you’d rather, you can do this directly via GitHub.)

If you don’t already have a CloudCannon account, take a moment to create one, link your GitHub, GitLab, or Bitbucket account, and create a new Astro Sendit site from a template. Your site files will stay in your Git repo, and upon triggering any save in CloudCannon, your site will build.

Looking at our astro.config.mjs file, there’s not much to it, as you’ll see:


import { defineConfig } from 'astro/config';
import react from '@astrojs/react';
import bookshop from '@bookshop/astro-bookshop';

// https://astro.build/config
export default defineConfig({
  site: 'https://top-quail.cloudvent.net/',
  integrations: [bookshop(), react()]
});

We’re importing our configuration, as well as Bookshop and React, and declaring our site’s domain. This site: field is temporarily set for you, as above, but you can change this URL to the final, deployed URL of your site.

(Note that all sites built on CloudCannon receive a free preview domain with the format adjective-noun.cloudvent.net — if you don’t already have a final URL for your new Astro site you can set this to your free cloudvent.net domain.)

Separating content and layout

The next thing you might notice about the files in this site is that we’ve separated our page and post content from the layout and routing information — our files in src/content/pages and src/content/blog are in Markdown format, and we’re using […slug].astro files in src/pages for routing. We also use .astro files like Layout.astro, PageLayout.astro, and PostLayout.astro in src/layouts for our layout information and SEO props, but having our content in .md files means CloudCannon can access it in our Content Editor (for WYSIWYG editing) and Visual Editor (for page building and live visual editing).

This way we can get the best of both worlds — Astro’s speed and flexibility for developers, and CloudCannon’s intuitive editing for writers, marketers, and content teams. Building our Astro site is one thing. Astro’s got that under control! But a good site — even one that builds astronomically quickly, with stellar opportunity for future additions — is only as strong as its ease of editing. Editing the pages and posts on our site — and allowing non-technical content writers and marketing teams to do so, as well as to create new content — is something else entirely.

And that’s where CloudCannon’s visual editing comes in.

How Visual Editing works on CloudCannon

As I mentioned above, Sendit is preconfigured for live visual editing on all of its pages, so let’s dig into the feature and see how we’ve set it up for Sendit. In the above video, we saw visual editing in the Sendit homepage’s hero component. The component’s information is stored in two places. Its layout and styling is stored in /src/components/home/hero/hero.jsx:


import MarkdownIt from "markdown-it";
const md = new MarkdownIt({ html: true });

export default function HomeHero(block) {
  return (
    <section className="hero-two">
      <div className="hero-two-shape"></div>
      <div className="container-fluid">
        <div className="row align-items-center">
          <div className="col-lg-6">
            <div className="hero-two-content">
              <h1 className="mb-4">{block.title}</h1>
              <div
                className="mb-7 w-xxl-80"
...
              />
              <div className="">
                {block.button && (
                  <a
                    href={block.button.link}
                    className="btn btn-primary btn-lg"
                  >
                    {" "}
                    {block.button.text}{" "}
                  </a>
                )}
              </div>
            </div>
          </div>
          <div className="col-lg-6">
            <div className="hero-two-banner">
              <img src={block.image} alt={block.image_alt} />
              <div className="hero-two-banner-shape"></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

During the build process (specifically, in our postbuild file), we use our open-source component development tool Bookshop to read the data and default values of our components from .yml files and turn them into inputs config for the editor. For example, here’s src/components/home/hero/hero.bookshop.yml, showing the data and default values (pre-filled text) for this hero component:


# Metadata about this component, to be used in the CMS
spec:
  structures:
    - content_blocks
  label: Home Hero
  description: Home Hero section
  icon: "cottage"
  tags: ["hero"]

# Defines the structure of this component, as well as the default values
blueprint:
  title: Email Marketing is the Future for Growing Your Business Revenues
  description: We believe that a good email marketing strategy is the key to growth. So we’re helping you grow your business with tools and resources that make email marketing easy.
  image: /images/hero/hero-image-2.png
  image_alt: Dashboard with reports
  button:
    text: Try This Free
    link: /signup

# Overrides any fields in the blueprint when viewing this component in the component browser
preview:

# Any extra CloudCannon inputs configuration to apply to the blueprint
_inputs:
  description:
    type: markdown

You’ll see that each component has a defined blueprint, label, icon, and tags, and can include default values. The last few lines of this file add extra definitions to CloudCannon’s inputs configuration; in this case we’re setting our description block as a Markdown text area, unlike title or image_alt, which are plain single-line text inputs by default.

Connecting the dots

Looking at src/layouts/PageLayout.astro below, we can see a component using the bookshop:live directive with props sourced from a frontmatter variable:


---
import Page from "@shared/page";
import Layout, { SEOProps } from "./Layout.astro";

type Props = {
  frontmatter: {
    title: "string;"
    content_blocks: Array<Record<string, any>>;
    seo?: SEOProps;
  };
};

if (!Astro.props.frontmatter) {
  throw new Error("Page frontmatter must be defined");
}
const props = Astro.props.frontmatter;
---

<Layout {...props}>
  <Page bookshop:live contentBlocks={props.content_blocks} />
</Layout>

And in the front matter of our homepage, we can see that content_blocks contains the Bookshop component home/hero.


---
_schema: default
title: Home
seo:
  page_description:
  canonical_url:
  featured_image:
  featured_image_alt:
  author_twitter_handle:
  open_graph_type:
  no_index: false
content_blocks:
  - _bookshop_name: home/hero
    title: Beautiful email campaigns
    description: >-
      With Sendit, you can quickly create beautiful rich emails that capture a
      reader's attention, engage them, and convert them into customers.
    image: /images/hero/hero-image-2.png
    image_alt: Reports dashboard
    button:
      text: Try This Free
      link: /signup/
...
---

When we view that page in CloudCannon’s Visual Editor, we’ll be able to interact with the component directly on the page. Clicking on the component will open up an editing panel, and our changes will render live on screen.

Global configuration with CloudCannon and Astro

Bringing it all together is CloudCannon’s global configuration file, /cloudcannon.config.yml. Under collections_config at line 5 you’ll see that we can define (or change) a lot of information about our data, posts, and pages, including where content is stored, which schemas are used for posts and pages, and which editor should be enabled to edit them.


# -- truncated -- #
collections_config:
  data:
    path: data
    disable_add: true
    disable_add_folder: true
  posts:
    path: src/content/blog
    output: true
    url: "/blog/[slug]/"
    _enabled_editors:
      - content
      - visual
    add_options:
      - name: Add New Post
        schema: default
        icon: post_add
    schemas:
      default:
        name: New Post
        path: schemas/post.md
    _inputs:
      title:
        empty_type: string
      image:
        empty_type: string
      image_alt:
        empty_type: string
      author:
        empty_type: string
      tags:
        type: multiselect
        allow_create: true
        empty_type: array
  pages:
    path: src/content/pages
    url: "/[slug]/"
    output: true
    icon: wysiwyg
    _enabled_editors:
      - visual
    add_options:
      - name: Add New Page
        schema: default
        icon: note_add
    schemas:
      default:
        name: New Page
        path: schemas/page.md
        new_preview_url: "/"
      paginated_collection:
        path: schemas/paginated-collection.md
    _inputs:
      content_blocks:
        empty_type: array
    filter:
      base: strict
# -- truncated -- #

You’ll also see that we’ve enabled the Visual Editor for pages on Sendit, but for posts we also give editors the option to use the Content Editor, which is a configurable WYSIWYG Markdown editor for distraction-free writing. (Users with higher-permission roles such as Developers and Site Owners will also be able to view files in the Source Editor.)

(If your interest is piqued by _inputs, we go into a lot more information about the _inputs configuration in our documentation, which includes a list of all available input types. We also go deep on _editables, which allow you to choose which toolbar controls are available to users in the Content Editor.)

When you’re setting up your own Astro sites on CloudCannon, you can choose which editing (and publishing) features would work best for your site users. With visual editing, branching for staging and production workflows, and top-tier support, CloudCannon’s got you covered.

Where to now?

That brings us to the end of this short and sweet post — we’ve demystified some of the configuration behind our new Astro template within CloudCannon, and we’ve started to define just how CloudCannon lets you and your users interact with your site and its pages. There’s a tremendous amount of power, potential, and flexibility in Bookshop and that cloudcannon.config.yml file, and we’ve barely scratched the surface.

If you'd like to dig into more of the deep configuration options in CloudCannon, check out our documentation on using the configuration cascade, which is a set of sources containing customizable options for the editor, each with a different scope and priority. This allows you to set global defaults and where necessary, override those for specific collections or files.

If you come across any issues while you're dialling in your configuration for Astro, please reach out to us via our support team — we're here to help.

Eleventy (11ty) vs. Astro

David Large — Fri, 23 Jun 2023 12:00:00 +0000

By Jaimie McMahon

Astro and Eleventy (11ty) are two of the most popular (and arguably most similar) technologies available for static site generation. So what is it about their approach to static sites that resonates so strongly with the modern web development community? In short, both focus on content-heavy use cases, both reduce boilerplate code for faster websites, and both take a multi-page application (MPA) approach to web development, encouraging progressive enhancement.

Is this the software equivalent of convergent evolution, with both sets of tooling following the same trends or guiding principles (static first, with a dual emphasis on build speed and flexibility)? Or are there significant differences that will impact your developer experience? And how should you choose between Astro and 11ty? Let’s explore both static site generators (SSGs), and find out.

Whichever SSG you choose, with CloudCannon’s Astro and Eleventy support, you and your team can benefit from flexible development tooling, accessible content management, and visual page building and content editing. Now that CloudCannon’s Astro support and Eleventy support have both been released out of beta, there’s no better time to get started on a new project. It’s worth mentioning that CloudCannon’s content management support is limited to static site generation (SSG), and does not include server-side rendering (SSR).

What is Astro?
What is Eleventy?
Similarities between Astro and Eleventy
Differences between Astro and Eleventy
Astro vs. 11ty (Eleventy) usage trends
Which should I choose?

What is Astro?

Astro is known as the "all-in-one web framework for building fast, content-focused websites". It is the fastest-growing static site generator, with over 100,000 developers and teams using it worldwide. First released in 2021, the most recent (at the time of writing) update to Astro, version 2.2, features CDN support for assets, and an image() scheme helper API change. Astro has attracted such interest so quickly because it helps developers build lightning-fast content-rich websites, with the flexibility of any UI language, and the option to easily embed interactive islands.

Astro’s key features

Astro differentiates itself from other frameworks by offering component islands, server-first API design, zero Js by default, edge-ready deployment, customizable integrations, and UI-agnostic support. This flexibility lets you use React, Preact, Solid, Svelte, Vue, and Lit in your Astro project.

Getting started with Astro

Astro is known for its superior developer experience; take a look at Astro reviews across the web and you’ll notice that this is one of its most frequent praises. You can build static sites in Astro with just HTML and CSS, or take advantage of Astro’s opt-in complexity by mixing and matching your favourite UI frameworks.

Astro community & ecosystem

Astro also provides excellent documentation, and the Astro team is fantastic at supporting new users. You may have already come across Ben Holmes on socials media, Astro’s “guy with the whiteboard” who makes easy to understand Astro tutorials. The Astro community is very active on Twitter and Discord, with questions answered quickly. There is also a variety of themes, components, and plugins being created by the community, with Astro’s themes directory being a great place to find a theme or submit your own.

Astro use cases

Astro’s focus on fast content-rich websites makes it perfect for use cases such as marketing sites and landing pages, blogs, portfolios, documentation websites, and even e-commerce sites with mostly static content.

Sites made with Astro

What is Eleventy?

Eleventy (also referred to as 11ty) is known as the “simpler static site generator”. It is the only purely static site generator that has reliably continued to grow in usage share, making Eleventy the clear choice for purely static use cases. First released in 2018, the most recent (at the time of writing) update to 11ty, version 2.0, features smaller and more secure files, faster builds, more plugins, template language aliasing, and event arguments. Eleventy has successfully maintained interest over time by focusing on speed and flexibility. With Eleventy, developers can build faster static sites, while leveraging the flexibility of multiple template languages — all without being tied to any frameworks.

Eleventy’s key features

Eleventy differentiates itself from other static site generators by offering flexible configuration options, incremental adoption, enabling you to work with your project’s existing directory structure, allowing you to work in multiple independent templating languages, while not requiring the use of Javascript framework. With 11ty you can choose to work in HTML, Markdown, WebC, JavaScript, Liquid, Nunjucks, Handlebars, Mustache, EJS, Haml, Pug, and Custom.

Getting started with Eleventy

Eleventy is known for its flexibility and simplicity, both of which help to flatten the learning curve while allowing more customizability. In this way, 11ty adapts to you and your preferences. You can build static websites in your way in Eleventy, while maintaining full control over the performance of your site and extending complexity as needed.

Eleventy community and ecosystem

Eleventy offers helpful documentation, and benefits from an active community of 11ty developers. Eleventy is active on both Twitter and Mastodon, with 11ty creator, Zach Leatherman, personally engaging with users. You can ask questions about Eleventy on the dedicated Discord channel, GitHub Discussions page, or the Issue tracker. The Eleventy Leaderboards are a great place to check out community made starter projects (11ty calls themes starters) and evaluate them based on Lighthouse scores. Eleventy also offers a growing list of both official and community contributed plugins. Additionally, the 11ty YouTube Channel and 11ty.rocks are worth mentioning as great resources for learning to build with Eleventy.

Eleventy use cases

Eleventy’s focus on fast and flexible static sites makes it perfect for marketing websites with progressive enhancement, blogs, portfolios, documentation sites, and mostly static ecommerce websites.

Sites Made with Eleventy

Similarities between Astro and Eleventy

Astro and Eleventy are arguably more similar than they are different. You really can’t go wrong with either of these static site generators, so let’s take a look at what makes them both great before jumping into the details of their differences.

Javascript based

Both Astro and 11ty are modern JavaScript-based website builders. Using JavaScript to generate static sites eliminates the need for a client-side framework. This doesn’t mean you can’t use a client-side framework, it just means that it is optional. This makes Astro and Eleventy more beginner friendly since you can start building static sites with just HTML and CSS.

Zero config

Eleventy and Astro are both zero config by default, allowing for extensibility with flexible configuration options. This means that 11ty and Astro will work well with your existing project structure.

Flexible content authoring

Both Astro and Eleventy let you use any content authoring system, making them great choices for content heavy use cases like blogs, portfolios, documentations, and marketing sites. You can write content directly in Astro or 11ty using Markdown or MDX, or leverage a third-party Content Management System (CMS) like CloudCannon to allow less tech savvy content editors to manage content visually.

MPAs

Astro and Eleventy both build multi-page applications (MPAs). Multi-page architecture offers a number of benefits such as better empty-cache performance, energy efficiency, search by default, better privacy, as well as inclusivity and robustness by default. All this means you can build faster, more secure, and more accessible static sites by eliminating the large client JavaScript bundles customary to Single Page Applications (SPAs).

Progressive enhancement

Both Astro and 11ty use progressive enhancement. Progressive enhancement means starting with a solid foundation of accessible, semantic HTML, and then layering on more advanced features as the user’s device and browser allows. The implications of this are that websites can be designed to work for everyone, even users on older browsers or devices with slower internet connections. Progressive enhancement also makes websites more accessible for users with disabilities, and improves website performance by reducing load times.

Island architecture

Astro and 11ty both offer an island architecture web development approach. This means you can break your site into isolated islands of functionality, each with its own serverless function that can be invoked when necessary. With these ‘islands’ of interactivity you can incorporate dynamic components with rich user experiences that adapt to user input and changing data, while still benefitting from the speed and reliability of static site generation. This approach to building static sites can improve site performance and reduce infrastructure costs, without compromising on engaging experiences. Although, it is worth noting that while island architecture has always been one of Astro’s core offerings, interactive ‘11ty is-lands’ are a relatively new addition to Eleventy, available via plugin.

Partial Hydration

Both Astro and Eleventy use partial hydration for interactive islands. Partial hydration combines the benefits of server-side rendering and client-side rendering by selectively hydrating parts of the web page with JavaScript (the interactive island components), while still using static site generation for the rest of the content. The ability to choose which parts of a page to hydrate with JavaScript helps reduce the overall amount of JavaScript, which once again improves performance, reduces infrastructure costs, and makes your site more accessible to users. Up until the recent addition of island architecture 11ty’s purely static site generation was hydration-less, meaning that Astro is the leader of this category.

UI Agnostic

Astro and 11ty are UI agnostic static site generators, meaning you can use any UI framework you choose to create interactive components. While it is possible to use any framework in both Astro and 11ty, Astro provides built-in support for React, Preact, Svelte, Vue, Solid, and Lit, while Eleventy offers built-in support for Petite Vue, Vue, Svelte, Preact, Lit, and Alpine.js.

Differences between Astro and Eleventy

The difference between Astro and Eleventy boils down to the finer details. Let’s take a look at how these static site generators differ, and how these differences will impact your developer and user experience, as well as your sites performance.

Templating languages

While Eleventy supports a numerous templating languages, including HTML, Markdown, WebC, JavaScript, Liquid, Nunjucks, Handlebars, Mustache, EJS, Haml, Pug, and Custom, Astro uses .astro layouts, pages, and components for most page templating. Eleventy’s use of independent templating languages means you can mix and match your favorite templating languages without being held hostage to a custom format. This decoupling makes future migrations easier should you choose to use a different syntax. Comparatively, Astro’s use of Astro components for templating offers reusable UI, like headers, and contain small snippets of HTML, or even entire page layouts. Astro components are HTML-only with no client-side runtime. This makes Astro more opinionated than 11ty in terms of templating.

Asset Management

Bundling CSS, JavaScript, and other assets must be configured manually in Eleventy, whereas asset bundling is built-in to Astro. While built-in bundling reduces complexity, this comes at the cost of reduced flexibility.

Directory Structure

Astro uses a src/ directory for all files and metadata needed for querying and processing a site build. In comparison, Eleventy works with your project’s existing directory structure. There is no requirement for an app or pages directory in 11ty — you can use your structure of choice.

Routing

While both Astro and 11ty leverage file-based routing systems that are simple, flexible, and easy to use, dynamic routing is a built-in Astro feature, whereas dynamic routing requires additional setup in Eleventy.

Static Assets

Astro uses a built-in import function to bundle and optimize static assets. In contrast, Eleventy manages static assets by copying files to the output directory, preserving the directory structure.

Rendering

Eleventy offers a range of template engines for rendering; any of the 12 supported templating languages will work. With 11ty you can choose which engine best suit your needs, or even mix and match templating engines to render your project. On the other hand, Astro uses a combination of JSX and template literals for rendering. In Astro JSX defines the structure and content of components, and template literals define the styles and other attributes. In addition to this, Astro also supports server-side rendering (SSR), which generates HTML on each request, while the 11ty/is-land plugin is needed for SSR in Eleventy.

Styling

Astro includes built-in support for CSS styling and the ability to write CSS modules. Although, Astro limits styling options to CSS and CSS-in-JS libraries. Comparatively, 11ty doesn’t provide any built-in styling support, rather 11ty lets you use any CSS preprocessor or library for styling.

Performance

While both Astro and Eleventy are designed to generate fast and efficient static sites, Astro provides more built-in performance optimizations than Eleventy. Astro’s built-in features like prerendering, image optimization, HTTP/2 push, lazy loading, and code-splitting make it easier to achieve optimal site performance without additional configuration. Nonetheless, although 11ty doesn’t offer these features built-in, you can easily add these features and more with third-party plugins and custom optimizations to generate equally performant sites. In fact, CloudCannon.com is built with Eleventy, and makes use of various third-party tools for performance optimization.

Astro vs. 11ty (Eleventy) usage trends

Stability and longevity are important metrics to take into account when considering which static site generator to choose. Usage trends offer useful insights for understanding where both Astro and Eleventy sit in the web development market, how actively each is being developed, and for speculating on the future of these technologies.

GitHub star history

While GitHub stars are solely a metric for how many users have clicked the star button, whether to indicate a favorite repository, follow active development, recommend similar projects, or just to support friends, it is interesting to compare and contrast Astro and 11ty’s star histories. While Eleventy experienced more of a slow but sustained increase in stars, Astro gained approximately double the stars in half the time. It will be interesting to watch and see if Astro can sustain this growth. You can find an up-to-date star history comparison here to observe any changes.

npm trends

npm trends indicate the number of Astro and Eleventy npm downloads over time. Currently, it appears that Astro continues to experience growth in number of downloads, while Eleventy has reached a more steady rate of downloads. Again, it is interesting that Astro has outpaced Eleventy in download number despite being a relatively new framework. You can check out up-to-date npm trends here.

Framework usage by satisfaction

The yearly Jamstack survey records frameworks by usage and satisfaction. You can see how Astro and 11ty 2022 usage and satisfaction compares here. This shows Astro entering the early adoption phase characterized by rapid growth and improving satisfaction scores. On the other hand, 11ty is in the regular growth phase, being singled out as the only purely static site generator to show growth in usage share, which indicates its stability.

Which should I choose?

The choice between Astro and Eleventy ultimately comes down to personal preference. Both Astro and 11ty have impressively fast build times. Both are built for mostly static content-rich use cases with some interactivity. Both are highly flexible and under active development with large user communities. Lastly, both Astro and Eleventy encourage progressive enhancement, helping you prioritize essential static content first and add dynamic functionality later.

But at the end of the day the choice of Astro vs. 11ty depends on what means more to you, flexibility and control, or ease of use.

Choose Astro if you prefer a more opinionated framework with many built-in features, or you envision your static site project evolving in a more app-like direction. Although Astro is more opinionated than 11ty, Astro still offers plenty of customizability and opt-in complexity. Astro use of built-in features for templating, styling, asset management, and more can be beneficial to beginners learning web development. The Astro learning curve is also flattened by their fantastic documentation. And unlike Eleventy, Astro offers server-side rendering (SSR) in addition to static site generation (SSG), which means that if you think your project will need more and more interactivity as it evolves, Astro may be the better fit.

Choose Eleventy if you prefer more simplicity, flexibility, and granular control over your static site. Although Eleventy does not offer as many built-in features as Astro, Eleventy offers greater ‘pluggability’. With 11ty you are in full control over the HTML rendered to your site pages. This means that as the developer you are in full control over the performance of your project, which may require more work to stay organized, but is a powerful position to be in. You can use your templating languages of choice, and make use of any file structure, asset management, styling, optimizations, and rendering systems you choose when building with Eleventy. It is also worth nothing that 11ty is a more mature technology compared to Astro, meaning 11ty has had more time to work out potential issues and gain a broad user base.

Choose either – or both – with CloudCannon

Whether you choose Astro or Eleventy for your content-rich static websites, CloudCannon is here to help make your static site generation even easier, with instant (and free) testing domains and a robust Visual Editor. Our focus is, and always has been, making content editing and production more accessible to everyone, no matter the use case. With CloudCannon’s Git-based CMS, your content team can set up site pages in our intuitive Visual Editor, while developers enjoy our flexible approach to configuration and content management.

We have published both an Astro starter guide and an Eleventy starter guide to help you get your project set up in CloudCannon with ease. Or if you’re just getting started with these technologies for the first time, we have both a comprehensive Astro beginner tutorial and Eleventy beginner tutorial series to lend you a helping hand while you learn.

How to customize CloudCannon’s Client Sharing interface

David Large — Thu, 22 Jun 2023 14:00:00 +0000

In my last post on sharing your CloudCannon sites with anyone — and letting them edit content without having a CloudCannon account — I briefly mentioned the options available to customize the Client Sharing interface. I wanted to go a little further in this post, and explain why it can be helpful to customize your support and documentation links.

A little background, first — in my spare time I’m helping build out the website for this year’s HugoConf*, and given that this is a group effort involving a pool of volunteers, I want to prepare the site so I’m ready to work with external collaborators on the content.

Once the conference speakers are all lined up, and have supplied their headshots, bios, talk titles and summaries, I’d like to be able to hand over all of that content to another conference organizer, and let them add the content to the site.

Further, I’d like to be the main point of contact for these organizers if they have any questions about how to add content to the site, and how it should look. And to help that process along, I’ll also create a public Notion page with easy content-loading instructions — this can serve as my specific documentation for the HugoConf site. (Because I know the site is already set up and working, my external collaborators likely won’t need CloudCannon’s otherwise excellent documentation.)

What I don’t want is for these external collaborators to be able to break my site by altering any source code, or to change my billing details. This — together with the time-boxed nature of the conference preparation — is a great reason to use CloudCannon’s Client Sharing feature.

So let’s get stuck in!

Customizing what your External Collaborators see

We’ll start by turning Client Sharing on, adding a strong password that CloudCannon encrypts on submission.

Because I may want to create a page at /update at some point in the future, I’m going to first change the URL subpath to /login.
My collaborators might need a link to my instructions while they’re adding content, so I’ll add the URL of my public Notion page in the 'Documentation URL' field.
In the 'Support URL' field, I’ll add a mailto: link with my email address. And because I like a tidy inbox, I’ll customize this further with a pre-filled subject line. (Of course, I could get as prescriptive as I like with this mailto: link, including the body text.)
In this case, I don’t need to update the preview URL field. (If my site was hosted externally, or had a lot of redirects, this would be a handy field to use.)

Once that’s all done, I’ll click Update Settings, and we’re all set!

Now let’s jump over to the user’s view, and see where those links come in.

And that’s it! With Client Sharing turned on, I’ve set up an easy content-adding flow for our site collaborators, without having to set up a CloudCannon account for them. I’ve also made sure that I’ve supplied the content loading instructions they’ll need, as well as setting myself up as the contact person for any support questions.

When to set up and customize Client Sharing

Of course, this is just one example of a use case for Client Sharing. If you’re a CloudCannon user on any paid plan, you can easily turn Client Sharing on and customize it for your own use case.

If I worked as a freelance web dev, or with a web agency, this would be a super handy feature to set up my more non-technical clients with an easy interface for minor content changes — all without these users needing a full CloudCannon account.

That way I’d be available to help these clients when necessary, while still empowering them to edit and publish simple changes to their own site.

Happy editors. Happy developers.

Like all of CloudCannon’s features, Client Sharing is aimed at smoothing the path for both editors and developers, letting everyone work more efficiently. Our engineering team designs these CMS features to be as flexible as possible, letting you set up your sites, your editing workflows, and your users’ experience just the way you want.

And, naturally, our features work just the same no matter which static site generator you choose.

* CloudCannon sponsors HugoConf, which keeps the conference free for all.

Several CloudCannon staff members, including myself, are also part of the volunteer committee that helps run the conference. (We’re fans of OSS, and this is a great way to help celebrate the tools we use every day.)

Let anyone, anywhere, edit your static sites

David Large — Thu, 22 Jun 2023 12:00:00 +0000

It’s easy to share your static site with anyone, and allow anyone to edit it, without new users having to create a CloudCannon account. Allow me to (re)introduce a feature we call Client Sharing, available for users on any paid plan.

Client Sharing lets Organization Owners and Developers set a password to grant access to any user, allowing them to edit any site’s content. (Without access to complicated developer features.)

Even better, it works exactly the same no matter which static site generator you’re using on CloudCannon — meaning that sites built with Astro, Eleventy, Hugo, Jekyll, SvelteKit, Next.js, MkDocs, Gatsby, or Nuxt.js can all be edited by anyone: clients, external collaborators, content reviewers, subject-matter experts, legal teams, or anybody else involved.

Your site security is important, so the Client Sharing password you set will be automatically encrypted upon submission, and can only be reset or changed by Owners or Developers. Because Owners and Developers can change their Client Sharing password at any point, or turn Client Sharing off, it’s always easy to choose when to make your site editable, and to control who has access to edit it.

How to share editing access on CloudCannon

Let’s look at how easy Client Sharing is to set up:

I’ll take an Astro site built with the Sendit template as an example. In the above video I’ve already signed up to CloudCannon and linked my GitHub account; from my account dashboard I’ve created an Astro site from a template, and selected the Sendit template, which is already configured for visual editing.
After the site has built, I’ll jump into Site Settings / Sharing.

3. Under the Sharing tab I’ll select Client Sharing, and turn it on by setting a password. 4. Done! Now all I need to do is share the exact login URL (by default, https://example.com/update) with the person or people I want to have editing access. 5. (Optional) We can change the URL path from /update to /login (or anything you’d like), so that users can remember it more easily. To do this, I’ll simply change the URL subpath under Site Settings / Client Sharing / Settings tab to login:

We have a few other URL options here, too: Setting a preview URL overrides the link to the live site in the CloudCannon sidebar and header, which is handy for sites with redirects or those hosted externally. Similarly, we can set a custom documentation URL or support URL, the latter of which can also be a mailto: link. These options are particularly useful to direct clients to contact you if they have any questions.

What your client user sees

Now let’s see the site from the user’s perspective:

After navigating to the /login path on my preview domain and entering my password, I can see that I’m able to create, change and save page and post content, and then publish my changes, but the more complex developer options are hidden from me — no site files, no source code, and no billing options.

If I’m a more non-technical user, that’s probably a good idea!

When to use Client Sharing

Client Sharing is particularly helpful when your editors don’t need a permanent profile and CloudCannon account set up. Because the site Owner (typically an agency or freelancer) is in control of the password and can easily reset it, the client editor never needs to worry about forgetting how to access their site. Common users of Client Sharing include:

Agency clients who only need to make infrequent updates to their site — for example changing their opening hours;
External collaborators or individual contractors whose work on a website will take place within a defined timeframe;
Subject matter experts such as legal or financial teams who need to read, update, or correct minutiae on a cyclical basis (i.e. quarterly or annually).

Because Client Sharing allows user access to editing Pages and Posts and hides Developer settings like Hosting, Builds, and the File Browser, it’s an easy way for a single editor to view a site on CloudCannon and experience the CloudCannon editing interface.

And if it’s important to keep an authorship record of any site changes, you can always add defined Users to your Organization, create a CloudCannon account for them, and set their roles that way — the ‘Editor’ role is functionally the same as that offered by Client Sharing.

Make your clients’ lives easier

When building Jamstack sites for your clients, making their editing experience as simple as possible is vital. And it doesn’t get any easier than sharing a URL and a password with them.

With Client Sharing on CloudCannon, there’ll be no more headaches — for you, or for your clients.

Top 23 free Astro themes for building out-of-this-world static sites in 2023

David Large — Wed, 21 Jun 2023 14:00:00 +0000

With CloudCannon’s CMS support for Astro out of beta, as well as the release of Astro 2.0, there is no better time to get started on an Astro project. If you’re looking for a theme for your next Astro project, we've curated a list of 2023’s top 23 free Astro themes for a variety of use cases. This list includes actively maintained static site Astro templates with the most GitHub stars.

Astro is one of the fastest growing frameworks for static site generation. Designed for building content-rich websites, Astro provides performance features that can’t be matched by other frameworks. With Astro you can build extremely fast static websites, with the flexibility of any UI language, and the ability to easily embed interactive islands. This static site generator is perfect for use cases like marketing sites, documentation websites, personal blogs, portfolio sites, and even smaller e-commerce websites.

You can save a lot of time and energy by using pre-built Astro themes, sometimes called Astro templates, instead of writing your code from scratch. Themes save even more time for static sites, since they’re less likely to need as much dynamic functionality as other web applications. Using a pre-built Astro theme will help maintain a consistent user experience across components, ensure high quality site performance, and save you time on development. Put your saved time to good use by building out the features and functionality of your static website.

If you’re using an Astro CMS like CloudCannon for your static site, you can put that additional time towards improving the visual editing experience for your content editors.

Building with an Astro starter theme is also a great way for beginners to learn Astro. Themes often include great documentation and examples to help you learn how to use different configurations and features.

Now, without further ado, let's dive into 2023’s top 23 free Astro themes for your next lightning-fast static websites. Each of these themes has been selected for its unique design, functionality, and ease of use. Whether you're building a personal blog, a portfolio site, or an e-commerce store, there's sure to be an Astro theme on this list that suits your needs.

23 best Astro themes for a variety of use cases

23. Sendit

Use case(s): Marketing website (multipurpose)

Author: CloudCannon

License: MIT

GitHub ⭐: 15 stars

Sendit is a multipurpose Astro theme made with the Bootstrap CSS framework. The components have been converted to Bookshop. It’s the perfect starting point to see how CloudCannon works and build out a clean, modern looking site at the same time.

Sendit demo site

Sendit GitHub repo

22. Stablo Astro

Use case(s): Astro blog template

Author: web3templates

License: GPL-3.0 license

GitHub ⭐: 20 stars

Astro version of the Popular Stablo Blog Template.

Stablo Astro demo site

Stablo Astro GitHub repo

21. Astro Big Doc

Use case(s): Documentation Theme

Author: MicroWebStacks

License: MIT

GitHub ⭐: 25 stars

Astro Big Doc is a theme that can scale for big documentation websites. Includes an unlimited depth configuration menu that starts with a top app bar for sections navigation, then continues on a tree left menu for pages. Each page then has a tree right menu for its table of content. User friendly even for large menus as both left and right ones are collapsible and width adjustable by the user. Performance oriented, using astro components only, no virtual DOM, no external css framework (you can add your own though). Focus on static generation on build time, no client side rendering. Javascript is for minimal manipulations connecting events and classes. UX friendly Markdown without import and referencing local images, enhancements with components for pan zoom, gallery, and code embeds.

Astro Big Doc demo site

Astro Big Doc GitHub repo

20. Quickstore

Use case(s): Astro e-commerce theme

Author: michael-andreuzza

License: Unlicensed

GitHub ⭐: 28 stars

A free and simple e-commerce theme for Astro where you can embed your Gumroad or lemonsqueezy.

Quickstore demo site

Quickstore GitHub repo

19. Brutal

Use case(s): Minimal neobrutalist theme

Author: ElianCodes

License: MIT

GitHub ⭐: 38 stars

Brutal is a minimal neobrutalist theme for Astro. It's based on Neobrutalist Web Design, a movement that aims to create websites with a minimalistic and functional design. It has some integrations like image optimization, RSS, and sitemap, ready to get your SEO done right.

Brutal demo site

Brutal GitHub repo

18. Astro Design System

Use case(s): Starter theme for design systems

Author: jordienr

License: MIT

GitHub ⭐: 39 stars

Astro Design System is the easiest way to start your our design system. Since Astro is compatible with many frameworks, you can import your components and document them right in the Markdown files.

Astro Design System demo site

Astro Design SystemGitHub repo

17. Astrolus

Use case(s): Home page template

Author: Tailus

License: MIT

GitHub ⭐: 43 stars

Home page template built with Astro and TailwindCSS using tailus blocks.

Astrolus demo site

Astrolus GitHub repo

16. Astro Shopify

Use case(s): Astro e-commerce theme

Author: thomasKn

License: MIT

GitHub ⭐: 47 stars

Astro Shopify is a lightweight and powerful e-commerce starter theme to build headless Shopify storefronts with Astro. The theme is built with Svelte, but you can use any framework you like (React, Vue, Solid, etc.) thanks to Astro. Tailwind UI free components are used for the design.

Astro Shopify demo site

Astro Shopify GitHub repo

15. Hello Astro

Use case(s): Multipurpose Astro starter theme

Author: hellotham

License: MIT

GitHub ⭐: 49 stars

Hello Astro is a multi purpose Astro starter theme written in Typescript, TailwindCSS and AlpineJS. It supports Markdown and MDX based pages and blog posts. Hello Astro can be used for corporate/marketing sites, blogs, documentation sites, and portfolio sites supporting photo galleries.

Hello Astro demo site

Hello Astro GitHub repo

14. Astro Toolbox

Use case(s): Simple Netlify template

Author: tzmanics

License: Unlicensed

GitHub ⭐: 52 stars

Astro Toolbox is a simple template to give you the code you need to use Netlify features with Astro. It is a reference on how to integrate commonly used features within Netlify for Astro.

Astro Toolbox demo site

Astro Toolbox GitHub repo

13. Astro Creek

Use case(s): Astro blog theme

Author: robertguss

License: MIT

GitHub ⭐: 98 stars

Astro Creek is an open source blog theme featuring Sitemap, RSS Feed, SEO functionality, and Search powered by Lunr.js and Mark.js.

Astro Creek demo site

Astro Creek GitHub repo

12. Astro Blog Template

Use case(s): Astro blog template

Author: Charca

License: MIT

GitHub ⭐: 160 stars

Astro Blog Template is a personal blog theme.

Astro Blog Template demo site

Astro Blog Template GitHub repo

11. Astro Modern Personal Website

Use case(s): Personal portfolio template

Author: Manuelernestog

License: MIT

GitHub ⭐: 168 stars

Modern Personal Website Template with Project Section, CV Section, Paginated Blog, RSS Feed, SEO Friendly, Visual themes and Responsive Design for Astro framework. Built with Astro, DaisyUI and Tailwind CSS.

Astro Modern Personal Website demo site

Astro Modern Personal Website GitHub repo

10. Astro Theme Cactus

Use case(s): A simple opinionated starter theme

Author: chrismwilliams

License: MIT

GitHub ⭐: 186 stars

Astro Theme Cactus is a simple opinionated starter built with the Astro framework. Use it to create an easy-to-use blog or website.

Astro Theme Cactus demo site

Astro Theme Cactus Github repo

9. Astro Landing Page

Use case(s): Astro template for landing pages

Author: mhyfritz

License: MIT

GitHub ⭐: 210 stars

An Astro + Tailwind CSS Example/Template for Landing Pages.

Astro Landing Page demo site

Astro Landing Page GitHub repo

8. Accessible Astro Starter

Use case(s): Accessible starter template

Author: markteekman

License: MIT

GitHub ⭐: 213 stars

Accessible Astro Starter is a ready to use, SEO friendly blogging theme. It contains plenty of accessible components to build several page types, Tailwind CSS to help you build faster and example pages such as a dynamic Blog, 404, Markdown and MDX. This theme is designed to help you build your project faster and provide a solid base for accessibility.

Accessible Astro Starter demo site

Accessible Astro Starter GitHub repo

7. Odyssey

Use case(s): Business template

Author: LittleSticks

License: MIT

GitHub ⭐: 239 stars

Odyssey is a modern theme/starter for a business or startup's marketing website. It provides landing page examples, a full-featured blog, contact forms, and more. It is also fully theme-able to match your business' branding and style. It even includes a theme switcher component to show how easily the entire style of the site can be changed with only a few lines of CSS.

Odyssey demo site

Odyssey GitHub repo

6. Krypton

Use case(s): Crypto template

Author: cssninjaStudio

License: MIT

GitHub ⭐: 279 stars

Krypton is a free ICO/Crypto template for Astro.

Krypton demo site

Krypton GitHub repo

5. Astro Ink

Use case(s): Minimal Markdown-based blog theme

Author: one-aalam

License: MIT

GitHub ⭐: 308 stars

Astro Ink is a minimal theme created to serve minimalistic markdown-based blog needs. It ships with almost all the basic Astro components that you might need while creating light-weight, performant, personal blogs, that focus on shipping less Javascript by default.

Astro Ink demo site

Astro Ink GitHub repo

4. Astroship

Use case(s): Starter template for startups, marketing sites, landing pages, and blogs

Author: surjithctly

License: GPL-3.0 license

GitHub ⭐: 420 stars

Astroship is a starter template for startups, marketing websites, landing pages & blogs. Built with Astro & TailwindCSS.

Astroship demo site

Astroship GitHub repo

3. Fresh

Use case(s): Landing page template

Author: cssninjaStudio

License: MIT

GitHub ⭐: 513 stars

Fresh is a landing page starter built with SCSS and JavaScript.

Fresh demo site

Fresh GitHub repo

2. Astro Paper

Use case(s): Minimal blog template

Author: satnaing

License: MIT

GitHub ⭐: 545 stars

AstroPaper is a minimal, responsive, accessible and SEO-friendly Astro blog theme. This theme follows best practices and provides accessibility out of the box. Light and dark mode are supported by default. Moreover, additional color schemes can also be configured.

Astro Paper demo site

Astro Paper GitHub repo

1. Astro Wind

Use case(s): Tailwind CSS template

Author: onwidget

License: MIT

GitHub ⭐: 782 stars

Astro Wind is a free and open-source template to make your website using Astro 2.0 + Tailwind CSS. Ready to start a new project and designed taking into account web best practices.

Astro Wind demo site

Astro Wind GitHub repo

And there we have it! The top 23 open source Astro templates for 2023, covering a range of use cases to take your static website to the next level.

Have we missed your favorite Astro theme? Let us know on Twitter or Mastodon!

Astro vs. Next.js

David Large — Wed, 21 Jun 2023 12:00:00 +0000

By Jaimie McMahon

Why compare Astro and Next.js? Astro is the new kid on the block in the web development world, being relatively new to the market but quickly gaining interest. Next.js is arguably the most popular website development framework, having become the go-to for some of the world’s largest companies like OpenAI, Hulu, and Vimeo. Astro is a UI-agnostic MPA framework built for speed, while Next.js is a React-based SPA framework with a strong focus on features.

As always, the choice between static site generators will depend on a multitude of factors. Your individual use case, you and your team’s web development experience, as well as language and workflow preferences all have a part to play. The good news is, with CloudCannon’s Astro and Next.js support, whichever tool you choose for your static sites, you’ll gain the advantages of flexible development tooling, accessible content management, and visual content editing and page building. With both Astro support and Next.js support having been released out of beta in 2023, there’s no better time to start your new project. However, it should be noted that CloudCannon’s support for Astro and Next.js is limited to SSG capabilities, and does not include SSR.

Read on to compare these two SSGs and determine if you should choose Astro and support the underdog, or choose the tried-and-true Next.js.

TL;DR – choose Astro for content-rich websites with less interactivity, choose Next.js for highly interactive feature-rich websites that are more application-like.

What is Astro?

Used by over 100,000 developers and teams around the world, Astro is the fastest growing static site generator. Although this framework is relatively new, it should not be ignored. First released in 2021, the latest (at the time of writing) Astro 2.1 release features built-in image support, Markdoc integration, astro check for flagging files for errors during development, and inferred types for dynamic routes. Astro is designed for building content-rich websites, a focus that lets them provide performance features that can’t be matched by more application-focused frameworks. This static site generator is ideal for use cases like marketing sites, publishing sites, documentation sites, blogs, portfolios, and even e-commerce sites.

Astro leverages server-side rendering by keeping everything in HTML, CSS, Javascript, or Typescript. This eliminates the need to learn a server-side language, and instead offering opt-in complexity. Astro makes things as simple as possible while you onboard, letting you incrementally reach for new features as you go. Astro takes a Multi Page Application (MPA) approach, which improves page performance metrics like Time to Interactive (TTI). This is critical for content-focused websites since first-load performance is essential. Javascript often slows sites since users’ devices rarely match the speed of a developers laptop. That is why Astro’s goal is to be fast by default.

Astro is more approachable than Next.js for those with less web development experience. You can use any UI component languages you know: React, Preact, Svelte, Vue, Solid, Lit, and more are all supported. The built in UI language .astro makes it easy to use progressive enhancement and accessibility patterns without any overhead. Astro’s features include component syntax, file-based routing, asset handling, a build process, bundling, optimizations, data-fetching, and more. And if you need further control you have access to over 100+ integrations like React, Svelte, Vue, Tailwind CSS, MDX, and image optimizations, to name a few.

Astro also leverages Astro Islands, which are interactive UI components on otherwise static HTML pages. You can use any supported UI framework (React, Svelte, Vue, etc.) or even mix and match them to render islands in the browser in isolation via partial hydration. The UI component is automatically rendered to HTML ahead of time and then all the JavaScript is stripped out to keep your static sites fast by default. When Javascript is required for interactive UI you simply create an island of interactivity without needing to alter the entire page.

Beyond performance gains, island architecture also allows for loading in parallel. This means components can load at the same time and hydrate in isolation. So high-priority components can become interactive without having to wait for heavier components on the same page. You can customize this further by attaching a special client directive that tells Astro exactly when and how to render each component. Overall, Astro has gained so much interest in so little time because it lets developers build extremely fast static websites, with the flexibility of any UI language, and the ability to easily embed interactive islands. What’s more, Astro offers fantastic documentation, and the team is great at educating and supporting new users.

Sites made with Astro

What is Next.js?

Next.js is a popular React framework backed by Vercel that is used by some of the world’s biggest companies. It provides a rich set of features out of the box, including server-side rendering, client-side rendering, API routes, and dynamic imports. As a static site generator it takes care of the tooling and configuration required by React while also giving developers' applications more structure, features, and optimizations.

First released in 2016, with the latest (at the time of writing) Next.js 13.2 release boasting major improvements. These include built-in SEO support, route handlers, MDX for server components, and statically typed links. Next.js is widely used by developers for building complex and feature-rich websites, web applications, and e-commerce platforms. It also has a large and active community that provides support, documentation, and a rich ecosystem of plugins and tools.

Next.js is arguably the most widely used framework among developers with React expertise. React offers a virtual DOM program and server-side rendering, which makes complex applications run faster. The stated goal of Next.js is to bring full-stack functionality to the frontend. With new Rust-based transpilation and minification, and Turbopack replacing Webpack, Next.js is well positioned to continue acting as the go-to powerhouse for web developers.

Next.js takes a Single-Page Application (SPA) approach, meaning that most HTML is rendered locally with JavaScript running on the browser. Usually, local rendering slows down a page, but Next.js mitigates this by including the option for server-side rendering on the first page load. It is worth noting that even though local rendering is initially slower it benefits future page loading. This will improve the experience for long-lived users. Similarly, a SPA’s client routing offers faster future page loads once the web application is fully loaded in the browser. Next.js’s increased control over page rendering also provides more powerful transitions across page navigation.

Next.js uses an app-like architecture that is ideal for complex use cases that require multi-page state management. The entire website is run as a single application that maintains state and memory across many pages. Overall, Next.js has become the web development powerhouse that it is today because it allows React developers to build highly interactive web applications without compromising on performance. What’s more is that there is a massive community backing Next.js, meaning you can easily find any resources needed for your Next.js project.

Sites made with Next.js?

Which should I choose?

The short answer – as always – is that it depends on you, your team, and your project.

Choose Astro if you (or your team) are newer to web development and would benefit from a gentler learning curve. With Astro’s opt-in complexity, you can build an entire website with just HTML and CSS. With server-side rendering you won’t need to worry about the complexity of hook and stale closures, atoms, selectors, reactions, or derivations.

For more experienced developers, you may still want to choose Astro as it’s flexible enough to let you capitalize on your accumulated knowledge by letting you mix and match multiple UI frameworks within a single project. You can use React, Preact, Solid, Svelte, Vue, and Lit in your Astro project. This also makes Astro the superior choice if you predict future project migrations as being UI-agnostic means you can avoid project lock-in to a single framework.

Another reason to make the switch to Astro is if your project is content heavy and only requires limited interactivity. Your content-rich static sites will be significantly faster using Astro since less JavaScript is served. For example, Astro sites can load 40% faster with 90% less JavaScript compared to Next.js. Because Astro only hydrates what's needed and leaves the rest as static HTML, you get to decide which components need to run in the browser. This selective hydration paired with Astro’s island architecture for interactive components means you can build lightning-fast websites. The increase in performance will result in improved SEO and user experience for your Astro site.

For example, it would make sense to choose Astro if you are just getting started with web development and want a flexible tool for building simple, yet high performing static sites. It would also be an ideal choice if you want more flexibility to leverage your development experience by mixing and matching frameworks to build the fastest websites for use cases like marketing sites, documentation, blogs, and smaller e-commerce stores.

Choose Next.js if you (or your team) already has React experience and want to benefit from a plethora of features, plugins, and community resources. Next.js’s popularity and longevity to date means that it boasts a very large community of users. This makes a smooth developer experience with users always making new Next.js resources.

Next.js is also the obvious choice for React developers building complex static websites that require multi-page state management. If your project includes app-like features and you prefer to work in React, then Next.js is a no-brainer. Although Astro can build faster static websites compared to Next.js, Astro was not designed for sites that need multi-page state management. This is where Next.js shines as it offers fantastic site performance and developer experience in comparison to other application-focused frameworks. Next.js reduces the upfront construction time needed for complex projects and allows greater control over scaling for huge e-commerce sites.

For instance, it would make sense to choose Next.js if you already know React and you are building a massive e-commerce store that needs to scale, or a highly interactive website that works more like an app. If you are building this type of site but don’t prefer React, then a static site generator like SvelteKit or Nuxt.js would be a suitable alternative.

Choose either – or both – with CloudCannon

CloudCannon’s focus is, and always has been, making content editing and production more accessible to everyone, no matter the use case. Accordingly, we provide excellent support for both Astro and Next.js, meaning we’re here for you whichever approach you choose. With our Git-based CMS, your content teams will be able to easily build pages in an intuitive visual editor, while developers benefit from our flexible approach to configuration and content management.

We’ve published comprehensive guides for Getting started with Astro and Getting started with Next.js and CloudCannon (including a video) to help you set up your project.

How Jampack optimizes our Eleventy website and improves performance

David Large — Tue, 20 Jun 2023 14:00:00 +0000

I’ve written previously about the performance outcomes of transitioning cloudcannon.com to Eleventy, which include perfect Lighthouse scores and excellent Core Web Vitals scores. We’re now several weeks into the flow of building our site pages, as well as drafting, editing, and publishing blog posts on Eleventy with CloudCannon as our CMS, and it’s been, as we expected, a joy to work with. But I’ve also wanted to dig a little deeper into each of the tools we used to achieve our performance gains, and to share how we configured these tools. So let’s get started, shall we?

One of the easiest tools to include in our new stack was Jampack from RIOTS, who you may know as the developers of Backlight; the Figma plugins story.to.design, html.to.design, and code.to.design; and the online IDEs WebComponents.dev, LWC.studio, and Components.studio. Altogether, these tools are used by hundreds of thousands of developers and designers — and for a reasonably small core team, RIOTS punches well above their weight.

What is Jampack?

In brief, Jampack is a post-processing tool that takes the output of any static site generator and optimizes it for user experience and Core Web Vitals scores. Jampack is one of several open-source tools that the

RIOTS team have created. It was released at the end of January 2023, and as soon as we heard about it, we immediately started testing it out.

I’ll go into more detail below, but in brief, I would recommend Jampack to any CloudCannon user, or indeed anyone with a static site.

Why the blanket endorsement? Primarily because Jampack is SSG-agnostic. While we use Eleventy to build cloudcannon.com, everyone who works at CloudCannon uses a range of static site generators to build our personal sites, and Jampack works with all of them. (Even, of course, those built without an SSG — because all Jampack requires is a folder containing an output static site.)

What does Jampack do?

Quite a lot, really! Here’s a quick summary of the major steps Jampack takes when it’s run:

1) Optimize images

Jampack compresses images with the high-performance sharp processing module; JPEG and PNG images are converted to AVIF and WebP. Jampack also creates responsive images for smaller devices, and assigns image dimensions to avoid any CLS issues.

2) Optimize above the fold

Jampack introduced a new <the-fold></the-fold> mark that you can add to your HTML to mark where a page’s fold should be. Based on this mark, Jampack prioritizes images above the fold and turns them into progressive JPEGs for a better user experience. If images above the fold are smaller than 1500 bytes, Jampack embeds the image into html using data URLs.

Below the fold, Jampack lazy-loads all images and iframes.

3) Compress all assets

In its second and final pass, Jampack compresses all untouched assets, keeping the same name and same file format for each:

Extension	Compressor
.html, .htm	html-minifier-terser
.css	Elements of both csso and lightningCSS
.js	swc
.svg	svgo
.jpg, .jpeg	sharp
.png	sharp
.webp	sharp
.avif	sharp

Check out the Jampack docs for more detail, and also the available CLI options.

How we use Jampack

To add Jampack to cloudcannon.com, we simply added a single line to our postbuild file, which runs on our production site. (While we could run Jampack on our staging branch, or on every single branch we make, we’re privileging the production branch here, and in the process shaving off a very small amount of post-build time when we’re working on new site content earlier on in our publishing workflow.)

Because Jampack optimizes above the fold, we’ve also built a specific Bookshop component to indicate where the fold should be. If you use Bookshop to manage your components and would like to do the same for your site, here’s that component’s data file:


spec:
  structures:
    - blocks
  label: "Fold"
  description: >-
    Indicates where the page fold is.
    Everything below this point will be lazy loaded.
  icon: folder_open
  tags: []

This component, when added to a page by editors using CloudCannon’s Visual Editor, simply inserts the following between other page components:


<the-fold></the-fold>

It’s a really simple step, but it gives me and our team of editors a lot of control: we’re able to precisely determine which parts of a page should be more heavily optimized, and which should be lazy-loaded.

As you can see above, we generally set the fold at the end of the first ‘container’ component on each page. (We've set our Bookshop components to be shown or hidden, depending on mobile, tablet, or desktop breakpoints; to make sure that Jampack optimizes above the fold for all device types, we set the fold under all device-specific versions of that top component.)

SSG chaining

Jampack fits into a workflow we refer to internally as ‘SSG chaining’ — like our open-source search tool Pagefind, and our translation management tool Rosey. The general idea of SSG chaining, as we use the term, is that static sites can (and should) stay simple — and static site generators shouldn’t have to ship and build every single possible feature or optimization strategy. Instead, users can first build their sites using any SSG they like, and then ‘chain’ a series of post-build tools on the static output.

Rather than building an optimizer or a search plugin for a dozen different SSGs, tools like Jampack are able to share the benefits they offer across the whole static site ecosystem. And when a newer, shinier SSG comes along, there’s no question that these SSG-chaining tools will still work on them: because there’s not the sense of lock-in that can come with plugins we depend upon, developers are freer to shift between static site generators, while still using their preferred post-build tools.

Final thoughts

Though I think we’re seeing some major development tools and frameworks feature-creep towards full meta-framework, jack-of-all-trades, gotta-catch-them-all status, Jampack reminds us that it’s possible to escape that particular rat race. Or at least to sidestep it, and give every developer the same Core Web Vitals advantages, regardless of the tools they choose to build their static sites.

CloudCannon.com is now built with Eleventy!

David Large — Tue, 20 Jun 2023 12:00:00 +0000

CloudCannon.com is now built with Eleventy!

We’re big fans of Eleventy for a host of reasons — including its build speed, its focus on making lean websites, and its flexibility and overall developer experience — and moving over to full Eleventy builds on our own site has been something I’ve looked forward to since I started experimenting with the SSG more than a year ago.

After working on designs and development for a couple of months, we officially switched over to our new Eleventy site repository just two weeks ago, and I’m not exaggerating when I say that writing blog posts, building pages, and editing existing content on this new site has been the best website editing experience I’ve ever had.

Best of all, thanks to some careful design and development decisions (more on those below), both our build speed and page load speed have dramatically improved, our Lighthouse scores for the homepage and other key landing pages hover tantalizingly close to perfect 100s across the board, and we’re inching closer and closer to full SEO optimization by default.

But how did we get there?

Design

Our goal with the new CloudCannon website design was simple: craft a journey for prospective users that was clear, concise, and to the point. To do this we partnered with our friends at Static Mania to design a site that’s clean, uses white space effectively across a range of device types, and ensures the layout is easy to navigate.

Ultimately, showcasing the CMS is still our main goal, so we’ve also added new illustrations that not only give users an idea of what our app looks like, but also shows them the processes behind it. We want our prospective users to feel confident they know what they’re getting when they choose CloudCannon as a CMS.

Development

A small team of CloudCannon developers built out the site, with a focus on performance, asset management, and — of course — ease of editing. They treated the project as a proof of concept: that CloudCannon can provide the most intuitive and flexible editing interface for users with a range of experience. From non-technical marketers to source code dabblers, all the way through to developers working in their favorite IDE, the new codebase for CloudCannon.com caters for everyone already in our team, as well as future team members.

Here’s the tech stack we settled on:

Static site generator: Eleventy

The main advantages of Eleventy that swayed us were its build speed, its flexibility for templating languages — particularly Liquid, which a lot of our team has experience with — and the features offered by the recent 2.0 release. We’ve also built an Eleventy integration for our open-source component manager Bookshop across our builds, with visual data bindings to allow live visual editing.

Styling: TailwindCSS

Tailwind has a lot of advantages to it — including the ability to code CSS without leaving HTML, customizability, responsiveness, and a small file size — but the main drawcards for us were reinforcing consistency across our development team with standardized classes, and ensuring that new devs joining our team will find everything in the CloudCannon.com codebase readable. (And Tailwind’s amazing documentation helps, too!)

Asset management: S3 and imgix

We use an S3 bucket for our asset management, and with imgix in front of it, all our content editors need to do is upload a high-resolution image directly through the CloudCannon interface. Luckily for us, imgix takes care of everything else — optimizing, resizing, rendering, and serving the right image size and type for the user’s device. As far as workflows for site editors go, it’s ideal.

Performance: Jampack

Eleventy handles performance well by default, and we’ve leaned into its default optimization strategies, but a tool like Div/Riots’ Jampack also helped to push our Core Web Vitals in the right direction. Jampack is particularly good at optimizing above the fold, and we’ve used their tag <the-fold> to indicate where that should sit. (We’ve even built that tag into a simple Bookshop component, so content editors can set the fold without dipping into HTML.)

Adding Jampack to our build was easy — with CloudCannon’s build hooks, adding Jampack to our production postbuild file was a simple one-line addition for a lot of potential gains.

Site search: Pagefind

It’s probably no surprise that we use our own open-source search tool, Pagefind, for our live search — it has the performance benefits of using as little user bandwidth as possible, without having to host any additional infrastructure. (If you’re interested in the stats, Pagefind takes on average 3 seconds to index our whole site after each Eleventy build, and the average network traffic for a single search term is only around 100kB.) Again, postbuild hooks FTW!

How we use the site

Blogging

Eleventy makes blogging flexible enough that it’ll fit in with anyone’s writing habits. Since we often schedule our posts and have multiple drafts on the go, we added a few lines of JavaScript logic to our posts/posts.11tydata.js file to ensure we could keep our drafts unpublished, and publish our new posts exactly when we want to.

Personally, I almost always use CloudCannon’s Content Editor to draft my posts — as a rich text editor for Markdown files, it’s ideal for writing in a clean and intuitive interface. For shorter posts that rely more heavily on images or videos, I’d switch over to the live Visual Editor, where I can see the full context of the page as it would appear to a reader.

I make a lot of use of Eleventy's shortcodes while blogging, as well. Eleventy supports Nunjucks, Liquid, Handlebars, and JavaScript shortcodes, but with Bookshop we've pulled all of our shortcodes into our global cloudcannon.config.yml file instead of Eleventy's .eleventy.js file, so I can add them to my posts with a single click. This isn't an essential step, but keeping editing and build features in separate config files means future developers will always know where to find them.

Page building

This is the magical part, in my view. Thanks to Bookshop, pages on CloudCannon.com are based on a ‘container’ component, which can hold content blocks like headings, Markdown text, images, videos — anything you’d conceivably need to add to a webpage. And because we can use the Visual Editor to edit our pages and nest container components, as well as to select device-specific images, layouts, spacing, margin, and padding attributes, we’re able to turn out pretty complex pages within just a few minutes.

Here's our Marketing Manager Olivia Nicholson, discussing what she looks for in a performant site, and why page building with Eleventy works for her:

CloudCannon.com’s publishing workflows

We use CloudCannon’s Projects feature to control our publishing workflow. In brief, it’s set up like so:

main <— staging <— branches

When we want to draft new content for the site, or edit existing content, we branch from our private staging site — this means different members of our team can simultaneously test out new content and dev features without anyone blocking each other. Publishing the branch creates a Git pull request and merges it to staging, where we run our final checks before publishing once more to main, our live production site.

Our developers’ perspective

I also spoke with some of the CloudCannon dev team who helped put the site together — Alysha Nolan, Tiaan Fairchild, and Mike Neumegen. Here’s their take on the different elements of our stack, and what makes Eleventy such a great static site generator:

And finally, some stats

Lighthouse

Google’s PageSpeed Insights offers several helpful indicators of site performance. If you’re interested, I wrote about static sites and page weight in a previous post, with six actionable tips to improve your own site performance metrics.

Lighthouse scores are generally used to diagnose performance issues, across the categories Performance, Accessibility, Best Practices, and SEO. We’re currently sitting pretty at 100 across the board for desktop users — proof positive that Eleventy and CloudCannon, together with the rest of our new stack, make for excellent performance.

Core Web Vitals

When it comes to our CWV — the measurements that make up the Lighthouse categories — we’re in the green on every metric:

Largest Contentful Paint (LCP): 1.8s
First Input Delay (FID): 7ms
Cumulative Layout Shift (CLS): 0.02
First Contentful Paint (FCP): 1s
Interaction to Next Paint (INP): 40ms
Time to First Byte (TTFB): 0.5s

While we’re always looking for ways to improve these scores, we attribute them to a range of factors: static generation and optimization from Eleventy, image processing from imgix, post-build processing from Jampack, and most of all, considered development from the CloudCannon dev team.

As CloudCannon’s CMS has grown over the past ten years, we’ve added full support for many SSGs — Jekyll, Eleventy, Hugo, SvelteKit, Gatsby, Next.js, and most recently Astro, with more on the way over the coming months. In all honesty, we could have worked with any of the above generators, and had the same great editing experience alongside excellent site performance.

Do you have any questions about bringing your static sites to CloudCannon, or need a little help with migration or configuration? Feel free to book a demo call, take a look at our documentation, or get in touch with our support team.

Out-of-this-world support for all Astro users

David Large — Tue, 20 Jun 2023 00:18:37 +0000

3… 2… 1… Ignition. We have liftoff.

Another week, another static site generator out of beta support on CloudCannon. But it’s not just any SSG — it’s Astro, the top-performing all-in-one web framework designed for speed. With Astro and CloudCannon you can manage your content in your own Git repository and deploy everywhere, while using your favorite UI components and libraries. And the final touch? With CloudCannon, your highly performant sites are available for non-technical editors to draft, review, and publish their content.

Astro is a lightweight and powerful static site generator that allows developers to mix and match popular frameworks like as React, Preact, Svelte, Vue, SolidJS, AlpineJS, and Lit. Astro keeps your static sites fast by default, automatically converting components to HTML at build time, and removing superfluous JavaScript. And with Astro's partial hydration, you can hydrate specific interactive components on the page.

With CloudCannon as your Astro CMS, your whole team can collaborate to create incredibly fast static sites with a wide range of components. Astro is in fine company on CloudCannon — we’ve recently brought our support for Gatsby, SvelteKit, and Next.js out of beta, joining the likes of Hugo, Jekyll, and Eleventy. (And we’re not stopping there!)

What’s new for Astro users on CloudCannon?

We have imported, built, and stress-tested a variety of static Astro sites using CloudCannon, from local development using GitHub, GitLab, and Bitbucket connections to spinning up new Astro sites straight on CloudCannon from one of our existing themes. We've improved the Astro experience for all users along the way.

Astro-specific documentation and guides

Experienced devs choose Astro because they love both the tool’s DX and its performance. We’re big fans too, but we also want to support developers who are new to either Astro or CloudCannon. With that in mind, we've updated our documentation to address Astro specifically, to ensure that all of your questions are answered and readily searchable. (If you work across multiple SSGs, you’ll find a handy SSG-switcher in the top right of our new documentation, so you can compare how CloudCannon adapts to different tools.)

We’ve also written up a Getting Started with Astro guide, to help you configure your Astro site for visual editing with CloudCannon, share your Astro site with others, and set up content publishing workflows for large teams.

Sendit — a stellar free page-building theme for Astro

We've extended our new theme Sendit for Astro as well, demonstrating the benefits of CloudCannon's page-building processes and adaptable Visual Editor for Astro users. Sendit provides a sleek, contemporary, and ready-to-use site that is now available for everyone to adapt, edit, and customize. It’s also an excellent working example of how to configure your existing Astro sites for editing on CloudCannon: make use of that cloudcannon.config.yml file and see how it’s all set up!

With Sendit, all users can quickly build their pages from a pre-made set of 20 pre-styled and reusable page components, as well as create their own components to extend the project. Sendit has an easily configurable navigation and footer, multiple hero options, and subtle animations, all optimized for editing in CloudCannon.

Check out the Sendit demo site to see its potential. You can also deploy a new Sendit site with Astro and CloudCannon in one click, and experience the best of our Visual Editor for intuitive page building.

Thanks to the Astro core team!

We worked closely with members of the Astro core team to reach this milestone release, and it was a really productive process. CloudCannon developer Tate Kennington led the charge on our side, and Astro's concerted #leanweb approach to building sites with islands architecture and partial hydration for interactivity really won him over.

Here's Tate on Astro — why the tool is such a natural fit for CloudCannon, the steps we took to bring our Astro support out of beta, and his excitement for the future of Astro and CloudCannon features growing alongside each other:

Full CloudCannon support for Gatsby

David Large — Tue, 20 Jun 2023 00:14:12 +0000

What’s that? Another SSG support release for CloudCannon? Absolutely!

We're thrilled to introduce our latest release, which brings CloudCannon's support for Gatsby out of beta. Gatsby is a very popular SSG, due in large part to its use of React for the client-side and GraphQL to access data. For developers using React components, or wanting to bring their data from a legacy CMS to the modern web, Gatsby is an excellent choice.

We’ve been working on enhancing the development and editing experience for all of our customers on Gatsby, and we’re proud to take off that ‘beta’ flag, bringing CloudCannon’s Gatsby support in line with our integration with other leading SSGs, like Eleventy, Hugo, SvelteKit, Next.js, and Jekyll.

Gatsby’s been in the news quite a lot lately — Netlify acquired Gatsby Inc just over a month ago, which will allow for more growth in the Gatsby framework and help cement its status in the static site community. And speaking of community, after the acquisition, the Netlify and Gatsby teams both reaffirmed their commitment to open-source. This means Gatsby’s rich ecosystem of plugins and integrations will continue to flourish, allowing developers to easily extend its capabilities and integrate with other tools and services. All in all, it’s a great time to be using Gatsby!

What’s new for Gatsby users on CloudCannon?

We set a high standard for this release, as we do for all of our support releases. To ensure that everyone has a positive experience, we’ve made the following changes:

All of your Gatsby static sites will be supported

We have imported, built, and stress-tested a variety of static Gatsby sites using CloudCannon, from local development using GitHub, GitLab, and Bitbucket connections to spinning up new Gatsby sites straight on CloudCannon from one of our existing themes. We've improved the Gatsby experience for all users along the way.

Complete documentation and guides for Gatsby on CloudCannon

We've updated our Gatsby-specific documentation to ensure that all of your queries are answered and readily searchable. Our support and engineering teams have also prepared thorough advice on configuring your current Gatsby sites for use with CloudCannon's Visual, Content, and Data Editors.

Whether you’re working on page-building; data, content, or visual editing; creating React components or using existing ones; templating; blogging; or using GraphQL data on your CloudCannon Gatsby sites, our documentation, getting started guide, and support will have you covered.

Sendit — a new free page-building theme for Gatsby

We've extended our new theme Sendit for Gatsby as well, demonstrating the benefits of CloudCannon's page-building processes and adaptable Visual Editor for Gatsby users. Sendit provides a sleek, contemporary, and ready-to-use site that is now available for everyone to adapt, edit, and customize. It’s also an excellent working example of how to configure your existing Gatsby sites for CloudCannon, so feel free to dig into that cloudcannon.config.yml file!

Check out the Sendit demo site to see its potential. You can also deploy a new Sendit site with Gatsby and CloudCannon in less than a minute and experience the best of our Visual Editor for intuitive page building.

DEV Community: CloudCannon

HugoConf 2023

Save the date: Thursday 21 September

Speaking at HugoConf: call for proposals

Tech talk

Lightning talk

Workshop

Get in touch

Eleventy (11ty) vs. Gatsby in 2023 – which SSG is best for you?

What is Eleventy?

Sites made with 11ty

What is Gatsby.js?

Sites made with Gatsby

Which should I choose?

Choose either – or both – with CloudCannon

How CloudCannon’s live editing works with Astro and Bookshop

Getting started with Astro and CloudCannon

Separating content and layout

How Visual Editing works on CloudCannon

Connecting the dots

Global configuration with CloudCannon and Astro

Where to now?

Eleventy (11ty) vs. Astro

Table of contents

What is Astro?

Astro’s key features

Getting started with Astro

Astro community & ecosystem

Astro use cases

Sites made with Astro

What is Eleventy?

Eleventy’s key features

Getting started with Eleventy

Eleventy community and ecosystem

Eleventy use cases

Sites Made with Eleventy

Similarities between Astro and Eleventy

Javascript based

Zero config

Flexible content authoring

MPAs

Progressive enhancement

Island architecture

Partial Hydration

UI Agnostic

Differences between Astro and Eleventy

Templating languages

Asset Management

Directory Structure

Routing

Static Assets

Rendering

Styling

Performance

Astro vs. 11ty (Eleventy) usage trends

GitHub star history

npm trends

Framework usage by satisfaction

Which should I choose?

Choose either – or both – with CloudCannon

How to customize CloudCannon’s Client Sharing interface

Customizing what your External Collaborators see

When to set up and customize Client Sharing

Happy editors. Happy developers.

Let anyone, anywhere, edit your static sites

How to share editing access on CloudCannon

What your client user sees

When to use Client Sharing

Make your clients’ lives easier

Top 23 free Astro themes for building out-of-this-world static sites in 2023

23 best Astro themes for a variety of use cases

22. Stablo Astro

21. Astro Big Doc

20. Quickstore

19. Brutal

18. Astro Design System

17. Astrolus

16. Astro Shopify

15. Hello Astro

14. Astro Toolbox