The GatsbyJS is uptade for version 3.x.x. Is new versions cause breakchanges in code of template. For update your template, recommended follow commands below (important: this cause erros and breakchanges):
Upgrade gatsby 3.1.x
$ npm i -g gatsby-cli
$ yarn upgrade-interactive --latest
$ rm -rf node_modules
$ yarn add babel-preset-gatsby
$ yarn add gatsby-plugin-image
$ yarn install
$ gatsby clean
If can do download the repository and install the new template, is better. It's update for Gatsby 3.1.x
View the demo this project: click here
This template was made for easy use with the Netlify server. In it we can count on Google Analytics V4, Hotjar, content creation/pages using Markdown**, modules for components (logo, image, button or link and much more), PWA update notifier and among **other resources**.
Very simple! Follow the commands below on your terminal (Linux, Windows or Mac). Of course, before that, make sure you have the tools installed: nodeJS, npm, yarn and gatsbyCLI:
$ git clone https://github.com/guilhermebellotti/template-gatsby-bellotti.git
$ cd template-gatsby-bellotti
$ yarn install
$ gatsby develop
Know the structure of the template:
├── README.md
├── contents
│ ├── blog
│ │ ├── 2020-11-23-primeiro-post.md
│ │ ├── 2020-11-23-segundo-post.md
│ │ └── 2020-11-23-terceiro-post.md
│ ├── contato
│ │ └── 2019-10-03-contato-info.md
│ └── readme
│ └── 2019-10-03-readme.md
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── netlify.toml
├── package.json
├── src
│ ├── components
│ │ ├── AllPosts
│ │ │ ├── index.js
│ │ │ └── styles.js
│ │ └── Sharing
│ │ ├── index.js
│ │ └── styles.js
│ ├── modules
│ │ ├── Buttons
│ │ │ ├── index.js
│ │ │ └── style.js
│ │ ├── Footer
│ │ │ ├── index.js
│ │ │ └── styles.js
│ │ ├── Global
│ │ │ └── index.js
│ │ ├── Image
│ │ │ ├── index.js
│ │ │ └── styles.js
│ │ ├── Layout
│ │ │ ├── index.js
│ │ │ └── styles.js
│ │ ├── Logo
│ │ │ ├── index.js
│ │ │ └── styles.js
│ │ ├── Menu
│ │ │ ├── content.js
│ │ │ ├── index.js
│ │ │ └── styles.js
│ │ ├── SEO
│ │ │ └── index.js
│ │ ├── SocialLink
│ │ │ ├── index.js
│ │ │ └── styles.js
│ │ └── SwUpdater
│ │ ├── index.js
│ │ └── styled.js
│ ├── pages
│ │ ├── 404.js
│ │ ├── blog.js
│ │ └── index.js
│ ├── templates
│ │ ├── styles.js
│ │ └── work-post.js
│ └── utils
│ └── algolia-queries.js
├── static
│ ├── admin
│ │ └── config.yml
│ └── img
│ ├── icon-app-favicon.png
│ ├── img-thumb-default.jpg
│ ├── logo.png
│ └── uploads
│ ├── 102013007_univ_lsr_xl.jpg
│ ├── 102013007_univ_lsr_xl.jpg:Zone.Identifier
│ ├── default-image.jpg
│ ├── domenik-kowalewski-yKaiOxY5Dyg-unsplash.jpg
│ ├── ray-hennessy-YF-nygeNGR8-unsplash.jpg
│ └── ray-hennessy-YF-nygeNGR8-unsplash.jpg:Zone.Identifier
├── yarn-error.log
└── yarn.lock
After cloning the project/template and know the structure, make your basic edits to the files at the root of the template:
gatsby-config.js
.env (copy from .env.example)
And edit the modules inside the src/modules folder.
In the static/img folder are the images used in the template. As a help, I recommend just replacing the images for yours, thus keeping the same names.
In the project we use root-import, so stay tuned to follow the pattern. If you want to edit or add new rules, see the gatsby-config.js file and search for gatsby-plugin-root-import. The basic rules are these:
| Details | Description |
|---|---|
| @Modules | is a shortcut for import files of 'src/modules' |
| @Components | is a shortcut for import files of 'src/components' |
| gatsby-plugin-google-fonts-v2 | change the default font(s) for your project |
| gatsby-plugin-manifest | change the name, icon and behavior of your PWA |
| gatsby-plugin-anchor-links | used for anchors. For example '/#topo, /blog#post-2' |
| gatsby-plugin-algolia | used for searches within the site. See more details in the documentation |
| gatsby-plugin-google-gtag | used for analysis and metrics. Very famous 🤔 |
| gatsby-plugin-hotjar | used for analysis and metrics, but with a focus on user interaction. |
| Modules | Description |
|---|---|
| Buttons | LinkTransition for page transitions (using gatsby-plugin-transition-link / AniLink) LinkAnchor for anchors (no animations in transitions, using gatsby-plugin-anchor-links) LinkNormal for links with hrefs from other pages (normal tag) |
| Footer | Footer content comes from contents/contato. Feel free to edit as you like |
| Global | Stylized component containing all the global styles that are used on all pages. You can use it only as a CSS reset |
| Image | Module for exporting images using Gatsby Image standards (lazyload, optimization, webp etc.) |
| Layout | Layout module to encapsulate website component |
| Logo | Component to export your logo and use it on the necessary pages |
| Menu | Component to create the menu for your project |
| SEO | SEO component to improve titles, descriptions and images of each page |
| SocialLink | Component to export your social networks with links and icons |
| SwUpdater | Component to notify when there is a new update on the website (valid for PWA too) |
Go to the src/modules/logo folder and open the index.js file.
Change the name of the image. For example: name="logo.png" for name="myNewLogo.png"
├── src
│ ├── modules
│ │ ├── Logo
│ │ │ ├── index.js
│ │ │ └── styles.js
To help and facilitate, colors can be added and/or changed in the file in the Global folder.
Use :root to create variables. See more information about CSS variables here.
├── src
│ ├── modules
│ │ ├── Global
│ │ │ └── index.js
As previously mentioned, the image module serves to export images to be used as a background or in other ways in components. To use it is simple, import the image module import {Image} from "@Modules/Image" and then say the name of the image and its description Logo
├── src
│ ├── modules
│ │ ├── Image
│ │ │ ├── index.js
│ │ │ └── styles.js
You can use it multiple times within the same scope, no problem! You can use it multiple times within the same scope, no problem! The recommendation I can give you is to encapsulate the `` tag inside another one. This way, it will be easier to modify it in CSS.