GATSBY

                                  
                                      Gatsby
                                    
                                    This guide will help you get started
                                        using Netlify CMS and Gatsby.
                                  
                                    To get up and running with Gatsby,
                                        you’ll need to have
                                      Node.js
                                        installed on your computer. Note: Gatsby's minimum supported
                                        Node.js version is Node 8.
                                  
                                      Create a new Gatsby site
                                    
                                    Let's create a new site using the
                                        default Gatsby Starter Blog. Run the
                                        following commands in the terminal, in
                                        the folder where you'd like to
                                        create the blog:
                                  
                                            1
                                          
                                          npm install -g gatsby-cli
                                        
                                            2
                                          
                                          gatsby new blog
                                              https://github.com/gatsbyjs/gatsby-starter-blog
                                        
                                            3
                                          
                                          cd blog
                                        
                                            Copied!
                                          
                                      Get to know Gatsby
                                    
                                    In your favorite code editor, open up
                                        the code generated for your "Gatsby
                                        Starter Blog" site, and take a look
                                        at the content
                                        directory.
                                  
                                    You will see that there are multiple
                                        Markdown files that represent blog
                                        posts. Open one .md
                                        file and you will see something like
                                        this:
                                  
                                            1
                                          
                                          ---
                                        
                                            2
                                          
                                          title: New Beginnings
                                        
                                            3
                                          
                                          date:
                                              "2015-05-28T22:40:32.169Z"
                                        
                                            4
                                          
                                          description: This is an optional
                                              description for SEO and Open Graph
                                              purposes, rather than the default
                                              generated excerpt.
                                        
                                            5
                                          
                                          ---
                                        
                                            6
                                          
                                          ​
                                        
                                            7
                                          
                                          Far far away, behind the word
                                              mountains, far from the countries
                                              Vokalia and
                                        
                                            8
                                          
                                          Consonantia, there live the blind
                                              texts.
                                        
                                            Copied!
                                          
                                    We can see above that each blog post
                                        has a title, a date, a description and a
                                        body. Now, let's recreate this
                                        using Netlify CMS.
                                  
                                      Add Netlify CMS to your site
                                    
                                    First let's install some
                                        dependencies. We'll need netlify-cms-app
                                        and gatsby-plugin-netlify-cms. Run the following command in the
                                        terminal at the root of your site:
                                  
                                            1
                                          
                                          npm install --save
                                              netlify-cms-app
                                              gatsby-plugin-netlify-cms
                                        
                                            Copied!
                                          
                                      Configuration
                                    
                                    For the purpose of this guide we will
                                        deploy to Netlify from a GitHub
                                        repository which requires the minimum
                                        configuration.
                                  
                                    Create a config.yml
                                        file in the directory structure you see
                                        below:
                                  
                                            1
                                          
                                          ├── static
                                        
                                            2
                                          
                                          │ ├── admin
                                        
                                            3
                                          
                                          │ │ ├── config.yml
                                        
                                            Copied!
                                          
                                    In your config.yml
                                        file paste the following
                                        configuration:
                                  
                                            1
                                          
                                          backend:
                                        
                                            2
                                          
                                              name: git-gateway
                                        
                                            3
                                          
                                              branch: main # Branch to update
                                              (optional; defaults to
                                              master)
                                        
                                            4
                                          
                                          ​
                                        
                                            5
                                          
                                          media_folder: static/img
                                        
                                            6
                                          
                                          public_folder: /img
                                        
                                            7
                                          
                                          ​
                                        
                                            8
                                          
                                          collections:
                                        
                                            9
                                          
                                              - name: 'blog'
                                        
                                            10
                                          
                                              label: 'Blog'
                                        
                                            11
                                          
                                              folder:
                                              'content/blog'
                                        
                                            12
                                          
                                              create: true
                                        
                                            13
                                          
                                              slug: 'index'
                                        
                                            14
                                          
                                              media_folder: ''
                                        
                                            15
                                          
                                              public_folder: ''
                                        
                                            16
                                          
                                              path:
                                              '{{title}}/index'
                                        
                                            17
                                          
                                              editor:
                                        
                                            18
                                          
                                              preview: false
                                        
                                            19
                                          
                                              fields:
                                        
                                            20
                                          
                                              - { label: 'Title',
                                              name: 'title', widget:
                                              'string' }
                                        
                                            21
                                          
                                              - { label: 'Publish
                                              Date', name:
                                              'date', widget:
                                              'datetime' }
                                        
                                            22
                                          
                                              - { label:
                                              'Description', name:
                                              'description', widget:
                                              'string' }
                                        
                                            23
                                          
                                              - { label: 'Body', name:
                                              'body', widget:
                                              'markdown' }
                                        
                                            Copied!
                                          
                                    Note:
                                        The above configuration allows assets to
                                        be stored relative to their content.
                                        Therefore posts would be stored in the
                                        format below as it is in gatsby-starter-blog.
                                  
                                            1
                                          
                                          content/
                                        
                                            2
                                          
                                          ├── blog
                                        
                                            3
                                          
                                          │ ├── first-post-title
                                        
                                            4
                                          
                                          │ │ ├── index.md
                                        
                                            5
                                          
                                          │ │ └── post-image.jpg
                                        
                                            6
                                          
                                          └── └── second-post-title
                                        
                                            7
                                          
                                              ├── index.md
                                        
                                            8
                                          
                                              └── post-image.jpg
                                        
                                            Copied!
                                          
                                    Finally, add the plugin to your gatsby-config.js.
                                  
                                            1
                                          
                                          plugins:
                                              [`gatsby-plugin-netlify-cms`]
                                        
                                            Copied!
                                          
                                      Push to GitHub
                                    
                                    It's now time to commit your
                                        changes and push to GitHub. The Gatsby
                                        starter initializes Git automatically
                                        for you, so you only need to do:
                                  
                                            1
                                          
                                          git add .
                                        
                                            2
                                          
                                          git commit -m "Initial
                                              Commit"
                                        
                                            3
                                          
                                          git remote add origin
                                              https://github.com/YOUR_USERNAME/NEW_REPO_NAME.git
                                        
                                            4
                                          
                                          git push -u origin main
                                        
                                            Copied!
                                          
                                      Add your repo to Netlify
                                    
                                    Go to Netlify and select 'New Site
                                        from Git'. Select GitHub and the
                                        repository you just pushed to. Click
                                        Configure Netlify on GitHub and give
                                        access to your repository. Finish the
                                        setup by clicking Deploy Site. Netlify
                                        will begin reading your repository and
                                        starting building your project.
                                  
                                      Enable Identity and Git Gateway
                                    
                                    Netlify's Identity and Git Gateway
                                        services allow you to manage CMS admin
                                        users for your site without requiring
                                        them to have an account with your Git
                                        host or commit access on your repo. From
                                        your site dashboard on Netlify:
                                  
1.
                                            Go to Settings > Identity, and select Enable Identity service.
                                          
2.
                                            Under Registration
                                                preferences, select Open
                                                or Invite only. In most cases, you want only
                                                invited users to access your
                                                CMS, but if you're just
                                                experimenting, you can leave it
                                                open for convenience.
                                          
3.
                                            If you'd like to allow
                                                one-click login with services
                                                like Google and GitHub, check
                                                the boxes next to the services
                                                you'd like to use, under External providers.
                                          
4.
                                            Scroll down to Services > Git
                                                Gateway, and click Enable Git Gateway. This authenticates with your
                                                Git host and generates an API
                                                access token. In this case,
                                                we're leaving the Roles
                                                field blank, which means any
                                                logged in user may access the
                                                CMS. For information on changing
                                                this, check the
                                              Netlify Identity
                                                    documentation.
                                          
                                      Start publishing
                                    
                                    It's time to create your first
                                        blog post. Login to your site's /admin/
                                        page and create a new post by clicking
                                        New Blog. Add a title, a date and some
                                        text. When you click Publish, a new
                                        commit will be created in your GitHub
                                        repo with this format Create Blog
                                        “year-month-date-title”.
                                  
                                    Then Netlify will detect that there was
                                        a commit in your repo, and will start
                                        rebuilding your project. When your
                                        project is deployed you'll be able
                                        to see the post you created.
                                  
                                      Cleanup
                                    
                                    It is now safe to remove the default
                                        Gatsby blog posts.
                                  
                                        Making Your Site Accessible
                                      
                                      TABLE OF CONTENTS
                                    
                                            ​What is web
                                                    accessibility?​
                                          
                                            ​Gatsby makes accessibility
                                                    easier​
                                          
                                                    ​Accessible
                                                            routing​
                                                  
                                                    ​Gatsby builds HTML
                                                            pages by
                                                            default​
                                                  
                                                    ​Linting with
                                                            eslint-plugin-jsx-a11y​
                                                  
                                            ​Tips for improving web
                                                    accessibility​
                                          
                                            ​Accessibility
                                                    resources​
                                          
                                      EXAMPLES
                                    
                                            ​Using react-skip-nav​
                                          
                                    The Gatsby team is passionate about
                                        helping you create websites that work
                                        for everyone, with helpful defaults that
                                        bake in web accessibility as well as
                                        performance optimizations. By making
                                        your website accessible to people with
                                        disabilities, you can make more
                                        inclusive sites that reach and remove
                                        barriers for more people on the
                                        Internet.
                                  
                                      What is web accessibility?
                                    
                                    ​Web accessibility
                                        means that websites, tools, and
                                        technologies are designed and developed
                                        so that people with disabilities can use
                                        them. But not only people with permanent
                                        disabilities benefit from it.
                                        Accessibility also benefits people with
                                        temporary disabilities. For example,
                                        imagine being in an environment where
                                        you cannot listen to audio or you can’t
                                        use a computer because of a broken
                                        arm.
                                  
                                    Back in the early days of the Web, Tim
                                        Berners-Lee, inventor of the World Wide
                                        Web,
                                      said:
                                  
                                        “The power of the Web is in its
                                            universality. Access by everyone
                                            regardless of disability is an
                                            essential aspect.”
                                      
                                    The web of today is an important
                                        resource in many aspects of life such as
                                        health care, education, or commerce.
                                        Accessibility is an important
                                        consideration when building for the
                                        web.
                                  
                                    Accessibility supports
                                      social inclusion for everyone, and has a strong
                                      business case.
                                  
                                      Gatsby makes accessibility
                                          easier
                                    
                                    While ultimately it’s up to you to
                                        develop your site with accessibility in
                                        mind, Gatsby aims to provide as much
                                        out-of-the-box support as
                                        possible.
                                  
                                      Accessible routing
                                    
                                    One of the most common features of
                                        every site is navigation. People should
                                        be able to navigate across your pages
                                        and content in an intuitive and
                                        accessible way.
                                  
                                    That’s why every Gatsby site aims to
                                        have an accessible navigation experience
                                        by default. Thanks to
                                      @reach/router, a routing library for React, Gatsby
                                        handles page announcements for screen
                                        readers on page change. We’re actively
                                        making improvements to this experience,
                                        and we
                                      welcome your feedback.
                                  
                                    Since the
                                      second major release, your Gatsby sites use @reach/router
                                        under the hood. While additional
                                        accessibility testing is always a good
                                        idea, the
                                      Gatsby Link Component
                                        wraps
                                      @reach/router’s Link
                                            component
                                        to improve accessibility without you
                                        having to think about it. @reach/router
                                        also supports
                                      scroll restoration.
                                  
                                      Gatsby builds HTML pages by
                                          default
                                    
                                    For websites, rendering
                                      static HTML
                                        pages means that JavaScript isn’t
                                        required to access and navigate through
                                        content. Gatsby
                                      compiles
                                        HTML pages by default from React
                                        components using
                                      Node.js, meaning you don’t have to worry about
                                        setting up server-rendering yourself to
                                        support
                                      progressive enhancement. With Gatsby’s static support out of
                                        the box, you can build dynamic sites
                                        that still enable user access without
                                        requiring
                                      client-side
                                        scripting.
                                  
                                      Linting with
                                          eslint-plugin-jsx-a11y
                                    
                                    Gatsby ships with the eslint-plugin-jsx-a11y
                                        package and warnings for all of its
                                        rules enabled by default.
                                      eslint-plugin-jsx-a11y
                                        is an accessibility
                                      linting
                                        tool for your code, helping you develop
                                        more inclusive Gatsby projects by
                                        reducing the time to find accessibility
                                        errors. This plugin encourages you to
                                        include alternative text for image tags,
                                        validates
                                      ARIA
                                        props, and eliminates redundant role
                                        properties, among other things.
                                  
                                    For more on supported rules, check out
                                        the docs for
                                      eslint-plugin-jsx-a11y. You can customize those rules in your
                                      .eslintrc..eslintrc
                                  
                                            1
                                          
                                          Copy.eslintrc: copy code to
                                              clipboard{ "extends":
                                              ["react-app",
                                              "plugin:jsx-a11y/recommended"],
                                              "plugins":
                                              ["jsx-a11y"],
                                              "rules": {
                                              "jsx-a11y/rule-name":
                                              "warn" }}
                                        
                                            Copied!
                                          
                                    Note: Including a local .eslintrc
                                        file will
                                      override
                                        all of Gatsby’s default linting and
                                        disable the built-in eslint-loader, meaning your tweaked rules won’t make
                                        it to your browser’s developer console
                                        or your terminal window but will still
                                        be displayed if you have ESLint plugins
                                        enabled in your IDE. If you would like
                                        to change this behavior and make sure
                                        the eslint-loader
                                        pulls in your customizations, you’ll
                                        need to enable the loader yourself. One
                                        way to do this is by using the Community
                                        plugin
                                      gatsby-plugin-eslint. Additionally, if you would still like
                                        to take advantage of some subset of the
                                        default
                                      ESLint config Gatsby ships
                                            with, you’ll need to copy them manually to
                                        your local .eslintrc
                                        file.
                                  
                                    This is a start to testing for
                                        accessibility:
                                      further recommendations
                                        can be found below.
                                  
                                      Tips for improving web
                                          accessibility
                                    
                                    Accessibility by default is a win for
                                        everyone. Here’s a starting point for
                                        accessibility testing when making a
                                        Gatsby site or theme:
                                  
                                            ​Use your keyboard
                                                to tab through the pages. Can
                                                you reach and operate every
                                                interactive control (links,
                                                buttons, form inputs, etc.) and
                                                see a focus indicator on the
                                                screen?
                                          
                                            Use
                                              Lighthouse,
                                              axe
                                                or
                                              Accessibility
                                                    Insights
                                                to find and fix common
                                                accessibility issues in
                                                development
                                          
                                            Test for
                                              adequate color
                                                    contrast
                                                with the
                                              accessibility color picker
                                                    in Chrome Developer
                                                    Tools​
                                          
                                            Create inclusive and
                                              accessible forms​
                                          
                                            Employ accessible
                                              headings, landmarks, and
                                                    semantic structure​
                                          
                                            Include
                                              image, video, and audio
                                                    text alternatives​
                                          
                                            Test for
                                              screen magnification and
                                                    zoom​
                                          
                                            Ensure accessibility of
                                              interactive menus, modals,
                                                    and custom widgets​
                                          
                                            Create safe
                                              animations and motion​
                                          
                                            Write
                                              Cypress accessibility
                                                    tests
                                                for your site or
                                                application
                                          
                                      Accessibility resources
                                    
                                            ​React accessibility​
                                          
                                            ​Gatsby’s commitment to
                                                    accessibility​
                                          
                                            ​How to do an accessibility
                                                    review
                                                from Google Web
                                                Fundamentals
                                          
                                            ​A11y Project’s Quick
                                                    Tests​
                                          
                                            ​The importance of manual
                                                    accessibility testing
                                                from Smashing Magazine
                                          
                                            ​Writing Automated Tests for
                                                    Accessibility​
                                          
                                            ​Free web accessibility
                                                    course
                                                by Google and Udacity
                                          
                                            ​WebAIM introduction
                                                to web accessibility
                                          
                                            ​Deque University, with free online
                                                accessibility training for
                                                people with disabilities
                                          
                                            ​Web.dev accessibility
                                                    docs​
                                          
                                            ​All Gatsby accessibility
                                                    blog posts​