Skip to content

Typescript Starter with the bare essentials needed for a Gatsby site

License

Notifications You must be signed in to change notification settings

hdorgeval/gatsby-starter-ts-hello-world

Repository files navigation

Gatsby

Typescript Starter with the bare essentials needed for a Gatsby site

🚀 Quick start

  1. Create a Gatsby site.

    Use the Gatsby CLI to create a new site, specifying the hello-world starter.

    # create a new Gatsby site using the hello-world starter
    gatsby new my-hello-world-starter https://github.com/hdorgeval/gatsby-starter-ts-hello-world
  2. Start developing.

    Navigate into your new site’s directory and start it up.

    cd my-hello-world-starter/
    npm start
  3. Open the source code and start editing!

    Your site is now running at http://localhost:8000!

    Note: You'll also see a second link: http://localhost:8000/___graphql. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby tutorial.

    Open the my-hello-world-starter directory in your code editor of choice and edit src/pages/index.tsx. Save your changes and the browser will update in real time!

🎓 Learning Gatsby

Looking for more guidance? Full documentation for Gatsby lives on the website. Here are some places to start:

  • For most developers, we recommend starting with our in-depth tutorial for creating a site with Gatsby. It starts with zero assumptions about your level of ability and walks through every step of the process.

  • To dive straight into code samples, head to our documentation. In particular, check out the Guides, API Reference, and Advanced Tutorials sections in the sidebar.

CSS file usage

Run script:

npm run css-watch

This will automatically create/update a .d.ts typings file whenever you add or modify a .css file.

This will enable you to import .css file in any .tsx file, like for example:

import styles from './index.module.css';

Plus added support of IntelliSense in VSCode ;

To update/create all .css.d.ts files in one shot:

npm run create-types-for-css-modules

SASS file usage

Run script:

npm run sass-watch

This will automatically create/update a .d.ts typings file whenever you add or modify a .scss file.

This will enable you to import .scss file in any .tsx file, like for example:

import styles from './index.module.scss';

Plus added support of IntelliSense in VSCode ;

To update/create all .scss.d.ts files in one shot:

npm run create-types-for-sass-modules

💫 Deploy

Deploy to Netlify

About

Typescript Starter with the bare essentials needed for a Gatsby site

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published