How to Host an HTML Page on GitLab Pages
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
- Go to your GitLab dashboard.
- Click on the New project button.
- Select Create blank project.
- Enter a Project name (e.g., “my-html-page”).
- Choose the Public visibility level (or Private if preferred).
- 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
-
Navigate to the cloned repository directory:
cd my-html-page -
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 -
Stage and commit your changes:
git add index.html git commit -m "Add index.html" -
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
-
Stage and commit the
.gitlab-ci.ymlfile:git add .gitlab-ci.yml git commit -m "Add .gitlab-ci.yml" -
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