Using environment variables in Gatsby site deployed on GitHub pages

Question

Description

I am trying to use environment variables in my Gatsby site deployed on GitHub pages, but it is only working locally and not on the live site. Apparently this is because Gatsby requires a .env.production file to access the variables from. How do I create this using GitHub workflows and maintain the secrecy of my variable so it is not exposed publicly?

I have read through this related question but can't figure out how to translate it into code relevant to my situation. How to use environment variables in Github Page?

Steps to reproduce

I added a secret variable in my github repository settings, created a workflow file so that it could be accessed as an environment variable, added the dotenv requirement with a path configuration in my gatsby-config.js file, and then deployed my site using npm run deploy.

The environment variable is accessible locally from a .env.development file, but is not accessible on the deployed site. Below is the github repo I have been trying to figure this out on. The link is to my latest commit on the dev branch so it is easier to find where I have been trying to get the workflow with environment variables up and running.

https://github.com/spk2dc/spk2dc.github.io/tree/62d6078dffba4feb1ec3fd85c952e10eb0787017

Expected result

Environment variables accessible to live Gatsby website deployed on GitHub pages and secrecy of variable maintained.

Environment

System:  
OS: Linux 5.4 Ubuntu 18.04.5 LTS (Bionic Beaver)  
CPU: (2) x64 Intel(R) Core(TM) i7-6500U CPU @ 2.50GHz  
Shell: 4.4.20 - /bin/bash  
Binaries:  
Node: 14.6.0 - /usr/local/bin/node  
Yarn: 1.22.5 - /usr/bin/yarn  
npm: 6.14.8 - /usr/local/bin/npm  
Languages:  
Python: 2.7.17 - /usr/bin/python  
Browsers:  
Chrome: 85.0.4183.121  
npmPackages:  
gatsby: ^2.4.2 => 2.24.50  
gatsby-image: ^2.0.41 => 2.4.16  
gatsby-plugin-feed: ^2.2.0 => 2.5.11  
gatsby-plugin-google-analytics: ^2.0.19 => 2.3.13  
gatsby-plugin-manifest: ^2.4.21 => 2.4.24  
gatsby-plugin-netlify: ^2.0.17 => 2.3.13  
gatsby-plugin-offline: ^2.1.0 => 2.2.10  
gatsby-plugin-postcss: ^2.0.7 => 2.3.11  
gatsby-plugin-purgecss: ^3.1.1 => 3.1.1  
gatsby-plugin-react-helmet: ^3.0.12 => 3.3.10  
gatsby-plugin-sharp: ^2.6.24 => 2.6.28  
gatsby-remark-copy-linked-files: ^2.0.12 => 2.3.12  
gatsby-remark-images: ^2.0.6 => 2.0.6  
gatsby-remark-prismjs: ^3.2.9 => 3.5.11  
gatsby-remark-responsive-iframe: ^2.1.1 => 2.4.12  
gatsby-remark-smartypants: ^2.0.9 => 2.3.10  
gatsby-source-filesystem: ^2.0.33 => 2.3.25  
gatsby-transformer-remark: ^2.3.12 => 2.8.29  
gatsby-transformer-sharp: ^2.5.12 => 2.5.13  
npmGlobalPackages:  
gatsby-cli: 2.12.87  

Answer 1

You don't need to push your .env file in a production environment, you just need to add the secret key to your repository in the Secrets menu option:

Then, you just need to link your Gatsby application to those environment variables by calling them in your code like process.env.REACT_APP_APIKey.

Of course, I would suggest adding a .env.development and test your variables locally under gatsby build process.

In addition, keep in mind that you will need to prefix with GATSBY_ all those variables that will need to be accessible by the browser as the Environment variables documentation explains.