How to Build a Simple Website

How to Build a Simple Website: A Complete Walkthrough Using a Static Site Generator

In an age where a digital presence is paramount, the ability to create your own corner of the internet is an invaluable skill. Whether you're a creative professional looking to showcase a portfolio, a small business owner aiming to establish an online footprint, or simply a curious individual eager to learn, the prospect of building a website from scratch can seem daunting, often evoking images of complex code and expensive hosting fees. However, the barrier to entry has never been lower. This guide is designed to demystify the process, offering a complete walkthrough on how to build a website that is not only professional and functional but also incredibly cost-effective—in fact, completely free. We will move beyond the often-limiting confines of drag-and-drop builders and introduce you to the power and simplicity of static site generators, specifically using the robust and widely-used platform, GitHub Pages.

This article is your comprehensive roadmap from zero to a live, functioning website. We will begin by exploring the fundamental concepts, explaining what a static site is and why it's an exceptional choice for beginners, portfolio sites, and blogs. You'll learn how this approach differs from complex dynamic websites, highlighting the benefits of speed, security, and simplicity. From there, we will dive into the practical, hands-on steps. You'll be guided through setting up your local development environment, crafting the basic structure of your site with HTML, and adding style and visual appeal with CSS. We will then transition to version control with Git and GitHub, essential tools for modern web development. The journey culminates in deploying your creation to the world via GitHub Pages, a free and seamless hosting service integrated directly into GitHub. By the end of this guide, you won't just have a website; you'll have a foundational understanding of web development principles and a scalable skill set that will empower you to take on more ambitious projects in the future.

Section 1: Understanding the Foundation: Static Sites and Essential Tools

Before we start writing code, it's crucial to understand the "what" and "why" behind our chosen method. The modern web is comprised of two main types of websites: dynamic and static. Grasping this distinction is key to appreciating the power and efficiency of the approach we're about to take. We will also introduce the core technologies that will serve as our toolkit for this project.

What is a Static Site Generator?

A static site generator (SSG) is a tool that builds a website by taking your content (like Markdown files), applying it to templates or themes, and generating a structure of plain HTML, CSS, and JavaScript files. Unlike a dynamic website, which relies on a server-side language (like PHP or Python) and a database to build pages on the fly every time a visitor requests one, a static site is pre-built. All the pages are generated once, during the build process. When a user visits your site, the server simply sends them the already-prepared HTML file. This core difference is what makes static sites incredibly fast and secure. There's no database to query and no complex server-side processing, which dramatically reduces loading times and eliminates common security vulnerabilities. For projects like portfolios, blogs, documentation, or simple business sites where content doesn't change with every user interaction, a static approach is often the superior choice. GitHub Pages is a hosting service that is specifically optimized for these kinds of static websites, making it a perfect partner for our project.

The Core Technologies: HTML, CSS, Git, and GitHub

To build a website, even a simple one, you need a basic understanding of a few key technologies. These are the fundamental building blocks of virtually everything you see on the web.

HTML: The Skeleton of Your Website

HyperText Markup Language (HTML) is the standard language used to create web pages. It is not a programming language but a markup language, meaning it uses tags to define the structure and content of a page. Think of HTML as the skeleton of your website. It provides the essential structure, defining elements like headings, paragraphs, images, and links. For our simple website, we will create an index.html file, which is the default page that browsers look for when someone visits your domain. We'll use basic HTML tags to lay out the content, creating a solid foundation upon which we can build.

CSS: The Style and Appearance

Cascading Style Sheets (CSS) is the language we use to style and visually format the HTML content. If HTML is the skeleton, CSS is the skin, hair, and clothing—it controls the colors, fonts, layout, and overall aesthetic of your website. CSS allows you to separate the structure (HTML) from the presentation, which makes managing your site's design much more efficient. We will create a style.css file to write rules that target our HTML elements, transforming them from a plain text document into a visually appealing web page. We'll explore how to link this stylesheet to our HTML file so the browser knows how to apply our custom designs.

Git and GitHub: Version Control and Hosting

Git is a powerful version control system that developers use to track changes in their code over time. It allows you to save "snapshots" (called commits) of your project, so you can revert to previous versions if something goes wrong. GitHub, on the other hand, is a web-based platform that hosts Git repositories. It’s like a cloud storage service specifically for code, but with powerful collaboration features. For our project, we will use Git to manage our website files locally and then "push" those files to a repository on GitHub. GitHub then provides the magic ingredient: GitHub Pages, a free service that takes the HTML, CSS, and JavaScript files in your repository and publishes them as a live website on the internet.

Section 2: Setting Up Your Local Development Environment

With a solid understanding of the concepts, it's time to prepare your computer for building. A "local development environment" is simply the collection of tools and software on your own machine that you'll use to create the website before you publish it online. This setup ensures you can work efficiently and test your changes instantly.

Installing a Code Editor

While you could technically write HTML and CSS in a simple text editor like Notepad, a dedicated code editor will make your life infinitely easier. These programs offer features like syntax highlighting (coloring your code to make it more readable), autocompletion, and built-in terminals. A highly recommended and popular choice for beginners and professionals alike is Visual Studio Code (VS Code).

Steps for Installing VS Code

1. Download: Navigate to the official Visual Studio Code website. The site will automatically detect your operating system (Windows, macOS, or Linux) and suggest the correct download.
2. Install: Run the installer you downloaded. The installation process is straightforward; you can generally accept the default settings. On Windows, you might want to ensure that the "Add to PATH" option is checked, as this makes it easier to open VS Code from the command line.
3. Launch: Once installed, open VS Code. You'll be greeted with a welcome screen. Take a moment to explore the interface. The main areas you'll interact with are the file explorer on the left, the main editing window in the center, and the integrated terminal at the bottom (which you can open via the View > Terminal menu).

Installing Git on Your System

The next crucial tool is Git, the version control system we discussed earlier. You need to install it directly on your computer to track your project files.

Installation Instructions

• Windows: The easiest way to install Git on Windows is to download and install "Git for Windows." This package includes the Git core tools as well as Git BASH, a command-line application that provides a Unix-style shell experience. During installation, you can keep most of the default settings, but it's recommended to select Visual Studio Code as Git's default editor if prompted.
• macOS: If you have Xcode (Apple's development tool) installed, Git may already be on your system. To check, open the Terminal app and type git --version. If it's not installed, it will often prompt you to install the command-line developer tools, which include Git. Alternatively, you can download an installer directly from the official Git website.
• Linux: On Debian-based distributions like Ubuntu, you can install Git by opening a terminal and running the command sudo apt-get install git.

After installation, it's a good practice to configure Git with your name and email address. Open your terminal (or Git BASH on Windows) and run the following commands, replacing the placeholders with your information: git config --global user.name "Your Name" git config --global user.email "[email protected]" This information will be associated with the commits you create.

Section 3: Creating the Structure and Style of Your Website

Now for the exciting part: actually building the website. In this section, we will create the core files that will define the content and appearance of our simple one-page site. We'll start with the HTML structure and then move on to adding visual flair with CSS.

Step 1: Crafting the HTML with index.html

First, create a new folder on your computer to house your project. You can name it something like my-first-website. Open this folder in VS Code (File > Open Folder). Now, inside VS Code's file explorer, create a new file named index.html. This filename is important because web servers, including GitHub Pages, look for a file with this name by default to serve as the homepage.

Basic HTML Document Structure

Every HTML document has a standard boilerplate structure. Let's create this foundation in your index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Awesome Website</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Welcome to My Website</h1>
    </header>
    <main>
        <section>
            <h2>About Me</h2>
            <p>This is a paragraph about me. I am learning how to build a website using GitHub Pages. It's an exciting journey into the world of web development!</p>
        </section>
        <section>
            <h2>My Projects</h2>
            <p>Here is where I will list my projects once I have some to show.</p>
        </section>
    </main>
    <footer>
        <p>&copy; 2025 Your Name</p>
    </footer>
</body>
</html>

Let's break this down:

• <!DOCTYPE html>: Declares the document type.
• <html>: The root element of the page.
• <head>: Contains meta-information about the page, such as the title and the link to our stylesheet. The <meta name="viewport" ...> tag is crucial for making your site responsive on mobile devices.
• <title>: The text that appears in the browser tab.
• <link rel="stylesheet" href="style.css">: This very important line connects our HTML file to our CSS file, which we will create next.
• <body>: Contains the visible content of the webpage.
• <header>, <main>, <footer>: These are semantic tags that help structure our content logically.
• <h1>, <h2>: Heading tags for titles.
• <p>: A paragraph tag for text.

Step 2: Styling with CSS in style.css

Now, create another file in the same project folder and name it style.css. This is where we'll define the visual rules for our website. Let's add some basic styling to make our page look more appealing.

Writing Your First CSS Rules

Add the following code to your style.css file:

/* General Body Styles */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
}

/* Container for Centering Content */
header, main, footer {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

/* Header and Footer Styles */
header {
    background-color: #333;
    color: #fff;
    text-align: center;
    border-bottom: 4px solid #77aaff;
}

footer {
    text-align: center;
    margin-top: 40px;
    font-size: 0.9em;
    color: #777;
}

/* Heading Styles */
h1 {
    margin-bottom: 0;
}

h2 {
    color: #77aaff;
}

/* Section Styles */
section {
    background-color: #fff;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

This CSS code does the following:

• It sets a clean, modern font for the entire page.
• It centers the main content on the page with a maximum width of 800 pixels.
• It gives the header a dark background with white text and a blue accent border.
• It styles each content section with a white background, rounded corners, and a subtle shadow to make it stand out.
• It colors the <h2> headings to match the header's accent color.

To see your creation, simply find the index.html file on your computer and double-click it. It should open in your default web browser, showing your structured content with the new styling applied.

Section 4: Publishing Your Website with Git and GitHub Pages

You've built your website on your local machine. Now it's time to share it with the world. This final section will walk you through the process of using Git to track your files, pushing them to a GitHub repository, and activating GitHub Pages to make your site live on the internet.

Step 1: Creating a GitHub Repository

First, you'll need a free GitHub account. If you don't have one, head over to GitHub's website and sign up. Once you're logged in, you'll create a new "repository," which is essentially a project folder hosted on GitHub.

How to Create the Repository

1. New Repository: On the main GitHub dashboard, click the "+" icon in the top-right corner and select "New repository."
2. Repository Name: This is the most important step for GitHub Pages. Your repository must be named in a specific format: your-username.github.io. For example, if your GitHub username is janesmith, you must name the repository janesmith.github.io. This special naming convention tells GitHub that you intend to use this repository for a personal user site.
3. Settings: Ensure the repository is set to "Public." A private repository can also be used with GitHub Pages, but it requires a paid GitHub Pro account. For now, public is perfect.
4. Create: You can skip adding a README, .gitignore, or license for now. Click the "Create repository" button.

GitHub will now show you a page with instructions on how to connect your local project folder to this new online repository. We will use these commands in the next step.

Step 2: Using Git to Upload Your Files

Now we will use the command line (Terminal on Mac/Linux, Git BASH on Windows) to initialize Git in our local project folder and send our index.html and style.css files to our GitHub repository.

Git Command Walkthrough

1. Open Terminal: Navigate into your project folder (my-first-website) using the command line. The cd (change directory) command is used for this. For example: cd Documents/my-first-website.
2. Initialize Git: Run the following command. This creates a hidden .git folder in your project directory, which starts tracking your files. git init
3. Add Files: Tell Git you want to include all the files in the current directory in your first "snapshot." git add .
4. Commit Files: Save the snapshot with a descriptive message. This is called a "commit." git commit -m "Initial commit: Add HTML and CSS files"
5. Connect to GitHub: Now, copy the commands from the GitHub repository page you created earlier. It will look something like this. These commands tell your local Git repository where the remote repository on GitHub is located. git remote add origin https://github.com/your-username/your-username.github.io.git git branch -M main
6. Push to GitHub: Finally, upload (or "push") your committed files to the main branch of your GitHub repository. git push -u origin main

You may be prompted to enter your GitHub username and password (or a personal access token for authentication). Once this command completes successfully, refresh your repository page on GitHub. You should now see your index.html and style.css files there!

Step 3: Activating and Accessing Your Live Site

Because you used the special your-username.github.io repository name, GitHub Pages is most likely already activated and building your site. The deployment process is automatic.

Finding Your Website URL

The URL for your new website will be the same as your repository name: https://your-username.github.io.

Navigate to this URL in your web browser. It might take a minute or two for the site to become available the very first time you publish. If everything worked correctly, you will see the simple website you designed, now live on the internet for anyone to visit. Congratulations, you have successfully managed to build a website from scratch and deploy it for free using powerful, modern development tools. Any future changes you make can be pushed to GitHub with the git add, git commit, and git push commands, and your website will automatically update.

Conclusion

Following the steps outlined in this guide, you have successfully navigated the entire process of building and launching a simple website. You started with the foundational concepts, understanding the speed and security benefits of a static site. You then set up a professional development environment on your computer with VS Code and Git, essential tools in any web developer's arsenal. With your environment ready, you delved into the core languages of the web, structuring your content with HTML and bringing it to life with CSS. Finally, you bridged the gap between your local machine and the live internet, using the power of Git and GitHub to publish your work through GitHub Pages.

You have not only built a functional website but have also gained hands-on experience with a workflow used by millions of developers worldwide. This knowledge serves as a powerful launching pad. From here, you can explore more advanced CSS for responsive design, add interactivity with JavaScript, or even dive into more sophisticated static site generators like Jekyll or Hugo that can build complex blogs and portfolios more efficiently. The key takeaway is that the ability to build a website is no longer an arcane art reserved for a select few. With free tools and a clear roadmap, you now have the power to create, publish, and share your ideas with the world.

Discover another guide: What is a GUI? (Graphical User Interface)