GitHub Tutorial

Git provides tools to track changes, collaborate, and manage different versions of a project. Below are the core concepts I learned:

What is Git?

Git is a version control system used to track changes in code.

Basic Commands

git status
git add .
git commit
git push

Core Git Concepts

Repository

A repository is a project folder tracked by Git.
It stores all files and the full history of changes.
Example: my Astro website folder is a repository.

Commit

A commit is a snapshot of the project at a specific point in time.
It saves the current state of files with a message.
Used to track changes and revert to previous versions.

Staging Area

The staging area is where you select changes before committing.
It allows you to choose exactly what goes into a commit.
Example: git add . prepares files for the next commit.

Branch

A branch is a separate version of the project.
Used to develop features without affecting the main version.
Example: creating a branch to test changes safely.

Merge

Merging combines changes from one branch into another.
Usually used to bring feature changes into the main branch.
Can sometimes cause merge conflicts that must be resolved.

History

Git keeps a full history of all commits.
You can view it using git log.
This allows tracking and debugging changes over time.

Workflow

Edit → Add → Commit → Push → Deploy

Setting Up an Astro Project with Node.js

This tutorial explains how to set up an Astro project locally using Node.js and npm, install the required dependencies, run the development server, and test live updates using hot reload.

Step 1: Install Node.js

First, install Node.js on your computer. Installing Node.js also installs npm, which is the package manager used to install and manage project dependencies.

Step 2: Open the Project Folder

Open the terminal and move into the project folder:

cd max-astro-site

Step 3: Install Project Dependencies

Run the following command:

npm install

This installs all required packages for the project and creates the node_modules folder.

Step 4: Run the Development Server

Start the local development server with:

npm run dev

This runs the site locally and provides a browser link, usually:

http://localhost:4321

Step 5: View the Site in the Browser

Open http://localhost:4321 in the browser to view the local version of the website.

Step 6: Test Hot Reload

Make a small change in a file such as src/pages/index.astro, then save the file. The browser updates automatically without needing to restart the server.

Key Concepts

Node.js: Allows JavaScript tools and frameworks to run locally.
npm: A package manager used to install project dependencies.
node_modules: The folder where installed packages are stored.
Development server: Runs the website locally for testing.
Hot reload: Automatically updates the browser when files are changed.

Note:

Workflow Summary

Install Node.js → Open project → Run npm install → Run npm run dev → Open localhost → Edit and test changes.