Deploying Your Next.js Blog

On this page

In this third and final part of our tutorial series, we'll be deploying the minimalist blog we created using Next.js 14 and Wisp CMS.

If you prefer to read, you can find accompanying notes to the video tutorial below.

Prerequisites

  • Completed Part 1 and Part 2 of the tutorial series
  • Your blog running locally on your machine
  • A GitHub account
  • A Vercel account (free tier is sufficient)

Step 1: Preparing Your Project for Deployment

  1. Ensure your blog is running correctly on localhost
  2. Remove any existing Git setup:
rm -rf .git
  1. Initialize a new Git repository:
git init
  1. Add all files to the repository:
git add .
  1. Make your initial commit:
git commit -m "Initial commit"

Step 2: Creating a GitHub Repository

  1. Go to GitHub and log in to your account
  2. Click on "New repository"
  3. Name your repository (e.g., "demo-blog")
  4. Choose to make it public or private
  5. Create the repository without initializing with a README
  6. Follow the instructions to push an existing repository from the command line

Step 3: Deploying to Vercel

  1. Go to Vercel and sign up or log in
  2. Click on "Add New" and select "Project"
  3. Connect your GitHub account if you haven't already
  4. Select the repository you just created
  5. Configure your project:
  • Give it a name (e.g., "demo-blog")
  • Set up environment variables:
    • NEXT_PUBLIC_BLOG_ID: [Your Wisp Blog ID]
    • NEXT_PUBLIC_BLOG_DISPLAY_NAME: [Your site title]
    • NEXT_PUBLIC_BLOG_COPYRIGHT: [Your copyright text]
    • NEXT_DEFAULT_METADATA_DEFAULT_TITLE [Your site title metadata]
    • NEXT_PUBLIC_BLOG_DESCRIPTION: [Your site description metadata]
  1. Click "Deploy"

Step 4: Verifying Your Deployment

  1. Wait for the deployment to complete
  2. Click on the provided URL to view your live blog
  3. Verify that all content and configurations are correct

Step 5: Setting Up Automatic Deployments

  1. Vercel automatically sets up continuous deployment
  2. Any changes pushed to your main branch will trigger a new deployment

Step 6: Making Changes and Redeploying

  1. Make a small change to your local project (e.g., update the homepage text)
  2. Commit your changes:
git add .
git commit -m "Update about text"
  1. Push the changes to GitHub:
git push
  1. Watch your Vercel dashboard for the new deployment

Step 7: Connecting a Custom Domain (Optional)

  1. In your Vercel dashboard, go to your project settings
  2. Click on "Domains"
  3. Add your custom domain
  4. Follow Vercel's instructions to set up DNS records with your domain registrar

Step 8: Understanding the Deployment Process

  • Vercel pulls your code from GitHub
  • Builds your Next.js application
  • Deploys it to their global CDN
  • Each deployment gets a unique URL
  • The latest deployment is always served on your main URL

Step 9: Best Practices for Deployment

  1. Always test changes locally before pushing
  2. Use environment variables for sensitive information
  3. Set up preview deployments for pull requests
  4. Monitor your site's performance regularly

Conclusion

You've now learned how to:

  • Set up a GitHub repository for your blog
  • Deploy your Next.js blog to Vercel
  • Configure environment variables
  • Set up automatic deployments
  • Connect a custom domain (optional)

Great Job!

Congratulations on completing this tutorial series! You now have a fully functional, deployed blog using Next.js 14 and Wisp CMS. Keep exploring and happy coding!