Click here to go back
Makin a Website!
Hey guys! This is my epic tutorial on how to host a personal website on github pages! (ITS FREEEEEE)
I'll take you through all the setup steps, as well as a small guide to basic html and css customization!
This should be just enough to get you started, have fun!
Setting up the repository
Head over to Github and create an account. You should be on a page after you login
Click the + icon on the top of the screen and press "New Repository", make sure to make it public!
Once you're on your repository page, press the "Add a File" button next to the big green "<> Code" button and create a file. Name it index.html and add some basic testing text. Commit the changes.
Once this is created, click the settings icon on the top of the page. Once you're in settings go to the "Pages" tab
Click "None" under the branch section and select main. Press save
Return back to the main page of your repository, you should now see a "Deployments" tap on the side bar. Click that and you should see the link to your website. Test to make sure it works!
If you did it all right you should now have a website published! Now onto making it look... not shitty
(Psst! if you want to create files on your website and manage your website from your computer use github desktop! Clone the repository you just created onto your computer after following This tutorial!)
Basic Tags
Here's a basic page template:'
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/style.css">
<title>PAGE TITLE</title>
</head>
<body>
<p>PUT STUFF HERE</p>
</body>
</html>
Tip: you can press f12 to view the source code of this page, use this to learn how to create these specific tags!
This is a paragraph tag. It's what you use to type most of your documents
This is a bold tag inside a paragraph tag. Tags can go inside of other tags infinitely!
Here's an image:'
Upload images to your repository first before linking them like this!
I recommend making an images folder to store them all
Here's a HEADER OUUUUU
Headers also come in
Multiple
Sizes!
Style!!!
Let's first look at the header for our page:
<head>
<link rel="stylesheet" href="/style.css">
<title>Page Title Here</title>
</head>
The /style.css bit lets use create our very own STYLE SHEET
Let's now create that file (called style.css) and add some code to it!
Let's start by changing the background color
body {
background-color: rgb(6, 25, 66);
}
Lookin good!
Let's add a few more fancy things like margins to make the page look better!
body {
background-color: rgb(6, 25, 66);
min-height: 1080px;
margin: auto;
width: 75%;
padding: 10px;
font-family: sans-serif;
}
Actually, the background is boring, LETS MAKE IT AN IMAGE
body {
background-image: url("./images/bg.png");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
min-height: 1080px;
margin: auto;
width: 75%;
padding: 10px;
font-family: sans-serif;
}
Lookin great!
Lets do some more styling and change how the text color looks!
a:link {
color: rgb(255, 166, 0);
}
a:visited {
color: rgb(255, 81, 0);
}
a:hover {
color: rgb(221, 255, 28);
}
a:active {
color: rgb(255, 255, 255);
}
h1 {
color: rgb(221, 255, 28);
}
h2 {
color: rgb(255, 166, 0);
}
p {
color: rgb(255, 166, 0);
}
Very nice :3
Should be enough, have fun!