A starter kit for TypeScript-based Gatsby projects with sensible defaults.
This is a starter kit for Gatsby.js websites written in TypeScript. It includes the bare essentials for you to get started (styling, Markdown parsing, minimal toolset).
- TypeScript
- ESLint (with custom ESLint rules)
- Markdown rendering with Remark
- Basic component structure
- Styling with emotion
A nodejs >= 6.0.0 setup with yarn is recommended.
-
Create a Gatsby site.
Install
gatsby-cli
package globally on your machine.# using NPM npm install -g gatsby-cli # using YARN yarn global add gatsby-cli
Use the
gatsby-cli
to create a new site and install its dependencies.gatsby new project-name https://github.com/resir014/gatsby-starter-typescript-plus
-
Start developing.
Move to project's directory.
cd project-name/
Start your site.
# using npm npm start # using yarn yarn start
Open source code using your favorite IDE/Text editor and navigate to
src/
directory, this is where your application live. -
Build your application for production.
Once you're finished, you can make production build of your app using:
# using npm npm run build # using yarn yarn build
-
Deploy your app to Github pages!
After building your application in step 3, you're ready to publish your app and go online!
# using npm npm run deploy # using yarn yarn deploy
Built with Gatsby - the blazing-fast static site generator for React.
The project uses tailwindcss injections as a sytactic sugar for the SASS. So, the following breakpoints are used throughout.
Name | Width(Pixels) | |
---|---|---|
Small | 640px | |
Medium | 768px | |
Large | 1024px | |
Extra Large | 1280px |