Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub

CircleCI Lighthouse accessibility Lighthouse best practices Lighthouse performance

Gatsby theme Ágora

A Gatsby theme to generate simple events and conferences landings pages.

See the live demo generated from the template repository!


  • Customize the design (based in bootstrap5) by overwriting the components in the gatsby site that uses this theme
  • Different agendas for different days based in a yaml file
  • Speakers detail and summary based in markdown files
  • Organizers summary in a yaml file
  • Static pages as markdown files
  • Talks with none or more than one speaker based in markdown files
  • Venue in GoogleMaps (without a GoogleMap key)

Not yet but prioritized:

  • Sponsors
  • Different venues per agenda (partially implemented)
  • i18n and support for different languages
  • PostEvent documentation (images, videos, etc)
  • Stats in the home

You can open a PR with the label “proposal” to ask for more features!

Getting started

You can use the template repository of the demo site that is fully configured and ready to be used.

Option 2: Follow the following steps

Install the theme

Install the theme dependency in your gatsby site

yarn add gatsby-theme-agora

Add the theme in your gatsby-config.js file

module.exports = {
  plugins: [
      resolve: "gatsby-theme-agora",
      options: {
        siteUrl: "https://yourdomain.com",

Configure and add content to your conference site

All the configuration and content resides in the /content directory in the root of the gatsby project.
The structure should be similar to this:

├── agenda.yaml
├── links.yaml
├── organizers.yaml
├── config
    ├── config.yaml
    └── images
        ├── banner.png
        └── logo.png
├── pages
    └── your-page.md
├── speakers
    ├── speaker-1.md
    └── speaker-2.md
└── talks
    ├── talk-1.md
    └── talk-2.md
Add the Configuration file

The general configuration can be set in the content/config/config.yaml file, the default information is

Important note with images: if your received the error “Cannot return null for non-nullable field ConfigYamlConferenceInfo.xxxImage”, check if the relative path for the image is correct. This happens when the image can’t be found.

  # optional, the language of the site
  language: en
  # required, the site url
  url: https://conference.com
  # optional, the footer notes. You can specify null to remove all the footer notes.
  # They can be written in markdown
  footerNotes: Created with [Gatsby Theme Agora](https://github.com/asiermarques/gatsby-theme-agora)

  # required
  name: Awesome Conference
  # required
  claim: A great conference for developers and other mystical creatures
  # required
  date: 5th May, Bilbao
  # required
  logoImage: images/logo.png
  # required
  hashTag: "#conference"
  # required
  shareImage: images/banner.png
  # optional
    text: Get your ticket!
    link: "https://example.com"

  # required
  description: A little description for the conference, what is the audience, why is interesting to the people and this kind of stuff
  # optional
    text: Agenda
    link: "#agenda"

  # required
  mapIframeUrl: https://www.openstreetmap.org/export/embed.html?bbox=-3.0432558059692383%2C43.273112177849896%2C-2.9591417312622075%2C43.31212645126047&layer=mapnik
  # required
  venueInformation: |
    Jardin Botánico s/n
    48902 Barakaldo, España
Adding an speaker

You can create a markdown file with the speaker data in the content/speakers directory.
The markdown file should have the following meta structure:

key: required, the key for the speaker
name: required, the name of the speaker
title: optional, the company title
image: required, the path to the image file, for example images/speaker.png
  twitter: optional, the twitter username
  linkedin: optional, the linkedin username
  github: optional, the github username

Text for the bio
Adding a talk

You can create a markdown file with the speaker data in the content/talks directory.
The markdown file should have the following meta structure:

key: required, the key for the talk
speakers: required, an array for the speakers, for example [ speaker ]
title: required, the title for the talk

The talk description

####3 Adding the talk for an agenda slot

You should add the talk to the content/agenda.yaml file in order to be shown in the agenda.
The talk is added by its key, for example:

  - type: talk
    track: 1
    key: the_talk_key
    slot: "16:30 - 17:10"

Websites using this theme

© 2023 Gatsby, Inc.