Session 7: Going Live — Hosting Your Website with Cloudflare Pages

Welcome to Session 7! This is the major milestone session. Today, your website will officially go live on the public internet, accessible to anyone, anywhere in the world, on any device!

Over the next 45 to 60 minutes, you will connect your GitHub repository to Cloudflare Pages and map your custom domain name directly to it.

---

Prerequisites

• A laptop connected to the internet.
• Your website code successfully uploaded to GitHub (Completed in Session 4).
• Your Cloudflare account active with your domain verified (Completed in Session 6).

---

Core Concepts: What is Web Hosting & Cloudflare Pages?

• What is Hosting? Creating a website file on your laptop is like writing a letter on your home computer. Nobody else can read it. "Hosting" is putting that letter on a public billboard (a secure web server in a datacenter) so everyone on the street (the internet) can read it.
• What is Cloudflare Pages? A modern web hosting platform for developers. Instead of renting an expensive server or using an outdated FTP uploader, Cloudflare Pages links directly to your GitHub repository.
• What is CI/CD (Continuous Integration / Continuous Deployment)? This is the ultimate superpower of modern web development. Because Cloudflare is linked to your GitHub account, every single time you save and upload a change to GitHub, Cloudflare automatically rebuilds and updates your live website in seconds!

---

Step-by-Step Guide

Step 1: Connecting Cloudflare to GitHub

Let's tell Cloudflare where our code files are stored.

1. Log into your Cloudflare Dashboard.
2. On the left-hand sidebar menu, click on the tab labeled "Workers & Pages".
3. Click the blue button that says "Create application" (or "Create").
4. At the top of the main pane, click the tab labeled "Pages".
5. Click the blue button: "Connect to Git".
6. A large button saying "Connect GitHub" will appear. Click on it.
7. The GitHub Authorization Popup: A security window from GitHub will open in your browser.
   • Click the green button: "Authorize Cloudflare Pages".
8. Repository Access Selection: GitHub will ask which code repositories Cloudflare is allowed to see.
   • ⚠️ BEST SECURITY PRACTICE: Do not select "All repositories." Instead, click the radio button labeled "Only select repositories".
   • In the dropdown list, search for and check my-first-website (the repo we created in Session 4).
   • Click the green button: "Install & Authorize".
9. The popup window will close, and you will be returned to the Cloudflare screen.

---

Step 2: Deploying Your Webpage

Let's launch the website code live onto Cloudflare's hosting nodes.

1. On the Cloudflare Git Connection list, you should now see your GitHub username and your my-first-website repository listed. Click to select my-first-website.
2. Click the blue button: "Begin setup".
3. Configure your deployment settings:
   • Project name: Leave it as my-first-website.
   • Production branch: Set to main.
   • Framework preset: Click the dropdown and select "None" (since we are hosting raw, clean HTML and CSS code, we don't need any complex compiler frameworks!).
4. Scroll to the bottom of the page and click the blue button: "Save and Deploy".
5. The Deployment Pipeline Screen: Cloudflare will open a live terminal console showing the server build logs. You will see lines like:
   • Initializing build environment...
   • Deploying to Cloudflare's global network...
6. Within 30 seconds, a large green checkmark will appear saying "Success! Your project has been deployed".
7. Click the custom link shown in the box (it will look like my-first-website.pages.dev).
8. Awesome! Your website is now live on the internet! Try opening that link on your smartphone's web browser—it will load perfectly!

---

Step 3: Mapping Your Custom Domain Name

Now, let's connect your personal professional address (like yourname.eu.org or yourname.com) to this Pages project so people can visit your site using your friendly name.

1. At the top of your Cloudflare Pages project success dashboard, click on the tab labeled "Custom Domains".
2. Click the blue button: "Set up a custom domain".
3. In the text box, type your registered domain name exactly (e.g., waqar-rides.eu.org or waqarrides.com).
4. Click "Continue".
5. Automatic DNS Records Generation: Cloudflare will detect that your domain is fully managed by them. It will display a screen saying "We will automatically add these CNAME records to your DNS settings".
6. Click the blue button at the bottom: "Activate domain" (or "Save").
7. The status of your domain will say Initializing for about 2 minutes while Cloudflare generates a free, custom SSL Security Certificate for your address.

Once the status tag transforms into a beautiful green bubble saying Active, your setup is complete!

---

Verification: Did it work?

Let's do the final live verification check:

1. Open a completely blank, new tab in your web browser.
2. Type your custom domain address exactly into the browser's address bar (e.g., waqar-rides.eu.org or waqarrides.com) and press Enter.
3. The Masterpiece Live: Your dark-themed personal booking profile or business card website should load instantly!
4. Look at the left side of the address bar—you should see a beautiful padlock icon, indicating your site is fully encrypted and secured by SSL!

---

What's Next?

Absolutely phenomenal work! You have officially built, coded, registered, configured, and published a live, custom-branded website publicly on the internet starting from absolute scratch. This is a monumental achievement!

But our work isn't done yet. Websites need to grow and evolve. In our final session, Session 8, we will learn how to make instant visual updates to our live site, and show you how to utilize AI as your personal assistant to help you write custom features!