My hack to get Webflow hosting for free!
Summary
TLDRIn 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
π 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.
π» 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.
π 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.
Mindmap
Keywords
π‘Webflow
π‘Domain
π‘Hosting
π‘Static Websites
π‘Netlify
π‘GitHub
π‘Repository
π‘Version Control
π‘Custom Domain
π‘Name Servers
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
Browse More Related Video
How To Host S3 Static Website With Custom Route 53 Domain (4 Min) | AWS | Set Alias To S3 Endpoint
How to Use the WHOIS Command to Lookup Ip and Domain Name Information
AWS Cloud Resume Challenge - Setting up S3 bucket and CloudFront | Part 2
How Does Web Hosting Work? Understanding the Ins and Outs
How to host your Webflow/Framer site with CMS for FREE on Cloudflare. No code required
MUST USE Websites & Tools for Web Developers
5.0 / 5 (0 votes)