In this guide, you’ll learn how to make a simple website for Github Pages using HTML, CSS, and Javascript. By the end you’ll have made your own website that you can share with your friends.

  • View example: https://cplmakerlab.github.io/simple-website-template/
  • Starter Template: https://github.com/cplmakerlab/simple-website-template

In this guide we will be using Github Pages to create a simple website. But first, how does a website work? When you enter a website address in your computer’s browser, the browser makes a request to a remote server computer. If successful, the server returns HTML, CSS, and JS for the page requested which your browser then renders to your screen. In our case, Github Pages will be the remote server.

Step 1: Create a Github account

In your browser, go to github.com and create a free account. Github is a website that allows you to upload and share versioned code with others. It also supports simple website hosting (which we will be using today).

Step 2: Find the Maker Lab website template

Login and navigate to the Maker Lab Website Template on Github.

Step 3: Fork (copy) the template

Click the Fork button in the upper right of the screen. This will create your own personal copy of the project repository which you can then modify.

Step 4: Edit the website URL

Once you have forked the project, click the Edit button to the write of “Website URL” and update the URL to match your github username. Make sure to write this down! This is how you will be able to view and share your website with others. Example URL (replace yourusername with your github username): https://yourusername.github.io/simple-website-template

Step 5: Try to load your website URL

If you try to navigate to your URL right now, you will get a 404 Error: Not Found. We have to push some changes first to the gh-pages branch before Github will build our website.

Step 6: Edit index.html

Click index.html and then click the pencil icon to edit the file in the browser editor.

Step 7: Change the page title and heading

In the HTML editor look for the title tag: <title>Your title here</title> Change the text inside the title tags, without modifying the tags themselves. Similarly, find the h2 heading tag and carefully change the text inside of the h2 tags: <h2>Simple Website</h2> For more examples of tags, see the “Common HTML Tags” table at the end of this guide.

Step 8: Commit your changes

Scroll down and click Commit changes. This will save and push the changes you made to the gh-pages branch. Git uses branches and commits to manage different versions of your files.

Step 9: Wait for your site to build!

After a commit it will take about 3-4 minutes to deploy your site. You can monitor the status of your build by clicking the “Environment” tab. After a few minutes, visit your website URL to see your new site.

Step 10: Upload new background image

Now let’s upload a new background image. Search for a large image (~1024 pixels wide), download it to your computer, and rename it background.jpg. Your image must be named background.jpg before uploading in order to overwrite the original image. If your image is a .png, use GIMP to convert it to .jpg. In Github, click Uploadfiles to upload your new background.jpg. Don’t forget to scroll down and click “Commit changes” to push your changes to the gh-pages branch. Again, it usually takes about 3-4 minutes for Github to build and deploy your changes.

Congratulations! You made a website!

Yeah! You did it! Now you can share your website link with your friends so they can see your website too.

Some more things to try:

  • Upload and overwrite logo.jpg (best to keep your logo small, under 100 pixels tall)
  • Change the link color in style.css, i.e. a {color:green;}
  • Update the text inside the footer region in index.html
  • Update the text inside the Home, About, and Contact regions in index.html

Common HTML tags

Element Tag Example usage
Header h2 <h2>Title of page</h2>
Link a <a href="http://example.com">Check out this link</a>
Image img <img src="http://www.example.com/image.jpg">
Paragraph p <p>This is a new paragraph.</p>
Line break br This is the first line of a poem. <br> This second line will appear below the first.

Further reading

Where can I learn more about HTML, CSS, JS, and webdevelopment in general?

Check out Mozilla Developers Network (https://developer.mozilla.org). They have lots of good resources, tips, and tutorials to further your knowledge.

Can I configure a custom domain for my site, i.e. johnnymakerportfolio.com?

Yes! Github Pages supports custom domain configuration. However, you will need to buy a domain name from a registrar such as NameCheap or Gandi – the cost is usually around $10 — $15 a year.

Can I add tracking?

Yes! You can embed Google Analytics to see who is visiting your site.

Can I add a blog, etc?

Not really. This template works best for simple sites. For a simple blog check out Jekyll, which is a static site generator that also works on Github pages and Cloudcannon which provides a backend UI for Jekyll sites. For more functionality, you will probably need a content management system (CMS) such as WordPress, Drupal, or Django. A CMS will require additional setup and a website host, such as Dreamhost.

Can I sell products or add a store?

Not easily, but if you are determined you can add Paypal buttons or something like SnipCart. If you are interested in selling many products online or need a full store, check out Woocommerce, BigCartel, Shopify, or Etsy.

Can I make separate HTML files for each page?

Yes, you can use Javascript AJAX calls to pull in external content into your index.html page. See script.js for more details.

I heard I need to be using XYZ framework (Bootstrap, React, etc).

Web technology changes rapidly, and it easy to get lost in the hype. Learning the basics of HTML, CSS, and JS is a good place to start. From there, you can explore different frameworks and libraries to see what interests you.

I don’t want to write code or deal with website hosting. Are there any website builders you recommend?

  • Google Sites (free)
  • Squarespace
  • Wix
  • Strikingly (free tier includes single product store)
  • Big Cartel, Shopify, Etsy (e-commerce)

github HTML CSS JS GIT Coding GitHub Pages, a tool provided by GitHub, lets you easily create and deploy a website online. GitHub allows you to store all the files and code for your website in a repository. You can then use GitHub Pages to generate a personal URL and share your site with friends, family, and the world! For this tutorial, you need a GitHub account and basic HTML knowledge. You don’t need to know Git or the command line. (But if you do want to learn how to use these tools, check out our Learn Git & GitHub and Learn the Command Line courses.)

GitHub vs. GitHub Pages

In GitHub, code is stored in a repository, or repo. You can think of it as a special folder that lives online. GitHub hosts that folder so that it is accessible to you and your teammates from anywhere in the world. In our case, our repository will contain HTML and CSS code that defines a website. But you can’t SEE the website anywhere. GitHub just displays the code like any other text. GitHub Pages essentially connects your repository to a unique URL so that, when you go to that URL – say username.github.io – in your browser, you’ll find your website displayed.

Create a Repository

Let’s get started! Create a new repository named username.github.io, where username is your GitHub username. Screenshot of the create a new repository page You have the option here to use a template, add a description, make your repository private, and initialize some additional files. These items make it easy for other developers to learn about your repository: what it’s about, who can access it, who can use the code, etc. For simplicity, we’re going to skip those items for now. Your site will work without them. Click “Create Repository”.

Creating Your First Page

You should be redirected to the repository page, which shows an empty repository. It’s time to add a file! On that page, click the “creating a new file” link. Screenshot of the repository page with a rectangle around the creating a new file link Name your file index.html. Now copy and paste the following code into the file. <html> <body> <h2>YOUR NAME</h2> <p>Welcome to my website!</p> <img src=»https://content.codecademy.com/articles/github-pages-via-web-app/happy-ice-cream.gif» /> </body> </html>


You can customize the text that says YOUR NAME and Welcome to my website!. Screenshot of the create index.html page after everything is filled out Changes to your repository are called commits. You can imagine each commit as a snapshot of your repository at different times. Time to create our first commit! In the first textbox, name your commit “Create index.html”. Commits usually start with a verb describing changes made to the repository. Press the “Commit new file” button.

Viewing Your Website

Your website is now accessible at https://username.github.io! (Remember to replace username with your GitHub username.) An animated gif of the website you created If you’d like, you can develop your website by adding more HTML and CSS! Your site should update a few minutes after each commit.

Troubleshooting

If your site isn’t appearing after 10 minutes, try these additional steps:

  1. Within your username.github.io repo, go to Settings and scroll down to GitHub Pages. Under Source, make sure that your repo is linked to your web page. If you see None, then select the main branch.
  2. Within the same GitHub Pages section, go to Theme Chooser and select any theme.

Repo Settings, GitHub Pages section


Leave a comment

Your email address will not be published. Required fields are marked *