DEV Community: Jeannie

☁️ How to Host Your Side Projects for $0: The Ultimate GCP Free Tier Guide

Jeannie — Sat, 13 Dec 2025 18:53:49 +0000

How-to guide for configuring regions, disk types, and network tiers to build a forever-free Linux server.

Hello, Dev Community! 👋

I'm excited to kick off a new series where I’ll be building an AI-Powered News & Insight App. But before we dive into "Vibe Coding," LLMs, and Python scripts, we need a home for our application.

While tools like Vercel and Replit are fantastic, sometimes you just need a raw Linux server (VM) to have full control over your environment—whether it's for hosting a Docker container, running a cron job, or just experimenting with Linux.

In this article, I’ll walk you through how to provision a Google Cloud Platform (GCP) Compute Engine instance that stays within the "Always Free" tier limits. I'll share exactly which settings to tweak to avoid those surprise bills! 💸

🛠️ Step-by-Step Setup

Prerequisites

A Google Cloud Platform account with billing enabled, but it won't incurred cost because it's covered by free tier quota.

Step 1: Machine Configuration

Navigate to Compute Engine > Create an instance.

The "Always Free" tier has strict requirements regarding location and hardware.

Region: Select us-west1, us-east1, or us-central1.
- My Choice: I picked us-west1 (Oregon) because it is physically nearer to my location in Asia compared to the other free options, offering slightly better latency.
Machine Type: Select e2-micro (2 vCPU, 1 core, 1 GB memory).
- Note: This is a shared-core machine, perfect for low-traffic apps or development environments.

Step 2: OS and Storage (Crucial!)

This is where many people accidentally incur costs. By default, GCP might select a "Balanced" disk, which is not free.

Click Change under "Boot disk".
Boot disk type: Change this to Standard persistent disk.
Size: Set this to 30 GB.
- Why? You get 30GB of Standard persistent disk usage per month for free.

Step 3: Data Protection & Observability

We need to strip away the paid add-ons.

Backups: In the "Data protection" section, select No backups. Backups and snapshots cost extra.
Observability: In the "Observability" section, uncheck "Install Ops Agent".
- Reason: The Ops Agent consumes precious RAM. On a 1GB e2-micro instance, we need every megabyte for our application.

Step 4: Networking

Finally, let's configure traffic and network pricing.

Firewall: Check Allow HTTP traffic and Allow HTTPS traffic so we can access our web apps later.
Network Interface: Expand the "Network interfaces" section and click on nic0.
Network Service Tier: Change this from Premium to Standard.
- Pro Tip: Premium tier routes traffic over Google's global backbone (faster but costlier). Standard tier uses the public internet (free/cheaper for low usage).

📊 Quick Reference: The "Golden Config" Decision Table

Here is a summary of the choices I made versus the defaults, to help you understand why we configured it this way.

Configuration	Default GCP Setting (Costly 💸)	Our Free Tier Choice (Free 🆓)	Reason
Region	Often defaults to local region	`us-west1` (or `us-east1`/`central1`)	Only specific US regions are Free Tier eligible.
Machine Type	e2-medium	e2-micro	The specific instance type covered by the program.
Disk Type	Balanced Persistent Disk	Standard Persistent Disk	Only "Standard" is covered by the 30GB free allowance.
Network Tier	Premium	Standard	Premium costs extra per GB; Standard is budget-friendly.
Observability	Ops Agent Enabled	Disabled	Saves RAM resources on the small `e2-micro` instance.

✅ Verification

Before hitting "Create," look at the Monthly Estimate on the right side of the screen (highlighted in green rectangle).

It should look remarkably clean, listing only:

2 vCPU + 1 GB memory
30 GB standard persistent disk

If you see anything else (like "Snapshot schedule" or "Ops Agent"), go back and double-check the steps above.

Once verified, click Create! 🚀

🔮 What's Next?

Congratulations! You now have a running Linux server in the cloud for $0/month.

I will be using this VM as the foundation for my upcoming side projects, specifically the AI News & Insight App I mentioned earlier. In the next few posts, I'll be sharing how I:

Set up the environment on this VM.
Use "Vibe Coding" tools to generate the application code.
Deploy the app to this very server.

Stay tuned for the next part of this series! If you have any tips for optimizing free-tier VMs, let me know in the comments below! 👇

💡 My First Look: Docker's New MCP Catalog & Toolkit for AI Developers! 🐳

Jeannie — Thu, 24 Apr 2025 18:08:35 +0000

Hey fellow cloud enthusiasts! 👋

Last week, Docker dropped some exciting news that caught my eye: the announcement of their MCP Catalog and Toolkit! I immediately dived in and understand what this means for developers working with AI tools.

This post is my "first look" exploration – sharing what I've gathered and my initial thoughts on its potential impact. Let's journey through this together! 🚀

TLDR; ✅

Docker is launching a centralized MCP Catalog for discovering and distributing AI tools.

The MCP Toolkit (a Docker Desktop extension) aims to simplify managing, authenticating, and running these tools locally.

This initiative focuses on improving developer experience, security, and standardization in the AI tooling space.

So, What's MCP Anyway?
My First Look: The MCP Catalog
My First Look: The MCP Toolkit
- Toolkit vs. Traditional Methods
What This Could Mean for AI Development
How to Explore Yourself
Final Thoughts & Your Turn!

So, What's MCP Anyway? 🤔

Before diving into Docker's new toys, let's quickly touch on MCP, the Model Context Protocol. Think of it as a standardized way for AI models and specialized tools (like code interpreters, data analyzers, search functions, etc.) to communicate and share context securely. As AI agents become more sophisticated, needing to use multiple tools, managing these interactions becomes crucial. MCP aims to provide that common language.

My First Look: The MCP Catalog 🗂️

(Your AI Tool Hub!)

Docker announced the upcoming MCP Catalog, and the analogy that springs to mind is Docker Hub, but for MCP tools.

Purpose: The core idea seems to be creating a centralized hub for discovering, sharing, and managing MCP-compatible tools. Much like package managers (npm, pip) or Docker Hub itself revolutionized software distribution, this catalog aims to do the same for the growing ecosystem of AI tools.
Benefits:
- Discovery: For developers (like us!), it promises a single place to find and evaluate verified MCP tools, saving time hunting through scattered resources. 🕵️‍♀️
- Distribution: For tool authors, it offers a dedicated channel to increase the visibility and reach of their creations. 📢
- Containerization: Leveraging Docker's strengths, these tools can be packaged with their dependencies, ensuring consistency. 📦
- Security: Docker emphasizes security features like potential credential management (centralized & encrypted) and adherence to zero-trust principles (least privilege access, audit trails). This is HUGE for building trustworthy AI applications. 🔒

It looks like a significant step towards bringing order and trust to the burgeoning world of AI components.

My First Look: The MCP Toolkit 🛠️

(Your Local AI Gateway!)

Complementing the Catalog is the MCP Toolkit, delivered as a Docker Desktop Extension. I see this as the local management layer – the control panel on your machine.

Role: It acts as a "Gateway MCP Server" on your local machine. Instead of running multiple MCP tools directly with potentially broad permissions, the Toolkit provides a managed, secure interface.
Benefits:
- Simplified Authentication: Handles credential management (built-in, OAuth) for various tools, making it easier to connect securely and revoke access centrally. No more juggling API keys in multiple places! 🔑
- Dynamic Tool Exposure: Allows you to easily enable or disable specific tools (via toggle switches in the extension UI) and exposes only the enabled ones to compatible clients. ✨
- Resource Management: Offers built-in memory capabilities.
- Isolation: Provides network and disk isolation, enhancing security by limiting the tool's access to your host system. 🛡️

Docker Toolkit Installation:

Tools page to enable or disable tools with toggle switch:

Clients page to connect to existing clients on your laptop:

Toolkit vs. Traditional Methods

How does this compare to current practices? Let's break it down:

Feature	Docker MCP Toolkit Approach	Traditional Approach (e.g., npx, manual servers)	Benefit of Toolkit
Execution	Managed execution within Docker Desktop	Direct execution (e.g., `npx`, `uvx`)	Network/disk isolation, controlled permissions
Configuration	Centralized via Extension UI	Manual config per tool/server	Reduces manual error, saves time ⏱️
Authentication	Built-in credential store, OAuth management	Manual key handling per tool	Easier & more secure auth, simple revocation
Discovery	Integrates with MCP Catalog	Manual searching	Streamlined discovery
Management	Centralized enable/disable, updates via Docker	Decentralized, manual updates/management	Simplified oversight, easier lifecycle management
Host Access	Isolated, least privilege principle	Potentially full host access	Enhanced security 🔒
Setup Complexity	Potentially simpler via Extension	Can be complex, error-prone	Lower barrier to entry, faster setup

This approach seems geared towards significantly reducing the friction and security concerns associated with integrating multiple AI tools into development workflows.

What This Could Mean for AI Development 🌍

My initial take? This could be a significant step forward:

Standardization: Pushing towards more standardized ways to package, distribute, and interact with AI tools.
Improved Developer Experience: Reducing the setup and management overhead allows developers to focus more on building innovative AI applications.
Enhanced Security: Addressing security concerns head-on with isolation and centralized credential management is crucial for enterprise adoption.
Accelerated Innovation: A thriving ecosystem facilitated by the Catalog could lead to faster development and adoption of new AI capabilities.

Of course, the success will depend on adoption by both tool creators and developers, the quality and variety of tools in the catalog, and how seamlessly the Toolkit integrates into real-world workflows.

How to Explore Yourself 🧭

Want to check it out?

🐳 Docker MCP Catalog:

https://hub.docker.com/u/mcp
(Keep an eye on this as it populates!)

🐳 Docker MCP Toolkit:

https://open.docker.com/extensions/marketplace?extensionId=docker/labs-ai-tools-for-devs
(Install it via Docker Desktop)

Final Thoughts & Your Turn! 🗣️

Docker's move into the MCP space with the Catalog and Toolkit feels like a natural extension of their mission to simplify developer lives. By tackling discovery, management, and security for AI tools, they're addressing real pain points I've started to feel as I experiment more with agentic AI.

I'm genuinely excited to see how this evolves, which tools become available, and how the community embraces it. It feels like a step towards making sophisticated AI integration more accessible and secure.

But what do you think?

Are you excited about the MCP Catalog and Toolkit?
What challenges do you currently face when working with AI tools?
Are there specific MCP tools you'd love to see in the Catalog?

Let me know your thoughts in the comments below! Let's discuss! 👇 And if you found this exploration helpful, consider following for more tech deep dives and learning journeys!

✨ JAMstack Blogging Made Easy: Nuxt.js, Sanity.io & Cloudflare Pages Explained

Jeannie — Tue, 22 Apr 2025 11:51:07 +0000

Hey fellow cloud enthusiasts! 👋 Ever wanted to build a fast, modern blog using some of the coolest technologies out there?

I recently embarked on a journey to do just that, combining the power of Nuxt.js for the frontend, Sanity.io as a headless CMS, and Cloudflare Pages for seamless deployment.

Why this stack? It offers an amazing developer experience, incredible flexibility, and blazing-fast performance. But like any real-world project, the path wasn't always straight! 😉

In this post, I'll share my step-by-step process, including the inevitable troubleshooting moments (especially navigating Nuxt 3 updates!), hoping it helps you learn and maybe even inspire your next project.

(Heads up: The specific commands and steps worked for Nuxt.js v3.16.2 and Sanity.io v3.85.1. Future versions might require adjustments due to potential changes in dependencies.)

📌 Key Takeaways:

Understand the roles of Nuxt.js, Sanity.io, and Cloudflare Pages in a modern web JAMstack.

Learn how to set up and connect Sanity.io (headless CMS) with a Nuxt.js frontend.

See practical examples of fetching and displaying data using GROQ and Portable Text.

Walk through deploying a Nuxt application globally via Cloudflare Pages.

Gain insights from real troubleshooting steps encountered during development.

📜 Table of Contents:

Why This Tech Stack? (Nuxt + Sanity + Cloudflare)
Part 1: Setting Up Your Content Backend with Sanity.io
Part 2: Building the Blog Frontend with Nuxt.js
Part 3: Connecting Nuxt.js to Sanity & Displaying Posts (incl. Troubleshooting!)
Part 4: Deploying to the World with Cloudflare Pages
Bonus: Understanding GROQ & Nuxt DevTools
Wrapping Up & Your Turn!

Let's dive in!

Why This Tech Stack? (Nuxt + Sanity + Cloudflare)

Before we jump into the code, let's briefly touch upon why these tools work so well together. We're essentially building a 3-tier application:

Presentation Tier (Frontend): What the user sees and interacts with. We're using Nuxt.js, a powerful and intuitive framework built on Vue.js, known for features like server-side rendering (SSR), static site generation (SSG), file-system routing, and auto-imports, which simplify development.
Logic Tier (Processing): Handles the business logic. In our case, Sanity.io handles much of this through its APIs and query language (GROQ).
Data Tier (Storage): Where the content lives. Sanity.io acts as our headless Content Management System (CMS), providing a structured content platform hosted in the cloud. It gives us a customizable editing interface (Sanity Studio) and APIs to fetch content.

Benefits:

Decoupled Architecture: Frontend and backend are separate, allowing independent development, scaling, and technology choices (JAMstack principles!).
Developer Experience: Nuxt and Sanity are designed to be developer-friendly.
Content Flexibility: Sanity's structured content approach is highly adaptable.
Performance & Scalability: Nuxt can generate static sites or use SSR for speed, while Cloudflare Pages provides global CDN deployment.

Here's a simplified view of the architecture:

Part 1: Setting Up Your Content Backend with Sanity.io

First, we need a place to store and manage our blog posts. That's where Sanity.io comes in.

Step 1: Install Sanity Locally

This command scaffolds a new Sanity project, setting up the Sanity Studio (your content editing interface) and configuration files.

npx sanity init

Follow the prompts to log in or create a Sanity account, choose a project template (like 'Blog'), and configure dataset access.

Step 2: Run Local Dev Server

To test the Sanity Studio locally:

npx sanity dev

Note: You'll likely need to log in via the browser window that opens. This local dev server (localhost:3333 by default) is private to your authenticated user.

For production builds (though we'll rely on the hosted Sanity service):

# Build the static Sanity Studio files
sanity build
# Start a local server for the built studio
sanity start

Step 3: Test Access and Add Content

Navigate to http://localhost:3333 in your browser. You should see the Sanity Studio interface.

You can either:

Manually add content types (like 'Author' and 'Post') and create some sample entries.
Import sample data if your chosen template included an import script (e.g., npm run import-sample-data).

I manually added one author and one blog post to proceed with testing the frontend integration.

Part 2: Building the Blog Frontend with Nuxt.js

Now, let's create the Nuxt.js application that will display our blog content.

Step 1: Allow Nuxt.js Access via CORS

Since our Nuxt app (running locally on http://localhost:3000 initially) needs to fetch data from Sanity's API, we must tell Sanity to trust requests from this origin.

Go to manage.sanity.io.
Select your project.
Navigate to the API tab.
Under CORS origins, click Add CORS origin.
Enter http://localhost:3000 and check the Allow credentials box.

Step 2: Create Nuxt Project

Use the Nuxt CLI to create a new project. I named mine blog.

npx create-nuxt-app blog

During setup, I selected:

Programming language: TypeScript
Package manager: npm
UI framework: None (can add later if needed)
Nuxt.js modules: None (we'll add Sanity manually)
Linting tools: (Your preference)
Testing framework: None
Rendering mode: Universal (SSR / SSG)
Deployment target: Static (Static/JAMstack hosting) (Important for Cloudflare Pages)
Development tools: (Your preference)
Version control: Initialize git repository

Step 3: Run Local Dev Server

Navigate into your new project directory and start the development server:

cd blog
npm run dev

Step 4: Test Access

Open http://localhost:3000 in your browser. You should see the default Nuxt welcome page.

Step 5: Configure Sanity.io Integration

Install the necessary packages to connect Nuxt with Sanity:

npm install @nuxtjs/sanity @sanity/client

Add the Sanity module to your Nuxt configuration using the Nuxt CLI helper:

npx nuxi@latest module add sanity

This command should automatically update your nuxt.config.ts. Now, you need to tell the module your Sanity project ID.

Find your projectId in the sanity.config.ts file within your Sanity project folder.
Add it to your Nuxt project's nuxt.config.ts file like this:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/sanity'],
  sanity: {
    projectId: '<YOUR_SANITY_PROJECT_ID>' // Replace with your actual project ID
  },
  // other config...
  devtools: { enabled: true } // Ensure Nuxt DevTools are enabled
})

Detailed doc: https://sanity.nuxtjs.org/getting-started/quick-start/

Part 3: Connecting Nuxt.js to Sanity & Displaying Posts (incl. Troubleshooting!)

With setup complete, let's fetch and display our blog posts.

Step 1: Create the Index Page (Listing Posts)

This page will fetch all posts from Sanity and list their titles as links.

Create a pages directory in the root of your Nuxt project if it doesn't exist.
Create a file named index.vue inside the pages directory.
Add the following code:

<template>
  <div class="container">
    <div>
      <h1 class="title">My Blog</h1>
    </div>
    <div class="posts">
      <div v-for="post in posts" :key="post._id">
        <!-- Use NuxtLink for internal routing -->
        <h2><NuxtLink :to="`/${post.slug.current}`">{{ post.title }}</NuxtLink></h2>
      </div>
    </div>
  </div>
</template>

<script setup>
// Define the GROQ query to fetch all documents of type 'post'
const query = `*[_type == "post"]`;
// Use the useSanityQuery composable provided by @nuxtjs/sanity
const { data: posts } = await useSanityQuery(query);

// Basic error handling or loading state could be added here
</script>

<style>
.container {
  margin: 2rem;
  min-height: 100vh;
}
.posts {
  margin: 2rem 0;
}
/* Basic styling for links */
a {
  text-decoration: none;
  color: #007bff;
}
a:hover {
  text-decoration: underline;
}
</style>

At this point, visiting localhost:3000 should show the titles of the blog posts you created in Sanity. Clicking a title will change the URL (e.g., to /my-first-post), but the page content won't change yet.

Step 2: Create Dynamic Blog Post Pages

We need a way for Nuxt to dynamically create a page for each blog post based on its unique identifier (the "slug" generated by Sanity). Nuxt 3 uses file-based dynamic routing.

Inside the pages directory, create a file named [slug].vue. The square brackets indicate a dynamic route parameter.

Troubleshooting Moment 1: Nuxt 2 vs Nuxt 3 Routing & Data Fetching 😅

My initial attempt used conventions from Nuxt 2 and older examples:

Filename: I first named the file _slug.vue (Nuxt 2 convention). This resulted in a 404 Not Found error because Nuxt 3 uses [slug].vue.
Accessing Route Params: My first script attempt tried to access params.slug directly within the script setup block, like this (simplified):
```
// INCORRECT for Nuxt 3 script setup
const query = `*[_type == "post" && slug.current == "${params.slug}"][0]`;
const { data: post } = await useSanityQuery(query);
```
This caused a 500 Internal Server Error with the message params is not defined. In Nuxt 3's script setup, you need to explicitly import and use useRoute() to access route parameters.

Correct Code for pages/[slug].vue:

This version uses the correct filename ([slug].vue) and properly accesses the route parameter using useRoute():

<template>
  <div class="container">
    <div v-if="post">
      <h1 class="title">{{ post.title }}</h1>
      <div class="content">
         <!-- Content will be rendered here in the next step -->
      </div>
    </div>
    <div v-else>
       <p>Loading post or post not found...</p>
    </div>
    <h4>
      <!-- Use NuxtLink for client-side navigation -->
      <NuxtLink to="/">← Go back</NuxtLink>
    </h4>
  </div>
</template>

<script setup>
// Import useRoute to access route parameters
import { useRoute } from '#imports'; // or from 'vue-router' in Nuxt 3

const route = useRoute();
// Construct the GROQ query using the slug from the route params
const query = `*[_type == "post" && slug.current == "${route.params.slug}"][0]`;
// Fetch the specific post data
const { data: post } = await useSanityQuery(query);

// Optional: Add better error handling for post not found
if (!post.value && process.server) { // Check if post is null/undefined after fetch
   // throw createError({ statusCode: 404, statusMessage: 'Post Not Found' });
   console.error(`Post with slug "${route.params.slug}" not found.`);
}

// Useful for debugging during development
console.log('Current Slug:', route.params.slug);
console.log('Fetched Post Data:', post.value);
</script>

<style>
.container {
  margin: 2rem;
  min-height: 100vh;
}
.content {
  margin: 2rem 0;
  max-width: 38rem; /* Adjust as needed */
}
p {
  margin: 1rem 0;
}
h4 {
    margin-top: 2rem;
}
</style>

Now, when you click a blog post link on the index page, Nuxt should navigate to the correct URL (e.g., /your-post-slug) and display the title of that specific post. The content area is still empty, though.

Step 3: Render Blog Post Content (Portable Text)

Sanity stores rich text content in a structured format called Portable Text. We need a component to render this structured data into HTML.

Troubleshooting Moment 2: Portable Text Component for Nuxt 3 😵‍💫

Again, following older tutorials led me down the wrong path initially.

Incorrect Package: Some guides mentioned sanity-blocks-vue-component. I installed it and tried setting it up via a Nuxt plugin (plugins/sanity-blocks.js) as suggested for Nuxt 2.
The Error: This resulted in a dreaded "Hydration completed but contains mismatches" error in the browser console. This often happens in SSR frameworks like Nuxt when the server-rendered HTML doesn't match the client-side virtual DOM, usually due to incompatible components or incorrect setup for the framework version.

Correct Approach for Nuxt 3 using @portabletext/vue:

Install the Correct Package: Use the official Vue 3 compatible package.
```
npm install @portabletext/vue
```

Create a Nuxt Plugin: Create a file named portable-text.js (or similar) inside the plugins directory.

// plugins/portable-text.js
import { PortableText } from '@portabletext/vue';

export default defineNuxtPlugin((nuxtApp) => {
  // Register the PortableText component globally
  nuxtApp.vueApp.component('PortableText', PortableText);
});

Register the Plugin: Add the plugin path to your nuxt.config.ts.

// nuxt.config.ts
export default defineNuxtConfig({
  // ... other config
  plugins: [
    '@/plugins/portable-text.js' // Path to your plugin file
  ],
  // ... sanity config etc.
})

Update [slug].vue to Use <PortableText>: Modify the template section of pages/[slug].vue to render the post.body (assuming 'body' is the field name for your Portable Text content in Sanity).

<!-- pages/[slug].vue -->
<template>
  <div class="container">
    <div v-if="post">
      <h1 class="title">{{ post.title }}</h1>
      <div class="content">
         <!-- Use the globally registered PortableText component -->
         <PortableText :value="post.body" />
      </div>
    </div>
     <div v-else>
       <p>Loading post or post not found...</p>
    </div>
    <h4>
      <NuxtLink to="/">← Go back</NuxtLink>
    </h4>
  </div>
</template>

<script setup>
// ... (script setup remains the same as previous step) ...
import { useRoute } from '#imports';
const route = useRoute();
const query = `*[_type == "post" && slug.current == "${route.params.slug}"][0]`;
const { data: post } = await useSanityQuery(query);
if (!post.value && process.server) {
   console.error(`Post with slug "${route.params.slug}" not found.`);
}
console.log('Current Slug:', route.params.slug);
console.log('Fetched Post Data:', post.value);
</script>

<style>
/* ... (styles remain the same) ... */
.container { margin: 2rem; min-height: 100vh; }
.content { margin: 2rem 0; max-width: 38rem; }
.content p { margin: 1rem 0; } /* Example style for paragraphs within portable text */
.content h2 { margin-top: 1.5rem; margin-bottom: 0.5rem; } /* Example style */
h4 { margin-top: 2rem; }
</style>

End Result: Success! 🎉 Now, clicking a post link on the index page should take you to the individual post page, displaying both the title and the rich text content rendered correctly from Sanity.

Part 4: Deploying to the World with Cloudflare Pages

Our blog works locally, but let's make it publicly accessible using Cloudflare Pages, which integrates beautifully with Git repositories for continuous deployment.

Benefits of Cloudflare Pages:

Automatic Deployments: Deploys a new version each time you push to your Git repository.
Preview Deployments: Creates preview URLs for pull requests, perfect for testing changes.
Global CDN: Serves your static site from Cloudflare's edge network for speed.
Free Tier: Generous free tier for static sites.

Step 1: Create GitHub Repo and Push Code

Make sure your Nuxt.js project is a Git repository (git init if you didn't during create-nuxt-app).
Create a new repository on GitHub (public or private).
Add the GitHub repository as a remote and push your code:
```
git remote add origin <your-github-repo-url.git>
git branch -M main
git push -u origin main
```
(Alternatively, use the GitHub CLI (gh) as shown in the original draft if you have it installed and configured).

Note: You only need to push your Nuxt.js project code, not the Sanity project folder. Sanity is hosted separately.

Step 2: Publish to Cloudflare Pages

Log in to your Cloudflare dashboard: https://dash.cloudflare.com/
Navigate to Workers & Pages -> Create application -> Pages tab -> Connect to Git.
Select the GitHub repository you just created.
In the Set up builds and deployments section:
- Production branch: main (or your default branch).
- Framework preset: Select Nuxt. Cloudflare should automatically detect it and fill in the build settings.
- Build command: Should be npm run generate or nuxt generate.
- Build output directory: Should be .output/public.
- (Optional) Root Directory: If your Nuxt project is inside a subfolder in your repo, specify the path here. Otherwise, leave it blank.
Click Save and Deploy.

Cloudflare will now pull your code, build the Nuxt application (generating static files), and deploy it to its global network.

Step 3: Test Access

Once the deployment is complete, Cloudflare will provide you with a unique URL (e.g., <your-project>.pages.dev). Visit this URL to see your live blog!

Don't forget! You might need to add your new Cloudflare Pages URL (e.g., https://<your-project>.pages.dev) to your Sanity project's CORS origins list, just like you did for localhost:3000, so the live site can fetch data.

Bonus: Understanding GROQ & Nuxt DevTools

Two extra bits of knowledge that are super helpful:

1. What is GROQ? 🤔

You saw queries like *[_type == "post"] in the code. That's GROQ!

GROQ stands for Graph-Relational Object Queries.
It's Sanity's powerful, flexible query language designed specifically for JSON documents.
Why? Traditional SQL or even GraphQL can be cumbersome for the deeply nested, flexible schemas often used in headless CMSs.
Value: GROQ lets you easily:
- Filter documents ([_type == "post"]).
- Select specific fields (projections).
- Follow references between documents (e.g., fetching author details along with a post).
- Shape the returned JSON data exactly how your frontend needs it.

It's worth learning the basics if you work heavily with Sanity!

2. Nuxt DevTools 🛠️

Nuxt comes with fantastic built-in developer tools that can significantly speed up debugging directly in your browser.

How to access: While your local dev server (npm run dev) is running, press Shift + Option + D (Mac) or Shift + Alt + D (Windows/Linux) in your browser tab showing localhost:3000.
Authentication: The first time, you might see a prompt asking for an authentication code. Check the terminal where you ran npm run dev – Nuxt usually prints the code there. Paste it into the browser prompt.
Features: Explore components, check routes, inspect state, view composable usage, analyze payloads, and much more! It's incredibly useful for understanding what's happening under the hood. (Make sure devtools: { enabled: true } is in your nuxt.config.ts).

Wrapping Up & Your Turn!

And there you have it! We've journeyed from setting up a Sanity.io backend and a Nuxt.js frontend to connecting them, navigating some troubleshooting, and finally deploying our blog globally using Cloudflare Pages. ✨

We saw how powerful this combination is for building modern web applications, offering flexibility for content management (thanks, Sanity!), a great developer experience (go Nuxt!), and effortless, performant deployment (kudos, Cloudflare!). We also navigated a few bumps along the road, reminding us that troubleshooting is a key part of the learning process.

Key Learnings Recap:

Sanity.io provides a flexible headless CMS experience.
Nuxt.js makes building Vue-based frontends efficient, especially with Nuxt 3 features.
Cloudflare Pages offers simple, fast, and integrated deployment for static/JAMstack sites.
GROQ is a powerful language for querying Sanity data.
Always check framework/package compatibility (Nuxt 2 vs Nuxt 3, Vue 2 vs Vue 3 components)!
Nuxt DevTools are your friend for debugging!

I hope this walkthrough was helpful and demystified the process a bit. Building projects like this is one of the best ways to learn!

Ref:https://developers.cloudflare.com/pages/tutorials/build-a-blog-using-nuxt-and-sanity

Now, over to you! 🤔

What are your favorite tools for building blogs or static sites?
Have you used Nuxt.js, Sanity.io, or Cloudflare Pages before? What was your experience?
Did you encounter similar troubleshooting hurdles, especially with framework upgrades? Share your tips!

Let me know your thoughts in the comments below – I'd love to spark a discussion! Happy coding! 💻

⚡️ From Zero to Deployed Portfolio < 1 Hour: My Experience with Vercel & Cursor

Jeannie — Tue, 15 Apr 2025 20:00:41 +0000

We've all been there: wanting to spin up a project—maybe a portfolio, a blog, or a hands-on lab for CI/CD—but dreading the initial setup slog. I recently set out to build my online portfolio, aiming to use it as a real-world IaC and CI/CD practice ground. Kill two birds with one stone, right?

My plan seemed simple:

Create a portfolio app (fast!) using templates or AI.
Get it on GitHub.
Configure the infra.
Build the CI/CD pipeline.

The catch? I wanted it live quickly. 💥 Spoiler alert: thanks to Vercel and Cursor, I went from zero to a deployed, personalized site in about an hour. Here’s how I did it, the tools I compared, and what I learned along the way.

TL;DR - Key Takeaways 🎯

Vercel is FAST for Deployment: It dramatically cuts down deployment time, especially for template-based projects using frameworks like Next.js.

Templates Beat Pure AI (For Now): High-quality, human-designed templates often provide a better starting point for aesthetics and structure than current AI generation tools.

Cursor Supercharges Refinement: AI code editors like Cursor can significantly speed up content updates by understanding context (like reading your resume!) and suggesting code changes.

The Killer Combo: Pairing a seamless deployment platform (Vercel) with an AI-powered editor (Cursor) makes for a remarkably efficient workflow.

The Initial Goal: Portfolio Meets Practice
Choosing the Right Launchpad: Vercel vs. The World
- Quick Tool Comparison
Liftoff! Deploying with Vercel
- What Vercel Handles Automatically
- Visualizing the Flow (Eraser.io Diagram)
Personalization Power-Up: Editing with Cursor
Bonus Round: AI-Generated Favicon via ChatGPT
Landed: Portfolio Live and Customized
The Specific Template I Used

The Initial Goal: Portfolio Meets Practice

My main driver was practical learning in CI/CD and IaC. Building an online portfolio offered the perfect sandbox. It's a tangible project that benefits from automation and proper infrastructure setup.

Choosing the Right Launchpad: Vercel vs. The World

The first hurdle was getting the basic app structure up quickly. I looked into several options, including AI-driven platforms like Replit and Bolt, and template marketplaces like Dora. Then I stumbled upon Vercel.

Initially, I browsed Vercel's templates just for inspiration, but I was quickly impressed by the quality and the ridiculously easy deployment process.

Quick Tool Comparison ⚙️

While AI tools that generate code from descriptions are promising, I found a practical limitation: AI isn't great (yet) at grasping visual appeal or matching my specific aesthetic sense, no matter how detailed the prompt. Selecting from Vercel's contributor templates felt much more efficient.

Feature	AI Generation Focus (e.g., Replit, Bolt)	Vercel Template Focus	My Pick & Reasoning
App Creation	Generates code based on text descriptions.	Offers high-quality, curated templates from contributors.	Vercel. Templates gave a better, more aesthetically pleasing starting point for my needs than the AI output I experimented with.
Efficiency	Can require significant prompt tuning & refinement for visuals.	Quick visual selection from appealing, pre-built options.	Vercel. Faster to find a template I liked than to iterate with AI prompts to achieve the desired look and feel.
Ease of Use	Varies by platform.	Exceptionally clean UI/UX, focused on a simple "Demo" -> "Deploy" workflow.	Vercel. The minimal clicks to deploy felt incredibly intuitive and aligned with my goal of speed.

Liftoff! Deploying with Vercel

Vercel's process is refreshingly simple: Find a template you like, preview the "Demo," and hit "Deploy". That's it. ⚡️🚀

What Vercel Handles Automatically

Behind that single click, Vercel orchestrates a whole sequence:

Clones Repo: Copies the template's GitHub repo to your account.
Builds App: Runs the build process for the codebase.
Installs Dependencies: Fetches and installs necessary packages.
Deploys: Pushes the built app to their servers.
Assigns URL: Makes the app live on the internet via DNS.
Sets up CI/CD: Configures automatic deployments on pushes to the main branch.
Integrates Monitoring: Provides options for analytics and performance tracking.

The deployment confirmation page even suggests potential next steps and enhancements. Exploring the dashboard reveals a rich ecosystem of integrations (MANY FREE! 🆓), like Vercel Analytics, which I enabled immediately.

Have you explored Vercel's integrations? Which ones do you find most valuable? Let me know below! 👇

Personalization Power-Up: Editing with Cursor ✏️

Okay, the site was live, but it wasn't mine yet. It had placeholder text and images. Time for customization. Enter Cursor, the AI-assisted code editor.

I fed Cursor my resume and asked it to update the portfolio template's content sections. It parsed the document and intelligently suggested code changes in the right places.

To maintain control and ensure accuracy (and for my own learning!), I used Cursor's diff view. This let me review each AI suggestion side-by-side with the original code, approving or rejecting changes individually before committing. It struck a great balance between AI speed and human oversight. After handling the text, I swapped out the profile picture manually.

Bonus Round: AI-Generated Favicon via ChatGPT 🖼️

One last touch: the favicon. I uploaded my new profile picture to ChatGPT and asked it to generate some favicon options with different styles. Thanks to recent advancements in AI image generation, the results were surprisingly good and gave my site a unique browser tab icon.

Landed: Portfolio Live and Customized 🎉

The result? In roughly one hour—including the time I spent exploring the tools—I had a personalized, deployed web portfolio. Vercel handled the deployment heavy lifting, while Cursor streamlined the content integration.

Check it out 👉🏻: https://jean-magic-portfolio-for-next-js.vercel.app/

The Specific Template I Used

If you're curious, the template I started with is Magic Portfolio (https://magic-portfolio.com/). It's built with Next.js and uses a component library called "once-ui," which offers a modular design that makes tweaking content, layout, and visuals relatively easy. ✨ Definitely worth checking out if you need a quick portfolio base.

I hope sharing this rapid deployment experience is helpful! It shows how combining the right tools can significantly accelerate getting projects off the ground. 🌈

What are your favorite tools for quickly launching web apps? Share your experiences in the comments!

🚀 RHCSA Prep #2 - Setting Up SSH for Remote Access to RHEL

Jeannie — Mon, 14 Apr 2025 11:33:54 +0000

No more waiting for the GUI to load! This approach saves valuable time and creates a more authentic server management experience.

One of the biggest productivity boosters in my RHEL learning journey has been setting up SSH access to my virtual machine directly from my MacBook Pro terminal.

🎯 In this article, you'll learn:

How to configure SSH access to a RHEL virtual machine

Two networking approaches: NAT with port forwarding vs. bridged networking

Instructions for registering your RHEL server (required for setup SSH daemon)

Step-by-step walkthrough on setting up SSH

Troubleshooting tips for common SSH connection issues

Prerequisites
Registering Your RHEL Server
Setting Up SSH on RHEL
- Step 1: Install OpenSSH Server
- Step 2: Configure VM Networking
- Step 3: Test SSH Connection
- Step 4: Generate SSH Key
- Step 5: Copy SSH Key to the Remote Server
- Step 6: Connect to VM via SSH
- Step 7: Config Shortcut
Networking Options Compared
Troubleshooting Tips
What's Next

Prerequisites

RHEL installed in VirtualBox
A MacBook Pro (though these instructions work for any host OS)
Basic terminal familiarity
Red Hat developer account (free)

Registering Your RHEL Server

Before installing any packages, you'll need to register your RHEL server to access Red Hat's package repositories:

Create a Red Hat developer account if you don't already have one
Log into your RHEL server
Run the registration command:

subscription-manager register

Setting Up SSH on RHEL

Step 1: Install OpenSSH Server

First, we need to install and enable the SSH server on our RHEL system:

Ref: https://www.redhat.com/en/blog/access-remote-systems-ssh

# Install the OpenSSH server package
sudo dnf install openssh-server

# Enable and start the SSH service
systemctl enable --now sshd

This installs the SSH server and configures it to start automatically on boot.

💡 Note: I encountered an error during registration: "Error: sqlite failure: PRAGMA optimize: database disk image is malformed". Despite this, I was able to proceed with the SSH setup without issues. If you encounter similar errors, try continuing with the next steps anyway.

Step 2: Configure VM Networking

For SSH access, you'll need to configure networking in VirtualBox. There are two main approaches:

Port forwarding with NAT (what I chose)
Bridged networking

See difference between these two options

I opted for port forwarding because I only need to access the VM from my MacBook, not from other devices on my network. Here's how to set it up:

Open VirtualBox
Select your RHEL VM
Go to Settings → Network → Adapter 1
Make sure "NAT" is selected
Click on "Port Forwarding"
Add a new rule with these settings:
- Protocol: TCP
- Host Port: Choose a port (e.g., 2222)
- Guest Port: 22 (standard SSH port)
- Leave other fields at their defaults

Step 3: Test SSH Connection

Now for the moment of truth! Open your terminal on your MacBook and connect to your RHEL VM:

ssh -p 2222 username@localhost -v

Replace 2222 with whatever host port you configured in the port forwarding rule, and username with your RHEL username.

The -v flag enables verbose output, which is incredibly helpful for troubleshooting if anything goes wrong. Once you've confirmed everything works, you can omit this flag for cleaner output.

Below steps are extra and for my best practice on security and working efficiency:

Step 4: Generate SSH Key

On your host/local machine:

ssh-keygen -t rsa -b 4096 -C "student@loca-rhel-vm1"  -f ~/.ssh/student@local-rhel-vm1

-C flag for the comment for key file, which will be append at the end of the whole key value. You can cat the key file to check.

-f flag for the file name you wish it to appear in your file system for easier recognization.

Check where the keys are generated. You may move the key to desired location. My practice is to under ~/.ssh. You will need the location in next commands.

Step 5: Copy SSH Key to the Remote Server

ssh-copy-id -p 2222 -i <location/filename of private key file> student@localhost

It will prompt you for password, input the password for that user account.

Step 6: Connect to VM via SSH

ssh -p 2222 student@localhost -i <location/filename of private key file>

Step 7: Config Shortcut

Optional and for extra efficiency!

Create or edit ~/.ssh/config:

Host rhel-vm-student
  HostName localhost
  User student
  Port 2222
  IdentityFile <location of your private key generated>

Then SSH with:

ssh rhel-vm-student

Networking Options Compared

Here's a quick comparison of the networking options to help you decide which is best for your use case:

Feature	NAT + Port Forwarding	Bridged Networking
Host IP used?	✅ Yes	❌ No — VM has its own IP
Needs port forwarding?	✅ Yes (manually per port)	❌ No (direct access)
Connect from other devices?	❌ Difficult (only via host IP/port)	✅ Yes (use VM's IP directly)
Security	🔒 More isolated	❗ Exposed to LAN/network
Best for	Personal dev/testing, local services	Network testing, server hosting

Troubleshooting Tips

Connection refused? Make sure the SSH service is running: systemctl status sshd
Authentication issues? Verify your username and check SSH key permissions
Can't reach server? Double-check your port forwarding configuration
Slow connection? Try disabling DNS lookups in the SSH server config

What's Next

Success! I now have a streamlined workflow where I can connect directly to my RHEL environment from my terminal without launching the VirtualBox GUI. This setup will make all future labs and exercises much more efficient.

In the next post of this series, I'll dive into essential RHEL operations and system administration tasks. Stay tuned!

In this second post of my RHEL learning series, I walked through the exact steps I took to configure SSH access to a RHEL virtual machine running in VirtualBox. Whether you're studying for RHCSA certification or just exploring Red Hat's enterprise environment, this setup will make your life much easier.

Follow me for the complete RHEL Learning Journey series.

🚀 RHCSA Prep #1 - Installing RHEL 9 VM on VirtualBox with External SSD

Jeannie — Mon, 14 Apr 2025 10:39:18 +0000

Hello, Dev Community! 👋

I'm excited to kick off a new series documenting my learning journey on taking Red Hat Certified System Administrator, with Red Hat Enterprise Linux (RHEL).

I aim to make this learning journey more interactive and connect with other practitioners who share similar interests.

In this series, I'll cover my experiences, challenges, solutions, and insights while exploring RHEL. Let's dive right into the first step—setting up my environment!

🎯 In this article, you'll learn:

How to set up RHEL 9 on VirtualBox using an external SSD

Solutions to common VirtualBox storage issues

Practical alternatives and decision-making process

⚠️ Attempt #1: VirtualBox + External SSD Storage
🌥️ Attempt #2: Oracle Cloud Free Tier (Rocky Linux)
🔄 Attempt #3: VMware Fusion & Revisiting VirtualBox
💡 The Solution
📋 Quick Reference & Decision Table

🛠️ 1. VM Initial Setup on RHEL

Here's what I'm working with:

Host Machine: MacBook Pro 13" (2020, Intel Chip)
Host OS: macOS
Virtualization Tool: VirtualBox 7.1.6
Guest OS: RHEL 9 (x86 architecture, compatible with Intel-based Macs)

Due to limited internal storage (512GB SSD, almost full), I decided to store the ISO and Virtual Disk Image (VDI) externally on an SSD, while keeping VirtualBox installed internally.

⚠️ Attempt #1: VirtualBox + External SSD Storage

Initially, I faced a significant hurdle. After configuring VirtualBox to use the external SSD for ISO and VDI storage, the virtual machine refused to boot properly. I tried various compute and storage settings, but none resolved the issue. My suspicion was that using external storage might be causing compatibility problems within VirtualBox.

🌥️ Attempt #2: Oracle Cloud Free Tier (Rocky Linux)

Frustrated with local virtualization, I explored cloud options. Oracle Cloud offers a generous Free Cloud Tier, allowing installation of Rocky Linux—a downstream rebuild of RHEL that's fully binary-compatible (1:1 compatibility).

Unfortunately, I encountered another roadblock: account creation. Oracle's address and payment verification repeatedly failed. After researching online, I found this to be a common issue among many users.

🔄 Attempt #3: VMware Fusion & Revisiting VirtualBox

Determined, I planned to use VMware Fusion (another popular virtualization tool for macOS). While installing VMware Fusion, curiosity led me back to troubleshooting my initial VirtualBox setup again.

That's when I stumbled upon this helpful post on SuperUser: How can I mount an external hard drive in a VirtualBox machine?

💡 The Solution

Following this advice, I did the following:

Opened VirtualBox settings.
Navigated to USB settings.
Enabled the option "Enable USB Controller".
Added a new USB Device Filter (clicking the green plus icon and selecting my external SSD).

After rebooting the virtual machine...

🎉 IT WORKED! 🎉

Interestingly, the initial error messages still briefly appeared, but the VM booted successfully and RHEL 9 installation proceeded smoothly.

📋 Quick Reference & Decision Table

Here's a detailed overview of my setup decisions along with the available alternatives, my choices, and key considerations:

Criteria	Description	Options Available	My Choice & Reasoning	Points to Note
Host Platform	Where to host the VM	- On-premise (local machine) - Public Cloud (AWS, Azure, GCP, Oracle Cloud)	✅ On-premise (local) – prefer local control, convenience, and no additional costs	Oracle Cloud faced verification issues
Host Machine	Hardware used	- MacBook Pro (Intel/Apple Silicon) - Virtual Server Hardware	✅ MBP 13" 2020 Intel – available hardware, Intel-compatible with RHEL x86	Intel-based Macs compatible with RHEL x86
Compute Settings	CPU and RAM allocation	- Minimal (e.g., 1 CPU, 2GB RAM) - Recommended (e.g., 2-4 CPUs, 4-8GB RAM) - High-performance (e.g., 4+ CPUs, 16GB+ RAM)	✅ Minimal initial setup – balanced performance, adjust later based on use	Initial setup chosen
Storage Settings	VM storage location	- Internal SSD/HDD (built-in storage) - External SSD/HDD (via USB/Thunderbolt) - Network-attached Storage (NAS) - Cloud Storage (remote)	✅ External SSD – limited internal storage availability	Requires USB controller and device filter setup in VirtualBox
Virtualization Tool	Software for virtualization	- VirtualBox (free, cross-platform) - VMware Fusion (macOS specific, paid/free personal license) - Hyper-V (Windows-specific, built-in)	✅ VirtualBox 7.1.6 – Free, widely adopted, extensive community support	vmWare Fusion considered as alternative backup option
Guest OS Image	OS and version	- RHEL 9 (official Red Hat distribution) - Rocky Linux 9 (community-supported, RHEL compatible) - AlmaLinux 9 (community-supported, RHEL compatible)	✅ RHEL 9 (x86) – Official, stable, supported, free Developer Subscription	Rocky Linux as alternative if RHEL licensing becomes restrictive
License	Licensing for OS	- Official RHEL Subscription (enterprise, paid) - Developer Subscription (free for personal/development use) - Community-supported alternatives (Rocky Linux, AlmaLinux, CentOS Stream)	✅ RHEL Developer Subscription – Official, free for personal/development purposes	Easy registration via Red Hat Developer account

I'm aware there are many tools for setting up VMs, and I'd love to hear your recommendations! What virtualization tools or operating systems do you suggest? Let me know in the comments, and I'll be sure to check them out! 🐧

Stay tuned for the next post in this series, where I'll cover the detailed installation process and initial configuration of RHEL 9!

Follow me for the complete RHEL Learning Journey series! 🚀