Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Your First GitLab Page With Netlify

Your First GitLab Page With Netlify

Getting Started:
The first time you visit GitLab, you will be greeted by the welcome page. You can read all about it here: https://about.gitlab.com/

Cyromaven Tools

February 17, 2023
Tweet

More Decks by Cyromaven Tools

Other Decks in Technology

Transcript

  1. Your First GitLab Page
    With Netlify
    — GITLAB INTRO: FIRST STEPS
    PRESENTED BY DAVID ONOH ON FRIDAY, FEBRUARY 17, 2023

    View Slide

  2. Presenter Summary
    David Onoh
    Job Role: Full-stack Developer | Freelancer
    Catch Phrase:
    A sprout of Science in Computer Science
    and Specialty in diversity programs while
    you Netflix!
    Interests:
    Open Source, Artificial Intelligence,
    Software Engineering, Basketball, Hiking,
    Sci-Fi, and Literature.

    View Slide

  3. GitLab Intro
    What started in 2011 as an open source
    project to help one team of programmers
    collaborate is now the platform millions of
    people use to deliver software faster, more
    efficiently, while strengthening security and
    compliance.

    View Slide

  4. GitLab Features
    Fundamentally changing the way
    Development, Security, and Ops teams
    collaborate and build software - GitLab
    provides all of the essential DevOps tools in
    one DevSecOps platform. From idea to
    production, GitLab helps teams improve
    cycle time from weeks to minutes, reduce
    development costs, speed time to market,
    and deliver more secure and compliant
    applications.

    View Slide

  5. GitLab: What You Need to Know
    UNDERSTANDING HOW THE DEVSECOPS PLATFORM WORKS
    Deliver Software Faster
    Build In Security
    Enhance Visibility
    Accelerate Digital Transfrormation
    Ensure Compliance
    Improve Collaboration

    View Slide

  6. First Steps
    Hands On

    View Slide

  7. Getting Started:
    The first time you visit GitLab, you will be
    greeted by the welcome page. You can
    read all about it here:
    https://about.gitlab.com/

    View Slide

  8. Signing Up:
    You can login if you already have an
    account or sign up for one by filling up the
    form at the URI here:
    https://gitlab.com/users/sign_up/

    View Slide

  9. Projects Home:
    You can see I already have an account
    with some projects up and running. Don't
    worry if your Home doesn't look like this:
    click on New project

    View Slide

  10. Create From Template:
    You will be greeted with many options for
    starting out a project. To make it easy, we
    will use a preconfigured template: click on
    Create from template

    View Slide

  11. Gatsby Starter:
    GitLab has several starter packs for
    creating an amazing portfolio of projects.
    We are going to be using the Gatsby
    option. Click on the Use template button
    next to Pages/Gatsby

    View Slide

  12. Project Setup:
    Setup your project by filling out the form
    provided by the template and clicking on
    Create project

    View Slide

  13. Project Repository:
    You will now have the default Gastby
    starter template cloned to your own
    account. You can trigger a pipeline by
    making commits

    View Slide

  14. Make Changes:
    Now click on the README.md file and
    select the Edit option from the dropdown
    next to Open in Web IDE, make a few
    changes to the file and select the Commit
    changes at the end

    View Slide

  15. New Commit:
    Your new changes will be pushed to
    GitLab, you should see a loading icon near
    your commit message indicating triggered
    jobs running in the background

    View Slide

  16. Pipelines:
    With everything configured correctly, the
    site can take approximately 30 minutes to
    deploy. To view the triggered pipeline, go
    to CI/CD > Pipelines.

    View Slide

  17. Jobs:
    You can also see background jobs run to
    setup your new deployment. See more
    details by clicking on each job button or
    selecting the Jobs tab.

    View Slide

  18. Deployed:
    When the pipeline is done, go to Settings
    > Pages to find the link to your Pages
    website. If this path is not visible, select
    Deployments > Pages.

    View Slide

  19. Pages:
    You can see your deployed site at
    https://.gitlab.io/gatsby-
    gitlab-starter/
    Example:
    https://pages.gitlab.io/gatsby/

    View Slide

  20. Presentation
    Sponsored by

    View Slide

  21. It’s all ready, already
    Skip the painful setup and devops. Netlify is a global, production-
    ready environment from the start. Skip all the server setup and
    get straight to building.
    Launch something amazing
    Get started quickly with one of these templates. Click to connect
    your Git provider. Netlify will clone the repository and deploy your
    new site automatically.
    An obsession with making web development more
    fun
    We pore over everything web developers do daily, constantly
    asking ourselves, “What can we simplify? What can we remove?
    How can we make it easier?”
    The fastest way to combine
    your favorite tools and APIs to
    build the fastest sites, stores,
    and apps for the web.

    View Slide

  22. Do you have
    any questions?
    Send it to us! We hope you learned something new.

    View Slide

  23. Meetups at: https://meetup.com/gitlabtuxaba/

    View Slide