HOST a Website Using Gitlab

This content originally appeared on DEV Community and was authored by M Ramavel

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.

This content originally appeared on DEV Community and was authored by M Ramavel