Jamstack Aba — Your First Jamstack

Target Audience: DevOps Engineers, Cloud Developers, Business Executives, Web Developers and Technology Enthusiasts

— In today's project we will be building a portfolio with Gatsby and Netlify.

Gatsby
Gatsby is a React-based, static site generator that is powered by GraphQL. Being a static site generator means it takes our React applications and creates a static HTML file.

Netlify
Before the days of Netlify, we had to use companies like AWS or DigitalOcean to create a server and then host our website on that server. Today we have Netlify that takes care of that for us.

Transcript

1. YOUR FIRST
   JAMSTACK
   Using Gatsby, DatoCMS, and Netlify
   Friday, December 16, 2022
   

   View Slide

2. Introduction
   Our presentation today invites you to take advantage of
   cutting-edge tools in the Jamstack ecosystem for your
   next business or portfolio idea. We will be setting up a
   front-end application with Gatsby and connect to a
   DatoCMS instance that will serve as the backend. Finally,
   we will link to Netlify as our hosting platform of choice.
   Jamstack Aba is dedicated to ensuring
   rapid uspkilling of developers in Aba
   

   View Slide

3. The Problem
   The Web is today's platform of
   choice for Innovation
   We need to improve on our strategy
   for deploying maintainable apps.
   Employees work remotely and
   require reliable web services
   Web developers need to build tools
   that make remote work more fun.
   65%
   

   View Slide

4. Web Developers in Aba can take advantage of our
   meetups and events to catch up on new technology.
   Create a condusive learning
   environment for web developers
   Our events gather the best minds to peruse relevant
   contents geared towards professional upskilling.
   Provide access to world-class
   learning resources
   Brainstorm or share ideas with business executives,
   rock-solid developers and entrepreneurs in our event.
   Provide networking opportunities
   Our
   Solutions
   

   View Slide

5. How Jamstack
   Works
   Most teams require people with more than one skill to
   develop and deploy a full set of solution. Jamstack helps
   team members with specific roles focus on working with
   tools that get their job done rather than struggle to
   learn every stack of the product chain before they can
   deliver.
   With Jamstack you can decouple the
   front-end from the backend making it
   easy to scale or add better features
   

   View Slide

6. Building Your First
   Jamstack With Gatsby,
   DatoCMS, And Netlify
   In 15 steps software developers will be introduced to
   an easy to use chain for faster deploys.
   

   View Slide

7. Gatsby
   Template
   Our Project Structure
   We will be building a sample blog using a Gatsby template.
   Hosting platform for
   our site.
   Builds from Git repo.
   NETLIFY
   Easy for configuring
   the back-end.
   Holds our blog data.
   DATOCMS
   

   View Slide

8. Get a DatoCMS account if you don't have already.
   The sign up is pretty straight forward when you
   follow https://dashboard.datocms.com/signup/
   Step One
   

   View Slide

9. Now you should be greeted with your Dashboard.
   Select "Projects"> Click "New Project"> and then
   "Demo project". You should be greeted with the
   "Starter projects" page.
   Step Two
   

   View Slide

10. Click on "Gatsby Blog" then "Start free project".
    Step Three
    

    View Slide

11. You should be redirected to the "Create demo
    project" page where you will be required to
    connect your GitHub and Netlify accounts.
    Step Four
    

    View Slide

12. You can get a Netlify account if you don't have
    already by following the URI:
    https://app.netlify.com/signup/
    Step Five
    

    View Slide

13. You can also get a GitHub account if you don't
    have already by following the URI:
    https://github.com/signup/
    Step Six
    

    View Slide

14. You will now find your new project created in the
    Projects section of your Dashboard.
    Step Seven
    

    View Slide

15. You can click on the Project's name and then
    "Enter project" to see your blog CMS editor. This
    is the "Posts" section.
    Step Eight
    

    View Slide

16. You can as well view, add, and edit authors in
    your "Authors" section.
    Step Nine
    

    View Slide

17. You should also be able to manage categories in
    the "Categories" section.
    Step Ten
    

    View Slide

18. Change your "Favicon" and "SEO settings" in the
    Global settings division.
    Step Eleven
    

    View Slide

19. Additionally, you can manage your site in the
    Gatsby Cloud. An account is available at the end
    of the URI:
    https://www.gatsbyjs.com/dashboard/signup
    Step Twelve
    

    View Slide

20. Once you are in the Dashboard you can add your
    site by importing it from your GitHub repo.
    Step Thirteen
    

    View Slide

21. Select the Gatsby template created by DatoCMS
    from your list of Git repositories.
    Step Fourteen
    

    View Slide

22. Connect DatoCMS to your blog as an integration.
    You can see your project builds and after some
    munites, the site is ready. Now you can manage
    all your content and data from DatoCMS.
    Step Fifteen
    

    View Slide

23. You can share the URI of your showcase sample
    blog. Visit mine: https://bespoke-biscochitos-
    925e37.netlify.app/
    Content Share
    

    View Slide

24. THANK YOU
    For following along with this demo
    

    View Slide

25. netlify.com/
    Netlify
    jamstack.org/
    Jamstack
    meetup.com/jamstack-aba/
    Aba Meetup
    Contact Us
    Reach out to us for inquiries
    or comments.
    

    View Slide