In this lesson, we're going to learn how to put an H T
M L website onto the internet so that other people can view our website. We're also going to learn how to set
up a domain name for our website, like my website.com. To follow along. You just need to know the basics of HTML
and css. If you need help with that, I have a full course in the description.
With that said, let's get started. Usually when we create a website, we create some HTML and
CSS files like this. Now, one way to view this website is to
open the HTML file in our browser. The problem with this is that other people
can't view this website because it's only on our computer. In order for
other people to view this website, we need to put it on the
internet. So how do we do that? There's actually many ways to
put a website on the internet, but the best way for beginners is to
use a service called GitHub pages. GitHub pages is a free service that we
can use to put websites on the internet. It's really easy to use and it helps us
follow best practices when setting up our website. So what we'll do is we're first going to
use GI Up pages to put a website on the internet, and then we'll learn in more
detail about how this process works. So let's go to our computer and we're
going to learn how to use GI Up pages together. And also don't
worry about taking notes. I created a reference of everything that
we learned in this video that you can find in the description. We're going to start off on our computer
and we're going to open our web browser and then we're going to go to github.com. So to use GitHub pages, we're
going to need a GitHub account. If you already have one, make
sure you log in. If you don't, you can go through their signup
process and create a new account. And once you created a new account, make
sure you log into your GitHub account. So once we've logged into GitHub, we're going to go to the
top right corner here. We're going to click our icon and
we're going to click your repositories. Now a repository is
basically like a folder, and this is where we're going to upload
our HTML and CSS files for our website. So let's create a new repository.
So we create a new website, And now we're going to fill in the
details for our new repository. So we're going to add a repository name.
Now this name doesn't really matter. It's just for you to identify
which repository this is. So I'm just going to call it super simple website and feel free to call
it something else if you'd like. The other option that we have to check
is we want to make sure our repository is public. Getup Pages is only free
if you have a public repository. If you choose a private repository, you're going to have to pay a fee
to use a service. And finally, we can leave all of these other options
to the default and we can click create repository at the bottom. All right, after we created our repository, the next step is to upload all of our
website's code into this repository. But first, we'll need a
website to practice with. If you have your own website that you
want to use, feel free to use that. Otherwise, I've linked a sample
website in the video description. This is actually the YouTube clone
that we built in the HTML and CSS full course. So if we want to use a sample
website, we can open this link, click this code dropdown
and then click download zip. Now, once that's done, we can unzip it and that will give us
the code that we can practice with. The next step is to upload all of
our code to our GitHub repository. So let's go back to our GitHub repository
and we're going to click this upload and existing file link.
If you don't see this, you can also add slash upload at
the end of the URL at the top here. Now all we have to do is drag and drop
all of the code for our website down here. So if you're using your own
project, make sure to use that for me. I'm going to use the project
that I downloaded earlier. So there's one thing we have to be
careful of here. So if I go back, all of my code is in this folder. Now what I don't want to do is to
drag and drop this folder down here. This will create an unnecessary extra
folder in our GitHub repository. What we actually want to do is to open
this folder and then select all of our code and then drag all
of the code into here. So that'll take a few moments
for all of our code to upload. So once all of our code
has finished uploading, you should be able to see
all of your files down here. So we're going to scroll down to the very
bottom and we're going to click Commit Changes. So now all of our website's code has been
uploaded to GitHub and we're ready to put this on the internet. To do that,
we're going to use GitHub pages. So to access that, we're going to go
to the settings of our repository here, and then we're going to
go down to this pages tab. Now to set up GitHub pages, we're going to go to this dropdown
and we're going to click main. You might see a different word here,
like master. Just pick the option. That's not none. So I'm going to
click main for the second dropdown. I can leave it as a default
and then I can click save. So once I do that, GitHub pages is going to take all of
our code and then publish them onto the internet. Now this process
might take a couple minutes, so we just have to wait for
GitHub to finish doing its thing. So after a few minutes, we should
be able to refresh the page. And now it should say that our
site is published at this url. So that means the website that we had
has now been published to the internet, and now anyone can access it by
going to this URL in their browser. If you don't see this here, you can
also access it using your GitHub username.github.io/your repository name. Now we're going to open
this in our browser. So I have the link here and I'm going
to right click and then open link in new tab. And now if I open that tab, you'll see that we have a
4 0 4 page. So don't worry, this is normal and we'll figure
out how to fix this in just a bit. But we actually want to do is we're
going to go into the URL here and we're going to type an HTML
file that we want to open. So if I go back to my repository
and I look at my code, I have a few HTML files here. The main HTML file for the website
is called YouTube dot html, so I'm going to type that in
and open that in the browser. If you're using your own website, make sure you type in the
HTML file that you're using. So I'll go back to my website here
and then I'm going to type in YouTube dot html and press enter. And that's it. We successfully took a website that we
created with HTML and CSS and put it on the internet. Now we're going to learn a little bit
more about how this process works. So let's go back to our GitHub repository
and we're going to take a look at the HTML code in this project. So I'm going to scroll down here and
I'm going to click YouTube html and I'm going to look at this code here. So in
this code we're loading some CSS files. So here we're loading a file
called Styles slash general css. So if this was on our computer, we would expect there to be a
Styles folder beside this HTML file. And then inside there would
be a general dot CSS file. Now if we go back to our
repository, so if I click up here, you'll also notice that we have a
Styles folder and inside we have a file called General css.
So this means that our GitHub repository works the exact same way as our computer. We load CSS files the same way.
We also load images the same way, and pretty much everything else works
the same as if it's on our computer. So because everything works the same, here is all we have to do to publish
our website onto the internet. First, we write our HTML and CSS code
on our computer as normal, and then when we're done, we just upload that code to a GitHub
repository and GitHub we'll take care of the rest and put that
website on the internet. Now the last thing we're going to cover
in this section is if we go back to our website. So remember that if we
didn't have a file at the end here, so if I remove this HTML
file and press enter, we get a 4 0 4 page. I'm going to explain
what this means and how we can fix it. So when we type a file at the end
of this url, like YouTube dot html, we're telling GitHub pages to
load this YouTube HTML file. However, if we don't specify any file, this actually actually looks
for a file called index html. So this URL is actually a
shortcut for slash index html. And if we go back to our
repository and I click here, you'll notice that we actually
don't have an index html file. So that's why it's showing a 4 0 4
page telling us the file is not found. So to fix this, all we have to do is to add an
index dot html file into our repository. So for this example, I actually want my YouTube dot html
to be the homepage so that if I don't type this in here, it will still load YouTube dot html.
So all we had to do is go back into our repository and
rename YouTube dot html to index html. So I'm going to go in here and
then I'm going to click edit this file, and then up here I'm going to
change the name to Index dot html, and now I'm going to scroll down and press
Commit Changes to save these changes. So again, it's going to take a couple minutes for
GitHub to publish these changes onto the internet. So we just have
to wait for it to finish. After a few moments,
it should be finished. So we're going to go to our website
and we're going to click refresh. And now we should be loading our YouTube
homepage without having to specify YouTube dot html in the url. So in this lesson we learned how to take
a website that we created with HTML and CSS code and then put that on
the internet using GitHub pages. For now. Here are some exercises you can do on
your own to practice using GitHub pages. In this section, we're going to learn how to set
up a domain name for our website, like my website.com. This is going to make it a lot easier
for people to access our website because they can type in the domain name into
the browser instead of that URL that GitHub pages gives us. So there
are two steps to this process. The first step is to get a domain name, and the second step is to link
our domain name to GitHub pages. Let's start with getting
a domain name. Now, if you already have one
that you want to use, feel free to skip to this
time in the video. Otherwise, we're going to learn how to get a new
domain name. To get a new domain name, we need to buy one from a company
called a domain registrar. So these are companies that are
certified to sell domain names. Now, domain names are not free, but they're
also not expensive. For example, a domain ending in.com usually
costs about 10 to $15 a year, and once you register a domain name, that name is now taken so
other people can't register it. That's why we can't take
youtube.com anymore. So now that we understand domain
registrars, which one should we use? The domain registrar that I recommend
the most is a company called Name Cheap. This is actually what I
use for all of my websites. I find that they have the best prices
and their website is the easiest to use, so that's why I recommend
them to go to Name Cheap. You can click this link in the
video description to be transparent. This is my affiliate link. This means if you buy your first
domain name through this link, it won't cost you anything extra, but
name Cheap will give me about two to $3. So this is a great way to support this
channel without any extra cost to you. Thanks so much. So now we're going to go into Name Cheap
and we're going to learn together how to purchase a domain
name to go to name Cheap. You can click this link
in the description. Now once we're on the homepage, we're going to go into this
section called Domains, and we're going to click up here.
And then in this text box here, we can search for a
domain name that we like. So keep in mind that we can't take
a domain name that has already been registered. For example, if I search in here for
youtube.com and I search, obviously youtube.com has already been
registered and it's going to tell me that I can't take this domain. So we're going to have to come up with
something that hasn't been taken before. You want to pick something that's related
to what your website is about. Now, if you're not really
sure what that is yet, one suggestion that I have is to
take your first name, last name.com. This is really useful if you want to have
a personal website when you're looking for jobs, for example. So for me, I'm
going to search for my first name, which is Simon and my last name, bow.com. Now, depending on what your name
is, this may or may not be taken. If it has not been taken, you can go
ahead and add it to your cart. Otherwise, if it has been taken like you see
here, we have a couple options. The first option is to change
the.com to something else. So another popular one is.net,
and if I search for that, you'll see that we can add this to the
cart. Now, if you want to stick with.com, you're going to have to change something
in the front here. So for example, I'm going to add the word dev because
I'm a developer. So once I add that, you can see that Simon
Bow Dev is available, and I'm going to add this to my cart. So take a few moments to come up with a
domain name that you like and then add it to your cart and then we'll continue. So once you pick the
domain name that you like, we can go to our cart up here and
we're going to click view cart, and we can usually leave all
these options as the default. Just make sure that you
have domain privacy enabled. Otherwise you're going to get spammed. So after we checked everything
here and it looks good, we're going to confirm our
order. So at this point, you're going to have to
create a name cheap account. We need this account because later on
we're going to manage our domain name and link it to GitHub pages. So sure you go through their
signup process and create
a name cheap account and then log into your account. So once you've created a name
cheap account and you've logged in, we can go back to our cart here. We're going to click a view
cart and then confirm our order. And then here we're going
to have the checkout page. So just make sure that everything
looks okay and click pay Now to register your new domain. And that's it. We successfully registered our domain
name. Now to view our domain name, we can go back to the homepage here, and we're going to go into our account
and we're going to go into the dashboard. And now if we look inside our dashboard, you should see the new domain
name that we just purchased. So now that we have a domain name,
we're ready to move on to the next step, which is to link our domain
name to our GitHub pages. Now, before we can learn how to do that, we actually need to learn a little bit
about how the internet works When we open our browser and we visit our GitHub pages
website. How exactly does this work? So first of all, on GitHub side,
they're running a web server. A web server is just a piece of
software that we run on our computer. You probably use a web server before
if you use the code editor vs code. The VS code extension live server
basically runs a web server on our own computer, but in this case, GitHub is
running a web server on their computers. So what exactly does a web server do? The main thing is that it can
communicate with a browser. By typing in a URL in the browser, we can
ask the web server for a certain file. For example, if I type in
slash YouTube dot html, the web server will give
us back that HTML file. If I type in slash
styles slash header css, the web server will give us back that
CSS file. And that's pretty much it. Our browser can ask the
web server for files. If we happen to get back an HTML file, it will display the website instead
of giving back the text of the file. However, web servers are just software, which means they need a computer
to run on. So on GitHub side, they have a computer that
runs their web server. This computer that's running
the web server is called a host. If you've heard of a web hosting company, this company basically provides you
with computers to run your web server. Now the next concept we have
to understand is IP addresses. Every device that
connects to the internet, whether it's your computer or your
phone or GitHub's computer is given an IP address. An IP address is basically a phone
number except it's for the internet. So just like how you can contact
someone else using their phone number, your device can contact another
device across the internet using an IP address.
And IP addresses are unique. So an IP address looks something
like this or something like this. This is IP version four,
and this is IP version six. We have six because we're sort of running
out of IP addresses for version four. It's kind of like how we
run out of phone numbers. Now the final piece to this puzzle of
how our browser is able to contact GitHub is that we need to link our domain
name to GitHub's IP address. We can set up a link between a domain
name and an IP address inside our domain registrar or where we
bought our domain name from. After we set this up, we can type
in the domain name into our browser, and now our browser is going to contact
the IP address that is linked to that domain. So basically our computer is going to
be contacting GitHub's host and as well GitHub's web server, and that's how we get our files
from GitHub pages. So basically, in order to make all of this work, we just need to set up this link between
our domain name and GitHub pages IP address. This link is called a D N S record
or a domain name system record. So now we're going to learn together
how to set up a DN S record inside our domain registrar. The first step is to go to our
domain registrar and log in. So I'm using name cheap, but make sure to go to
the domain registrar that
you're using. As a reminder, your domain registrar is a website
where you bought your domain name from. And don't worry if you're
using another domain registrar. The process is very similar and you
should be able to follow along with this video just in case I have
left instructions for other
domain registrars in the description. So on name cheap, I'm going to go up here and click
account, and I'm going to log in. Once we've logged in, we're going to go into the settings
for our domain name for name cheap. We can go to the domain list here and
then scroll down and find the domain name that we want to use,
and then click manage. And finally, we're going to go
to the advanced DNS tab here, and we're going to scroll down and we're
going to look for a table that looks like this. If you're not
using name cheap, don't worry. The process is very similar. You just need to go to the settings for
your domain name and then look for a table that looks like
this. If you need help, you can search in Google
Manage DNS records, and then your domain registrar also
have a link in the description with instructions for other domain registrars. So this table allows us to create DNS
records for our domain name. So as a reminder, we're going to create a DNS record to
link our domain name to an IP address. So first I'm going to
click add new record here. And now we're going to fill in
the values for our DNS record. Don't worry if this
looks different for you. DNS records take the
same four basic values. The first value we're going
to fill out is the type. So DNS records can link different
types of information to a domain. To link an IP address, we're
going to use an A record. Next, we're going to set the
ttl. So TTL stands for to live. This basically says that if
we change our DNS records, how long does it take to
update across the internet? A short TTL means the DNS changes
will be updated very quickly. A long TTLs means that it
will be updated more slowly, long TTLs are a little bit more
efficient. But for this example, we're going to select five minutes. Now, if your domain registrar doesn't
have a dropdown like this, you're going to enter the value 300, which is 300 seconds or five minutes.
And now we have two values remaining. We're going to
start with the first one here. This is called the sub-domain. A sub-domain is basically the part
of a URL in front of a domain name. This is useful if you want
to have multiple websites
under the same base domain name. For example, youtube.com
is used for watching videos, and then studio.youtube.com is a separate
website for managing your channel. In our example, we don't
really want a sub-domain, so we're going to leave this as blank on
name cheap to leave it as blank we have to type at. But for
other domain registrars, you can probably leave it as blank. Now, the last value that we have to give it
is the IP address that we want to link to this domain name. Recall that we want to link our domain
name to the IP address of GitHub pages. So first of all, how do we find
getup pages IP address? To do that, we're going to go to a new tab
and we're going to search for DNS lookup, and then we're going to scroll
down and go to this website. So this tool allows us to search for a
domain name and see which IP addresses are currently linked to it. So over here we're going to type
in our GitHub username. So for me, that's super simple dev dash tester one, and then we're
going to type.github.io. So if you recall, this is the domain that GitHub pages
gives us by default for our website. So now I'm going to click
here for DNS lookup, And it's going to show me the IP
addresses that are associated with GitHub pages. So what we need to do is to take these
IP addresses and create a DNS record for each of them. So let's go
through the first one together. So I'm going to click this IP address, and then I'm going to copy it and I'm going to paste it
in this DNS records table. Just paste it here, and then
I'm going to click it done. And now our first DNS
record has been created. Don't worry if the
other records disappear. Those are just the defaults that name
sheet gives us if we don't have any other records. So finally, we're going to create DNS records for
the other three IP addresses that we see here. So feel free to pause a video and
do it yourself for practice. Otherwise, I'm going to fast forward and
we can move on to the next step. Once we're finished, we should have some D N S A records
that link to the IP addresses of GitHub pages. The last thing we need to do here is to
set up a particular sub-domain called www. Now, technically this
is not actually necessary, and what we have here will still work,
but this is recommended by GitHub pages. There are also some technical reasons
for setting up the www subdomain, but there are two advanced for this video.
So I'll leave a link in the description if you want to read more. To set up the www subdomain, we're
going to go and create a new record. And this time, instead
of selecting an A record, we're going to scroll down
and select the CNAME record. So what is the CNAME record? An A record basically links a domain
name to an IP address while a CNAME record links a domain name
to another domain name. So this makes it a little easier to link
to GitHub pages without having to know their IP addresses. So
for this DNS record, this value is going to be our
sub-domain. So we're going to set up www, and here we're going to type in the
domain name that we want to link to. So we're going to type in
our GitHub username. For me, that's super simple dev tester one, and then github.io.
And finally, for the TTL here, we're still going to pick five minutes
or 300 depending on your domain registrar. And now we
can save these changes and that will finish our setup. So that
is all the DNS records that we need. Now you might be wondering why up here,
we didn't just use a CNAME record. That's because we can't use a CNAME
record with the base domain name. We can only use CNAME records
with a subdomain like www. So don't worry, this is something that you just get used
to as you work with DNS records more. Another thing you might notice is that
we only set up records for the IP version four addresses. It's a good idea to also set up the
IP version six addresses because we're moving towards that in the future.
But for now, it's not mandatory. So I'll leave setting up I P V six as
an exercise. Now that we finish setting up our DNS records, the final step we have to do is to go
back to our GitHub repository and tell getup pages which domain name we want
to use. So let's go to a new tab here, and we're going to go back
to github.com and make sure you log in. And then we're going to click the top
right here and go to your repositories and then open the repository for
our website, which is this one. And then we're going to
go into the settings, and then we're going to go to
the pages tab here. And finally, we're going to scroll down and we're
going to tell GitHub pages which domain name we want to use. So here's where we enter the domain
name that we set up earlier. So for me, it's simon val dev.com. And finally, we click save, and that's it. Our domain name
should now be set up correctly. Keep in mind that depending
on your domain registrar, it could take about 24 to 48 hours
for your DNS records to update. So if it doesn't work, you just have to
be patient and then try it again later. Now, if you see this link
here, you can write click it, and then open link in new tab. Otherwise, you can type your domain name
in the URL at the top here. So now you can see that our domain name
is properly set up for our GitHub pages website. The final thing we had to do
is notice that it says not secure here. So we had to set up
something called https. HTTPS is a security measure that encrypts
all data flowing between our browser and the website. So this prevents an attacker from reading
our data and potentially our passwords to set up hdps and getup pages.
It's really easy. We're going to go back to GitHub pages,
and then we're going to scroll down and we just need to
check this checkbox. Now, there is a process that getup pages has
to do behind the scenes to set this up. So we just need to wait for this process
to finish and then refresh the page. And now this checkbox should
be enabled so we can check it, and that will enable hdps S on our
website. Now let's go to our website. We're going to go to the top here, and at the front we're going to type h p s slash slash and press enter. And now you should see a lock icon
here indicating that HTTPS is enabled. And that's pretty much
it. In this section, we learned how to get a domain
name from a domain registrar, and we learned how to link our domain
name to our getup pages website using DNS records, specifically the A
record and the CNAME record. Here's some exercises to help you
practice working with domain names and DNS records. Thanks for watching. We learned how to take a website that we
created on our computer using HTML and c s s code and put that on the internet. We also learned how to get and set
up a domain name for our website. If you're interested in more lessons, you can check out my HTML and CSS
full course, or if you finish that, you can check out my JavaScript course.
My name is Simon from Super simple.dev. I want to make a tech
career possible for anyone. If you have any questions or comments, please leave them down below and
I'll see you in the next video.
