Publish static website with gitlab-render for free
Tags: gitlab, staticwebsite, freehosting, render
Published: 2022-09-26 19:18:23

Hosting static website comes with some options. One of the option is using [GitLab](https://about.gitlab.com/) + [Render](https://render.com/) to publish your static websites. I've already written a post on [using GitHub + Netlify to host & publish your static website](https://nitinkumar30.blogspot.com/2022/09/publish-your-static-website-for-free.html). You can also check it for another option. So, let's get started. 

## Pre-requisites

- Valid accounts in GitLab & Render website
- Project ready preferably with README file

## Steps to cover

- Login to Gitlab
- Upload the files necessary(Need to upload files one-by-one) or use CLI to push files via VS Code
- Let it complete uploading
- Login to Render
- Connect with Gitlab
- Select the project
- Do necessary configurations
- Click publish
- Check website live


## Detailed steps

1. Login to GitLab portal

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bvc1c77rhiqos0okbw18.png)


2. Click on New Repository

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8gcev4cjs8e62hbsvgz7.png)


3. Select from below. If your project is already in your local, select **Create blank Project**, else chose suitable option. I've my project ready in local, so choosing Create blank Project.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bdl3plkjka6tqm1uvvoy.png)


4. Give suitable name. Can chose a deployment target. Learn more about this [here](https://about.gitlab.com/direction/deployment/). Chose other options as per the convenience. I'm letting other options as default.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ap3k1fvlf2hucf5ruj01.png)


5. Click on **Create Project** button for creating the repo successfully.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iazpyaozz8rywyfjxdw6.png)


6. Upload the project files using the **+** button as per the image below and selecting **Upload file**.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wcjxlyf9o4el47r0olkq.png)


7. Carefully upload all the files one-by-one. Check how to upload multiple files via CLI [here](https://stackoverflow.com/questions/19576116/how-to-add-multiple-files-to-git-at-the-same-time). Moreover, [uploading multiple files in GitLab web interface](https://forum.gitlab.com/t/why-uploading-multiple-files-is-not-possible/15078) is not supported anymore.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tio3k1o9j3amsl39d4me.png)


8. Check all the files are uploaded as in file-tree

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yb75cvku333fjikep2yk.png)


9. Login to render portal now

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/za0a7x8ug6xy5cgkamdn.png)


10. Click on **New** button & select **Static Site** from dropdown options

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9glrav100en1jdnpvtcj.png)


11. Connect your GitLab account with render account. You'll get steps how to do that in [render's documentation](https://render.com/docs/gitlab#connecting-gitlab). Mine is already connected, so I'll continue with selecting the repository step.
Check the repository just created.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8wasrj6jmvk9vrjp30d2.png)


12. Click on **Connect** button

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kn6dbqdksnsdry2zi4br.png)


13. Give a unique name to your specific project in render.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z6hfppn0iswrr7j7imku.png)


14. Put the following text(./) in the **Publish Directory** textbox as the files are uploaded in master directory.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kz5tayypc04fyv5p5pps.png)


15. Let render complete the scanning and deploy your site using the files of GitLab repo.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dd4113yy1rp532cbyj4c.png)


16. Once you get the following message in console, your website will be published & live now.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fuuc3vywlwk0dup1t8yg.png)


17. Check the site deployed just now by clicking in the link in top.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4f8459l5jl3g6oiq8ggx.png)


18. Check my site below.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dtilwa6cpznzlh5xg4pz.png)


[Happy Hacking] [Render your Career] [Upgrade to new version of you] 

Follow me on [Linkedin](https://linkedin.com/in/nitin30kumar/).