Go Live —
Uploading Your Site to a Web Server

Quick Recap

After Part 9, the café SOEL website reached "production quality." The HTML validator came back clean, Lighthouse scores looked healthy, and every image was optimized. All that's left is to place those finished files somewhere the entire internet can access them.

There's almost no new code to write in this part. Instead, we'll focus on understanding how web hosting works and walking through the actual upload process. If this is your first time deploying a site, it might feel a little nerve-wracking — but the steps are surprisingly straightforward. Let's do this together.

Goals for This Part

How Websites Go Live — Three Key Players

Throughout this series, we've been building the site on our own computers. Opening index.html in a browser shows it just fine — but only to us. Nobody else on the internet can reach those files.

"Publishing" a website means placing your files on a computer that's always online and always ready to respond to visitors. That computer is called a server. Then you give it an address so people can find it. Three things make this happen.

Server — Where Your Files Live

A server is a computer that stores your website files (HTML, CSS, images) and sends them to anyone who asks. It runs 24/7, 365 days a year, responding to requests from all over the world.

Running your own server is expensive and complex, so most people rent space from a hosting provider. This is true for personal sites and professional projects alike. You pay a monthly fee and get a reliable slice of server space in return.

Domain — Your Site's Address

A domain is the human-readable address — something like cafe-soel.com. Behind the scenes, every server has an IP address (a string of numbers like 203.0.113.50), but nobody wants to type that into a browser. A domain gives your site a name people can actually remember.

You purchase a domain through a domain registrar. Most hosting providers offer domain registration as part of their plans, making it easy to get both in one place.

DNS — The Phone Book That Connects Them

DNS (Domain Name System) is the system that maps a domain name to a server's IP address. Think of it as a phone book: you look up a name (domain) and get back a number (IP address).

When you type cafe-soel.com into your browser, a DNS lookup happens instantly behind the scenes — "That domain lives on server 203.0.113.50" — and the server sends back the index.html file. This entire process takes fractions of a second.

Choosing a Hosting Provider

There are many hosting providers out there. The right one depends on your budget, location, and preferences. For readers in Japan, here are four popular options. For international readers, providers like Bluehost, SiteGround, A2 Hosting, and Hostinger serve similar needs — the principles in this tutorial apply regardless of which provider you pick.

All of these support free SSL (HTTPS). Pricing and plans change over time, so check each provider's current offerings before signing up.

Once you've signed up with a provider and secured a domain (follow each service's own guides for those steps), it's time for the fun part — uploading your files.

Pre-Upload Check — Make Sure Your Files Are Ready

Before uploading anything, let's confirm that your local project folder has everything it needs. If you completed all the steps through Part 9, your folder should look like this:

my-website/
├── index.html
├── css/
│   └── style.css
└── img/
    ├── hero.webp
    ├── concept.webp
    ├── menu-coffee.webp
    ├── menu-latte.webp
    ├── menu-cake.webp
    ├── menu-sandwich.webp
    ├── interior-01.webp
    ├── interior-02.webp
    ├── exterior.webp
    ├── logo.png
    ├── ogp.jpg
    └── favicon.svg
    

The images are the WebP versions you created in Part 9. The logo (.png), OGP image (.jpg), and favicon (.svg) stay in their original formats. If your old .jpg files are still in the img/ folder, that's fine — but leaving them out keeps things tidy.

What Is FTP — Delivering Files to Your Server

FTP (File Transfer Protocol) is the standard method for transferring files from your computer to a server. The name says it all: it's a protocol — an agreed-upon set of rules — for moving files between two machines.

Think of it like a delivery service. Your computer is the sender, the server is the destination, and an FTP client is the delivery driver carrying your packages (files) from one to the other.

In practice, you'll typically see FTPS or SFTP, which are encrypted versions of FTP. They work exactly the same way but protect your data in transit so nobody can peek at your files or credentials. Most hosting providers support these by default.

Uploading with FileZilla

We'll use FileZilla, a free, open-source FTP client that runs on Windows, Mac, and Linux. It's one of the most widely used FTP tools in the world — simple enough for beginners, powerful enough for professionals.

Host      : ftp.example.com  (listed in your hosting control panel)
Username  : your-username    (set during hosting signup)
Password  : your-password    (set during hosting signup)
Port      : 21               (for FTPS — use 22 for SFTP)

Different providers label this differently — look for "FTP Accounts," "FTP Settings," or "Server Information" in the control panel. It's always there.

Once connected, you'll see a split-panel view — your local files on the left, the server on the right.

With only a dozen or so files, the transfer finishes in seconds. When the status bar at the bottom shows "Transfer complete," you're done.

public_html/          ← public directory
├── index.html        ← directly at root
├── css/
│   └── style.css
└── img/
    ├── hero.webp
    ├── concept.webp
    └── ...

public_html/
└── my-website/      ← extra folder wrapping everything
    ├── index.html
    ├── css/
    └── img/

SSL (HTTPS) — Securing Your Connection

Before you open your browser and check, there's one more thing to confirm: SSL.

SSL (Secure Sockets Layer) encrypts the communication between a visitor's browser and your server. When SSL is active, your URL starts with https:// and the browser shows a padlock icon in the address bar.

You might wonder, "Does a café website really need encryption?" The answer today is an unconditional yes. Google gives a slight ranking boost to HTTPS sites, and browsers display a "Not Secure" warning on sites without it. For a business site, that warning alone can scare visitors away.

The hosting providers we mentioned all offer free SSL through services like Let's Encrypt. Look for "SSL Settings" or "Free SSL" in your control panel and enable it for your domain. In most cases, it's a single button click.

You're Live — Open Your Browser and Check

Files uploaded. SSL enabled. Now for the moment you've been working toward.

Type your domain into the browser — https://your-domain.com — and hit Enter.

The café SOEL website that has lived on your local machine for nine parts is now visible to anyone, anywhere, at your very own URL.

Post-Launch Checklist

Take a moment to enjoy it, then run through these checks:

If images are missing or CSS isn't loading, the cause is almost always a file path mismatch. Go back to FileZilla and double-check that your server's folder structure matches your local one exactly.

Verify Your OGP Tags

We set up OGP (Open Graph Protocol) tags in Part 8 to control how the site looks when shared on social media. Now that the site is live, let's confirm they're working.

If the image doesn't appear, check whether your og:image is still using a relative path. After going live, switching to an absolute URL is more reliable:

<!-- Before (relative path) -->
<meta property="og:image" content="img/ogp.jpg">

<!-- After (absolute URL) -->
<meta property="og:image" content="https://your-domain.com/img/ogp.jpg">

After making this change locally, simply re-upload index.html through FileZilla.

Updating and Backing Up After Launch

A launched site isn't a finished site. Text corrections, photo swaps, seasonal updates — changes are inevitable. Here's the workflow you'll follow from now on.

The Update Workflow

Keeping Backups

Always keep a copy of your complete project folder somewhere safe — a USB drive, Google Drive, Dropbox, anywhere. Before making significant changes, duplicating the folder with a date suffix (like my-website-2025-06-15) gives you a simple way to roll back if needed.

Congratulations — Looking Back at the Journey

We started in Part 1 with nothing but a text editor and a "Hello World!" on a blank page. And now, ten parts later, you've built and published a complete, responsive, SEO-optimized, accessibility-conscious website — with your own hands.

Let's take a moment to appreciate everything you've learned. In Part 1, you set up your environment. Part 2 taught you the skeleton of HTML. Part 3 filled it with real content. Part 4 introduced CSS fundamentals. Part 5 brought Flexbox layouts. Part 6 added CSS Grid and responsive design. Part 7 polished everything with fonts, transitions, and hover effects. Part 8 tackled SEO and structured data. Part 9 refined accessibility and performance. And today, you put it all online for the world to see.

HTML structure, CSS styling, responsive layouts, SEO, accessibility, performance optimization, and deployment — you've experienced the entire lifecycle of building a website, start to finish. That end-to-end understanding is something no single tutorial can give you. You earned it by doing the work.

Of course, this series is just the beginning. JavaScript interactions, CSS animations, design customization — there's a whole world ahead. The three bonus parts explore those next steps, so pick them up whenever you're ready.

And don't stop here. Change the colors. Add a new section. Make the café SOEL site your own — or use what you've learned to build something entirely different. Every hour you spend writing code makes you better.

Thank you for sticking with all ten parts. I hope the site you built finds its way to someone who appreciates it.