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
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
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
