Skip to content

Hello World

Jump to bottom
Jeff Siarto edited this page Jan 13, 2025 · 16 revisions

Introduction

In this tutorial we're going to create a basic webpage in HTML and publish it to the Internet using a typical workflow you'd find in a professional setting.

Prerequisites

  1. Github account
  2. Netlify account
  3. A local installation of Visual Studio Code

Github and Codespaces

Source code management (SCM) software makes it easier to work on code as a team and version/deploy your software in an organized way. SCM tools like Git keep track of individual changes to files and manage the merging of code when multiple developers are working on the same file. Managing code changes with Git can serve as an automated backup for your websites and help keep your side projects organized (you can even use Git for non-code projects like books, documentation, and "digital gardening").

GitHub is a web application built on top of Git that offers a graphical interface for viewing your repositories and projects, along with social features that make collaborating with open source projects easier (and more fun). Most of the everyday features you'll use in Git (clone, push, pull, etc) are available via GitHub. You can use the GitHub interface to create new repositories, create and modify files, commit code, and actively develop your project using Codespaces.

Create a new Github repository

  1. Log in to your Github account.
  2. In the left sidebar of your Dashboard, click the New button to create a new repository in your account.

  1. Give your repository a name and description.
  2. Make sure your repository is set to public and you initialize the repo with a README file.
  3. Click "Create Repository" to finalize the process.
new repo
  1. If everything worked, you should be taken to the landing page for your new repository.
new repo

Create a new Codespaces instance

GitHub Codespaces is an IDE built on top of VS Code that runs 100% in the cloud. Not only do you get access to the same VS Code software that you'd install on your local machine, but you also have an attached server that's capable of running Node.js and other open source software common to web development. Codespaces allows you to configure your development environment and create code without installing anything on, or modifying your personal computer.

  1. From the newly created repository page, click the Code dropdown button.
  2. In the dropdown, you'll see two tabs: Local and Codespaces. Click the Codespaces tab and then click the green Create Codespaces on master button.

Note

Depending on when you created your Github account and your current settings, your default branch could be main or master. The button language will change based on what you have set for your default branch.

new repo
  1. This action should open a new tab that will launch a browser instance of Codespaces (it will look exactly like VS Code).
new repo

Add, Edit, Commit, and Push

Now that we have our repository and Codespaces instance created, it's time to add our first HTML file to our project. We'll also let Git know about this new file, so it can begin tracking the changes. In this section we're going to use Codespaces right in the browser, but later you'll learn how to use your local VS Code environment to connect to a Codespaces instance.

  1. Right click in the file browser within Codespaces and select New File.
new repo
  1. Name the new file index.html.
  2. Select index.html and make sure it opens as a tab in your main Codespaces window. Copy the following HTML code into index.html 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello, World!</title>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>
new repo
  1. Now that we have our basic HTML ready to go, it's time to commit and push our code to Github. This will create a new "snapshot" of our project and sync the Codespaces instance with Github. In the left sidebar of Codespaces, find and click the "Source Control" icon (it should have a blue "1" to indicate there has been one change to the project.
new repo
  1. Click the + icon next to the index.html line under the "Changes" dropdown within the Source Control tab. This will add or "stage" your changes for commit.
  2. Every commit must contain a message that describes the changes made to the project. Add a small message to the messages field, and then click the green "Commit" button.
new repo
  1. If your commit was successful, you should see an option to "Sync changes." Press this button to "push" your code to Github and complete the Git commit cycle. You can check to make sure your updates synced but navigating back to the repository landing page. You should see your index file, along with the commit message you just wrote in the previous step.

Netlify

At its basic level, Netlify is a web hosting platform. What makes it interesting and especially useful for this book is its ability to continuously deploy code you push to GitHub. To start, we'll only be using the static site deployment feature (basically, easy hosting for HTML files)—but as you progress past this book and into professional environments, you'll find Netlify a powerful tool for more robust JavaScript and Single Page Application deployment. We'll dig more into Netlify's features in future tutorials.

Deploying Static Websites with Netlify and Github

Now that we've got our basic HTML page built, we need to publish it to the web so other people can see it. This tutorial uses Netlify, but you could use any static site hosting platform with Git integration (e.g. Cloudflare Pages, Vercel, etc).

Tip

Use the "Sign up with GitHub" feature to use GitHub to log in to Netlify—this will also link the account to make deployments easier in the future.

  1. Create an account and sign in to Netlify using your Github credentials.
  2. Click the green Add new site dropdown and select Import and existing project.
  3. On the next page, select Github as your provider (you may need to give Netlify permission to access your repos the first time you set this up).

  1. Once connected to Github, Netlify will show you a list of available repositories that you can deploy/publish. Find the hello-world project you started and select the repository from the list.

  1. On the next page, Netlify will give you options for configuring your site. We don't need to add or change anything here, so you can verify you selected the right Github repo and click Deploy.

  1. Once you click Deploy, you'll be taken to the site detail page where you can check the progress of the deployment. Depending on the server load, this could take a few seconds to a few minutes to complete. You'll know it's ready when you can click on the deployed link provided by Netlify.

  1. When Netlify completes the deployment, you should be able to view your Hello World site at the provided public URL.

Important

Now that your site is synced with Netlify, it will automatically deploy when you push to Github (clicking the Sync changes button). This is called a continuous deployment system, and is one part of a professional setup that aims to automate deploy and update processes.

Clone this wiki locally