tokyo-treasures — Gatsby 企业官网模板

SHA-256: 85a6ea5f01702343445646cfafd89e45b871df1abfb06c7e443c844f12047171

2026-10-13T05:11:39.477Z

# Restaurant Website Template

This template provides a fresh & modern UI for a restaurant website. With a focus on responsiveness, performance, and ease of use, it ensures an unforgettable online experience for your customers.

If you find this template helpful, please give it a ⭐. Thank you!

## Demo

Link to website: https://tokyo-treasures.pages.dev

## Design

The UI was designed in Figma. Check it out and grab your own copy: https://www.figma.com/design/HoPdh5o6sjGMkdP9dRhJbU/Tokyo-Treasures/duplicate

## Features

🌐 **Responsive Design**

The website adapts seamlessly to all screen sizes, from mobile devices to large desktops, ensuring a great user experience across all devices.

📈 **SEO Friendly**

The template is optimized for search engines, helping your restaurant rank higher in search results and attract more visitors.

⚡ **Fast Performance**

Built with performance in mind, this template uses optimized code and assets to ensure quick load times, providing a smooth browsing experience for users.

🚀 **Automatic Deployment**

Easily & quickly deploy the website with minimal configuration.

📊 **Analytics Integration**

Monitor website traffic and user behavior via Google Analytics 4 to gather valuable insights and optimize the customer experience.

🎨 **Animations**

Engage visitors with smooth & meaningful animations that enhance the visual appeal of your website without sacrificing performance.
These animations respect prefers-reduced-motion settings.

♿ **Accessibility**

The template is designed with accessibility in mind, ensuring that all users, including those with disabilities, can navigate the site with ease.

🍪 **Cookie Consent**

Comes with a cookie consent banner to comply with GDPR and other privacy regulations, allowing users to opt in or out of tracking cookies.

## Pages

**Landing**

![Landing Page](static/seo-preview/home.png)

**Privacy Policy**

![Privacy Policy Page](static/seo-preview/privacy-policy.png)

**Terms of Service**

![Terms of Service Page](static/seo-preview/terms-of-service.png)

**404**

![404 Page](static/seo-preview/404.png)

## Technologies

<img src="https://cdn.simpleicons.org/tailwindcss/06B6D4" width="20" height="20" /> **Tailwind CSS**

<img src="https://cdn.simpleicons.org/shadcnui/000000" width="20" height="20" /> **Shadcn**

<img src="https://cdn.simpleicons.org/gatsby/663399" width="20" height="20" /> **Gatsby 5**

<img src="https://cdn.simpleicons.org/githubactions/2088FF" width="20" height="20" /> **GitHub Actions**

<img src="https://cdn.simpleicons.org/googleanalytics/E37400" width="20" height="20" /> **Google Analytics 4**

<img src="https://cdn.simpleicons.org/eslint/4B32C3" width="20" height="20" /> **ESLint**

<img src="https://cdn.simpleicons.org/typescript/3178C6" width="20" height="20" /> **TypeScript**

## License

Distributed under the MIT License. See `LICENSE.txt` for more information.

## Getting Started

To run locally:

1. **Clone the Repository**:
   ```bash
   git clone https://github.com/Chandra-Panta-Chhetri/tokyo-treasures.git
   ```
2. **Install dependencies**:
   ```bash
   cd tokyo-treasures
   npm install
   ```
3. **Start**:
   ```bash
   npm start
   ```

## Deployment

To setup automatic for `master` branch:

1. Create an account at [Cloudflare Pages](https://pages.cloudflare.com/).
2. Go to the [API Tokens page](https://dash.cloudflare.com/profile/api-tokens).
3. Click the 'Create Token' button.
4. Select 'Create Custom Token'.
5. Fill in the Permissions section as follows to ensure you have the necessary permissions to deploy via a [GitHub Workflow](https://docs.github.com/en/actions/writing-workflows).

   | Category | Item             | Type |
   | -------- | ---------------- | ---- |
   | Account  | Cloudflare Pages | Edit |
   | User     | Memberships      | Read |
   | User     | User Details     | Read |

6. Fill in the remaining details (token name, account resources). The token name can be anything. For the account resources, ensure to **include** the email used to sign up.
7. Click the 'Continue to summary' button.
8. Click the 'Create Token' button.
9. Copy the token and save it somewhere - it will be needed soon.
10. Create a new [Actions secret in GitHub](https://docs.github.com/en/actions/security-for-github-actions/security-guides/using-secrets-in-github-actions#creating-secrets-for-a-repository).
11. Set the name of the secret to **CLOUDFLARE_API_TOKEN** & and paste the token from earlier.
12. Update `project_name` env (line 7) in `.github/workflows/prod-deploy.yml` to anything. This name is used by Cloudflare Pages to create a subdomain, so it must not contain spaces.
13. Update `SITE_URL` in `.env.prod` by replacing 'tokyo-treasures' with the project name. For example, if your project name is 'restaurant', 'SITE_URL' would be "https://restaurant.pages.dev".

## Google Analytics

To setup:

1. Create an account at [Google Analytics](https://analytics.google.com/analytics/web/?authuser=0#/provision/create).
2. Complete steps 1-4.
3. For step 5 (Data collection), select `Web` as the platform.
4. For the Website URL, copy the `SITE_URL` from `.env.prod`, excluding the 'https://'.
5. Close the 'Set up a Google tag' popup.
6. Click on the Web Data Stream we just set up and copy the Measurement ID.
7. Paste the measurement id into `GATSBY_GOOGLE_ANALYTICS_ID` in `.env.prod`.

Note: Google Analytics only loads when the website is deployed. To test locally, remove the `isProd` check in `src/components/google-tag-manager.tsx`.