Build your own JAMstack site

Prerequisites

npm
gatsby-cli
gitlab account
domain name (purchased through Google Domains)
meetup.com page

Build your site

Create you meetup site directory and bootstrap package.json.

mkdir my-awesome-meetup-website
cd my-awesome-meetup-website/
npm init -y

Install Gatsby, Gatsby Theme Meetup and its dependencies.

npm install react react-dom gatsby @matthieuauger/gatsby-theme-meetup

Configure Gatsby to use the Gatsby Theme Meetup

Open the my-awesome-meetup-website directory in your code editor of choice, create a gatsby-config.js file at the root with following lines and save your changes
```
module.exports = {
  plugins: [
    {
      resolve: "@matthieuauger/gatsby-theme-meetup"
    }
  ]
};
```

Start the site in develop mode.

node_modules/.bin/gatsby develop # or install Gatsby CLI globally with npm install -g gatsby-cli

At this point, you’ve got a fully functional Meetup website. For now, it fetchs and dislpay content for the JAMstack Paris Meetup.

Configure site for your meetup

The theme offers simple configurations directly by modifying the gatsby-config.js file in your site directory.

Beware, when updating your gatsby-config.js file, you must stop and start again gatsby develop so it can source the new configuration

Meetup Name (default: JAMstack Paris)
Homepage Headline (default: Le meetup bimestriel autour de la JAMstack)
Meetup.com group URL. You can get it in the URL of your Meetup (default: jamstack-paris)
Videos Url (by default, redirect to the JAMstack Paris Youtube Page)
Talk Proposal Url (by default, redirect to the JAMstack Paris form)

Here is an example of a gatsby-config.js configuration for the JAMstack London Meetup.

module.exports = {
  plugins: [
    {
      resolve: "@matthieuauger/gatsby-theme-meetup",
      options: {
        meetupName: "JAMstack London",
        meetupHomepageHeadline: "The JAMstack meetup with a cup of tea 🍵",
        meetupDotComGroupUrlName: "JAMstack-London",
        displayVideosLink: false,
        //meetupVideosUrl = 'https://www.youtube.com/channel/UC66eQOycjMnaqzpbRUhEK2w'
        talkProposalUrl: "#",
        //textBlocksPath: `${__dirname}/src/text-blocks`,
        dateFormat: `dddd DD MMMM YYYY`,
        translations: {
          PROPOSE_A_TALK: "Propose a talk →",
          FETCH_VIDEOS: "See videos →",
          LAST_MEETUPS: "Last meetups",
          REGISTER_ON_MEETUP: "Register on Meetup →"
        }
      }
    }
  ]
};

Personalize Editorial Content

Editorial content consists of three blocks on the website.

The main text at the top of the page (usually a description of your Meetup but can be whatever)
The main text at the bottom of the page (usually a call to action for talk proposals)
The footer (usually some credits or sponsorship links)

These contents are [arkdown files sourced by Gatsby during build time.

To override these:

Create the text-blocks directory in your site which will contain your markdown editorial content.
```
mkdir -p src/text-blocks
```

Copy the Markdown files inside your site directory.

cp node_modules/@matthieuauger/gatsby-theme-meetup/src/text-blocks/*.md src/text-blocks

Add option in the configuration to tell Gatsby to source content from your directory

module.exports = {
  plugins: [
    {
      resolve: "@matthieuauger/gatsby-theme-meetup",
      options: {
        //
        // ... your configuration here
        //
        textBlocksPath: `${__dirname}/src/text-blocks`,
        //
        // ... you configuration here
        //
      }
    }
  ]
};

Edit the copied markdown files in your code editor. Beware not to change the type field at the top of the markdown files.

Beware, when updating your gatsby-config.js file, you must stop and start again gatsby develop so it can source the new configuration

Change Logo

For more advanced configurations, you can use Component Shadowing. For example to override the logo.

Create the directory structure in your site which will contain your shadow component.
```
mkdir -p src/@matthieuauger/gatsby-theme-meetup/components/Header
```

Copy the base Logo component inside your site directory.

cp node_modules/@matthieuauger/gatsby-theme-meetup/src/components/Header/MeetupLogo.component.js src/@matthieuauger/gatsby-theme-meetup/components/Header

Edit the component and use an image of your choice

Beware, when shadowing compopnents, you must stop and start again gatsby develop so it can load your shadowed components

Deploy to netlify

Connect Gitlab account to netlify
Build with default configurations
Connect domain name

adapted from Matthieu Auger

nicktu12/jamstack tutorial.md