Mahesh Kumar Yadav

Programmer

2 minute read

Hosting an HTML page on GitLab Pages is a fantastic way to showcase your web projects. GitLab Pages provides an easy method to host static websites directly from your GitLab repository. In this guide, we’ll walk through the process step-by-step.

Step 1: Set Up a GitLab Account and Repository

Sign Up for GitLab

First, you need a GitLab account. If you don’t have one, you can sign up at GitLab. Once you’ve signed up and logged in, you’re ready to create a new repository.

Create a New Repository

  1. Go to your GitLab dashboard.
  2. Click on the New project button.
  3. Select Create blank project.
  4. Enter a Project name (e.g., “my-html-page”).
  5. Choose the Public visibility level (or Private if preferred).
  6. Click Create project.

Step 2: Add Your HTML Page to the Repository

Clone Your Repository

Clone the repository to your local machine using Git. Open your terminal or Git Bash and run:

git clone https://gitlab.com/your-username/my-html-page.git

Replace your-username with your GitLab username and my-html-page with your repository name.

Add Your HTML File

  1. Navigate to the cloned repository directory:

     cd my-html-page

  2. Create an HTML file named index.html:

     echo "<!DOCTYPE html>
 <html>
 <head>
     <title>My GitLab Page</title>
 </head>
 <body>
     <h1>Hello, World!</h1>
     <p>Welcome to my GitLab Pages site.</p>
 </body>
 </html>" > index.html

  3. Stage and commit your changes:

     git add index.html
 git commit -m "Add index.html"

  4. Push your changes to GitLab:

     git push origin main

Step 3: Configure GitLab Pages

Create a .gitlab-ci.yml File

To deploy your site, GitLab Pages uses a CI/CD pipeline. Create a .gitlab-ci.yml file in your repository root:

touch .gitlab-ci.yml

Open the .gitlab-ci.yml file in a text editor and add the following content:

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

This configuration directs GitLab to copy your index.html file to a .public directory, which GitLab Pages uses to serve your site.

Commit and Push the .gitlab-ci.yml File

  1. Stage and commit the .gitlab-ci.yml file:

     git add .gitlab-ci.yml
 git commit -m "Add .gitlab-ci.yml"

  2. Push your changes to GitLab:

     git push origin main

Step 4: Access Your GitLab Pages Site

After pushing the .gitlab-ci.yml file, GitLab will start a pipeline to build and deploy your site. Once the pipeline is complete, your site will be available at https://your-username.gitlab.io/my-html-page/.

To check the pipeline status, navigate to your repository on GitLab, click on CI/CD in the sidebar, and select Pipelines. Here, you can see the status of your pipeline.

Conclusion

Well done! You’ve successfully hosted an HTML page on GitLab Pages. This basic setup can be extended to host more complex static sites, and with GitLab’s CI/CD features, you can automate your deployment process with ease.

GitLab Pages is a powerful tool for developers looking to share their projects online. Dive deeper into GitLab’s documentation and community resources to explore more advanced use cases and capabilities. Happy coding!

If you have any questions or encounter any issues, feel free to leave a comment below or refer to the GitLab Pages documentation.

This guide is intended to help beginners get started with hosting an HTML page on GitLab Pages. For more advanced use cases, check out GitLab’s comprehensive documentation and community support.

Leave a comment

Your email address will not be published. Required fields are marked *

Markdown is supported.

You may also enjoy