DEV Community

Aisalkyn Aidarova
Aisalkyn Aidarova

Posted on

LAB 1 — GitLab CI + Pages From Scratch

#devops #cicd #beginners #tutorial

🟢 PART 1 — Register GitLab Account

Step 1

Go to:

https://gitlab.com
Enter fullscreen mode Exit fullscreen mode

Click Register

Use:

  • Email
  • Username
  • Password

Verify email.

🟢 PART 2 — Create New Project

After login:

Click New project

Choose:

👉 Create blank project

Fill:

  • Project name: gitlab-lab
  • Visibility: Public (easier for Pages)
  • Initialize repository with README (optional)

Click Create project

🟢 PART 3 — Connect Mac to GitLab (SSH Setup)

Open Mac Terminal.

Step 1 — Generate SSH key 

ssh-keygen -t ed25519 -C "your_email"
Enter fullscreen mode Exit fullscreen mode

Press Enter for all prompts.

Step 2 — Copy Public Key 

cat ~/.ssh/id_ed25519.pub
Enter fullscreen mode Exit fullscreen mode

Copy entire output.

Step 3 — Add SSH Key to GitLab

In GitLab:

Top right → Profile → Preferences → SSH Keys

Click Add new key

Paste key → Click Add key

Step 4 — Test SSH 

ssh -T git@gitlab.com
Enter fullscreen mode Exit fullscreen mode

You should see:

Welcome to GitLab, @yourusername!
Enter fullscreen mode Exit fullscreen mode

🟢 PART 4 — Clone Project to Mac

Go to your project page.

Click:

Code → Clone → SSH

Copy URL like:

git@gitlab.com:username/gitlab-lab.git
Enter fullscreen mode Exit fullscreen mode

Now in terminal:

git clone git@gitlab.com:username/gitlab-lab.git
cd gitlab-lab
Enter fullscreen mode Exit fullscreen mode

Check:

ls -la
Enter fullscreen mode Exit fullscreen mode

You should see .git folder.

🟢 PART 5 — Create First Website

Create public folder:

mkdir public
Enter fullscreen mode Exit fullscreen mode

Create index file:

cat > public/index.html <<'EOF'
<!DOCTYPE html>
<html>
<head>
  <title>My First GitLab CI Site</title>
</head>
<body>
  <h1>Hello DevOps World 🚀</h1>
</body>
</html>
EOF
Enter fullscreen mode Exit fullscreen mode

🟢 PART 6 — Create GitLab CI File

Create file:

touch .gitlab-ci.yml
Enter fullscreen mode Exit fullscreen mode

Open it:

nano .gitlab-ci.yml
Enter fullscreen mode Exit fullscreen mode

Paste:

image: busybox

pages:
  stage: deploy
  script:
    - echo "Deploying to GitLab Pages"
  artifacts:
    paths:
      - public
  rules:
    - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH
Enter fullscreen mode Exit fullscreen mode

Save and exit.

🟢 PART 7 — Push Code (Trigger Pipeline) 

git add .
git commit -m "Setup GitLab Pages site"
git push origin master
Enter fullscreen mode Exit fullscreen mode

(If your branch is main, use main instead.)

🟢 PART 8 — Watch First CI Job

Go to:

👉 Build → Pipelines

You will see:

Pipeline running → then green.

Click pipeline → see job logs.

This is your first CI job.

🟢 PART 9 — Open Your Website

After pipeline is green:

Go to:

👉 Deploy → Pages

Open URL:

https://username.gitlab.io/gitlab-lab/
Enter fullscreen mode Exit fullscreen mode

You will see:

Hello DevOps World 🚀
Enter fullscreen mode Exit fullscreen mode

🎯 What You Just Learned

You just completed:

✔ GitLab registration
✔ SSH authentication
✔ Git clone
✔ Git workflow
✔ CI pipeline
✔ Artifacts
✔ Static deployment

This is real DevOps foundation.

🧠 What DevOps Should Understand

  • .gitlab-ci.yml controls pipeline
  • Branch triggers deployment
  • public/ folder becomes website
  • CI/CD is event-driven (push = pipeline)
  • SSH is secure authentication

Top comments (0)