HOST a Website Using Gitlab

Steps to Host a Website using GitLab and Make Images Visible:

1. First, open GitLab.
2. Click the GitLab logo at the top-left corner.
3. Select "New Project", then click "Create blank project". Enter any Project Name. Set the Visibility Level to Public. Check the box to create an empty repository with a README file. Finally, click "Create project".

** Next: Clone and Set Up Your Project Locally**

1. Open Command Prompt (CMD) in your system.
2. Type the following command to clone your GitLab project: git clone (URL) > This will the GitLab project to your system.

create a new file named:
.gitlab-ci.yml

1. Add the below YML code (exact spacing must be followed) inside that file.

pages:
  stage: deploy
  script:
    - mkdir public
    - cp index.html public/
  artifacts:
    paths:
      - public
  only:
    - main

✅ Now, Commit and Push to GitLab

Run these commands in your terminal:
git add .
git commit -m "any message"
git push

🌐 After pushing, go back to GitLab:

Go to Deploy > Pages.

A link to your website will be created there.

❗Important Note about Image Visibility

If you're using images () in your website, it won’t display correctly unless you add the below code in your .gitlab-ci.yml file.

So, go back to the .yml file and add the following code at the end (if not already present):

script:
- mkdir public
    - cp index.html public/
    - cp-r Folder(or)Filename/public

In VS Code, if you save an image or background file with a name that includes a number like ram1.jpg, it may cause an error.

It’s better to save it with a simple name like ram.jpg instead.

I'm not sure if this is wrong or right, but I got this error.

This will make your images visible on the website.

Comments

[Arokiya Kithiyon]

nice