DEV Community

Nitin Kumar
Nitin Kumar

Posted on

Publish static website with gitlab-render for free

Hosting static website comes with some options. One of the option is using GitLab + Render to publish your static websites. I've already written a post on using GitHub + Netlify to host & publish your static website. 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

  1. Click on New Repository

Image description

  1. 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

  1. Give suitable name. Can chose a deployment target. Learn more about this here. Chose other options as per the convenience. I'm letting other options as default.

Image description

  1. Click on Create Project button for creating the repo successfully.

Image description

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

Image description

  1. Carefully upload all the files one-by-one. Check how to upload multiple files via CLI here. Moreover, uploading multiple files in GitLab web interface is not supported anymore.

Image description

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

Image description

  1. Login to render portal now

Image description

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

Image description

  1. Connect your GitLab account with render account. You'll get steps how to do that in render's documentation. Mine is already connected, so I'll continue with selecting the repository step. Check the repository just created.

Image description

  1. Click on Connect button

Image description

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

Image description

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

Image description

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

Image description

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

Image description

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

Image description

  1. Check my site below.

Image description

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

Follow me on Linkedin.

Top comments (4)

Collapse
 
bcouetil profile image
Benoit COUETIL πŸ’«

And what about GitLab Pages ?

Collapse
 
nitinkumar30 profile image
Nitin Kumar

Can be a topic of another article for sure.

Collapse
 
bcouetil profile image
Benoit COUETIL πŸ’«

In fact, if you do not talk about the obvious method in an article, people won't be interested in a more complex method. You have to say why it is worth it.

Thread Thread
 
nitinkumar30 profile image
Nitin Kumar

This is, according to me, is the most basics of static website hosting. We can, of course use many different platforms according to our convenience for hosting them.