How to Put a Website Online: Template, Coding, Domain, Hosting, and DNS
hi i'm beau carnes with free code camp
in this course i'm going to show you how
to get your own website onto the
internet
i'll show you how to create a website
get a custom domain name
which is the url people type in to get
to your website
host your website which is where the
files for your website are stored
configure dns settings and set up a
custom email address
if you are just interested in one of
these topics check the description of
this video
for links to the individual sections
let's get started
Creating a website
you may already have files for your
website that you want to put onto the
internet
in that case skip to this time shown on
the screen right now
or just go to the next section in the
progress bar of this video
in this section i'm going to go over how
to create a website
i assume you already know what your
website is going to be about
two common ways to create a website are
to create it using
html css and javascript or you can use a
content management system
like wordpress wordpress allows you to
create a website without knowing how to
code
the simplest way to create a wordpress
website is to get your hosting first
so in the section of this video about
hosting i'll show you how to install
wordpress
right now though i'll show you how to
create a site using html css and
javascript
for this example i'm going to create a
landing page
for different programming courses i've
developed
this will be a simple site based on a
template just to get you started
if you want to learn how to make more
complex sites check out the playlist
linked to in the description
html css and javascript are all just
text stored in text files
html describes the structure of your
website and css describes the style and
how it looks
javascript adds additional interactivity
and functionality
while you can create these files in any
text editor it's common to use a
source code editor such as visual studio
code
this makes it easier to write html and
css and even javascript or other
programming languages
so first let's download visual studio
code
so if we just go to the main website and
download from mac
or whatever operating system you have i
won't show the whole installation
process
because well i already have installed
and it's different for each operating
system
so let's go right over to visual studio
code
okay we have visual studio code and now
we can create the website
so this is what it looks like when you
first start up visual studio code
we could just click new file and create
the new html file in the new css file
but we're going to do something a little
different if you're just starting out it
can sometimes be helpful to start with a
website
template this just means starter code
for your website
that you can customize for your needs
this can be an excellent way to learn
you can see html and css that someone
else has created
and then you can start to understand how
it works together
there are a bunch of sites offering
templates one of them is templated.co
there are a bunch of templates to choose
from i'm going to choose this one called
full motion because it includes a
responsive video gallery
and my page is supposed to help people
watch video courses i've
created so i'll just click download here
but you can download the other ones if
one of the other ones meets your needs a
little better
so after it's downloaded and unzipped i
can just go to
visual studio code click open folder and
then i'll
navigate to the folder and click open
and now we can see everything on the
side here
this is the file browser i can just
close this welcome
screen i don't need that anymore i'm
going to open up the index.html
now when you're creating a website the
main file is almost always called
index.html
so that's the thing that you're going to
want to edit we're going to be modifying
the html file in css file
you don't need to know everything to
modify a template but you should know
the basics of how html and css
are structured i'm just going to give
you a very brief overview
if you want to learn more about html and
css check the links in the description
so you can see this is an example of a
paragraph
tag that's what the p stands for
paragraph
and every html tag is going to have an
opening tag which is this section right
here
and a closing tag which is this final
section right here
and in between the tags in between the
the opening paragraph
tag and the closing paragraph tag is
where
text would normally be the text in here
would be
the paragraph and this opening tag
and then closing tag designates the
beginning of the paragraph
and the ending of the paragraph and you
can see in the opening
tag there's an id this id is an
attribute
and the attribute of id is set to
my id now the id is often used to
identify
a certain tag or a certain section of
your website
for use in the css and the javascript
so inside an opening tag there can be
all sorts of different attributes
and you'll see some other examples when
i go to the other code
so let's look at this diagram this shows
how
an html page is structured you can see
there's branching sections almost like a
tree it's a tree structure
so we have our overall document and then
we have our root element which is the
html element
so you'll have an htm an opening html
tag and a closing html tag
and then everything will be inside that
tag so you'll have a head section a
opening head tag and a closing head tag
and inside the head section there'll be
a title
with some text and then there'll be a
body section with a
opening body tag and a closing body tag
and then within the body there's going
to be the different components that are
going to
make up the body of the website
everything
nests inside other elements you'll see
more of what i mean once we get to the
code
also you're going to need to know about
css so css
is used to style the html so in this
case we have the body selector
so this first board is the selector and
this is going to style
everything within the body html tag
and in this case it's going to set the
color to this
hex value so css
is always going to have a selector the
most common things to select are
tags like a body tag or an id or a class
you can add a specific class any html
tag and then you can style in the html
section that has that class
i'll show you some examples when we get
to the actual code so let's go to the
code
so every html file is going to start
with this this
is just saying that this is an html file
so here you can see the html tag and at
the very end we have the closing
html tag and you can see there's a line
here that connects in
everything is indented so within this
html tag
there is a head section you can see the
opening head tag and the closing head
tag
and within the head section we have a
title section and we have these
metas and then we have a link here
so you can see that within the heading
of the page
the main thing we have is the title
right now it's called full motion
so let's change that i'm going to change
that to
courses from
beau carnes so this title will show up
at the very top of the browser window
often in the tabs if you have it open up
to a specific tab
that's where this title will show up so
we have these meta tags
which i'm just going to skip over for
now because they're not super important
to what i'm talking about now
but this next line is important this is
how the html file
is linked to the css file so you can see
that
this is href the reference of the css
file
is this is this thing here assets css
slash main.css
so let's go over to this in the file
browser under assets
css and then main.css
that's this file right here so this line
is connecting our html file to the css
file
now let's look at this next section this
body section
oh yeah you can see some of this is
grayed out that's because this is a
comment
so comments can be used to put something
in your html file that's not going to
appear on your final page
or it's not going to be read by the
browser so this section this whole next
section
you can see the body tag starts here and
goes all the way down to here
the rest of the page is basically the
body or what's going to be shown in the
browser when someone goes to your
website
it starts with this top section and this
top section has an id of banner
and this it says data dash video equals
images
banner these things can be both
referenced from the css
and from the javascript and it's going
to use javascript to
play a video in the top banner actually
let's look at that right now let's go
over to the website
this is what the website looks like you
can see it has the title the page here
this is not the same title that we just
changed the name of we're going to
change that in a second
you can see this video plays in the
background and if you scroll down
well you don't even need to scroll down
if you click this button it scrolls down
automatically
and you can see these different boxes
here and if we click watch
it will open up and it will have a
youtube video
so we're going to update this so it goes
to my youtube videos
if we just scroll down we can see the
rest of what the page started out as
if you look at this text it's not
english this is latin
it's common to use latin text or lorem
ipsum text
as placeholder text on
templates and any websites where you
don't know what the text is going to be
yet
but we'll be updating that as we update
the template so let's go back over here
one very common tag in html is a div tag
and that just means a divider or some
special section
that you're going to style in a specific
way with the css
you can see this has a class of inner
and the css is going to be used to style
anything that has a class of inner in a
special way so let's go into this header
section right here
i'm going to change this to courses
from beau carnes and this time
if i save this and i go back to the page
i'm going to refresh and i'll go to the
top and you can see
courses from beau carnes so this is what
i'm talking about
you can change a template and it's a lot
easier than just writing everything from
scratch
let's go back to our code you can see
this is an
h1 tag that means heading one or the top
heading
there's also h2 h3 as4 there's just
different levels of heading
and here's a paragraph tag i'll close
this so we can see more of it here
and so this is the opening paragraph tag
if we go over
we can see the closing paragraph tag
and i'm going to update this whole
paragraph between the opening tag and
the ending tag
with an all new paragraph i'm just going
to paste it in
and so now it refers to what this new
page is going to be about
so i'll just save that and go back to
the page and refresh
and you can see it now has the new
paragraph here
okay let's go back to the code we can
change this learn more or we can change
it to something else
now you can see this is an a tag or an
anchor tag
that's a link now you can use it to link
to another page
or you can link to another part of the
same page
so here you could add a link to another
page like i could put free codecamp.org
here
and then when you clicked on it it would
open up freecodcamp.org
but since it says this half shine or
pound sign
main it's going to make it so it goes
directly to the main
section here which is right here it's
going to a
dividing section or a div that has an id
of main so that's another way the ids
are used
so you can actually go to specific
sections on your page
so when you click learn more it's going
to scroll down
to this section here you can see that we
have this
div which divides this section of the
page that's the main section that we
scroll to and then we have another class
called enter so this is probably
something that's going to be
used in the css file to style a specific
section of the page
and then we have another section called
thumbnails
so one thing that's kind of nice with
visual studio code and with any code
editor
is these lines that come under a tag
this will show where the ending tag is
so this is the beginning tag
if you click on it you can see this line
is a little lighter so if we go all the
way down
it goes to here so here's the end of the
tag here
and so that's going to show this whole
section
this whole um this whole thumbnail
section so the thumbnail section starts
here
and it goes to here where the closing
div tag is
so in this thumbnail section you can see
there's a bunch of box sections
so this is one whole box section right
here
but there's another box section here and
then there's another box section
here so there's a box for each thumbnail
that's right in the page here so here
this is what we're going to change
one thing you can see here is that it's
getting it's linking to
a youtube video right here so the a
href this is the anchor tag or what
you're linking to
and the link is surrounding
an image so when it says img
that's an image src is source and the
source
is this section right here the images
slash pic01.jpg
so if we actually go over to here in the
file browser we should be able to find
that
oh here it is the pic001 so you can see
that
that's the same thing that you see right
here so
that's what we're going to have to
recreate with my own videos
you can also change the title so we see
the h3
now h1 is a main heading h3
is like a level three heading so you can
level one heading level two heading
level three heading and we have a
paragraph here so
let's update this with one of my videos
so i'm just gonna go and grab it from
youtube here
so just go to youtube.com
and i'll actually go right to
youtube.com
freecodecamp i'm just going to get this
javascript one this is
the my most popular video that i've
created so i'll do copy link address
and i can go back over here and we'll
paste this in here so now
oh i just have to delete the time at the
end
and now we are going to get the
image here now i could find the image
and then put it right into this
directory here
and then then link to that image but i'm
going to try a different method
there's actually a url a direct url to
each youtube thumbnail so
i can put a actual file name here or i
can put a url
so i'm going to put a ur url here now it
says there's actually
a section to update with the video id so
i just have to get the video id from
right here
i'm going to copy it and then i'm going
to go over here
and i will paste it now if i save this
and then i go back to my website now i'm
gonna refresh it
okay so now we have the
javascript in three hours here and if i
click here
hmm i was expecting the video to pop up
so let's go back and troubleshoot
because that's just a little
black square
okay i noticed that these ones have the
short url and then i use the long url
here so i'm just going to copy
this little section and then put into
here so we're using the short
youtube url instead the long url so let
me save that
and i'm going to refresh
okay and now the youtube video pops up
and if i play
yep it works so now
i'm going to go back here and i have to
update the rest of the stuff so this url
i'm going to update for the button
so this first link is just the image
and now there's the button here so we
need the link for the button
and i can update the title
javascript
full javascript
course and then here
we can update this text
learn how to program in javascript
okay if i save that go back over
looks good okay now i'm going to do the
same thing
for some of these other ones
okay i just finished updating all these
other
boxes with other videos i've created
here's the mernstep course i've got data
structures and algorithms in javascript
css full course basically i just went
through and
updated the url here and then copied and
used the same url here
and then over here i just uploaded
updated the image link
and then i just added this heading
and the paragraph here so that's one
great thing about using a
template is that it just makes things go
a lot quicker
instead of writing everything from
scratch you can just update things
to meet your needs so if we just go over
to the page
you can see now it says courses from
beau carnes
always create many popular programming
courses now you can access this top
courses all in one place
click this goes down and then if you
click on any of these courses
let's say the mern stack one click watch
you can watch it right in the browser
right here
or you can just click this picture here
to open the same thing
so that's pretty cool let's see if
there's anything else you want to change
so your stuff down here and i'll go back
over to the
code so we have the
footer here so that's what you see right
here this whole section
is the footer section
so not only is there a tag called footer
and then we have the closing tag down
here
we also have the id of footer so
a lot of things in html just dividing up
things into sections so we have the
footer section
and then a div can basically be any
section so what we're dividing up
into this intersection which we can
style with the css so when you have a
template you can either update the text
to be what you want
or if you don't want that section you
just can delete it
i'm just going to delete these two
sections so if i go over here and
refresh
now it's just going to have the social
media links at the end
again i don't want all of the social
media links
you can see the social media links are
in a
list so ul means unordered list
and it has the class of icons
and so we have four list elements li the
list elements in the list you can see
there's the opening tag and then at the
end there's going to be the closing tag
here
and same with the ul and the closing ul
list and you see these are just a link
that you click on
and you can see the class of the
fa twitter f8s facebook fa
instagram this class here is
how the is where the image is coming
from this is something
fa stands for font awesome and it's
something that you can
put into your website so you can use
different classes to make
a specific image pop up there and i'll
show you when i go to talk about the css
file
how this is how this works how we get
awesome
into our website so it works so i'm
going
i only want to have the twitter and the
email so i'm going to delete
these two lines the facebook and the
instagram one
and then i have to make these links work
right now
see the href this is where the url that
we're linking to
and if it's just this pound sign here
that means it's just a it links to
itself
so when you click the link it does
nothing but i want it to do something
so i'm just going to put hd best colon
slash
twitter.com
and then i'll go into this one and do
a mailto bow
at free code camp.org
so you can either put a full url to go
to or
if you put the word mail to colon and
you put an email address
it will open up if you click that link
it will open up sending an
email to that person so let's save it
and go back over to the page
and refresh so if i click the twitter
icon
yup it opens up my twitter and then if i
click the
mail icon it will open up sending a new
to me okay let's make some more changes
by updating the css file
but first i'll talk about these scripts
so most of these are common javascript
libraries
which is just javascript code that
someone else wrote that you can use on
your page to add extra functionality
so that we have jquery
jquery.scrollingjquery.poptrox
and that's going to add different
functionality on the page and then
the main the code the custom code is
toward the end we have
the util.js and the main.js
and we can look at that right in the
page here
so here's our utility one
and here's our main one and we're not
going to talk a lot
about the javascript in this video
but basically the javascript helps make
it work where
when you click this it scrolls down like
that that's javascript
when you click this it pops up it fades
in the background
and pops up that window that's
javascript doing that
so javascript can just add some extra
functionality to your page and that's
what's happening here
okay let's go to the css file the
main.css file
so you can import just like
how in your html file you can import
cs the css you're going to use in your
html
you can import other css to use
in your css file so we can see import
font awesome.min.css now it's getting
that
right from you can see right here in our
assets
awesome.min.css so that's what this is
and it's importing
that css so we can use that also and
then it's also going to import
and then it's this url so here it's
importing a file but here it's actually
just
importing a url so this url that's being
imported
you can see it says fonts it says google
this is google fonts
google has made available a bunch of
different
fonts that people can easily use on
their websites
by importing the font through google
fonts
and you can see it's the font source
stands pro
at the weight 300 400 and then we have
this
passion one font at the weight 400.
now i want to show you something here
where it says
awesome.min.css if you looked when it
opened the
awesome file this css file looks very
different
than the other main.css file we were
looking at because this has been
minimized
basically it goes through a automated
process
when you minimize a file goes through an
automated process to make it as small as
possible
and so it takes up less space when
someone's trying to download that file
it's not as easy to read but it's easier
for users to download that file and it
still works just like any other css file
so if we go if we look at this
basic css we're just going to like
briefly cover this
but it starts with a reset so this is
something that people
often will include in their css to make
sure
all different browsers look kind of
similar
so you know there's a lot of different
browsers that people can be using
to access your website there's certain
uh css properties and code you can put
in
that's going to make all browsers look
very similar
and it's also going to just make things
look a little nicer
than the default css so that's what we
have in this reset
so it's just going to always apply this
reset
and then we're going to the basic
this is the stuff that's being added
specifically for this
website so now we're to the other
sections
and these other sections are stuff
that's specifically for this website to
to make it look special to make it look
how we want to look
so you can see the basic um
way that css works is that well let's
look at let's look at this
as an example so this is the selector
this is the property
in this the value so we're selecting the
body tag
we're changing the color to this white
color
so you can see rgba that's just one way
to specify a
white that's 0.75 opacity
and the font family is going to be
source sans pro
which remember was imported from google
fonts and if that's not available it
will just use a sans serif font
the font size is going to be 14 points
font weighs to be 300 points and the
line height is 1.65
now with css how it works is whatever is
the most specific is what style applies
to the element
so for instance we see the body here if
we go over
to the html we can see the body is here
so almost everything is inside this body
but if we styled say the
inner class and we had styles that
specifically
reference this inner class that's going
to override
anything that applies to the body so
a lot of these styles here are never
going to be
used if there's something more specific
so let's scroll down to some of the
other things that are being styled
okay let's look at this we have h1
8 h2h3h4h5h6 these are the headings so
the color this is another white color
there's a lot of ways to
specify the color and this is one of
them font weight
line height and the margin so if we
change this color to something different
we'll probably be able to see it
right on our page so instead of putting
a hex value or something i'm just going
to type in the word green
that's another way you can specify
colors in css now go right over here
if i refresh we should see something
turn to green
and you can see these words have not now
all turned to green
so let's go back and make this white
again
so another thing i want to show you is
this whole section right here
where it says media and screen max width
1680 pixels
median screen max with 1280 pixels
and then you see 980 pixels 736
pixels 480 pixels this is how to make
your web page responsive so
the it's so this css is going to specify
a different style depending
on how wide the screen is
okay to see how these media queries work
let's look at this other code
this is for the thumbnails and the box
so in the css we're selecting the
thumbnails class
and then we're selecting the box class
that's inside
the thumbnails class so if we go back
over here
we have the thumbnails class classical
thumbnails
and then we have the box class that's
inside
the thumbnails class so this is going to
impact everything that's inside the box
class
which is this code right here
so this code is going to change and you
can see it's going to change depending
on the width of the screen
it's going to either be the width of 30
percent
45 percent or 100 percent
so if we go back over to our page and
then if i
change the size you can see
these boxes that show the thumbnails
they're changing depending on how wide
my
browser is so if it's really narrow it
just shows one the column then it goes
up to two
then it goes up to three and that's all
from these
media queries they're changing them this
is changing the width depending on the
size of the screen
okay well let's make this bigger again
and let's look at the things we want to
change so when you're changing something
based on
a template you want to just try to find
something you want to change and then
try to figure out how to change it
so i want to change this dark color
around here
i want this to be a different color so i
have to figure out which css is is
selecting this dark element around here
so one way you can do it is just through
trial and error
trying to figure out what you need to
change to change this background color
so if i go back to my code i'm going to
just
search i do command f or control f and
i'm going to
search for background and
i can see that this looks very similar
to that color
so i'm going to try changing this to
another one so with this i can type in
the name of a color or a hex code
or i can just use this color pick here
here that's in visual studio code
so i want to make more of a greener
color
and now i'm going to save this i'll go
back to my page i'll refresh
and now it worked so i chose the right
thing
you know i think i want that maybe to be
a little more of a dark green
well that's easy i can go back over here
and then i can
make this a little darker and
save it and then i refresh
okay oh that looks nice now since this
is green
i kind of want this text or maybe some
green to appear right up here somewhere
or how about this maybe this circle
let's see if i can get this circle to be
green
so one way to try to figure out what you
need to change
is to right click on something and then
go to inspect
element so this is bringing up the
element in the html
just in the inspector on the browser and
so it looks like this could be the
the right one and i can actually test it
by changing the css
right in here so i'm actually going to
try changing this
right here to instead of white let's see
if i change the screen if that will
change anything and did so you can see
right on the page as i change it
in the inspector it changes it
on here so i so now i know that i'm
looking for
something that's styling this banner
more see how it says banner more this is
the
selector that i'm looking for in my css
so
if i go back over to here and i just had
just copied it over in my browser
i'm going to find and then paste banner
more
so now i can change this border if i
want to change that circle
well how about this i'm going to make
this bigger and
i'm going to change this
to a green color so we'll kind of match
the other green that i have going
now since this is just an example i'm
not going to
be like super exact but i could try to
make it the exact same green
or i could look at a color wheel to try
to figure out what's the complementary
color to the
the different colors but for now i'll
just choose that green
and i'll go back over if i refresh
now circle well you know maybe i will
try to
get the exact green because i wonder if
it would match how that would look
so let me go back over here i'm going to
go back up to my body
where i did my initial green
here we go and now i will do my search
again to come back down to here
and i'm going to just add this new color
and then go back over if i refresh
okay nice one thing is see when you
hover over it
it gets white i want it to be a maybe a
lighter green
so let me go back over here and let me
try to find
the hover section so here you can see um
well let me so where it says banner more
and we change it to
the border to be green well here's
banner
more hover that's what the style is
going to be
when someone's hovering their mouse over
it now like
nor we'll just keep all the same style
as the original one
but it will add these changes so
i'm gonna change this border well i want
i still want to be a two pixel when
you're hovering over
and now i want to change the color i'm
going to change this to a
lighter green and maybe add some more
blue into it
and let's see what that looks like i'll
save that go back
over
and that didn't seem to well i guess it
did
change it oh yeah now it gets lighter
green that's kind of nice
yeah i like that so now when i click
this
it goes down
so we can do the same thing by changing
different fonts different colors just
trying to figure out
which css needs to change to change
something
okay the final thing i want to do is
change the text
color here so i'm going to go to inspect
element and we can see
oh it's color white banner h1
now let's just check make sure this is
the right one so if i change this if i
just type in
blue yeah it changes to blue
so let's change this to a green color
i'm going to
just copy this here the the css selector
and then i'll just search for the css
selector here
and here it is so now instead of being
white
i'm going to change this to a green
color again but this is going to be
a lighter green than before so let's see
what that looks like
okay you know what i want to be the
exact color that this circle
becomes when you hover over it to get
that color i can either go back into the
css file or i can just
inspect this element again and
let's see i can turn on the hover state
by clicking the hover here
now i can get the color from right here
and it's just going to copy this color
here
and i'll go back over here
okay so now i'm just going to paste in
the color here
and i'll save that i'll go back over
i'll and i'll refresh
okay that's going to be it for now i
know this design could be a little
better
but i'm going to count this good for now
because i want to get on to the next
part of this course
which is purchasing a domain name so let
me make sure everything's saved
yep all my files are saved because i'm
going to copy these files over
actually let me quickly delete these
because i'm not going to need any of
these pictures
because i'm not using those same
pictures but we'll i'll just keep
everything
else here and we're going to be copying
these files over to our hosting provider
once we get that
but right now we're going to get a
domain name
so now you have the files for your
website or you're going to install
wordpress
Getting a custom URL
now i'll show you how to get a custom
domain
this is what people type into the
address bar on their web browser
to access your website some examples are
youtube.com
freecodcamp.org or ces.tech
these are all custom domains the end of
the website name
such as dot com dot org or dot net is
called the top level domain
or sometimes people just call it the
domain ending
while dot com is by far the most popular
domain
ending there are actually hundreds of
other endings
take a look at all of these on the
screen right now
one ending that is increasingly popular
for people in the tech industry
is dot tech and this video was made
possible through a grant by the company
who runs the dot tech domain
when you are deciding what you want your
domain to be you also have to decide
what domain ending you want here are a
few reasons you may want to consider
less common domain ending
more availability the less common
endings have not been around as long
so there are way more of them still
available
it's very hard to find a dot-com name
that has not already been taken
unique these newer domain endings may
help you stand out
as being unique which can also help
create more of a lasting impression
seo using a new domain ending won't hurt
your search presence or seo
it's worth noting that in the eyes of
google and other search engines
all tlds or these domain endings
are equal so if you get a highly
searched for name in your url
it can be helpful for seo there are a
bunch of places where you can buy domain
name
and they all work almost exactly the
same here are some options
godaddy.com domains.google
namecheap.com get.tech
i'm going to demonstrate how to purchase
a domain name on git dot tech
since we're getting a dot tech domain
but just know the process is similar
no matter where you buy your domain name
here it makes it really easy
you just type in the domain you want so
i'm going to try
bow.tech
okay bodetech is unavailable now most
likely the first domain you try is going
to be unavailable
so it gives some other examples but the
other examples are almost never what
you're looking for
so it's good to have the other options
in mind
since this website is all about teaching
tech i'm going to try
both teachers.tech okay
it's available and i can buy for one
year so i'll choose that
i'm not going to show you the whole
purchase process but i do want to point
out that this privacy protection
it says recommended and i would also
recommend this
if you don't have privacy protection on
your domain name
then the records of your name and
address will be out there for anybody to
see
your name your address your email
address so if you don't get privacy
protection
you're going to start getting spam
because there's companies out there that
are constantly checking for all new
domains registered
to see if there's any real addresses or
email addresses
and then they're gonna start sending you
stuff to advertise because they think
you'll be interested in buying things
for your new domain
so definitely get privacy protection
okay i'm just gonna place this order
now we're finished buying the domain and
to edit the domain
we'll just go into manage orders and
then find the order that i did for bo
teaches.tech
and this is our control panel i'll get
that a little bigger
and then we can update things in this
control panel to make our website work
but before we can update anything in
this control panel
Getting web hosting
we have to get hosting
so now that you have your domain name
you have to store your file somewhere
when you go to any website on the
internet your browser has to download
the files for that website
from a physical location somewhere else
in the world
a company that stores website files so
that they are always available when
someone goes to the url
is called a hosting provider there are
many hosting providers out there that
will host
files for your website some places will
even host your website for free
in this section i'll mainly be talking
about hosting a static website
or a wordpress site if you have a
dynamic web application that has to run
server-side code before sending web
pages to the client
then the setup will be a little more
complicated than what i described here
first i'll talk about how to get things
set up on most paid hosting providers
and then i'll show you how you can host
your website for free
on github pages here are some of the
common hosting providers for web pages
bluehost hostgator hostinger
godaddy dreamhost almost all hosting
providers
have something in common which is this
users manage the hosting service through
a web application called
cpanel or something very similar to
cpanel
so if you learn the basics of cpanel
then it will be simple to use any
hosting provider
so all the hosting providers are very
similar so matter which one you sign up
for
the steps should be basically the same
first of all
i would recommend just picking the
cheapest possible hosting plan
whatever hosting provider you use just
pick the cheapest plan
you can always upgrade later if you need
to often the cheapest plan will work
and you can always upgrade later if you
somehow need more
space or need more bandwidth make sure
you choose that you already own this
domain
because you we've already purchased the
domain
and the rest of this is pretty
straightforward
okay i got my hosting and now i'm just
going to
launch the cpanel the exact way to get
into cpanel
could be different depending on your
hosting provider
but it should all be pretty similar and
again your hosting provider may not have
cpanel
but it will definitely have something
similar there's no single
look for the cpanel dashboard because
there are many themes and styles that
host can use
but the functionality is similar so one
of the things you're most likely going
to be using
is the file manager the two main ways of
getting
files into your hosting provider is the
file manager
or through an ftp account
so let's look at the file manager so the
files we see here
are the files that the hosting provider
just puts there
by default we're going to go to the
public
html section and this is where we're
going to add the files
so that's one thing you're going to have
to look into when you
are trying to upload your files to your
hosting provider
you're going to have to make sure you
upload them to the right directory
it may not be the root directory it's
probably going to be something like this
the public html directory
and so those are the files that will
appear when people go to your website
i'm going to delete everything in here
because i don't actually need anything
in this directory
now i'll go to upload and i cannot
upload
directories but there is a trick to be
able to upload everything at once
which is to create a zip file so let me
select all my files
and then i'll just go to compress
and it could be different on windows but
it's gonna be pretty similar how
you're gonna be able to find something
to make them into a zip file so i'm just
going to upload the zip file
so this includes all the assets and all
the images and even the background video
so it could take a little bit to upload
okay i'm going to go back here
and i'm going to extract
and this is just an extra directory that
i can delete
okay i have my website uploaded to the
hosting provider
we still have to connect the hosting
provider to the domain name
and we'll do that in a little bit for
now i'm just going to close this
and let's look at some of the other
things you can do with cpanel
so we could have uploaded the files
through ftp
here we can create an ftp account if you
have an ftp
client like filezilla you can ftp into
this
and you can easily upload files another
thing we can do is create a subdomain
let's say we create one called blog so
now it's going to be blog.teachers.tech
the way i get files into that subdomain
is it should show up
right in my file manager so if i go back
into the file manager
now you can see there's a new folder
it's called blog.bowteaches.tech
anything i put into this folder will now
appear at the subdomain
once i connect my hosting to the domain
name
so the two other things i want to show
you are the email accounts
and the wordpress installer there are a
bunch of
other things on here that you can mess
around and continue learning
but i'm just going to cover these other
two for now
Creating a custom email address
so right here you can create an email
account we can also create an email
account
on the dot tech admin page which i'll
show you that in a second
again later let's say we want bo at
bowteaches.tech
and we create a password and then create
account
okay i can set up the mail client
now this is just going to give you
different ways to set up the client
depending on which method you want to
use i'm not going to go through every
one
but depending on what you want to do you
just set it up differently
okay the final thing is the wordpress
installer so i was saying it's very
simple to install wordpress once you
have your hosting
just click on wordpress installer and
then click on
install now and then that's pretty much
it
once you install wordpress you can now
use wordpress right on your site and you
can watch any wordpress tutorial to
learn how to use wordpress
i'm not going to install wordpress right
now because i'm going to use the other
files that i already
uploaded onto there so what i'm going to
do now is just go back to the dashboard
and now i'm going to connect the hosting
provider to the domain name
and to do that we're going to scroll
down
until you see the name servers
now no matter what company you use to
create your domain name
and no matter what hosting provider you
use
you're almost always going to connect
these two together with these name
servers so i'm going to copy this name
server
and then go back over to the control
panel
for the dot tech domain and then you can
see
there's a name servers manage name
servers that use this domain name
so i'll click that and then i'm just
going to paste in the first
name server and then i'll get the second
name server
and then i'll paste in the second name
server
we'll put it here and you don't really
need to have every name server filled in
so i'm just going to go through and
delete these other two and then
update name servers
now everything really should be set up
for my website to work
sometimes it can take up to 24 hours
for everything to update so you may have
to
wait up to 24 hours before you can
actually see your website live
okay i waited some time and the
name servers have been able to propagate
throughout the internet
and now the website works so i go to
bowteachers.tech
and it loads so you can see this
if i click here it should open up yep
it opens up a video to watch here
okay everything's working i can now
access my website
at a custom domain
Hosting for free with GitHub Pages
once you know how it's actually pretty
simple to set up a website to host for
free
at github pages the first step is to
create a github account and log
into your account and then
you just need to create a new repository
the name of the repository is very
important
so for the name of the repository you
have to type in your
username your github account name and
then
you just type in github.io
bo fcc.github.io this is going to create
a repository
that will be a special type of
repository that will be able to host our
website
on github pages okay now i'm just going
to create a repository
okay now that we create the repository
we can you can either
upload your files using the command line
or you can do it right through the web
interface
so i'll just click upload an existing
file
and i'm just going to drag and drop the
files so let me grab these files here
and just bring it over here now it's
just going to upload all the files for
our website
okay all the files are uploaded
and i'll just do commit changes after
the files are done processing
i can go to this url just copy it right
here
and i'll open up a new tab i'll paste in
the url
and that did not work
okay it takes a few minutes for the
updates to show up so if we just
wait a little bit and then try
refreshing it should work
it can take up to 20 minutes for the
changes you create
on github to show up on the github pages
but
it's now loading you can see in the
address bar bofcc.github
and we can see our page now we just need
to make this
show up at bowteachers.tech
before i make this show up at our custom
url
let me show you how easy it is to make
changes to the page
on github so you can always change it on
your local computer
and then upload it again or use the
github interface
or you can change it right on this
github interface you can change the html
right on here
so in order to edit this i'm going to
click the pencil icon
for edit this file and then
i'm just going to update the title here
instead of courses from beau carnes i'm
going to
call this programming
courses from beau carnes
and then i can just scroll down to the
bottom
and you can put a commit message you can
put a commit message but i'll just leave
this as the default for now
and just click commit changes now again
it's going to take
possibly up to 15 minutes to show up on
here but while we're waiting
i will show you how to make this work
with your custom url
and then if we do this right we'll be
able to know that we're not getting it
from our hosting provider
because this will change so here's bo
teaches.tech currently
and you can see it says courses from
beau carnes
and this is coming right from our
hosting provider that we set up before
but now we're switching it to use github
pages for the hosting provider
so after we update this this will say
programming courses from beau carnes
to reflect the change that was just made
on github so the first step
is to go back into github and i'm going
to click on
settings if i scroll
all the way toward the bottom of the
settings
i can put in a custom domain custom
domains allow you to serve your site
from a domain other than
both fcc.github.io so i'll put
bo teaches dot tech
and then i'll save it so now that we
updated the github settings
Updating DNS Settings
i'm gonna have to go back to our domain
dashboard
so this is at the tech control panel or
dashboard
and to make this work with github pages
i'm going to have to go to dns
management no matter what company you
purchase your domain from
there's going to be some way to update
the dns settings of your domain
so i'm going to manage dns here
and i'm going to update some things the
first thing i'm going to update is the
cname
record so the cname is like an alias
or it's a way to forward to a different
domain
so i'm going to add a cname record
and for the host name i'll put www so
when you go to www.bowties.tech
we're going to forward to
bofcc.github.io
and then i'll just add this record so so
now www.bow.teaches.tech will go there
i also want to set it up so just bo
teaches.tech
without the www will also go to the
github pages page
so to make that work i'm going to add an
a record
so i will put nothing here and then for
this destination address
i'm going to put an ip address that
comes right from github
so it's going to be 185.199.108.15
three and then i can click add record
okay that should be all set so i'm gonna
close this for now
so before i updated the name servers to
work with
the hosting provider but now that i'm
using github pages
and i updated the dns settings i don't
need the name servers i used previously
so to make these
new dns settings work i'm going to have
to
default the name servers back to what
they were it says right here required to
use
our dns management service with your
domain name
so it says we need i need to go back to
the default name servers
so i'm going to copy this i'll go up
to the top here
and then i'm going to change this to
venus because that was the second one
and as long as you have two that should
work so i'm going to update the name
servers
and now anytime you update the name
servers you could have to wait up to 24
hours
so i'm going to have to wait and then
i'll i will check the website to see if
it
updates to use the page github pages
instead of the hosting provider we had
before
so it's been over 24 hours and and check
this out
i'm at bo teaches.tech and it says
programming courses from beau
carnes so i'm now loading the page
right from github pages and now whenever
i want to update the page
i just update the files on the github
repo
and then within 15 minutes or so the
changes will reflect right on the actual
domain
right on the page both teachers.tech so
now you know how to set up a website
with github pages
Conclusion
so now you've learned how to create a
simple website get a custom domain
and host the website through various
methods
thanks for watching
Comments
Post a Comment