Creating a "Hello World" Website 👋

4 min read

2022-01-05

Overview#

This blog will walk through how to create a simple HTML/CSS website and deploy it on GitHub pages!

This website could be shared with anyone via the URL!

Setup VSCode#

For this tutorial, we will be using VSCode, which can be downloaded here.

After downloading VSCode, click the open button to find a place to store your project!

Open/create a directory to store the files we will create! I will be storing my files in a folder called hello-world-blog. Click open to open the folder inside VSCode!

Click on the four boxes on the left pane to install the Live Server VSCode extension. This allows us to test our webpage as we create it!

Creating files#

Now, let's go back to the first icon on the left pane (the one that looks like two sheets of paper)!

Click the "new file" icon at the top of the pane on the VSCode window, and name the file index.html.

Within your newly created HTML file, type ! and click the TAB key on your keyboard. This generates an HTML template for us!

If that did not work for whatever reason, the code is also below:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
</html>

Within the <body> tags in the HTML file, type <h1>Hello World!</h1>. Press CMD + S or CTRL + S to save your file!

Loading our website!#

Once you have created your HTML file, let's load our website to see what we've created!

Type CMD + SHIFT + P or CTRL + SHIFT + P to open the command palette on VSCode and type in live server. Select the open that says open with live server and click enter!

That should automatically open up a URL in your browser and you'll be able to see the website you have so far! However, if that does not work, head to http://127.0.0.1:5500/index.html to see your website!

Adding CSS#

Now, that website doesn't look very pretty, so lets create a new file called style.css.

Now, type the following code into the style.css file:

body {
    background-color: lightblue;
}

h1 {
    color: darkblue;
}

Save the CSS file, and let's head back to our index.html file. We need to link the css file we just created with our HTML file, so let's add a link tag in the <head> element!

<link rel="stylesheet" href="style.css">

The entire HTML file should look like:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>
    <h1>Hello World!</h1>
</body>

</html>

Now, let's go to our website and see the changes! Make sure to save your CSS and HTML files!

Now, this website looks pretty awesome.

Deploying our website (for FREE)!#

Create an account on GitHub, which is where we will deploy our website!

Once you've created a Github account, create a new repository

Name your repository anything you'd like! I'm going to name mine hello-world-blog

Click the Create Repository button to create your repo!

Let's upload our files to GitHub! Click the uploading an existing file link!

Select the upload option and find the folder where you saved your HTML and CSS files from before. You can select multiple files in this dialog box by holding down CMD or CTRL as you click on each file. Click open to upload your files.

Once you upload your files, click commit changes at the bottom of the two boxes! Your files are now on GitHub!

Now, we need to deploy our repo

Click on the settings button to access the settings of your repo!

From there, click on the pages tab on the left side.

After that, click on the source dropdown and select the main branch!

Click save to save your changes you've made!

After that, click on this URL to access your newly published website! This URL can be shared with anyone so they can also see what you've made!

Note: The website will take a few minutes to publish, so you might need to wait for a few minutes to access it!

Our finished product!#

~ Ganning Xu © 2024