With GitLab Pages, you can host static websites without any hassles directly from a GitLab repository. This makes it suitable for hosting documentation, personal sites, simple web apps and more without the complication of an external server.

• Free Hosting: If you have a public repository, you can get free hosting which is quite economical.
• CI/CD Features Support: Deployment can be done automatically with GitLab CI/CD pipelines.
• Change Domain and HTTPS: Set custom domains with HTTPS for added functionality.
• Change Control: Make the website files managed through Git, so collaboration and versioning of files is simpler.

Step 1: Create a GitLab Repository

• Go to GitLab and log in.

• Create a new repository and push your web app’s files into it.

 Step 2: Prepare .gitlab-ci.yml File 

In GitLab CI/CD, deployment automation is done using a .gitlab-ci.yml file. To do this, add the following to the root of your repository: image: node:latest stages:   - deploy pages:   stage: deploy   script:     - mkdir public     - echo '<h1>Welcome to My Site</h1>' > public/index.html   artifacts:     paths:       - public   only:     - main Why use it? It facilitates the deployment procedure where every update to your project is automatically reflected in GitLab Pages.

What is .gitlab-ci.yml? Configuration file that sets up CI/CD pipeline stages for automation of site deployment.

 Step 3: Enable GitLab Pages

• To do this, go to Settings > Pages of your repository on GitLab.

• Once you have deployed, GitLab will give you a URL for your site if deployment has worked. The URL GitLab provides is: https://<username>.gitlab.io/<project-name>/

Step 4: Add Your Web Application's Files

• Ensure that you have all the needed files in the repository.

• In case you are using any build tool, make sure you have .gitlab-ci.yml updated to put the output in the public folder.

• Remember to commit and push changes so that the CI/CD pipeline is triggered.

Step 5: Change Access Rights

• As a default setting, GitLab Pages remain private.

• Make the site Online by going to Settings > Pages > Access Control and changing visibility to Everyone.

• Making permissions changes allow your site to be viewed by outside users.

Step 6: Check The Website

• Confirm that your web application comes up as expected by opening the GitLab Pages provided URL.

• If it does not work, delve into the .gitlab-ci.yml file and the CI/CD logs.

Step 7: (Optional) Use A Custom Domain

To use a custom domain:

• Go to Settings > Pages > Custom Domains.

• Simply input your custom domain (for instance www.example.com).

• And most importantly, change the DNS settings and point it to the servers GitLab is using.

• Managing GitLab Pages is more complex than the rest as it only supports static web pages. Hence, for more dynamic actions, online platforms like Firebase or AWS Lambda should be utilized.

• Once you have created your GitLab page, HTTPS is automatically enabled, meaning your site is secure by default. This allows for greater peace of mind.

• Hosting for public repositories is absolutely free of charge meaning GitLab is cost effective compared to its competitors.

Ready to transform your business with our technology solutions? Contact Us  today to Leverage Our DevOps Expertise.