My hack to get Webflow hosting for free!

Summary

In this episode of the webflow series, host Romy teaches viewers how to obtain free hosting for static websites. She demonstrates how to bypass Webflow's hosting fees by using Netlify for hosting and GitHub for code management. Romy guides through downloading Webflow code, uploading it to GitHub, and then hosting it on Netlify. She also covers setting up a custom domain, making the process accessible even for those with minimal coding knowledge.

Takeaways

• 🌐 The video discusses how to get free hosting for static websites using Webflow.
• 🔗 The presenter, Romy, guides viewers on connecting a domain to a website without incurring hosting costs.
• 💡 Romy introduces a 'hack' to bypass Webflow's hosting fees, which is ideal for single-page websites.
• 🚫 The method is not applicable for dynamic websites that require real-time updates or user interactions.
• 🛠️ A small amount of coding is involved, but it's simple and the video provides a step-by-step guide.
• 💻 The video uses Netlify, a free hosting service for static websites, which is integrated with GitHub.
• 📂 GitHub is introduced as a platform for version control and code management, essential for uploading website code.
• 🔄 The process involves downloading the website's code from Webflow, uploading it to GitHub, and then hosting it on Netlify.
• 🌐 The final step is setting up a custom domain, which involves updating name servers through the domain provider.
• ⏱️ The video mentions that it may take up to 48 hours for the custom domain to fully propagate and display the website.

Q & A

What is the main topic of this video?

The main topic of this video is how to get free hosting for certain web sites, specifically for a single-page website using Webflow.

What is the purpose of a domain in the context of a website?

A domain serves as a unique name for a website, which people type into the browser to find the site, similar to how 'google.com' or 'facebook.com' are used.

What are some domain purchasing services mentioned in the video?

Some domain purchasing services mentioned are GoDaddy, Namecheap, and Hover.

Why might someone consider the hosting cost in Webflow to be expensive?

The hosting cost in Webflow is considered expensive because it is $20 a month, which the presenter finds too much for hosting a single-page website.

What is a static website according to the video?

A static website is one that does not automatically update, such as a website that does not have user interaction or a content management system.

What is the hack mentioned in the video to bypass Webflow hosting cost?

The hack to bypass Webflow hosting cost involves using a free hosting service for static websites called Netlify, and uploading the website's code from Webflow to GitHub.

What are the three simple steps outlined in the video to get free hosting and bypass Webflow hosting cost?

The three steps are: 1) Download the code from Webflow, 2) Upload the code to GitHub, and 3) Host the site using Netlify.

What is GitHub and how is it used in this video?

GitHub is a platform for version control and collaboration, used in the video to upload and manage the website's code before transferring it to Netlify.

What is Netlify and how does it relate to the video's content?

Netlify is a service that offers free hosting for static websites. It is used in the video to host the website without incurring hosting costs.

How does the video guide viewers to connect their custom domain to the hosted site on Netlify?

The video guides viewers to connect their custom domain by updating their domain's name servers with the provided Netlify name servers.

What is the final outcome of following the steps in the video?

The final outcome is having a website hosted on Netlify with a custom domain, without incurring any hosting costs.

Outlines

00:00

🌐 Introduction to Free Web Hosting with Webflow

In this segment, the host, Romy, introduces the topic of the video, which is about acquiring free hosting for websites. Romy, who is the presenter of the series 'Make Something with Romaine,' explains that the video will guide viewers on how to get free hosting for certain types of websites. The focus is on static websites, which do not update automatically or involve user interaction. Romy mentions that the hack will require a minimal amount of coding and will use tools like Netlify and GitHub to bypass the hosting costs associated with Webflow.

05:01

💻 Step-by-Step Guide to Uploading Code to GitHub

This paragraph details the process of uploading code to GitHub, which is a necessary step before hosting the website on Netlify. The host explains the concept of a repository, which is like a folder for storing code. The audience is guided through creating a new repository on GitHub and then shown how to write and execute a simple script to upload the code. The script includes commands for initializing a Git repository, adding files, committing changes, and pushing them to GitHub. The host ensures that viewers understand each step and reassures them that this is the only coding part of the tutorial.

10:02

🌐 Deploying a Static Website with Netlify

The final paragraph covers the deployment of the static website using Netlify, a service that offers free hosting for static websites. The host demonstrates how to connect the GitHub repository to Netlify and deploy the site. After deployment, the site is accessible via a temporary URL provided by Netlify. The host then proceeds to guide viewers on setting up a custom domain, which involves updating the domain's name servers to point to Netlify's servers. The video concludes with the successful hosting of the website on the custom domain, emphasizing that the entire process was free of cost.

Keywords

💡Webflow

Webflow is a platform used for designing and building responsive websites visually, without writing code. In the video, the host uses Webflow to create a homepage for their channel. It's highlighted as a user-friendly tool that allows for website creation even for those without design or coding expertise.

💡Domain

A domain is the web address where Internet users can access your website. It acts as a unique name for your site. In the script, the host mentions the importance of choosing and buying a domain, like 'make something with romy.com', which is essential for people to find the website online.

💡Hosting

Hosting refers to the service of providing storage space and access for websites. The host explains that after creating a website, it needs to be hosted on a server so that the data and design are physically stored and accessible to users. The video discusses how to find cost-effective hosting solutions.

💡Static Websites

Static websites are those that do not change dynamically, unlike dynamic sites that update content in real-time. The video mentions that the hosting hack works for static sites only, which are suitable for content that does not require frequent updates or user interaction.

💡Netlify

Netlify is a platform that offers free hosting for static websites. It is introduced in the video as a solution to bypass the hosting cost on Webflow. The host demonstrates how to use Netlify to host a website and connect it to a custom domain.

💡GitHub

GitHub is a version control and collaboration platform for software development projects. In the video, GitHub is used as a tool to upload and manage the website's code before it is hosted on Netlify. The host guides viewers through the process of creating a repository and uploading code to GitHub.

💡Repository

A repository, often shortened to 'repo', is a storage location for a project's files and each file's revision history. The video explains how to create a new repository on GitHub to store the website's code before it is deployed to Netlify.

💡Version Control

Version control is a system that records changes to a file or set of files over time. The video touches on version control when discussing GitHub, which is used by engineers to manage different versions of code. It's mentioned as a feature of GitHub, although the primary focus is on using it for code uploading.

💡Custom Domain

A custom domain is a domain name that is unique to a brand or individual, as opposed to a default domain provided by a hosting service. The video script includes a step-by-step guide on how to set up a custom domain with Netlify, which is crucial for professional website presentation.

💡Name Servers

Name servers are servers that convert human-friendly domain names (like 'example.com') into IP addresses that computers use to identify each other on the network. The video explains the process of updating name servers as part of setting up a custom domain, which directs the domain to the correct hosting server.

Highlights

Introduction to episode 3 of the webflow series, focusing on free hosting for certain websites.

Overview of creating a website with a unique domain name.

Explanation of the need for a domain when creating a website.

Mention of various domain purchasing services like GoDaddy, Namecheap, and Hover.

Definition of hosting and its necessity for a website's data and design.

Discussion on the cost of webflow hosting and the search for an alternative.

Introduction of a hack to bypass webflow's hosting cost for static websites.

Clarification on the limitations of the hack for dynamic, interactive, or CMS-based websites.

Introduction to Netlify, a free hosting service for static websites.

Explanation of the process to download website code from Webflow.

Guide on creating a repository on GitHub for code management.

Tutorial on uploading code to GitHub using terminal commands.

Overview of deploying the site using Netlify and connecting it to GitHub.

Instructions on setting up a custom domain with Netlify.

Demonstration of updating domain's name servers to link with Netlify.

Completion of the website hosting process and verification of the live site.

Conclusion of the episode with a summary of the steps and encouragement for viewers to try the process.

Transcripts

hi everyone how's it going welcome to

episode 3

in the webflow series today i'm going to

go over

how you can get hosting for free

in certain web your sites

my name is romy and welcome back to make

something with romaine

in this series we go over all the things

you can make online

without knowing how to design or code so

in the last video i created a website

a homepage for this channel and i used

one of my favorite tools

webflow the only piece remaining was to

get a domain

and connect it to the domain if you're

tech savvy and

are comfortable with all the terms i

just mentioned you can skip ahead for a

minute

if you're not here is what you need to

know when you create a website

for yourself or your business you need a

domain

it's basically like giving your website

a unique name

uh this is what people will type in the

browser to find your website

like google facebook or whatever the

domain i wanted in my case

is make something with romy.com

obviously

now once you decide on the domain the

next step

is to buy it there are many services you

can use to buy the domain

godaddy namecheap hover choose any they

all get the job done

here we are we have a website we have a

domain and now we just need to host it

romy what does that mean so your

website's data and design needs to be

physically stored somewhere

and for that you need to buy or rent

server space

ruby how do i do that oh with a hosting

service

and sometimes it costs you as low as ten

dollars a month

now when i looked at the prices for

hosting in webflow

it's twenty dollars a month now for me

that's a lot for hosting my single page

website

so let me ask you has this hosting cost

ever prevented you from using webflow

for your projects

you know me i started looking around and

i found a hack

and i'm so excited to share it with you

today because this

will completely help you bypass the

webflow hosting cost

before we start a couple of aspects

terms and conditions

first this hack will work for static

websites only

by static i mean something that doesn't

automatically update

for example like if your website is

following numbers of your instagram

followers that are constantly changing

this won't work if you have any kind of

user interaction like

asking users to create their own

profiles that's not a static website

either

so it won't work or even if your website

uses a cms which is a content management

system

which is essentially a database that is

used to manage the assets of your

website

blog posts photos videos this won't work

either and guys

it will involve a teeny tiny bit of

coding

it's very simple don't worry i'll walk

you through it

also let's talk about the tools that

will help me hack this

i'll be using this amazing free

hosting service for static websites

called netlify

now netlify doesn't directly work with

webflow

so i'm going to have to download my

website's code

from webflow and then upload it into

another

uh tool called github which works easily

with matlify

so to recap things this is where

you know we were in the last episode

we had created this landing page in

webflow and

uh now um we are going to follow three

simple steps

um so that we could get free

hosting and bypass the webflow hosting

course first

is to download the code from webflow

second

is to upload your code on github and

third is to host it using netify

that's it let's dive right into it

now the first thing i'm going to do is

actually go and export the code

so we'll go here and clicking on this

it's taking a while and

i am going to prepare a zip folder

and then download it

and that is that step one completed

and here i have all the code ready to go

[Music]

now we're on step two first if you don't

have an account on github create one

i'm logged into my account now github

lets engineers manage different versions

of the code

in engineering language these are called

version control systems

we are using it today just to upload our

code but

wanted you to know what github is really

capable of

just in case you're curious you know

once you're in github let's go over here

and click new repository

definition alert a repository is

essentially another name for a folder

honestly technology

just seems to have these complicated

terms so

let's go and um create one so let's call

this

make something let's call it the home

page and i'm going to make a private one

and then

create the repository

all right now once we've created a

repository

here is where the coding comes in we

want to upload a folder of code

like we usually do by dragging and

dropping

we will write code to upload our code

without physically moving

files you'll see it's really cool

oh and here in this page github lets you

know what lines of code you need to

write

it's just six lines six lines is not a

lot

let's give it a shot did i just rhyme

something

okay uh so the next question is where

are we typing

this code if you need a mac we'll type

it on your terminal

open the finder and then open the

terminal windows has a similar program

too

now the first thing we need to do when

terminal is open

is go into the folder we downloaded the

code in

the way we change and navigate folders

here is through a command

cd so let's do this

now first we'll go into cd downloads and

then

into the actual folder from there by the

way you don't need to remember the whole

folder name

just a quick tip is to hit tab and it'll

auto-complete it for you

so let's go to the downloads folder find

the actual name

it's called make something lp dot flow

and start typing that hit tab and there

you go

now let's follow the steps in the screen

and

write your first few lines of code

get in it this just tells the computer

to start using it for the project

then we'll type git add period

the period is very important and it

tells the computer that i want to add

all the files in this project to the

folder

then git commit slash m adding the files

this adds all the files into a local

folder which will be later used

to add it to your github account

then this line here called get remote ad

we just copy it and this just makes the

connection between your github account

and your computer folder

and finally it's git push origin master

this will push the code to your folder

into the github account

that's it now let's see if this worked

but let's go to make something and let's

see what the folder looks like now

and there you see every single thing

four minutes ago i just talked for four

minutes i guess

uh four minutes ago got added

into github isn't that cool so there it

is

second step done and i promise you this

was the only code related step

and now we are ready the hostess

code and for that we'll be using a

service

called netlify

so here i am on netlify.com and you know

what the best thing about

it is and why we did all this because

static

website hosting is free up to a certain

point for custom domains

that's awesome okay now this involves a

couple

of steps

first we need to host the site with

netlify from your github account

and second we just connect our started

domain

so let's log into netlify you can log in

using your github

account which you just created and there

you go

i'm going to click on this new site from

git

choose github and connect it

the repo i'm going to search for the one

we just created called make something

and there you go

i don't need to fill anything else for

now

and all you need to do is deploy the

site

part one done all right

so site is deployed definition load

deployed just means it's up and running

now if you click on this link over here

we can actually check out

our hosted site on netlify

the url still has you know a.netlify.app

as you can see but we're going to change

it to make something with romy.com

very soon and it's all looking good

so let's get into the last part

which is setting up a custom domain

so i'm going to click on this

and here it's going to ask me for my

custom domain name

which is make something with romi.com

and then i am going to hit

verify yes at the domain

the next thing it's prompting me to do

is update my domain's name servers

now you can update your name servers

on the website you used to buy a domain

in my case i use

namecheap so just log into that website

and you will find something called

manage your domain

uh like you can see i'm on it now and

then

uh there will be a place for custom uh

dm dns and there i'm just going to be

adding the

name servers uh and just saving them

um time jump

and done and i'll hit save

and done that's it those were

all the steps now sometimes it can take

up to 48 hours for

uh you know showing up on your actual

domain but let's see

what makes something with roomie.com

shows now so let me

type it in the browser very quickly and

there you go it's already hosted isn't

that cool

my god that's so cool and most

importantly

it's for free that was a wrap

uh i hope you enjoyed it and please hit

me up in the comments if you ended up

trying this

also please don't forget to hit like and

subscribe i'll be back with a new video

soon this is romy

i hope this week you make something even

if it involves a tiny bit of code