Tokio Ramen is a freelance-built front-end website for a local ramen restaurant in Boynton Beach, Florida, built with GatsbyJS, React, and Contentful as a headless CMS, and deployed on Netlify.
What is Tokio Ramen?
Tokio Ramen is a production website for a local ramen shop, originally created as a freelance revamp by developer Demi Hayashi. It runs on GatsbyJS (a React-based static site generator) and pulls all content from Contentful through GraphQL, while Tailwind CSS handles the styling. The project's input is content stored in Contentful (menu items, restaurant info) and its output is a fast static site deployed at tokio-ramen.netlify.app.
Key Features
- GatsbyJS static site generator — Builds a pre-rendered, performance-focused site that compiles with gatsby build and runs locally with gatsby develop.
- Contentful headless CMS — All site data flows through Contentful's GraphQL API, configured with SPACE_ID and ACCESS_TOKEN environment variables.
- Tailwind CSS styling — Utility-first CSS framework used for the entire visual design, so no separate CSS files need to be hand-written.
- Framer Motion animations — Motion library adds page and component animations to the React front end.
- Getform.io contact form — The contact form submits to a Getform.io endpoint configured as REACT_APP_CONTACT_FORM_ID, with no server code required.
- dotenv configuration — Secret keys for Contentful and Getform are stored in a .env file and loaded through dotenv, keeping them out of version control.
Who is it for?
Freelance web developers who need a restaurant website starter using Gatsby and Contentful. Small restaurant owners who want a fast, modern site with a CMS they can update. Developers who want a real-world example of Gatsby + Contentful + Tailwind integration.
What can you do with it?
- Restaurant owners — show their menu, hours, and contact information with content managed through Contentful.
- Freelancers — use the project as a starting point for client sites that need a CMS-backed static site.
- Developers — learn how to wire Gatsby to Contentful via GraphQL and build a production deployment on Netlify.
How does the project work?
- Install NodeJS and the Gatsby CLI.
- Clone the repo and run npm install to install all dependencies.
- Create a .env file with your Contentful SPACE_ID and ACCESS_TOKEN, plus a Getform.io endpoint as REACT_APP_CONTACT_FORM_ID.
- Run gatsby develop for local development, or gatsby build to produce a production build.
FAQ
What is Tokio Ramen?
Tokio Ramen is a restaurant website built with GatsbyJS and Contentful. It was a freelance project to revamp the online presence of a ramen shop in Boynton Beach, Florida, and the code is public on GitHub.
Do I need a Contentful account to use this?
Yes, the site pulls all content from Contentful, so you need your own space, a SPACE_ID, and an ACCESS_TOKEN configured in a .env file. The same applies for Getform.io, which handles the contact form.
What commands do I use to run it?
After installing dependencies, you run gatsby develop for a local development server and gatsby build to create a production build. The built site can then be deployed to any static host like Netlify.
Who created this project?
Demi Hayashi created and maintains the site as a freelance project. You can reach them at [email protected].
