Deploy A Simple Cat Website to Azure 🐱

Saisha Goel — Sun, 30 Mar 2025 20:38:45 +0000

Hey there, coding curious friends!👋
Ever thought about having your very own website on the internet? Today, I'm going to show you how to create a simple cat-themed website and deploy it to the cloud using Azure. Don't worry if these terms sound intimidating – I promise it's easier than trying to give your cat a bath!

Why Create a Cat Website?
Okay, besides the obvious (cats are awesome), this mini-project teaches you three valuable skills:

Basic web development with HTML
Version control using GitHub
Cloud deployment with Azure

Plus, you'll have something cool to show your friends!

What You'll Need

A computer (any operating system works!)
A GitHub account
A free Azure account (Azure for Students if you're eligible)
About 30 minutes of your time
Zero prior coding experience is required!

Step 1: Create Your Cat Website Locally
First, let's create a simple webpage about cats. Open any text editor and copy this code:

<!DOCTYPE html>
<html>
<head>
    <title>All About Cats</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            text-align: center;
        }
        h1 {
            color: #ff6b6b;
        }
        img {
            max-width: 500px;
            border-radius: 10px;
            margin: 20px 0;
        }
        .fact-box {
            background-color: #f9f9f9;
            border-radius: 8px;
            padding: 20px;
            margin: 20px auto;
            max-width: 600px;
            text-align: left;
        }
        .button {
            background-color: #ff6b6b;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>All About Cats</h1>

    <img src="cat.jpg" alt="Cute cat">

    <p>Cats are wonderful pets and great companions!</p>

    <div class="fact-box">
        <h2>Fun Cat Facts</h2>
        <ul>
            <li>Cats sleep for about 13 to 16 hours a day</li>
            <li>Cats have 32 muscles in each ear</li>
            <li>A group of cats is called a "clowder"</li>
        </ul>
    </div>

    <button class="button">Click for a Cat Fact</button>
</body>
</html>

Save this file as index.html on your computer.

Step 2: Add a Cat Image
Find a cute cat picture online (or use your own cat!). Save it as cat.jpg in the same folder as your index.html file. This image will appear on your website.

Step 3: Test Your Website Locally
Double-click your index.html file. It should open in your web browser, looking something like the screenshot I've shared below. If something doesn't look right, check that:

Your cat image is named exactly cat.jpg
Both files are in the same folder
You saved the HTML code exactly as shown

Step 4: Create a GitHub Repository
GitHub is like Google Drive but for code. Here's how to create your repository:

Go to github.com and sign up/sign in
Click the "+" icon in the top-right corner and select "New repository"
Name it something like "simple-cat-website"
Make sure it's set to "Public"
Click "Create repository"

Step 5: Upload Your Files to GitHub
On your new repository page:

Click "uploading an existing file" link
Drag and drop your index.html and cat.jpg files
Scroll down and click "Commit changes"

Congratulations! Your cat website code is now on GitHub! 🎉

Step 6: Deploy to Azure Static Web Apps
Now for the exciting part – putting your website on the cloud:

Go to portal.azure.com and sign in
Click "Create a resource" (the + icon in the left menu)
Search for "Static Web App" and select it
Click "Create"

Fill in the basics:

Subscription: Your subscription(Azure for Students)
Resource Group: Click "Create new" and name it "cat-website-rg"
Name: Give your app a name like "my-amazing-cat-site"
Hosting Plan type: Free
Region: Choose the one closest to you

For the GitHub section:

Sign in to your GitHub account when prompted
Organization: Your GitHub username
Repository: "simple-cat-website" (the one you just created)
Branch: "main"

For Build details:

Build Preset: Select "HTML"
App location: "/"
Output location: "/"
Leave API location empty

Click "Review + create" and then "Create"
Azure will now work its magic! This takes about 2-3 minutes.

Step 7: View Your Live Cat Website!

Once deployment is complete, click "Go to resource"
On the Overview page, find the URL (something like https://thankful-wave-0d1291f10.6.azurestaticapps.net/)
Click the URL and... TADA! Your cat website is LIVE on the internet! 🚀

What Just Happened?
You just:

Created a website with HTML and CSS
Stored your code on GitHub (like professional developers do!)
Deployed your site to Microsoft's Azure cloud
Created a real website anyone in the world can visit

Behind the scenes, Azure set up something called "GitHub Actions" which automatically deploys your website whenever you update your code. So cool, right?

Troubleshooting Tips
If your site doesn't appear or the cat image is missing:

Check that your image is named exactly cat.jpg (case sensitive!)
Make sure you uploaded both files to GitHub
Give the deployment a few minutes to complete
Try clearing your browser cache (Ctrl+F5)

Level Up Your Cat Website
Now that you have a live site, why not make it even better?

Add more cat pictures
Add a section about different cat breeds
Create a gallery page
Add some JavaScript to make your "Click for a Cat Fact" button actually show random facts

Why This Matters for Your Future
Even this simple project teaches you concepts used by professional developers every day:

Version control with GitHub
Cloud deployment pipelines
Web hosting
Basic HTML and CSS

These are foundational skills that apply to almost any tech career and they look great on a resume or portfolio!

Share Your Creation!
Now that your cat website is live, share the URL with your friends, family and fellow classmates. Maybe even with your cat (though they might be a harsh critic😂).
Have you successfully deployed your cat website? Drop your site URL in the comments and let me know what you learned along the way.
Hope you enjoyed this tutorial!

Connect with me✨

Happy coding (and cat appreciating)! 😺

DEV Community: Saisha Goel

Deploy A Simple Cat Website to Azure 🐱