Setting Up a Local Server

 

1. Setting Up a Local Server

Since you're loading local files (Markdown, YAML, etc.), a regular file:// URL in the browser won't work due to CORS (Cross-Origin Resource Sharing) restrictions. You'll need a local server to serve your files.

You can use Node.js, Python, or even VSCode’s Live Server. I'll show you three methods depending on what tools you're comfortable with.

---

2. Using a Simple Local Server

A. Option 1: Using Node.js (http-server)

If you have Node.js installed, the easiest way is to use the http-server package.

1. Install http-server globally via npm:

   npm install -g http-server
   

2. Navigate to your project directory:

   cd /path/to/your/blog-website
   

3. Run the server:

   http-server
   

4. Open your browser and go to http://localhost:8080. Your blog should now be up and running locally! 🎉

---

B. Option 2: Using Python (Built-in HTTP Server)

If you have Python installed, you can use the built-in HTTP server with a single command:

1. Navigate to your project folder:

   cd /path/to/your/blog-website
   

2. Run the server:

   • For Python 3:

     python -m http.server 8000
     

   • For Python 2:

     python -m SimpleHTTPServer 8000
     

3. Open your browser and go to http://localhost:8000.

---

C. Option 3: Using VSCode Live Server Extension

If you're using VSCode, there's a super easy option using the Live Server extension.

1. Install the Live Server extension in VSCode:

   • Search for "Live Server" in the extensions tab and install it.

2. Open your project folder in VSCode.

3. Right-click on index.html and select "Open with Live Server".

4. Your browser will automatically open the site on http://127.0.0.1:5500/.

---

3. Summary

• Node.js: Run http-server for a fast local server.
• Python: Use python -m http.server 8000 for a quick server.
• VSCode: Use the Live Server extension for instant setup.

Live Reload for Node.js

👾 Understood! You're using Node.js with http-server. To achieve live reload on your website, we need to add a tool that watches for file changes and automatically refreshes the browser when changes are detected.

1. Install live-server (Live Reload for Node.js)

Instead of http-server, we can use live-server, which provides built-in live reloading functionality. Here's how to set it up:

Step 1: Install live-server globally

If you don’t already have live-server installed, install it globally using npm:

npm install -g live-server

Step 2: Run the server

Navigate to your project directory, and then run live-server:

cd /path/to/your/blog-website
live-server

This will:

• Serve your website on localhost (by default on http://127.0.0.1:8080).
• Automatically reload the page whenever you save changes to any of your files (HTML, JavaScript, CSS, etc.).

Step 3: Open the site

Once the server is running, your browser will automatically open the site, and the page will refresh automatically on file changes.

---

2. Benefits of Using live-server

• Automatic Reloading: No need to manually refresh the browser whenever you make changes to your code.
• Instant Feedback: Saves development time by providing instant updates.

---

3. Switch from http-server to live-server

• If you’re used to using http-server, switching to live-server is easy. Just run the above command and you're set!