Publish static website using 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.

Comments

Post a Comment

Popular posts from this blog

Publish dynamic website using infinityfree for free

Image
Most of my Web Devs friends were asking me "How can I publish my dynamic website where backend is involved?" "Is there any website which offers free hosting facility?" "Where to purchase cheap domains for showcasing my websites?". If you too have these questions, my friend, you're in correct place. I've tried to explain this in most simpler way possible along with some notes at the end. Here, I'm going to discuss how to publish a dynamic website using InfinityFree . Why only InfinityFree? 'coz I was using it since 2019 & I just need to visit that site once a week to not get my site into inactive status due to obvious reasons. They've free hosting and domain facility . We just need to search for our subdomain, whether it's available or not. Let's get started. Steps to consider in general Login to InfinityFree Upload the contents inside ./htdocs directory Create DB Connect FrontEnd & BackEnd Pre-Requisites An ...
Read more

Publish your static website for free

Image
Many IT folks ask me I've made my project in Web Dev as beginner but I want to showcase it to my client/people for free. Where should I upload & publish them? My simple answer is Google Drive. I'll write another article about how to upload static sites in Google Drive. So, one of the professional method is using Github & Netlify. Netlify is a github authorised application to run static web pages. You can use it just by authorizing the repos access to it. In this article, I'll let you know from basics to full uploading and getting the link. So, let's get started. Steps to consider: Create Account Create Repo Push/Upload contents in repo Sign Up/Login in Netlify using Github Connect your target repo Publish it NOTE : Ignore following warning in some screenshots. ----------------------------x------------------------- Descriptive steps Step 1: Create Account in Github . P.S.- If already have an account, Login to your account. Step 2: After logging in...
Read more