Relief Resources Starter
Kick off your city's relief efforts as we all learn to cope with COVID-19 with this starter powered by Gatsby, Airtable, and community efforts.
This project is aims to make it as easy as possible to launch and manage an index of resources in your city during the COVID-19 pandemic.
Using this template you can set up a relief resources site without touching any code.
1. Get Ready
- Secure a domain name
Create your accounts
- Create Github Account
- Create Netlify Account or Zeit Account
- Create Airtable Account
2. Set up data source
- Set up Airtable
Get ready to deploy
- Get keys for env variables
3. Deploy your site
- Click Deploy button
- Connect to Airtable, set City/State
- Configure domain name
4. Go Live
- Approve entries in Airtable
- Redploy your site on Netlify
- Add your site to the directory
- Spread the word
5. Local Development
- Preparation steps
- Create .env file
- NPM link local theme repo
Generally we're using the pattern
citynamereliefresources.com -- for example:
First, you'll need to create a few accounts with free tiers from different software services.
To set up Airtable, you can use a base template configured specifically for a relief resources site.
👉🏼 Open the template (Version 2!) and click "Add base".
⚠️ Go ahead and add the version 2 template. and click "Add base".
⚠️ Head to your table of resources from the version 1 template you added previously. Go ahead and select all of the rows you want to copy over, then hit
⚠️ Head to the new table of resources you created from the version 2 template. Create a new row, then hit
CTRL-V. When given the option, select
Expand the group so that all of the pasted cells will fit. and hit
⚠️ Lastly, make sure to manually set the
PageCategory column for all of the rows you copied over - this is what binds them to a specific page of resources on your site.
Then you should see several tiles that correspond to individual "Bases" that Airtable has set up for you. Look for "Relief Resources Template".
👉🏼 Hover over the "Relief Resources Template" tile, and click the "down" caret that appears. Replace the text "Relief Resources Template" with something like "Relief Resources New Haven". (Use your city name).
In order for your site to grab the data from your Airtable document, you'll need to collect 4 key values.
Copy the following snippet into a text file.
AIRTABLE_API_KEY=key00000000000000 AIRTABLE_BASE_ID=app00000000000000 AIRTABLE_TABLE_NAME=tbl00000000000 AIRTABLE_EMBED_ID=shr0000000000000
Your API key is secret, sort of like a key for a safe deposit box. Don't share it.
👉🏼 Visit your Airtable account, and find the "API" section.
👉🏼 Click the "Generate API key" button.
👉🏼 Click on the dots to show your key, and copy it.
👉🏼 Paste the key in your text file as the value for
For example, if my key were
key123, it would look like this:
AIRTABLE_API_KEY=key123 AIRTABLE_BASE_ID=app00000000000000 AIRTABLE_TABLE_NAME=tbl00000000000 AIRTABLE_EMBED_ID=shr0000000000000
👉🏼 Visit the Airtable API page.
👉🏼 Click on the base you just created and renamed for your city.
👉🏼 Copy the base id found halfway down the page (highlighted in the gif above).
👉🏼 Paste the id in your text file as the value for
For example, if my key were
app123, it would look like this:
AIRTABLE_API_KEY=key123 AIRTABLE_BASE_ID=app123 AIRTABLE_TABLE_NAME=tbl00000000000 AIRTABLE_EMBED_ID=shr0000000000000
👉🏼 Visit the Airtable base you've created for your city by visiting the Airtable homepage and then clicking the tile for your base.
You can find your table id in part of the url. After
https://airtable.com/, copy everything before the next
/. For example, in the following URL:
The part you need would be
👉🏼 Paste the table id in your text file as the value for
For example, if my table id were
tbl123, it would look like this:
AIRTABLE_API_KEY=key123 AIRTABLE_BASE_ID=app123 AIRTABLE_TABLE_NAME=tbl123 AIRTABLE_EMBED_ID=shr0000000000000
👉🏼 Click the "Grid View" at the top left of your base.
👉🏼 Select "Submit a Fundraiser". This will take you to the form view, a submission form created automatically, which corresponds to your Airtable base.
👉🏼 Click "Share Form". You should see a link. Copy everything after
👉🏼 Paste the embed id in your text file as the value for
For example, if my table id were
shr123, it would look like this:
AIRTABLE_API_KEY=key123 AIRTABLE_BASE_ID=app123 AIRTABLE_TABLE_NAME=tbl123 AIRTABLE_EMBED_ID=shr123
With all four values collected, you're ready to set up the site.
Note: We plan to set up instructions for other providers eventually, as well.
👉🏼 Click the button below to begin the process of deploying to Netlify.
👉🏼 Click "Connect to GitHub". (You should already be logged in, but if you're not, log in).
👉🏼 For the repository name, use something like
relief-resources-new-haven (using your city, of course).
👉🏼 Use the text file with your four Airtable values to populate the prompts for API key, base id, table name, and embed id.
👉🏼 In the final two prompts, specify your city and state. (We'll use this to personalize your site a bit).
👉🏼 Click "Save and Deploy".
It will take a little while for your new site to build. You'll see the message "Site deploy in progress".
When the build is published, you'll see a live green link under the site title:
You can set a custom domain in your Netlify site settings. From your site's main admin page on Netlify:
👉🏼 Click "Domain Settings".
👉🏼 Under "Custom Domains", click "Add Custom Domain".
From there, follow the steps to add your domain.
👉🏼 Be sure to clear out the data pre-loaded into the table you created in Airtable. Keep the national resources if you'd like, but add in some organizations you know of in your city.
👉🏼 In that Airtable table, there's a column called
Approved. In order to have any given entry show up on the deployed site, that column needs to be set to
👉🏼 In that Airtable table, there's also a column called
PageCategory. In order to have a whole category show up on a specific page (i.e. have
Soup Kitchens show up on the
Food and Finance page), that column needs to be manually set to a provided page name for each individual row in a category. It's important that you don't add your own
PageCategory values for now. That customization is coming in a future release.
👉🏼 For now, after events are added to Airtable, you need to trigger a manual deploy on Netlify.
- From the Netlify Overview page of your site, head to the
- Under the
Trigger deploydropdown on the right side of that page, select
- After a couple of minutes, Netlify should deploy the latest changes. Refresh your site to double check.
👉🏻 In your terminal,
cd into each directory you just cloned and run
👉🏻 You'll still need Airtable set up to feed data into your local site, so please go through step
2. Set up data source of this README. Throw the keys you need to gather into a text file - you'll need them for a later step.
👉🏻 For developing a Gatsby theme locally, you want to be able to see the changes without having to publish your package every five minutes. To do that, we're going to use
Here's a good article for understanding
npm link a little better.
👉🏻 Under the hood, what this is doing is creating a symlink so that when you run
gatsby build in your local
gatsby-starter-relief-resources repo, it calls your local
gatsby-theme-relief-resources repo rather than the published package via NPM.
👉🏻 After running
npm install in both of your freshly cloned repos, the following commands should handle the link for you:
cd <gatsby-theme-relief-resources-root> npm link # create a global symlink to the local "gatsby theme" project cd <gatsby-starter-relief-resources-root> npm link gatsby-theme-relief-resources # create a symlink locally to global "gatsby theme" symlink
👉🏻 In the root of your local
gatsby-starter-relief-resources repo, create a
.env.development file and fill it with the following:
AIRTABLE_API_KEY=yourAPIKey AIRTABLE_BASE_ID=yourBaseID AIRTABLE_EMBED_ID=yourEmbedID AIRTABLE_TABLE_NAME=yourTableName CITY=yourCity STATE=yourState
These environment variables will filter into the
gatsby-config.js file in your local
gatsby-theme-relief-resources repo to be distributed where needed at build-time.
👉🏻 When all of the above is done, you should be able to run
gatsby develop in your local
gatsby-starter-relief-resources repo. After the build completes, open a browser and check
localhost:80000 to make sure everything built correctly.
👉🏻 When making changes in your local
gatsby-theme-relief-resources repo, you may have to (for changes in Airtable, you WILL have to)
ctrl-c out of your
gatsby develop terminal pane and kick off another develop build to see the changes.