If you're seeing this message, it means we're having trouble loading external resources on our website.

If you're behind a web filter, please make sure that the domains *.kastatic.org and *.kasandbox.org are unblocked.

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.
Screenshot of Github signup screen
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.)
Screenshot of Github signup step 2
On Step 3, you can answer the survey questions or skip that step:
Screenshot of Github sign up process, step 3 survey
After you fill out the new account form, make sure you check your email inbox and click the link to verify your email address:
Screenshot of Gmail verify screen for Github

Create a Github project for your website

Once you verify your email address, you'll see the start page. Click "Start a project".
Screenshot of Github start page with two buttons, Read the guide and 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":
Screenshot of Github interface to create a new project
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:
Screenshot of Github interface after making new project
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.
Screenshot of Github file editor for README.md, with filename circled
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.
Screenshot of Github file editor with HTML in the editing box
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.
Screenshot of Github "Commit new file" interface
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.
Screenshot of webpage on github.io

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".
Screenshot of Github project interface with "Upload files" button circled red
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.
Screenshot of file chooser
Change the commit message as desired and click “Commit changes”.
Screenshot of committing uploaded files
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.
Screenshot of final uploaded webpage

Want to join the conversation?

  • ohnoes default style avatar for user giraffelovesdolphin
    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)
    Default Khan Academy avatar avatar for user
  • blobby green style avatar for user gabild004
    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)
    Default Khan Academy avatar avatar for user
    • hopper jumping style avatar for user pamela ❤
      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)
  • piceratops ultimate style avatar for user Super Mario
    Isn't Khan Academy a github site? How come it's not named khanacademy.github.io site then?
    (7 votes)
    Default Khan Academy avatar avatar for user
    • hopper jumping style avatar for user pamela ❤
      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)
  • aqualine ultimate style avatar for user Dina Magdy
    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)
    Default Khan Academy avatar avatar for user
    • old spice man green style avatar for user Bob Lyon
      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

      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)
  • spunky sam blue style avatar for user Avi Perl
    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)
    Default Khan Academy avatar avatar for user
  • blobby green style avatar for user David Settino Scott
    Why should I use Github instead of Google Sites?
    (2 votes)
    Default Khan Academy avatar avatar for user
    • spunky sam blue style avatar for user Dalendrion
      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)
  • leaf blue style avatar for user Isaac Moats
    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)
    Default Khan Academy avatar avatar for user
    • old spice man blue style avatar for user The Hacker Supreme
      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)
  • winston default style avatar for user yogesh bhardwaj
    How can i add more than one webpage to the site i created with github?
    (4 votes)
    Default Khan Academy avatar avatar for user
  • stelly orange style avatar for user totoro
    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)
    Default Khan Academy avatar avatar for user
    • spunky sam blue style avatar for user Dalendrion
      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)
  • boggle blue style avatar for user chefLeo136
    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)
    Default Khan Academy avatar avatar for user
    • spunky sam blue style avatar for user Dalendrion
      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)