Main content
Hosting your website on Github
Github is a company that hosts "code repositories", collections of code for projects. Many of the code repositories are "open source", which means they're publicly available for the whole world to browse. That's awesome, because that's how programmers learn from each other and build on each other's work! Khan Academy has quite a few open source repositories. Code repositories can contain all sorts of types of code, not just HTML and CSS - whatever code is needed to make the project work.
Why am I telling you about them? Well, Github has a feature called Github Pages, which makes it easy and free for you to create a multi-file website hosted at
yourusername.github.io.Note: Khan Academy is not affiliated with Github. Please consult the Github Terms of Use and other policies before deciding to sign up for an account, especially if you are under 13 years of age.
Sign up for a Github account
Visit github.com, and you'll see a signup form on their front page. (If you don't, congrats, you already have an account! You can skip to Step 2).
When you're picking up your username, keep in mind that it will be publicly viewable on the internet and it will be in the URL of your website:
yourusername.github.io. Some people like to use nicknames or funny names instead of their real name, for privacy reasons, but that's up to you.On Step 2, choose the free plan. You don't need a paid plan for a public website repository. (You can always upgrade later if you become a prolific Github user and need their professional features.)
On Step 3, you can answer the survey questions or skip that step:
After you fill out the new account form, make sure you check your email inbox and click the link to verify your email address:
Create a Github project for your website
Once you verify your email address, you'll see the start page. Click "Start a project".
On the project creation page, you'll be asked for a project name. Make sure to name your project exactly “YOUR_USERNAME.github.io”. That tells Github that you’re making a special webpage project, so that it knows to upload your files to that user-facing URL whenever you change them. Since my username was "PamelaFoxBot", I named my project "PamelaFoxBot.github.io":
Congratulations, you have a new project! But it has no files yet. As a quick way to create the first file, click the "README" link:
Now you're looking at the Github file editor interface, for a file named
README.md. Change the filename from README.md to index.html. Servers expect index.html to be the name of the main file of a website folder. Your index can then link to other pages of the website.Delete the current contents of the file editor and replace them with the HTML of your webpage. You can copy and paste the HTML from a project from Khan Academy or one you've been developing on your computer.
Scroll down the page until you find the Commit area, and click “Commit new file”. Every time you create a new version of a file, you are making a “commit” to record that in the file version history. Each commit has a message to describe the change. Github suggests a default message (“Create index.html”, in this case), but you can override that by typing in the box.
Type YOUR_USERNAME.github.io in the browser, and reload until your webpage appears.
Github takes from 1-10 minutes to upload your project changes to the user-facing webpage URL, so you may need to exercise patience. You may also need to "hard reload" (hold shift while reloading), to clear the browser cache.
Upload multi-file websites to Github
Some of you may already be working on multi-file websites outside of Khan Academy, using a desktop editor. Your website might have multiple HTML, CSS, JS, and image files.
If you want to upload that website to Github, don't worry, you don't need to copy and paste each of those files individually! That would get quite tedious indeed. There's a better way...
Open your project on Github and click "Upload files".
You’ll see the Github file uploader interface. To select your files, drag-and-drop or use the file chooser:
Find your project folder and select the files you want to upload.
Generally, you want to upload whatever files you’ve changed. If you’re not sure, just upload everything. Github will use an algorithm to figure out what has and hasn’t changed, and only make new versions for changed files.
Change the commit message as desired and click “Commit changes”.
Reload your webpage to see the changes!
Remember that it takes up to 10 minutes. Patience is our friend here. 😊
That’s why it's best to do your development and testing in your local desktop environment, and only upload to Github (or any other hosting provider) once you’re happy with how your website looks locally.
Want to join the conversation?
Hello Pamela! I am a 12 year old coder. Your lessons inspired me so much and I fell in love with Coding because of you. Thank you so much! I try to solve all the coding problems by myself. I'm super close to having my very first website but I just cannot make a functioning search bar.
Can you pleeeeease help me? I have no one else in real life to help me with that.(213 votes)
Search bars are fairly difficult to make unfortunately. A lot of websites (including Khan Academy) use Google CustomSearch to make their search function - you could look that up online to see how to use that.(85 votes)
Hi
Before clicking the ''Create Repository'' green button, I clicked the ''Initialize this repository with a README'', and I think this was the reason I couldn't find the change option from README.md to index.html. Please help me find the change area in order to make exactly like you showed us.(19 votes)
From the author:In that case, click on README.md, then click the pencil icon in the upper right corner to edit it. In editing mode, you can rename it to index.html and fill it with HTML, like the screenshot shows. (Making a README.md is the easiest way to open up Github's file editing interface)(60 votes)
Isn't Khan Academy a github site? How come it's not named khanacademy.github.io site then?(7 votes)- Khan Academy is hosted on Google Cloud (Google App Engine), specifically. We store our code in Github repositories, but we deploy it to the Google servers. We would not be able to run it on Github as our code has both a frontend (HTML/CSS/JS) and a backend (Python/Kotlin). It is only possible to host frontend-only websites on Github.(46 votes)
how can someone learn how to host his page without using hosting pages and using his name without wasting money on a domain name!? is it possible?(6 votes)
You do not need to pay money for a presence on the web.
Most routers ("internet modems") allow you set up port-forwarding to a machine in your home. You simply need to run an HTTP server there. Various server software packages are available for free. For example, Apache2 is free and is the most popular software on the planet.
You do not need a domain name. URLs can be constructed using IP addresses. For example, visit my page at http://75.37.194.250/~blyon/Javascript/paddle/
That said, there are free domain name services. For example, check out https://dyn.com/dynamic-dns/
In conclusion, what you desire is very much possible, provided you have the skill to do all of the necessary steps. If it doesn't kill you, it will make you stronger.(33 votes)
I want to make an account, but in an effort to be prudent, I want to be sure that this is safe. Can I delete the account at any time? Will my email address be secure? Anything you can write to give me more info on this topic will be appreciated. Thanks.(6 votes)
Yes, GitHub is a very secure site trusted by millions of programmers already.
And yes, you can delete your account at any time.
And yes, it is wise to take precautions as always and you should ensure you have a reasonably complex password and ideally change every now and then.(15 votes)
- Why should I use Github instead of Google Sites?(2 votes)
- With Google Sites you're only storing the latest version.
So if there's a mistake and you've lost a file, that file is gone forever.
I don't know how Google Sites allows you to cooperate with someone. If it's like the other Google Documents, then two people working on the same file will immediately see eachother's changes. Which may or may not be helpful.
With Github, you're saving all your versions. You can see the entire history of your project.
So if you've lost a file, you can always go back in history and get it.
This also makes it super easy to cooperate with someone, because all versions are saved. You can compare the changes and even merge them. So no changes are lost accidentally.(21 votes)
I'm confused about the different files for using JS, CSS, and HTML for making websites. I understand that CSS and HTML are all in the same file and can but used to make a single file website. How do you then incorporate JS into making a website interactive. Do you need to make a seperate JS file and then upload it?(5 votes)
It is considered common practice to make separate files for HTML, CSS and JS.
We save files of CSS as .css
We save files of HTML as .html or .htm
We save files of JS as .js
If we want to fit the website into one HTML document(not recommended) then we use<style>tag for our CSS,<script>tag for our JS.(10 votes)
How can i add more than one webpage to the site i created with github?(4 votes)
Well, you can add links to different parts of the same webpage, like if you have four different tabs.
Example:<nav>
<a href="pageone.html">Page 1</a>
<a href="pagetwo.html">Page 2</a>
</nav>(12 votes)
Should all our projects be named Username.github.io? If I make hundreds of websites and want all of them to be hosted via Github, do I have to make a new repository each time?(5 votes)- It would be best to create a new repository for each project.
My advice is to separate your code to keep things simple. Coding gets complex enough.
Also, if people want to fork your project (think of it as a spin-off), they would want to use the code of one project.
They can't do that if your repository contains many projects.
In your GitHub account you can find the list of repositories, so you don't have to worry about remembering them all.(4 votes)
Usually no matter how hard I try, I can make webpage look good only on desktop, or phone. If I even manage to make it look decent in both, I'd be compromising, or coming to a middle ground with the layout I wanted. Can I have tips on how to make it look good on both? Or do websites usually have separate layout codes for different devices or something?(2 votes)- Hi Leo,
You've come across a problem that almost all web developers face.
Not only do you have to look at PC versus mobile. Even between those there are vastly different screen sizes. And on PC, users can also change the size of their browser.
So a web page should look good at all sizes.
To tackle that, you would have to allow your design to respond to window sizes. This is called responsive design.
My recommendation is to learn and use Bootstrap 5.
It's a CSS framework that works with grids. There are 12 columns in the grid. The smaller the window, the fewer columns can be displayed. Bootstrap will then take care of redistributing the content in a sensible way.
Google "bootstrap 5 introduction" for more information.(6 votes)
