Gatsby Minimal TypeScript Starter
-
Create a Gatsby site.
Use the Gatsby CLI to create a new site, specifying the minimal TypeScript starter.
# create a new Gatsby site using the minimal TypeScript starter npm init gatsby -- -ts -
Start developing.
Navigate into your new site’s directory and start it up.
cd my-gatsby-site/ npm run develop -
Open the code and start customizing!
Your site is now running at http://localhost:8000!
Edit
src/pages/index.tsxto see your site update in real-time! -
Learn more
Deploy this starter with one click on Netlify:
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.json
The 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/]
- 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] |
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 |
- 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/]