Transcripts
1. Intro: Welcome to the class where
I teach you on how you can host your website with
GitHub Pages for free, with your .com or
whatever domain. But there's a small catch. You can only host static
websites that are based on HTML, React, Angular, or
similar technologies. However, you can also
make API calls to display whether, stock
market graphs, etc. Essentially, you cannot host dynamic websites that
use database like MySQL or technologies like
PHP, WordPress, Larval, etc. Now, do you need to have Git installed on your system
for this to work? And the short answer is No. You only need your static
website files ready, a domain, which is
totally optional, your website URL
will look like this. If you don't have a
domain your-github-username.github.io, and it will look
like this, if you do. And a GitHub account, that's it. My name is Shatadip Majumder I'm a full-stack developer, productivity teacher and
a former startup founder. I have a lot of other
courses here on Skillshare. Be sure to check them out. And you can also
visit my website, shatadip.com
to find more about me. Now let's jump right
into the course and host our website
on GitHub Pages.
2. Git vs Github: What's the difference
between Git and GitHub? Well Git is just a software that you can download on your computer to track
changes in your code, if you're developing a website, software or app, the
folders that you want it to track are
called Git repos. Github, on the other hand, is a website that you can use to host those
Git repos or folders on their website
for working with other developers on
the same project. For this class, we don't
need to install Git. We only need a GitHub account.
3. Signing up & creating a repo on Github: Alright, so in order to host your website on GitHub pages, you need to have a
GitHub.com account. And for that you log
on to GitHub.com, enter your email address, and click on Sign up for GitHub, which I'm gonna do
real quick here. And click on Sign up for GitHub. Alright, so it shows you a
very cool animation that says, Welcome to get up, let's
begin the adventure. And your email. It's taken the email
automatically. So I'm gonna click on Continue. Now we need to create
a password here. So I'm going to create a
password and click on Continue. Now it says enter a username. So keep in mind whatever
username irrigated enter here will be your GitHub
Pages website address. What I mean by that
is, so for example, if I write Skillshare GHP, alright, Skillshare GHP
is a not available. So I'm going to try
with Skillshare GitHub. Alright. So skillshare
GitHub is available. So my GitHub Pages URL will be Skillshare, GitHub, GitHub, io. Alright, so whatever user
name it you put it in here will be your GitHub
Pages URL, alright? Unless of course you register
a.com or whatever domain. So I'm going to click
on Continue here. And it says, Would
you like to receive product updates
and announcements via email by y for
yes or N for no. So I'm going to type N
and click on Continue. Now it says that in order
to verify your account, you need to solve this puzzle. Click on Start puzzle here. The spiral galaxy. Alright, one more
time, and we're done. So click on Create Account here. Alright, so you're almost done. We send a launch code to shut the Leap dot skillshare
at bro, Don't mail.com. So I'm gonna go to my
proton male in marks. Alright, so we have
received the e-mail from GitHub with the launch code. And the launch code is this. So I'm just going
to copy this from here and paste it here. Alright, that's it. I'm just going to click on Skip personalization.
Yeah, that's it. Alright, so we're done creating
our GitHub.com account. Now we need to create
a repository where we're going to upload
our website files. So click on Create
Repository here. Alright, So when creating a repository to host your
website on GitHub pages, there are some settings that
you need to keep in mind. The very first and the
most important thing you need to keep in mind
here is the repository name. So the repository name will
be your username.github.io. So my username that I've created here is Skillshare get up, which is showing right here. So I'm just going to
write the same thing. Skillshare, github.github.io. Alright, so this is available and you need to
write a description here, which is again optional. But I'm going to
write Skillshare, get a ages course demo website. And I'm going to click on Create Repository and make
sure this one is public, not private, which is also an important
thing to keep in mind. You can create a read me file, but this is optional totally. Now we just need to click
on Create Repository here. Alright, so we have
successfully created our repo Skillshare,
github.github.io. And in the next lesson we will
upload website files here. Alright, so see you
in the next one.
4. Uploading website files: Alright, now we need to upload our website files on GitHub.com. So I've created this
small website here, which I'm going to
show you real quick. So this is just a static website that says this website is hosted on GitHub Pages
for free for life. You're going to
host ID grip size and get help to know more. Egg this Skillshare
course by shot at it. Alright, little
bit of marketing. And you can also make APA calls
from here just like this. So this is a weather API calls that I'm going
to make from here. So maybe you write a city name, for example, San Jose, and click on Search. And it's going to show you
the weather for San Jose. Alright, so this is an API call that I'm making
to open weather API. And this is based on a
free Bootstrap theme that God firm start
bootstrap.com, this website right here. And this is the theme
that I've used. So I've edited some code
and made it look like this. And the API that
I've created here. So we're going to upload
this website on GitHub. So let's go back to GitHub and click on upload an
existing file here. Now we need to drag files here
to add them to your repo. So what are we going to do here is that we're just going to make it full screen. And I'm here. This is the folder that
has all my website files. So I'm just going to select
everything and drag it to this location on GitHub.com. Alright, so as you can see, the files are now uploading. So I'm going to make
it full screen again. Alright, so everything
now is uploaded. Now we need to make
a comment here. You need to write a
commit message here. So I'm going to
write first version. Alright, and click
on Commit Changes. Alright, so github is now
precessing our files. It may take a few seconds. Yep, We're done. Alright, so all of our website files are
now uploaded and we're ready to launch our
GitHub Pages website. So see you in the next one.
5. Launching github.io website: Alright, so all of
our website files are now uploaded to GitHub. And we're ready to launch
our GitHub Pages website. In order to do that, we need to click on Settings
here and come to pages. Alright, it says your site is published at Skillshare
GitHub, github dot IO. So if you click here, our website is launched. This website is hosted on
GitHub basis for free, and you can also make
API calls from here. And just like I've shown
you on my local website, which was this San Jose. So let's try
something else here. Let's try London. And click on search. Yep, it works. Our API calls are working from
this GitHub Pages website. As I've totally earlier, that your
username.github.io will be your GitHub Pages website
like you're seeing here is kinship
github.github.io. Alright, so let me click
on this back button here. Alright, so we have successfully
launched our website. That's good. Sure, github.github.io. And it will always
remain like this. So if you have a static
website of business website, you can host on GitHub pages, just like I've shown you here. Alright, so in the next lesson, we're going to create
a custom domain name for our website. So I don't want it to look like Skillshare,
github.github.io. So we'll use a custom domain for our GitHub Pages website. So that's coming up
in the next lesson.
6. Custom domain setup: Alright, so we have successfully launched our website
at Skillshare, github dot github dot IO. And now we're ready to
set up or custom domain. Okay, so I'm gonna go to
my GoDaddy account here, and I have purchased this GitHub Pages dot live
domain for this class. And I'm just going to copy
this domain name from here. And I'm going to paste it
here and click on Save. Alright, now we can
see we have an error which says DNS
check unsuccessful because the DNS records are not abated inside of our domain. So what are we going to do here? We're going to abate
the DNS records. So the first thing we're gonna
do is click on Learn More. So I'm just going to
right-click on Learn More and click on open
link in new tab. And come to this page which says Manage
your custom domain. Scroll all the way down to
here which says a records. Now copy one of these and come to your GoDaddy or whatever domain provider
account that you have. I'm just going to click
on these three dots here and click on manage DNS. So the same process applies to all of the domain providers. So you don't have
to worry about it. Just go to manage DNS inside
of your domain provider. And now we need to
update the records here, which says DNS records. So I'm just going
to click on Add. Choose a type a name
is going to be at. And the value is gonna be the IP address that
I've copied from GitHub Pages website and
click on Add record. Alright, so the record
is now updated. We need to do one
more change here. So you can see here that we have GitHub pages live CNAME record. We need to update
the CNAME record. So just click on Edit
and this value will be your GitHub
Pages website URL, which is crucial.
Github.github.io. So I've copied that and
I'm going to paste it here and click on Save. So the type is
going to be C name, name is www values can share github.github.io and
just click on Save. Alright, so it's updated, but it's not going
to work right away. It takes anywhere between
a few minutes to 24 hours. So we need to wait a little bit for these changes to happen. Alright, so let's try
opening our website, GitHub Pages dot live. And in the GitHub setting spatial so you
can see your site is ready to be published at
GitHub Pages dot live. Alright, so I'm just
going to right-click here and click on
open link in new tab. Alright, so our website is
live at GitHub Pages dot live. How cool is that? Now we have a custom domain for our
GitHub Pages website. And we can also
access this website from Skillshare github
dot github dot IO. But when I entered
the website URL, it automatically changes
to get a basis life. Alright, so let's try and make some API calls
from this website. So I'm just going to
click on APA calls and type the name of the city to see whether
it works or not. So I stay in Kolkata. So I'm just gonna write
Kolkata and click on Search. It works guys. So as you can see,
everything is working perfectly and we have successfully created our
GitHub Pages website and configure a custom domain. How cool is that? Now, if we were stuck somewhere, you can always come back
and re-watch this class. Alright, so I'll see
you in the next lesson, which will be the final
lesson of this course.
7. Tips, Advantages & Disadvantages: In this lesson, I'll
share some tips to better manage your
GitHub Pages website. So if you're looking
to make changes to your website in the future, how will you do that? Now there are a couple
of ways to do that. You can simply go
to your GitHub repo and click on the file
that you wish to edit. So if I want to edit
this index.html file, I'm just going to click here. And it'll take me to this
index.html code editor page. Now, you can click
on this pencil. I can do edit this file, or you can also press E on
your keyboard, E for edit. So I'm just going to press E. And that'll let me
edit this file. So for example, if I go
back to my website and I just want to delete this
for life thing here. So I'm just gonna go back
to my code editor here and look for for life. Yeah, here it is. I'm just going to select this. Delete. Yeah, that's it. So I'm just going to
commit the changes. So I'll just write deleted for life and click
on Commit Changes. Alright, so our
commit has been made. Now, if I go back to my GitHub Pages website and click on this
refresh icon here. And it's still the
same because it doesn't carry out the
changes instantly. It takes a bit of time for
the changes to happen. So we're going to wait for awhile and click
on Refresh again. Alright. Now as you can see,
the changes that are updated and it hardly
took a minute or so. Now let me go back to GitHub
and click on my repo. You can also upload
an updated file here. So I'm just going to go back to my folder where I've created this website and edit
this index.html file. So I'm just going to
open with Sublime Text. And okay, so get up pages. I'm just going to change
the title from GitHub pages to host your website
with a grid of Vegas. And scroll down here. And I'm just going to
add a smiley here. Yep, that's it. And
that's about it. I'm just going to click on
Save Command S for my case. And I'm just going
to exit full screen. And I can just click on
it and drag it to here. Alright. So maybe I'll write version 2 and click on Commit Changes. Alright, now as you can see, it's showing version 2
beside our index.html file. Now, if I go back to my GitHub Pages website
and hit Refresh. Alright, again, it'll take a few moments to
update the changes. So we'll wait for awhile
and hit Refresh again. Let's hit refresh. All right, our changes are updated. Now, the title says, host your website
with GitHub Pages. And our smiley is
added here as well. So this is how you can make changes to your
GitHub Pages website. Now let me go back
to my GitHub repo. Now in case you
want to check out the previous versions or changes
that you've made so far. You can simply click on this watch icon
that says commits. It'll show you all the previous
comments that were made. I can simply click on this
View come and doodles here. And it'll show me which line
has been deleted that has a reddish background
and which lines been added that has this
green background. Okay? So if you go back, you can also check out the previous comments
and view the changes. Now let's talk about
some advantages and disadvantages of using GitHub
pages to host your website. The advantages are, it's free. You don't have to spend a dime
to host your website here. You can set up your
custom domain to make your website URL look
professional and neat. It gives you a free
SSL certificate. It's lightening fast. Your website loads in
the blink of an eye. Making changes to your
website is very easy, as I've already shown you here. And you can also make APA calls, but you can only host static
websites on GitHub Pages.
8. Class Project & Conclusion: Hey, I hope you liked the class. Now it's time for you to
host your own website on GitHub Pages and share
screenshots with the class. I'm looking forward
to check them out. If you're facing
any challenges, right to me here in the
discussion section on Skillshare. And I'll help you out. Or you can also come
back and watch these lessons again here
on skillshare. Hope you enjoyed the class. Do check out my other
courses here on Skillshare. And thank you very much
for taking this class.