{"id":18969560,"url":"https://github.com/brionmario/gatsby-starter","last_synced_at":"2025-07-05T05:32:25.265Z","repository":{"id":44712069,"uuid":"393640308","full_name":"brionmario/gatsby-starter","owner":"brionmario","description":"🏆 A fully loaded starter kit for Gatsby development to get your website up and running in minutes.","archived":false,"fork":false,"pushed_at":"2022-02-16T06:46:02.000Z","size":3908,"stargazers_count":3,"open_issues_count":1,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-29T09:05:25.625Z","etag":null,"topics":["cypress","eslint","featured-project","fontawesome","gatsby","gatsby-starter","mdx","portfol","portfolio","react-i18next","react-test","react-testing-library","sass","stylelint","tailwindcss","typescript"],"latest_commit_sha":null,"homepage":"https://gatsbystartermain82236.gatsbyjs.io/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"0bsd","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/brionmario.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-08-07T09:36:17.000Z","updated_at":"2024-03-04T15:58:04.000Z","dependencies_parsed_at":"2022-09-12T10:41:59.684Z","dependency_job_id":null,"html_url":"https://github.com/brionmario/gatsby-starter","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brionmario%2Fgatsby-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brionmario%2Fgatsby-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brionmario%2Fgatsby-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brionmario%2Fgatsby-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brionmario","download_url":"https://codeload.github.com/brionmario/gatsby-starter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249213762,"owners_count":21231096,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cypress","eslint","featured-project","fontawesome","gatsby","gatsby-starter","mdx","portfol","portfolio","react-i18next","react-test","react-testing-library","sass","stylelint","tailwindcss","typescript"],"created_at":"2024-11-08T14:53:28.778Z","updated_at":"2025-04-16T07:34:47.980Z","avatar_url":"https://github.com/brionmario.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n    \u003cimg alt=\"Gatsby Starter\" src=\"docs/banner@2x.png\"/\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003e\n    Gatsby Starter\n\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://tailwindcss.com/\"\u003eTailwind CSS\u003c/a\u003e\n    ·\n    \u003ca href=\"https://www.typescriptlang.org/\"\u003eTypeScript\u003c/a\u003e\n    ·\n    \u003ca href=\"https://sass-lang.com/\"\u003eSASS\u003c/a\u003e\n    ·\n    \u003ca href=\"https://eslint.org/\"\u003eESLint\u003c/a\u003e\n    ·\n    \u003ca href=\"https://stylelint.io/\"\u003eStyle Lint\u003c/a\u003e\n    ·\n    \u003ca href=\"https://fontawesome.com/\"\u003eFont Awesome\u003c/a\u003e\n    ·\n    \u003ca href=\"https://react.i18next.com/\"\u003eReact i18next\u003c/a\u003e\n    ·\n    \u003ca href=\"https://testing-library.com/docs/react-testing-library/intro/\"\u003eReact Testing Library\u003c/a\u003e\n    ·\n    \u003ca href=\"https://cypress.io/\"\u003eCypress\u003c/a\u003e\n    \u003cbr\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n    A fully loaded starter kit for Gatsby development to get your website up and running in minutes.\n    \u003cbr\u003e\n    Code quality \u0026 Testing tools are also already configured for your ease.\n\u003c/p\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --\u003e\n[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)\n\u003c!-- ALL-CONTRIBUTORS-BADGE:END --\u003e\n\n## 🔗 Quick Links\n\n| [Demo](https://html-starter.netlify.com) |\n| ---------------------------------------- |\n\n## 🚀 Quick start\n\n\u003e The generated project have dependencies that require `node`, `npm` and `Gatsby CLI`.\n\n**Make sure you have [Node](https://nodejs.org/en/download/) version \u003e= 8.0, [npm](https://www.npmjs.com/) \u003e= 5 \u0026 [GatsbyCLI](https://www.gatsbyjs.com/docs/tutorial/part-0/#gatsby-cli)**\n\n```bash\n# create a new Gatsby site using this template.\ngatsby new my-gatsby-starter https://github.com/brionmario/gatsby-starter\n\n# change the directory\ncd my-gatsby-starter/\n\n# start the development server. Site will run on http://localhost:8000\nnpm start\n\n```\n\n## Table of Contents\n\n- [File Structure](#file-structure)\n- [Getting Started](#getting-started)\n  - [Prerequisites](#prerequisites)\n  - [Setting Up](#setting-up)\n  - [Running the app](#running-the-app)\n- [Styling](#styling)\n- [Linting](#linting)\n- [Deployment](#deployment)\n  - [Gatsby Cloud](#gatsby-cloud)\n- [Contributing](#contributing)\n- [Contributors](#contributors)\n- [License](#license)\n\n## File Structure\n\n```\ngatsby-starter/\n ├── coverage/                      * unit test coverage reports.\n ├── cypress/                       * cypress tests folder.\n ├── docs/                          * contains documents and document resources.\n ├── i18n/                          * contains i18n translations and config.\n ├── node_modules/                  * contains dependencies pulled from npm.\n ├── public/                        * generated public folder for distribution.\n ├── src/                           * source folder\n │   ├── assets/                    \n │   │   ├── images/                * images and icons.\n │   │   └── styles                 * SASS stylesheets.\n │   ├── components                 * shared reusable components.\n │   ├── layouts                    * app layouts.\n │   ├── models                     * typescript schemas.\n │   ├── pages                      * app pages.\n │   └── types                      * custom typings.\n ├── static                         * contains static assets that needs to be copied to public folder.\n ├── .eslintignore                  * files and folders that need to be ignored from linter.\n ├── .eslintrc.js                   * es-lint configuration file.\n ├── .gitignore                     * contains files that are ignored from git\n ├── gatsby-browser.js              * where Gatsby expects to find any usage of the Gatsby browser APIs.\n ├── gatsby-config.js               * main configuration file for a Gatsby site.\n ├── gatsby-node.js                 * where Gatsby expects to find any usage of the Gatsby Node APIs\n ├── gatsby-ssr.js                  * where Gatsby expects to find any usage of the Gatsby server-side rendering APIs.\n ├── CONTRIBUTING.md                * project contributing guidelines\n ├── cypress.json                   * cypress configuration file.\n ├── LICENSE.md                     * licensing information.\n ├── package.json                   * contains all the npm scripts for building, running, deploying etc. and contains all the dependencies\n ├── package.lock.json              * lock file for npm.\n ├── postcss.config.js              * post-css configurations.\n ├── README.md                      * Readme file for the repository\n ├── tailwind.config.js             * tailwind CSS configuration file.\n ├── stylelint.config.js            * style lint configuration file.\n └── tsconfig.json                  * typescript configuration file.\n\n```\n\n## Getting Started\n\n### Prerequisites\n\nWhat you need to run this app:\n\n#### Node \u0026 npm\n\n\u003e Make sure you have `Node.js` and `npm` installed by running the following simple commands on the command line and see if you're running the latest stable versions.\n\n- Node.js - Type `node -v` on the terminal.\n- npm - Type `npm -v` on the terminal.\n\nIf you do not have them installed, click [here](https://nodejs.org/en/download/) and grab the latest stable version of `node` and `npm` will be automatically installed along with it. Or if you have `brew` already installed in your local machine, execute `brew install node` command to get `node`.\n\n#### Gatsby CLI\n\nFollow the Gasby CLI [install instructions](https://www.gatsbyjs.com/docs/tutorial/part-0/#gatsby-cli) and get it installed on your environment.\nThis will enable the usage of `gatsby` command.\n\n### Setting Up\n\n#### Create a Gatsby site\n\nUse the Gatsby CLI to create a new site, specifying the default starter.\n\n```bash\n# create a new Gatsby site using this template.\ngatsby new my-gatsby-starter https://github.com/brionmario/gatsby-starter\n```\n#### Navigate to source\n\nNavigate into your new site’s directory and start customizing.\n\n```bash\n# change the directory\ncd my-gatsby-starter/\n```\n\n### Running the app\n\nYou can execute the below command to fire up the server.\n\n```bash\nnpm start\n```\n\nYour site is now running at `http://localhost:8000`!\n\n_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](https://www.gatsbyjs.com/tutorial/part-five/#introducing-graphiql)._\n\n## Styling\n\nThe `index.scss` file inside the `src/assets/styles` directory is the main stylesheet for the project and will be compiled by Gatsby's build.\nIf you want to add your own stylesheet, you can place it under the `src/assets/styles/partials` folder and import it in the `index.scss` file.\n\nFor example if you want to include the styles for a slider:\n\n1. Create a `_slider.scss` partial file in the `src/assets/styles/partials` directory.\n2. In `index.scss` add `@import 'partials/slider.scss';`\n\n## Linting\n\nExecute the following commands to generate linting for styles and scripts.\n\n```bash\n# all\nnpm run lint\n\n# JavaScript \u0026 Typescript files.\nnpm run lint:es\n\n# Style files.\nnpm run lint:styles\n```\n\n## Testing\n\n### All Tests\n\nExecute the following command to run both unit test suite and e2e test suite.\n\n```bash\nnpm run test\n```\n\n### Unit Tests\n\nExecute the following command to run your unit tests.\n\n```bash\nnpm run test:unit\n```\n\nThe following command will run the unit tests in watch mode.\n\n```bash\nnpm run test:unit:watch\n```\n\nIf you want to generate the code coverage for the project, use the following command.\n\n```bash\nnpm run test:unit:coverage\n```\n\n\u003e We have used [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) for unit testing.\n\n### End-To-End Tests\n\nExecute the following command to run your unit tests.\n\n```bash\nnpm run test:e2e\n```\n\n\u003e We have used [Cypress](https://www.cypress.io/) for E2E testing.\n\n## Build\n\nExecute the following command to build your app in production mode.\n\n```bash\nnpm run build\n```\n\n## Deployment\n\n### Gatsby Cloud\n\nDeploy this starter with one click on [Gatsby Cloud](https://www.gatsbyjs.com/cloud/):\n\n[\u003cimg src=\"https://www.gatsbyjs.com/deploynow.svg\" alt=\"Deploy to Gatsby Cloud\"\u003e](https://www.gatsbyjs.com/dashboard/deploynow?url=https://github.com/brionmario/gatsby-starter)\n\n## Contributing\n\nPlease read [CONTRIBUTING.md](./CONTRIBUTING.md) for contributing guidelines and to learn about our code of conduct.\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://www.brionmario.com\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/25959096?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eBrion Mario\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/brionmario/gatsby-starter/commits?author=brionmario\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/brionmario/gatsby-starter/commits?author=brionmario\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#infra-brionmario\" title=\"Infrastructure (Hosting, Build-Tools, etc)\"\u003e🚇\u003c/a\u003e \u003ca href=\"#maintenance-brionmario\" title=\"Maintenance\"\u003e🚧\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n## License\n\nThis project is licensed under the BSD Zero Clause License(0BSD) License - see the [LICENSE.md](LICENSE.md) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrionmario%2Fgatsby-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrionmario%2Fgatsby-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrionmario%2Fgatsby-starter/lists"}