Gatsby starter for creating a corporate site with Strapi.
Use our create-strapi-starter
CLI to create your project.
# Using Yarn
yarn create strapi-starter my-site gatsby-corporate
# Or using NPM
npx create-strapi-starter my-site gatsby-corporate
The CLI will create a monorepo, install dependencies, and run your project automatically.
You can turn preview mode on with a URL like this:
http://localhost:3000/api/preview/<slug>?secret=<gatsby-preview-secret>
<slug>
is the slug you entered in Strapi for your page.
<gatsby-preview-secret>
is the secret token defined in your .env.development / .env.production config,
Once preview mode is on you can then access draft
pages with urls like this:
http://localhost:8000/preview/secret
A banner will remain under the navigation to let you know preview mode is and it will allow you turn it off.
To edit this website, you'll need to run both the frontend and the backend in your development environment.
We have built sections for you, but you will likely want to add more to fit your needs. Follow these steps:
- Create a new component in Strapi in the "sections" category
- In the Content-Types Builder, open the Pages collection and check your new section on the
contentSections
field. - Create a React component that takes a
data
prop in/frontend/components/sections
- To link your Strapi section to this React component, open
/frontend/components/sections.js
, and add an entry to thesectionComponents
object.
We use Tailwind CSS for styling. To modify your page's look, you can edit the theme in /front/tailwind.config.js
. Read the Tailwind docs to view all the changes you can make. For example, you can change the primary color like this:
const { colors } = require(`tailwindcss/defaultTheme`);
module.exports = {
theme: {
extend: {
colors: {
primary: colors.green,
},
},
},
};
You will need to deploy the frontend
and backend
projects separately. Here are the docs to deploy each one:
Don't forget to set up your environment variables on your production apps.
Here are the required ones for the frontend:
GATSBY_STRAPI_URL
: URL of your Strapi backend, without trailing slashGATSBY_PREVIEW_SECRET
: a random string used to protect your preview pages
Have fun using this starter!