At most one email a week. Unfollow anytime with one click.
Transcript
The full narration of this video. The current sentence is highlighted while the video plays; click any sentence to jump there.
Show transcript
Introduction
Hi, and welcome to the last episode of the Building a Website session. The Sunset Coffee website is complete, but it's still stored on Raka's laptop, and customers can't open it yet. In this episode we check the website's readiness, publish it for free, test it on a real phone, and learn how to update it safely.
Step 1: What publishing a website means
Right now the Sunset Coffee website only exists on Raka's laptop. Publishing means copying the website files to a server, a computer that's always on and connected to the internet. The place that keeps your website is called hosting. The Sunset Coffee website only contains page, style, script, and image files. A website like this is called a static website, and it can be published for free on a static hosting service such as GitHub Pages or Netlify. There are two address options. The service's default address is our name followed by the hosting service's name. Your own domain is a shorter, more distinctive name, such as sunsetcoffee dot id. The default address is free. Your own domain is paid yearly, and prices vary, so check directly with a domain provider. The advice for Laras: start now with the free default address. Your own domain can be added later without rebuilding the website.
Step 2: Readiness check before going live
Before going live, Raka asks for a full check: links, typos, prices, the page title and description, personal data, and files that must not go live. As usual, report first. Claude reads all three website files from start to finish. Then Claude searches every file for phone number, email, and password patterns. It's clean. The customer numbers that used to be in the testimonials were removed in the previous session. The report: links, spelling, prices, and personal data are fine. Two things aren't ready: there's no page description for Google yet, and internal files such as CLAUDE.md, the materials folder, and the list of old photo names shouldn't go live. Raka asks for two fixes: add a page title and description, then prepare a folder called publish that holds only the website files. Look at the change box. The old default title, Document, is replaced with a clear title. This title appears in the browser tab and in Google search results. Below it is a short description with the products and opening hours. Raka reads the description, makes sure it's factually correct, and chooses Yes. Claude copies the page, style, and script files and the images folder into the publish folder, after Raka approves the permission box. CLAUDE.md, the materials folder, and internal notes stay on the laptop. This publish folder is what gets uploaded. To make it easy to remember, split the files into three groups. Only the files visitors need go live: the page, style, script, and images. Work files stay on the laptop: CLAUDE.md, the materials folder with the original photos, and internal notes. Visitors don't need them. And some things must never be in the project folder at all: passwords, bank details, and customer data. If they're never in the folder, they can't possibly be uploaded.
Step 3: Publishing on free static hosting
There are several free static hosting services, such as GitHub Pages and Netlify. How to choose: first, read the free plan terms on the official page, because usage limits can change. Second, pick the upload method you're most comfortable with. Some only need a web page; others use git. Claude Code can help with the git part in the terminal. Third, make sure the official guide is easy to follow, because you'll open it often when updating the website. Here's the big picture of publishing on a static hosting service. First, create an account with the service you chose. Do it yourself in the browser, and never give your account password to Claude. Second, create a new project. Some services call it a repository: a place that stores the project files along with their version history. Third, upload the publish folder. Some services accept a folder through a web page; others pull the files through git. Fourth, wait until the website address is active. The exact steps differ between services and change often, so always open the official guide of the service you chose. Raka chooses GitHub Pages, and has already created an account and a repository called Sunset Coffee in the browser. Then Raka asks Claude to explain the next steps, and to be honest about any part that might change. Claude splits the work clearly. The terminal part, sending the publish folder's contents with git, is something Claude can help with. The settings on the GitHub site are done by Raka, following the official guide because the menus can change. Claude prepares the git command to send the publish folder's contents to the repository. Look at the permission box: the files will be sent to an online repository that the public can see. This is the most important permission box to read in the whole project. Because the publish folder is already clean of internal files, Raka chooses Yes. The files are sent. Claude gives the final steps to do on the GitHub site: open the Pages settings, choose the source, and save. If the menus on your screen are different, follow the official guide.
Step 4: Going live and testing on a real phone
A few minutes later, the website address is active. Raka opens it on a real phone, deliberately using mobile data instead of Wi-Fi. The page opens fast, thanks to the photos we shrank. The photos, menu, and open badge all show correctly. There's also a small padlock next to the address, the sign of a secure connection that hosting services usually provide. Raka tries the form with a small order. The total and shipping are right, and WhatsApp opens with the message filled in. Raka cancels sending it, because this is only a test. Finally, the hamburger menu is opened and closed. Everything passes. The Sunset Coffee website is officially live. Raka sends the website address to Laras and asks Laras to try it on a phone, including the order form. Laras is delighted, tries placing an order, and it goes straight to the shop's WhatsApp. Laras adds the website address right away to the Instagram bio and the WhatsApp Business profile, where customers come from most often.
Step 5: Updating the website safely
A website that's live will keep changing: prices go up, new menu items, or seasonal promos. The cycle is always the same. First, make the change on the laptop with Claude Code, and update CLAUDE.md if the data changes. Second, check it first in the browser and phone mode, using the checklist we already have. Third, save a version with a clear note, so it's easy to go back if something goes wrong. Fourth, republish the same way, then test once more on a phone. Never skip the check step, because mistakes on a live website are seen by customers right away. For example, Laras wants a promo banner for weekend hampers with free delivery within the city. Raka writes one instruction that follows the cycle: add it, check in phone mode, save a version, then republish. Claude does the work and reports three points: the promo banner is added, it's been checked on the laptop and at phone width, and a version is saved with a clear note. Raka still opens the page on the laptop to see it firsthand. The permission box for sending to the online repository appears again. Raka reads it as carefully as the first time, then chooses Yes. A few minutes later the promo banner appears on the website. Raka opens it on a phone as a final check. Updating the website is now as easy as giving one clear instruction. Let's look at what this session achieved. We have one business website that's live online and anyone can open. That website has four features: an open or closed badge, a floating WhatsApp button, an order form, and a hamburger menu on phones. The hosting cost is zero rupiah with a free service. Free plan terms can change, so check your service's official page. And all of it was built without typing code yourself. The screens in this video are simulations; apply the same steps to your own business.
Done!
That wraps up the Building a Website session. We checked the website's readiness, kept internal files out, published it on free static hosting, tested it on a real phone, and learned the update cycle. In the next episode we start the Automation with Claude Code session, beginning with tidying hundreds of files at once for repetitive work. See you there!
Practice exercises
Try these on your own after watching to lock in what you learned.
Ask Claude to check your website's readiness before it goes live
Pick one free static hosting service and follow its official guide until you're live
Open your website on a real phone and run through the checklist
Ask the class material
Type a question or keyword; we find the part of this episode that explains it and jump the video there.
My notes
Notes are saved with the current video time and are only visible to you.
Questions & answers
Stuck on a step? Ask here; the instructor and other learners can answer.
No questions yet.
Your instructor
Cerdas Inovasi Digital Team
Software developers, BIM & 3D engineers, and AI practitioners
52 video classes1,277 episodes
We build software, BIM models, games and AI automations for clients every day, and turn that hands-on work into step-by-step classes: every step is shown on screen and comes with a PDF guide you can keep.
