Build a website with Github Pages (no experience required)
Ever wanted to learn how to quickly build a website you can view from anywhere in the world? Follow this tutorial and you’ll be well on your way to creating your own websites in HTML.
What is Github?
GitHub is an online storage space of coding projects. It lets you and others work together on projects from anywhere. Think of it like Google Docs, with a Github repository being equivalent to a folder in Google Docs, and individual files as files in Github. They also share the feature of collaboration.
What is Github Pages?
GitHub Pages is designed to host your personal, organization, or project pages directly from a GitHub repository. This means that you can easily create websites for free by uploading files into your Github account.
What is HTML?
HTML stands for Hypertext Markup Language, which is a scripting language that tells a hosting service (in this case Github Pages) what fonts, colors, and graphics your website will include.
In this tutorial, we’ll be learning how to use Github Pages and HTML to create a basic website.
## Step 1: Create a Github account
Later you may want to keep your code private, but for learning purposes, having unlimited public repositories will work fine.
Next, click “Start a Project”
When creating your new repository, make sure “initialize this repository with a README.md” is checked. This will save you some time in setting up.
Congrats! You have created your first Github repository.
Below is the main page for the code in your new repository. Click “Create new file” to create the main page of your website.
Name this file “index.html”. Github Pages recognizes “index.html” as the file to display when the link to your website is clicked. The “.html” extension indicates the language the file is written in, HTML.
The code below sets up a basic HTML webpage.
The <!DOCTYPE html> declaration defines this document to be HTML5
The <html> element defines the page as an HTML document.
The <head> element contains head elements, including a title for the website.
The <title> element specifies a title for the document
The <body> element contains the visible page content. This can include paragraphs and headers.
Next, enter a commit message and click “Commit new file” to save your changes to the file.
As seen below, your new file has been created. Next, click “Settings” to set up Github Pages.
Next, scroll down to the “Github Pages” section to setup your website.
Click the link below to visit your new website. You’ll notice that your new website is blank. We can easily fix this by including a few elements in the “body” section of our “index.html”
Include a few elements, as seen below.
h1 stands for “header 1” and will give you a large, bold header for a webpage title.
p stands for “paragraph”- you can use this to include blocks of text in your website.
Don’t forget to commit your changes!
Hooray! You have now set up your first website!
Next, we’ll be talking about uploading images to your website. Be sure to prepare your favorite pictures to display.
See you next time :)
Check out more repositories at https://github.com/zsheill7