gatsby template
1.0.0
Start your project with this template. This launcher comes with the most essential Gatsby files and settings you may need to get up and running at top speed with the lightning-fast app generator for React.
Create a Gatsby website.
Use the Gatsby CLI to create a new site, specifying this Template .
# Crie um novo site do Gatsby usando esse Template
gatsby new my-project https://github.com/solrachix/gatsby-templateStart developing.
Navigate to your new site's directory and launch it.
cd my-project/
gatsby developOpen the code and start editing!
Your site is now running at http://localhost:8000 !
Note: You will 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 how to use this tool in the [Gatsby tutorial](https://www.gatsbyjs.org/tutorial/part-five/#introducing-graphiql).
Open the my-project directory in your code editor of choice and edit src/pages/index.js . Save your changes and the browser will update in real time!
Progressive Web App is a term used to denote a new software development methodology. Unlike traditional apps, a Progressive Web App can be seen as a hybrid evolution between regular web pages and a mobile app.
The web app manifest (part of the PWA specification) powered by the manifest plugin , allows users to add your website to the home screen on most mobile browsers - see here. The manifest provides configuration and icons for the phone.
This plugin provides several features in addition to manifest configuration to make your life easier, they are:
Each of these features has extensive configuration available so you are always in control.
Where to search for these Plugins? Click here and search
A quick look at the top-level files and directories you'll see in this Gatsby template.
.
├── node_modules
├── config/
│ └── MetaData.js
├── src/
│ ├── assets/
│ │ └── images/
│ │ └── logo.png
│ ├── components/
│ ├── Pages/
| │ └── index.js
│ ├── posts/
| │ └── 2020-04-08--nosso-primeiro-post/
| │ └── index.md
│ ├── styles/
│ | ├── themes/
│ | └── GlobalStyles.js
│ ├── templates/
│ | ├── post.js
│ | └── tag.js
│ └── html.js
├── static/
│ ├── favicon.ico
│ └── robots.txt
├── .gitignore
├── .prettierrc
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── LICENSE
├── package-lock.json
├── package.json
└── README.md
| Files/Folders | Description |
|---|---|
| /node_modules | This directory contains all the code modules that your project depends on (npm packages) that are automatically installed. |
| /src | This directory will contain all the code related to what you will see on the front end of your website (what you see in the browser), such as the website header or a page template. src is a convention for "source code". |
| .gitignore | This file tells git which files it should not track/not maintain a version history. |
| .prettierrc | this is a configuration file for Prettier. Prettier is a tool to help keep your code formatting consistent. |
| * gatsby-browser.js | It is in this file that Gatsby expects to find any use of the Gatsby browser APIs (if they exist). This allows customization/extension of default Gatsby settings that affect the browser. |
| gatsby-config.js | This is the main configuration file for a Gatsby website. This is where you can specify information about your site (metadata) such as your site title and description, which Gatsby plugins you would like to include, etc. (Check the configuration docs for more details). |
| gatsby-node.js | This file is where Gatsby expects to find any usage of the Gatsby Node APIs (if they exist). This allows customization/extension of default Gatsby settings that affect parts of the site creation process. |
| gatsby-ssr.js | It is in this file that Gatsby expects to find any use of the Gatsby server rendering APIs (if they exist). This allows customization of default Gatsby settings that affect server-side rendering. |
| LICENSE | Gatsby is licensed under the MIT License |
| package-lock.json | (see package.json below, first). This is an automatically generated file based on the exact versions of npm dependencies that have been installed for your project. (You do not change this file directly). |
| package.json | A manifest file for Node.js projects, which includes things like metadata (project name, author, etc.). This manifest is how npm knows which packages to install for your project. |
| README.md | A text file containing useful reference information about your project. |
| **** |
Looking for more guidance? The complete Gatsby documentation is [on the website] (https://www.gatsbyjs.org/). Here are some places to start:
For most developers, I recommend starting with our [in-depth tutorial for creating a website with Gatsby] (https://www.gatsbyjs.org/tutorial/). It starts with zero assumptions about your ability level and goes through every step of the process.
To dive directly into the code examples, visit the [documentation] (https://www.gatsbyjs.org/docs/). In particular, see the Guides , API Reference , and Advanced Tutorials sections in the Sidebar.
