How to Set Up BloggFast — An AI-Driven Blog Site Boilerplate

you want to launch your own blog or news website with full control over the source code, I built BloggFast for you. It is a full-stack NextJS boilerplate built to help you move faster without having to piece everything together from scratch.

Instead of spending days setting up authentication, the database, CMS, email, hosting, and AI article generation, you can start with a production-ready foundation that already has those core parts wired in. That means you can focus more on building your platform, customizing the experience, and publishing content.

Here’s a quick summary of the steps:

Step 1: Getting the project
Step 2: Setting up the environment variables
Step 3: Set up the database
Step 4: Testing locally
Step 5: Deploy the project

In this guide, I will walk through the detailed steps for setting up the project locally and deploying it to production.

Let’s get started.

Step #1: Get the project

The first step is to get access to the BloggFast project files.

Go to blogg.fast and choose the access option that fits your needs: Starter or Lifetime.

If you choose the Starter plan, you will receive an email containing a download link for the project. Open the email, click the link, and download the project as a ZIP archive.

Press enter or click to view image in full size

BloggFast sample email after purchase. Image by Jim Clyde Monge

Once the download is complete, extract the archive to a location on your machine where you want to work on the project.

If you choose Lifetime access, your email address will be added to the private GitHub repository automatically. You will receive this email like this:

Press enter or click to view image in full size

BloggFast sample email after purchase. Image by Jim Clyde Monge

Open that email and click View repository to access the source code. From there, you can either download the repository as a ZIP file or clone it directly to your local machine using Git.

Press enter or click to view image in full size

BloggFast official project repo on GitHub. Image by Jim Clyde Monge

After downloading or cloning the project, extract the files if needed, and confirm that the full project directory is available locally.

Press enter or click to view image in full size

BloggFast project file content inside the zip file. Image by Jim Clyde Monge

Once that is done, you are ready to continue with the setup.

Step #2: Setting up the environment variables

Open the project folder in your preferred IDE. In this example, I will be using Google Antigravity IDE, but any modern editor, such as VS Code, Cursor, or Antigravity, will work just fine.

Before doing anything else, rename the env.example file to .env. This file will hold all of the local environment variables the application needs in order to run.

Press enter or click to view image in full size

BloggFast project in Antigavity. Image by Jim Clyde Monge

Next, open a terminal in the root of the project and install the dependencies:

npm install

This command downloads all the required packages defined in package.json and creates a node_modules folder in the project root. Depending on your internet speed and machine, this may take a minute or two.

Once the installation finishes successfully, the application is ready for configuration.

At this stage, the main goal is to replace the placeholder values in .env with real credentials and service configuration values. BloggFast uses multiple services that work together to power the application, including:

Database
Authentication
Sanity CMS
Resend email delivery
Cloudflare R2 storage
Vercel AI Gateway

Before filling in those values, it is a good idea to connect the project to a remote Git repository and import it into Vercel. This makes the environment setup easier to manage and lets you validate the deployment configuration early.

Press enter or click to view image in full size

Creating a BloggFast repo in GitHub desktop. Image by Jim Clyde Monge

If you are using GitHub Desktop, create a new private repository for the project and push the local source code to GitHub.

Once the upload is complete, go to Vercel, create a new project, and import the repository. Depending on your account settings, you may need to grant Vercel access to the repository. Follow the prompts shown in the Vercel dashboard.

Press enter or click to view image in full size

Importing BloggFast in Vercel. Image by Jim Clyde Monge

At this point, you can start an initial deployment.

Press enter or click to view image in full size

Importing BloggFast in Vercel. Image by Jim Clyde Monge

The build is expected to fail because the environment variables still contain placeholder values, and that is completely normal. The purpose of this first deployment is simply to connect the project to Vercel and prepare the service integrations.

Database setup with Neon

To configure the database, open your Vercel project dashboard and go to the Storage tab. Click Create Database. For this project, use Neon as the database provider.

Press enter or click to view image in full size

Adding Neon support for BloggFast in Vercel. Image by Jim Clyde Monge

During setup, make sure to enable Auth. This is important because Neon Auth is used to manage application users and keep authentication data connected to the Postgres database.

When choosing environments, make the database available to all three:

Development for local work
Preview for test deployments
Production for the live application

Press enter or click to view image in full size

Adding Neon support for BloggFast in Vercel. Image by Jim Clyde Monge

Once the database is created successfully, you will be redirected to the Neon dashboard.

# Recommended for most uses
DATABASE_URL=postgresql://neondb_owner:npg_XXXXXXXXXXX@ep-fragrant-meadow-XXXXXXXX-pooler.c-6.us-east-1.aws.neon.tech/neondb?channel_binding=require&sslmode=require

# For uses requiring a connection without pgbouncer
DATABASE_URL_UNPOOLED=postgresql://neondb_owner:XXXXXXXX@ep-fragrant-meadow-XXXXXXXX.c-6.us-east-1.aws.neon.tech/neondb?sslmode=require

# Parameters for constructing your own connection string
PGHOST=ep-fragrant-meadow-XXXXXXXX-pooler.c-6.us-east-1.aws.neon.tech
PGHOST_UNPOOLED=ep-fragrant-meadow-XXXXXXXX.c-6.us-east-1.aws.neon.tech
PGUSER=neondb_owner
PGDATABASE=neondb
PGPASSWORD=npg_XXXXXXXX

# Parameters for Vercel Postgres Templates
POSTGRES_URL=postgresql://neondb_owner:npg_XXXXXXXX@ep-fragrant-meadow-XXXXXXXX-pooler.c-6.us-east-1.aws.neon.tech/neondb?channel_binding=require&sslmode=require
POSTGRES_URL_NON_POOLING=postgresql://neondb_owner:npg_XXXXXXXX@ep-fragrant-meadow-XXXXXXXX.c-6.us-east-1.aws.neon.tech/neondb?channel_binding=require&sslmode=require
POSTGRES_USER=neondb_owner
POSTGRES_HOST=ep-fragrant-meadow-XXXXXXXX-pooler.c-6.us-east-1.aws.neon.tech
POSTGRES_PASSWORD=npg_XXXXXXXX
POSTGRES_DATABASE=neondb
POSTGRES_URL_NO_SSL=postgresql://neondb_owner:npg_XXXXXXXX@ep-fragrant-meadow-XXXXXXXX-pooler.c-6.us-east-1.aws.neon.tech/neondb
POSTGRES_PRISMA_URL=postgresql://neondb_owner:npg_XXXXXXXX@ep-fragrant-meadow-XXXXXXXX-pooler.c-6.us-east-1.aws.neon.tech/neondb?channel_binding=require&connect_timeout=15&sslmode=require

Neon provides several database-related environment variables, including DATABASE_URL, pooled and unpooled connection strings, and Postgres-specific values.

Press enter or click to view image in full size

Adding Neon support for BloggFast in Vercel. Image by Jim Clyde Monge

From these values, update the corresponding placeholder variables in your local .env file. The most important part here is making sure the application is using the correct database connection string.

Press enter or click to view image in full size

Setting up the env file for BloggFast in Antigravity. Image by Jim Clyde Monge

Awesome. Now that the database is connected, the next step is configuring Neon Auth.

Neon Auth configuration

In the Neon project dashboard, open the Auth tab and go to the configuration page. Copy the Auth URL and paste it into your .env file as the value for:

Press enter or click to view image in full size

Setting up the auth for BloggFast in Neon. Image by Jim Clyde Monge

Replace the dummy value of the NEON_AUTH_BASE_URL in the .env file.

Next, create a secure value for NEON_AUTH_COOKIE_SECRET. This should be a strong random 256-bit secret. You can generate one using any secure secret generator and paste it into the environment file. I used a Secret Key Generator online tool for this.

Vercel AI Gateway

Next, configure the AI Gateway key.

In your Vercel project, open the AI Gateway section and create a new API key.

Press enter or click to view image in full size

Setting up the AI Gateway for BloggFast in Vercel. Image by Jim Clyde Monge

Choose a unique name that helps you identify this key and click on the generate button. Copy the API key and replace the dummy value for AI_GATEWAY_API_KEY.

This key allows BloggFast to communicate with the configured AI provider through Vercel’s gateway layer.

Take note also that Vercel gives you a $5 free credits.

Resend email configuration

For email delivery, create a Resend account if you do not already have one. In the Resend dashboard, go to API Keys and create a new key.

Copy the key immediately and update the RESEND_API_KEY variable in your .env file.

Press enter or click to view image in full size

Creating API keys for BloggFast in Resend. Image by Jim Clyde Monge

For now, you can leave RESEND_WEBHOOK_SECRET unchanged if the application has not yet been deployed to a live URL. That value is usually configured later, once the hosted app is available and can receive webhook events.

Cloudflare R2 storage

BloggFast uses Cloudflare R2 for storing uploaded assets such as article images and generated media.

Create a Cloudflare account if needed, then open R2 Object Storage from the Storage & Databases section. Create a new bucket and choose a clear, permanent bucket name because this name will be part of your storage configuration going forward.

Press enter or click to view image in full size

Creating a bucket for BloggFast in CloudFlare. Image by Jim Clyde Monge

Use:

Location: Automatic
Default Storage Class: Standard

Press enter or click to view image in full size

Creating a bucket for BloggFast in CloudFlare. Image by Jim Clyde Monge

After the bucket is created, gather the required values for the following environment variables:

CLOUDFLARE_ACCOUNT_ID
R2_BUCKET_NAME
R2_ENDPOINT
R2_ACCESS_KEY_ID
R2_SECRET_ACCESS_KEY
R2_PUBLIC_BASE_URL
R2_PUBLIC_DEVELOPMENT_URL
NEXT_PUBLIC_MAX_UPLOAD_MB

To get CLOUDFLARE_ACCOUNT_ID and R2_ENDPOINT, go to the R2 overview page and scroll down to Account details. Copy the Account**** ID and S3 API endpoint.

Press enter or click to view image in full size

Getting the account details in CloudFlare. Image by Jim Clyde Monge

Set R2_BUCKET_NAME to the exact name of the bucket you created. In this example, I have set it to “bloggfast-storage.”

To create the R2_ACCESS_KEY_ID and the R2_SECRET_ACCESS_KEY, click on the “Manage” button for the API tokens in the same screen above. This will open the Account API Tokens menu. Create an account API token by clicking on the highlighted button below.

Press enter or click to view image in full size

Getting the API token in CloudFlare. Image by Jim Clyde Monge

Name your token and give it “Admin Read & Write” access. Leave the rest of the settings as the default.

Press enter or click to view image in full size

Getting the API token in CloudFlare. Image by Jim Clyde Monge

You should now have the Access Key ID and the Secret Access Key. Copy these values and replace the dummy ones in the env file.

Press enter or click to view image in full size

Getting the API token in CloudFlare. Image by Jim Clyde Monge

To get R2_PUBLIC_DEVELOPMENT_URL, open the bucket settings and enable the Public Development URL option. This gives you a temporary public URL that can be used during development. Copy that generated URL into the environment file.

Press enter or click to view image in full size

Getting the Public Dev URL in CloudFlare. Image by Jim Clyde Monge

You can leave R2_PUBLIC_BASE_URL as a placeholder until you attach a custom domain to the bucket later. Then set the NEXT_PUBLIC_MAX_UPLOAD_MB to 100. This helps prevent unexpectedly large uploads from causing issues in development or production.

Sanity set up

Let’s move to the Sanity variables. Head over to Sanity, set up an account, and on the homepage, create a new project.

Press enter or click to view image in full size

Setting up Sanity for BloggFast. Image by Jim Clyde Monge

In the project overview screen, you can see the Project ID. Copy this and replace the NEXT_PUBLIC_SANITY_PROJECT_ID in the env file.

Press enter or click to view image in full size

Setting up Sanity for BloggFast. Image by Jim Clyde Monge

That’s all you need for Sanity for now.

Sync variables to Vercel

Once your local .env file is complete, open the Vercel project dashboard and go to Settings → Environment Variables. Import or manually add the same variables there so that your Preview and Production deployments use the exact same configuration.

Press enter or click to view image in full size

Syncing the env for BloggFast in Vercel. Image by Jim Clyde Monge

This step is important. Local environment variables only affect your machine, while Vercel deployments require the values to be stored in the project settings.

Press enter or click to view image in full size

Syncing the env for BloggFast in Vercel. Image by Jim Clyde Monge

Once everything is saved, the environment setup is complete, and you are ready to initialize the database.

Step #3: Set up the database

With the environment variables configured, the next step is to create the database schema and populate the initial data. At this stage, the process is straightforward: run the Prisma migration command against your target database so Prisma can create the tables, relations, and other schema objects defined by your project.

In Antigravity, go to the terminal and run the command below:

npx prisma migrate dev --name init

Press enter or click to view image in full size

Building and running BloggFast in Antigravity. Image by Jim Clyde Monge

If the local generation of the initial migration is successful, you should see this message: “Your database is now in sync with your schema.”

To apply all pending migrations in the target environment, run the command:

  npx prisma migrate deploy

Go back to the Neon project’s page and refresh the Tables dashboard. You should now see all the tables.

Press enter or click to view image in full size

Prisma migration for BloggFast in Neon. Image by Jim Clyde Monge

Cool. The next step is to populate the database with pre-created content. In the terminal, run the db seed command:

npx prisma db seed

Press enter or click to view image in full size

Building and running BloggFast in Antigravity. Image by Jim Clyde Monge

Confirm the success message in the DB seed command. If yes, check if the remote database is populated properly.

Press enter or click to view image in full size

Prisma migration for BloggFast in Neon. Image by Jim Clyde Monge

Awesome! The database is finally done. The next step is to build and run the project locally.

Step #3: Build and run the project

After the database is set up, the next step is to build the project. This creates an optimized production-ready version of the application that can be deployed to your server or hosting platform.

Run the build command from the root of the project:

npm run build

Press enter or click to view image in full size

Building and running BloggFast in Antigravity. Image by Jim Clyde Monge

During this step, the framework compiles the application, checks for build-time issues, and generates the output needed for production. If the build completes successfully, your project is ready for the final deployment steps, such as starting the server or publishing the generated files.

This step is a useful checkpoint because it confirms that the application, configuration, and dependencies are all in a deployable state.

Start the development server so you can preview the project locally:

npm run dev

Press enter or click to view image in full size

Building and running BloggFast in Antigravity. Image by Jim Clyde Monge

Now, open http://localhost:3000/ in a browser, and the BloggFast dashboard looks like the image below. You should also see this list of articles.

Press enter or click to view image in full size

Sample localhost running for BloggFast. Image by Jim Clyde Monge

Toggle the theme to see if the dark mode works correctly.

Press enter or click to view image in full size

Sample localhost running for BloggFast. Image by Jim Clyde Monge

Alright, everything looks good. It’s time to test the auth and article generation.

Step #4: Testing locally

Before moving to deployment, test the core flows locally to make sure the application, database, and authentication are all working together as expected. For this project, the two main features to verify are login and AI article generation.

Start by running the app locally and opening it in the browser. From there, go through the login flow using a test account. After signing in, confirm that the authentication process completes successfully in the UI and that the user session is created correctly.

Press enter or click to view image in full size

Sample localhost running for BloggFast. Image by Jim Clyde Monge

Once login succeeds, check your database and Neon Auth dashboard to verify that the user record and related authentication data have been updated as expected.

Press enter or click to view image in full size

Auth setup for BloggFast in Neon. Image by Jim Clyde Monge

Next, test the AI article generation flow. To do this, we need to see an admin user. In the Neon User table, change the user role to Admin.

Press enter or click to view image in full size

Auth setup for BloggFast in Neon. Image by Jim Clyde Monge

Notice that there is a new “Admin panel” option in the profile menu. This option is only available to administrators.

Press enter or click to view image in full size

Admin control for BloggFast. Image by Jim Clyde Monge

This will display the admin dashboard. We’ll explore the other tabs next time. For now, leave everything at the default and open the AI Generator tab.

Press enter or click to view image in full size

Generating articles with AI in BloggFast. Image by Jim Clyde Monge

Create a sample article from the app and confirm that the request completes without errors. Here’s a sample prompt:

Prompt: Anthropic releases Claude 4.7 Opus

Press enter or click to view image in full size

Generating articles with AI in BloggFast. Image by Jim Clyde Monge

Click on the publish button, and there should be a success toast message. If the article is published successfully, it should be added to the remote database and will be added to the article list. Here’s a preview of the published content.

Press enter or click to view image in full size

Generating articles with AI in BloggFast. Image by Jim Clyde Monge

The article content and metadata are all synced with the database. The cover image and any other files attached to the article are all uploaded and organized in the R2 bucket.

Press enter or click to view image in full size

Images automatically uploaded to R2 bucket. Image by Jim Clyde Monge

This local testing step helps verify that the full application flow is working end to end: authentication, database writes, and AI-powered content generation. If both features work correctly and the expected records appear in the database and Neon Auth, the project is in a good state to move forward.

Step #5: Deploy the project

With local testing complete, the final step is to deploy the project to Vercel.

Once the project is configured, trigger the redployment and the project should build successfully.

Press enter or click to view image in full size

Build successful for BloggFast in Vercel. Image by Jim Clyde Monge

If your repository stays connected to Vercel, future deployments become much simpler. Vercel automatically creates deployments for branch pushes, while merges to the production branch can be used for production releases. This makes it easy to continue testing in preview environments before promoting changes to the live site. Vercel documents three default environments for this workflow: Local, Preview, and Production.

After deployment, open the production URL and test the same core flows you verified locally, especially login and AI article generation. This final check confirms that the application is working correctly in Vercel with the hosted environment, production variables, and live database connections in place.

That wraps up the project. At this point, you have the database set up, the app tested locally, and the project deployed to Vercel. From here, you can keep iterating, refine the experience, and continue shipping updates with a much smoother workflow.

When you are ready, you can also connect a custom domain in Vercel, so your project is available on your own branded URL instead of the default vercel.app address. Vercel supports adding a domain directly from your project settings and guiding you through the DNS configuration needed to point it to your deployment.

With that in place, your application is not only live but ready to be shared more professionally with users, clients, or teammates.

This story is published on Generative AI. Connect with us on LinkedIn and follow Zeniteq to stay in the loop with the latest AI stories.

Subscribe to our newsletter and YouTube channel to stay updated with the latest news and updates on generative AI. Let’s shape the future of AI together!