<h2>Portfolio on Gatsby &amp; Netlife is very fast and optimized. Part-3</h2><p></p>
April 18, 2020

Portfolio on Gatsby & Netlife is very fast and optimized. Part-3

Today we will configure the necessary plugins for Gatsby.js .

I hope we have managed with what was mentioned in the last article and now we have a valid domain and can start configuring our application. Before proceeding to the consideration of page elements both in particular and with from the point of view of SEO, let's make a reservation: SEO is not only based on these factors build. It also includes concepts such as valid siteMap, robots.txt, etc. There are a lot of points, thanks to Gatsby.js has a lot of valid plugins to minimize our problems. All the code can be viewed in my Github and I will try to describe what we will use it for.

Setting enviromental.

Gatsby.js by default, it monitors dependencies in gatsby-config.js but we can change its behavior for different environments by creating gatsby-config.prod and env files, respectively. env. production and. env.staging, in which we will hide our necessary variables in the future. In the gatsby-config putting the code:

const gatsbyConfig = require(`./gatsby-config-generator`) try { require('dotenv').config({ path: `.env.staging`, }) } catch (e) { console.error( 'Cannot find correct environment variables, reverting to dummies' ) throw Error('No ENV file found') } module.exports = gatsbyConfig()

.env.staging put this

GATSBY_ENV='staging' GATSBY_GOOGLE_ANALYTICS_KEY=''

And now all we have to do is create a gatsby-config-generator that will contain the plugin settings:

module.exports = () => ({ siteMetadata: {}, plugins: [], })

it is looks like are this:

Not more about gatsby structure.

A little more about this can be read here.

My set of plug-ins

I will leave all plugins that have no settings without a description. You can find out more about them in the official documentation. I think they are absolutely valid and tested each of these plugins useful to us in the future.

`gatsby-plugin-react-helmet`, `gatsby-transformer-sharp`, `gatsby-plugin-sharp`, `gatsby-plugin-offline`, `gatsby-plugin-sass`,

and configuration together

{ resolve: `gatsby-plugin-sitemap`, options: { output: `/sitemap.xml`, }, },

gatsby-plugin-sitemap this allows us to create a dynamic site map that collects current values in each build. In the options, specify the desired file exit path.

const { NODE_ENV, URL: NETLIFY_SITE_URL = 'https://www.you-site/', DEPLOY_PRIME_URL: NETLIFY_DEPLOY_URL = NETLIFY_SITE_URL, CONTEXT: NETLIFY_ENV = NODE_ENV, } = process.env const isNetlifyProduction = NETLIFY_ENV === 'production' const siteUrl = isNetlifyProduction ? NETLIFY_SITE_URL : NETLIFY_DEPLOY_URL

{ resolve: 'gatsby-plugin-robots-txt', options: { resolveEnv: () => NETLIFY_ENV, env: { production: { policy: [{ userAgent: '*' }], }, 'branch-deploy': { policy: [{ userAgent: '*', disallow: ['/'] }], sitemap: null, host: null, }, 'deploy-preview': { policy: [{ userAgent: '*', disallow: ['/'] }], sitemap: null, host: null, }, }, }, },

gatsby-plugin-robots-txt created robots.txt

{ resolve: `gatsby-plugin-manifest`, options: { name: ``, short_name: ``, start_url: `/`, background_color: `#663399`, theme_color: `#663399`, display: `minimal-ui`, icon: `src/assets/images/you-icon.png`, }, },

gatsby-plugin-manifest required for creation PWA

These plugins will be enough to create an optimized app on gatsby.js . You can also find everything you need in the documentation.

Thank you for attention!

Alexander Vorotov
Posted by: Alexander Vorotov