Part 1: The Big Picture — How Everything Works Together

Before diving into the details, let me explain the simple logic behind everything you set up this morning. Think of your blog like a restaurant:

VS Code Your kitchen. This is where you write, edit and create everything. Nobody else sees this. GitHub Your storage & delivery. It stores your files and sends them to the internet automatically. huyenvi.blog Your restaurant front. This is what visitors see when they come to your website.

The flow is always the same: You write in VS Code → You push to GitHub → GitHub updates your live website automatically. That is the entire logic!

Part 2: Visual Studio Code — Your Writing & Design Tool

VS Code (Visual Studio Code) is a free program made by Microsoft. It is like a very smart text editor — similar to Microsoft Word, but designed for building websites and writing code.

What VS Code does for your blog • It lets you write and edit your blog posts • It lets you change the design and colours of your site • It lets you organise all your files in one place • It has a built-in Terminal so you can run commands without switching apps

How VS Code connects to your website: VS Code itself does NOT connect directly to your website. Think of it like this:

The simple chain: VS Code (you edit files here) → Terminal (you run 3 commands) → GitHub (receives your files) → huyenvi.blog (the world sees it)

VS Code is just the place where you make changes. The Terminal (the black command window) is what actually sends your work to GitHub.

💡 Good to know You can open Terminal directly inside VS Code by pressing Ctrl + ` (the key above Tab on the left). This means you never have to leave VS Code!

Part 3: GitHub — Your Storage & Publisher

GitHub is a free service on the internet that stores your website files. When you send your files to GitHub, it automatically builds and publishes your website for the world to see.

Why do we need GitHub? • It stores all your files safely in the cloud • It automatically turns your files into a live website • It keeps a history of every change you ever make (so you can undo mistakes) • It gives you a free web address (huyentrang060996-glitch.github.io) • It works with your custom domain huyenvi.blog

The 3 commands you run every time Every time you want your changes to go live, you run these 3 commands in Terminal. Think of them like packing and shipping a box:

1 git add .: “Pack up all the changes I made” — this collects everything you edited or created 2 git commit -m “description”: “Label the package” — write a short note about what you changed (e.g. new post, fix header) 3 git push …: “Send the package to GitHub” — this uploads everything and your live website updates in 2 minutes