What is the Simplest Way to Host a Personal Website for Free?

Author: 2025-10-11

The power of simplicity

What does it truly take to publish on the web? Turns out, just a free GitHub account and GitHub Pages. You don't need a complex framework or a computer science degree. Although, you will need a basic understanding of git , for source control, and html/css, for creating your webpages.

In the next section, I'll give you the basic steps to get up and running with a GitHub Pages website. I'll also provide some additional sections that may help you expand upon the initial "hello, world" example. My goal is to get you on your way with a simple and powerful framework, from which you can begin to carve out your own section of the World Wide Web.

Creating your GitHub Pages website

  1. Create a public GitHub repository with the following name structure: <username>.github.io
    • It doesn't matter if you create the repo locally and push or create it on GitHub and clone.
    • e.g. If my username is "RedPorcupine37" and my profile url is "https://github.com/RedPorcupine37". Then, my repository name is "redporcupine37.github.io".
  2. Ensure the repository contains a single file, index.html 
    <!doctype html>
<html>
  <head></head>
  <body>
    <main><h1>Hello, world!</h1></main>
  </body>
</html>
  3. Push this change to the remote repo

    This will trigger a deploy, which you can view in the "Actions" tab of the repository.

Congratulations! You now have a live webpage at your GitHub Pages domain (<username>.github.io). You can go make any changes you'd like, push them to the remote repo, and see those changes live in a matter of seconds.

The rest of this article contains sections that expand on other topics that may be helpful for setting yourself up with a simple and powerful framework for your personal website.

A more realistic starting point

  1. Update your repo file structure to include css

    You should now have two files:

    • index.html
    • css/global.css
  2. Create a basic CSS framework for theme, styles, and typography

    This will give you a single-column layout with sensible typography and a starting point for a theme. You can use a tool like Realtime Colors to explore theme choices. However, I recommend building your page first and testing changes directly. 

    /* Save this as: css/global.css */
:root {
  /* Theme colors */
  --text: #151d2a;
  --background: #ffffff;
  --primary: #2563eb;
  --secondary: #e8edf2;
  --accent: #ddeafb;

  /* Font weights */
  --light: 300;
  --normal: 400;
  --medium: 500;
  --bold: 700;
}

html {
  background-color: var(--background);
}

body {
  display: flow-root;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  /* By default, we assume mobile screen size */
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto 64px auto;
  padding: 0 4vw;
}

/*
  * Typography
  */
h1,
h2,
h3 {
  line-height: 1.2;
  font-weight: var(--bold);
  font-family: Georgia, "Times New Roman", Times, serif;
}

p,
small {
  line-height: 1.6;
  font-weight: var(--normal);
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.5rem;
}

p {
  font-size: 1rem;
}

code {
  font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas,
    "Courier New", monospace;
  font-size: 0.875rem;
  line-height: 1.6;
  font-weight: var(--normal);
}

small {
  font-size: 0.875rem;
}

/* 
  * Element styles
  */
a {
  color: var(--primary);
}

code {
  background-color: var(--secondary);
  padding: 0.046875rem 0.5rem;
  border-radius: 4px;
}

pre {
  background-color: var(--secondary);
  border: 1px solid var(--accent);
  border-radius: 12px;
  padding: 8px 16px;
  overflow-x: auto;
}

pre code {
  background-color: transparent;
  padding: 0;
  border-radius: 0;
}

/* Modifications for tablet screens */
@media (min-width: 768px) {
  body {
    padding: 0 4rem;
  }
}

/* Modifications for desktop screens */
@media (min-width: 1024px) {
  body {
    max-width: 75ch;
    padding: 0;
  }
}
  3. Update your index.html to include your css and some basic metadata 
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Personal Website</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#ddeafb" />

    <link rel="stylesheet" href="css/global.css" />
  </head>
  <body>
    <main>
      <!-- Semantic HTML here -->
    </main>
  </body>
</html>

From here, you can begin to build your webpage, focusing on the html first. Once you've got your content down and semantically structured, you can play around with the css and finalize your style.

As you experiment, you may start to wonder how your site actually appears on different devices. While browser devtools offer a helpful simulation, seeing your site on a real phone or tablet can reveal issues that simulations don't. Let's look at how you can do that next.

Testing your website on a mobile device

  1. Find your computer's IP address

    There's many ways to do this, research based on your operating system. You should be looking for a value that looks like 192.168.1.100.

  2. Start an http server in your git repo

    I find the easiest way to do this is with Python. You need a python3 executable installed on your machine. You can do this by running the following command in your git repo: 

    python3 -m http.server

    By default, this will start a server on port 8000.

  3. Visit http://<your-ip-address>:<port>/ on your mobile device

    E.g.

    http://192.168.1.100:8000/

Adding a custom font

  1. Acquire the .woff2 file(s) for your desired font

    I recommend Google Webfonts Helper, because it gives you access to a wide selection of free Google fonts.

  2. Add the font file(s) to your website repo

    As with your CSS, create a fonts/ folder and add your .woff2 files there. In my example, I'd have: 

    fonts/source-sans-3-v19-latin-regular.woff2
  3. Update your global css to include the @font-face

    If you used Google Webfonts Helper, then they will give you the css you need. It should like like this for each font file you'd like to add: 

    @font-face {
  font-display: swap;
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/source-sans-3-v19-latin-regular.woff2") format("woff2");
}

    And using it with some default backups (sans-serif fonts in this example): 

    font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

Using a custom domain

  1. Purchase a domain name

    To do this, you'll want to visit a domain name registrar. I recommend Vercel, for ease of use.

  2. Create the appropriate records in your DNS hosting provider

    Most registrars provide DNS hosting services, allowing you to manage your DNS records easily. The trick is knowing which records to create. Using Vercel helps, as all we need to do is create an ALIAS record that points our apex domain at our GitHub Pages domain.

    ALIAS record:

    • Name: leave this blank
    • Type: ALIAS
    • Value: <username>.github.io
    • TTL: 60 (default)

    We'll actually need one more CNAME record that points our www subdomain at the same IP as our apex domain. This is recommended by GitHub Pages. If you don't add this, you'll run into a warning when you do the DNS check.

    CNAME record:

    • Name: www
    • Type: CNAME
    • Value: <username>.github.io
    • TTL: 60 (default)
  3. Enter your new domain in your GitHub repo settings and do a DNS check
    1. Go to your GitHub repo "Settings" tab
    2. Go to the "Pages" section of you settings
    3. Under "Custom domain", enter your new domain and click "Save"
    4. GitHub will do a DNS check to verify your DNS records

    Allow the DNS records to propagate (~60s). Visit your custom domain to see your GitHub Pages website live!