Launch your Website for free with GitHub Pages | Shatadip Majumder | Skillshare
Search

Playback Speed


1.0x


  • 0.5x
  • 0.75x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 1.75x
  • 2x

Launch your Website for free with GitHub Pages

teacher avatar Shatadip Majumder, Productivity Coach

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

    • 1.

      Intro

      1:25

    • 2.

      Git vs Github

      0:33

    • 3.

      Signing up & creating a repo on Github

      4:26

    • 4.

      Uploading website files

      2:32

    • 5.

      Launching github.io website

      1:43

    • 6.

      Custom domain setup

      4:12

    • 7.

      Tips, Advantages & Disadvantages

      5:10

    • 8.

      Class Project & Conclusion

      0:28

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

174

Students

2

Projects

About This Class

This course aims to help you host your own website with GitHub Pages, which will be free forever.

Here in this course, you'll learn:

  • The types of websites you can host with GitHub pages

  • The difference between Git & GitHub

  • How to create a GitHub account

  • How to create a GitHub repo
  • How to upload your website files to a GitHub repo

  • Launching your free github.io website

  • Setting up a custom domain for your GitHub pages website

We all need websites, and a free, quick & secure solution is GitHub pages. This course will guide you through the process of launching your website on GitHub pages and configuring a custom domain.

If you are stuck somewhere or have questions, please write to me in the discussion section or you may re-watch the lessons.

Meet Your Teacher

Teacher Profile Image

Shatadip Majumder

Productivity Coach

Teacher

Hi there!

My name is Shatadip Majumder,  I am a Software Engineer, Former Startup Founder, and Productivity Coach. Here to share everything that I know about different subjects.

If you like the courses and content I produced, please do follow me here on SkillShare and Instagram @shatadipofficial

Do check out my website www.shatadip.com 

Cheers!

Shatadip :)

See full profile

Level: Beginner

Class Ratings

Expectations Met?
    Exceeded!
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

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.