Contentful & Next.js & NextUI Personal Site Example

If you want to quickly create a personal website using Contentful with minimal software development effort, this guide is for you. Follow these steps to explore the Contentful platform with your own personal site.

Technologies Used

• Next.js 13
• NextUI v2
• Tailwind CSS
• Tailwind Variants
• TypeScript
• Framer Motion
• next-themes

What You Need

To get started, you'll need the following:

• A Github account

• A Contentful space

---

Prepare Your Space

You'll need an empty Contentful space. Contentful offers a free space for personal use called an "Intro space" when you create an account.

---

1. Login to Contentful

   1. Visit Contentful’s website, and set up an account if you don’t have one.

2. API Keys

Copy and securely save your Space ID and API access tokens.

1. Click on Settings then API keys                                               
   

2. Add an API key by navigating to Settings > API keys and clicking on the "Add API Key" button.

3. Copy and securely save your Space ID, Delivery API access token, and Preview API access token to your notepad or another safe location on your computer for future use.
   

3. CMA token

Create a temporary CMA (Content Management API) token and ensure it is set to expire as soon as possible.

1. Click on Settings > CMA Tokens.
   

2. Create a personal access token and be sure to set an expiration date.
   

4. Setup Contentful Pexels integration

   1. Install the Contentful Pexels app to your new space. Click here   
      

---

Add Model and Sample Content to Your Space

Content modeling is a crucial aspect of using Contentful. To get you started, I've created a content model complete with sample content. You can easily populate your space using this tool.

---

• Enter your space id

• Enter your management access token

• Enter your environment ID or simply type "master"

• Click on “Setup", this would add content to your empty space.

---

Github Setup

Set up a GitHub account if you don't have one and log in. Fork the following repository by clicking on the "Fork" button.

---

1. Click on the dropdown menu and choose "Create a new fork" to create a new fork of the repository.
   

2. You can change the repository name to your desired name. Then click “Create fork”
   

---

Vercel Setup

To deploy the code from GitHub, we can use Vercel. Vercel offers a seamless deployment process for Next.js apps.

---

1. Visit https://vercel.com/login , login with your github account
   

2. Add a new Vercel project by clicking the "Add New project" button.
   
   

---

Import the Forked repository from the previous step.

---

Setup Environment Variables

1. Click on Environment variables and add them as follows;
   
   Here are the variables to add:

2. NEXT_PUBLIC_CTF_SPACE_ID   → your space ID

3. NEXT_PUBLIC_CTF_DELIVERY_TOKEN → Your Contentful Delivery Access Token

4. NEXT_PUBLIC_CTF_PREVIEW_TOKEN → Your Contentful Preview Access Token

5. NEXT_PUBLIC_CTF_ENVIRONMENT → Your Contentful Environment ID, e.g master

6. CONTENTFUL_PREVIEW_SECRET → A secret for setting up content preview. Keep this as you would be needing it.

7. NEXT_PUBLIC_SITE_URL → your site domain URL, if you don’t have one, put any domain for now.

9. NEXT_PUBLIC_GOOGLE_TAGMGR_ID → if you have Google tag manager if not use this "GTM-XXX"

---

This is what your environment variables should look like:

---

Click deploy to deploy your website.

---

---

License

Licensed under the MIT license.