Chapter 1.2.5
Homework
Now that you know how to create a Git repository and know the basics of HTML, let's get you started with creating the first part of your website!
Create Your Website Repositorry
For the first step, you will want to create the folder from which you will be editing and pushing your changes to GitHub.
First, navigate to a directory on your file system where you want to host the website project. Then, create a directory and some folders that we will use in the future. To do so, open the command line and paste the following (don't forget to use Git Bash if you're on Windows):
mkdir personal-website
cd personal-website
mkdir assets
cd assets
mkdir img
mkdir css
mkdir js
cd ..
Finally, initialize your repo:
git init
Create an HTML Document
Open Visual Studio Code and in the Top Left of your screen, select File > Open and select the folder you just created, personal-website.
Once you have successfully opened your folder, create a new file by selecting File > New File. Save it selecting File > Save and call it index.html. This will be the landing page that will come up first when people go to your website.
You can also type
touch index.htmlto create this file in the command line).
Copy the code below onto your index.html file. You may modify it as much as you'd like and we will be able to stylize it further in the future using CSS, JavaScript, and more advanced HTML tags!
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Portfolio Site</title>
<meta name="description" content="This is my own website!">
<meta name="author" content="YOURNAME">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<script src="js/main.js"></script>
</body>
</html>
Save the file by selecting File > Save.
Push Your Repo
Navigate back to Terminal (or Command Prompt on windows) and add all of the changes you have made to the repo so far by typing:
git add .
Check that there are no "Untracked" documents by typing
git status
If all of the documents are ready to be committed and you have finalized all of your changes, commit your project.
git commit -m "Initialized the repository."
Create a new repository on GitHub following the instructions in Chapter 1.2.3 and push your changes to the cloud. If you can see your files in the site for your repository online, you have done this succesfully! You are ready to start modifying your site.