Gatsby Minimal TypeScript Starter
Gatsby Minimal TypeScript Starter
## 🚀 Quick start 1. **Create a Gatsby site.** Use the Gatsby CLI to create a new site, specifying the minimal TypeScript starter. ```shell # create a new Gatsby site using the minimal TypeScript starter npm init gatsby -- -ts ``` 2. **Start developing.** Navigate into your new site’s directory and start it up. ```shell cd my-gatsby-site/ npm run develop ``` 3. **Open the code and start customizing!** Your site is now running at http://localhost:8000! Edit `src/pages/index.tsx` to see your site update in real-time! 4. **Learn more** - [Documentation](https://www.gatsbyjs.com/docs/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter-ts) - [Tutorials](https://www.gatsbyjs.com/docs/tutorial/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter-ts) - [Guides](https://www.gatsbyjs.com/docs/how-to/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter-ts) - [API Reference](https://www.gatsbyjs.com/docs/api-reference/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter-ts) - [Plugin Library](https://www.gatsbyjs.com/plugins?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter-ts) - [Cheat Sheet](https://www.gatsbyjs.com/docs/cheat-sheet/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter-ts) ## 🚀 Quick start (Netlify) Deploy this starter with one click on [Netlify](https://app.netlify.com/signup): [
](https://app.netlify.com/start/deploy?repository=https://github.com/gatsbyjs/gatsby-starter-minimal-ts)
File Structure
readme/
├── .github/
| └── workflows/
| └── gatsby.yaml (github actions workflow for gatsby)
├── design/ (design files & resources)
├── public/
├── src/
├── .gitignore
├── gatsby-config.ts
├── LICENSE (license file | MPL 2.0)
├── package-lock.json
├── package.json
├── README.md (readme documentation | this file)
├── tailwind.config.js (tailwindCss config file)
└── tsconfig.jsonThe other files not described are either gatsby files. And it has its project structure properly explained here.
[https://www.gatsbyjs.com/docs/reference/gatsby-project-structure/]
Installing Dependencies
- The project uses Typescript, although it needs Nodejs since on running Gatsby commands it will be of use.
- For styling there is use of TailwindCss which depends on npm & nodejs.
- This project uses
npm, which requires the following :- installing Nodejs
- opening the terminal in the root folder which resides the
package.jsonfile - running
npm installto get the modules used by the project.
- Here are the links and the install links when using
npmas your package manager, which usually comes along by default with Nodejs.
| Name | Link | Npm global install | Other npm ways |
|---|---|---|---|
| Nodejs | https://nodejs.org/ | -- | -- |
| Gatsby | https://www.gatsbyjs.com/ | npm install -g gatsby-cli |
[link], [link] |
| TailwindCss | https://tailwindcss.com/ | npm install -g tailwindcss |
[link], [link] |
| Typescript | https://www.typescriptlang.org/ | npm install -g typescript |
[link], [link] |
Running the project
To run the project its fairly simple, after installing the required dependencies all that's needed is to run the following in two separate terminals .
| Gatsby | gatsby develop |
| TailwindCss | npm run watch |
Building the project
- Since the main purpose of Gatsby is its awesomeness as a
static site generator. And wits its pros and cons like every other software out there, it shines brightly as a good option for this project. - Building the project means compiling it into its static site form, meaning just the plain usual
html,cssandjavascriptinto the├── public/folder. - For more info on building the site you can checkout the official gatsby documentation here.
[https://www.gatsbyjs.com/docs/glossary/build/]