Doing a personal website with next js and DatoCMS

Hi ✌️

After doing my website and blog, I decided to do the open-source project!

If you:

• You don't have a website
• You want to learn to deploy with Vercel
• You want to learn how to integrate DatoCMS with next

This is for you ❣️

I decided to do 2 ways to take this tutorial

• Easy Implementation

  • Configuration of external services
  • Deploy

• Explained Implementation

  • Configuration of external services
  • Structure explanation
  • Code explanation
  • Repository creation on Github
  • Deploy

In this article, we will build on the easy implementation, but if you want to know more about the way explained or continue the tutorials on my website, go-ahead 🤓

You can follow any of the 2 paths on my website, https://pabloobando.dev/open-source

With nothing more to say, let's continue with the easy implementation 🚀

At the end of this tutorial, you will have your website and blog online

Technologies with which the project is built

• Next Js
• TypeScript
• Css-in-Js: Emotion

I assume that you know in

• Next Js
• React Js
• Git
• TypeScript

We will start by doing the following

1. git clone --single-branch --branch tutorial https://github.com/pabloobandodev/personal-website.git
2. cd personal-website && git branch -m master
3. yarn install or npm install
4. yarn dev or npm run dev
5. open the project in your favorite code editor
6. Go to http://localhost:3000/

On your localhost, you should see this

Before touching the code, we need to configure two external services that we are going to use

1. DatoCMS: Is a cloud-based headless CMS designed to work with static websites, mobile apps, and server-side applications of any kind.

DatoCMS

1. Access to https://dashboard.datocms.com/login, create an account or sign in
2. Create a new project --> Start from "Blank Project"
3. Access the project you just created
4. Go the settings area

In the settings area

We will create the models (Is like the tables in a relational database)

To do it, you must click the plus button

We are going to create a model
Post: you must enable a draft/published system in additional settings!

Now we will create the fields for the model (Is like the columns in a relational database)

Fields of Post

1. Title: is a text, single-line string
2. Excerpt, is a text, single-line string
3. Content, is a text, multiple-paragraph text
4. Cover image, is a media, single asset
5. Date, is a date and time, date
6. Author, is a links, single link (validations, specified model, select Author model)
7. Slug, is an SEO, slug (validations, reference field, select title)

We can now create the data that we will use on our site

In the content area

Post: Here is where we will create our articles

Done, now we will create our API key!

Go to settings, select API tokens and click the plus sign to create a new one, you can call it whatever you want (I call it GraphQL Token)

We are done with DatoCMS!

Go to the project in your favorite code editor

1. Change the name of the file .env-example to .env
2. In the .env file add your keys and the email you authenticated

NEXT_DATOCMS_API_TOKEN="OUR DATOCMS API TOKEN, THE FIRST THAT WE CREATED"

1. Go to lib/datocms.ts

   • Delete the return of getAllPosts and getPost
   • Discoment the code of getAllPosts and getPost

2. Go to lib/constants.tsx

   • Update that data with your information

This is the file constants.tsx of my project!

Here you can see the icons available that you can use to your social media, https://react-icons.github.io/react-icons/

1. Update the profile image in public / images / profile.png with your icon

Ready, to see your updated site

1. Go to your terminal
2. Stop the local server
3. Re-raise the local server
4. Go to http://localhost:3000/

Done, you should already see your site with your data

Deploy

1. Go to GitHub a create a new repository

2. Open your terminal, run the commands of the next one

   • git init
   • git add .
   • git commit -m "first release"
   • git remote set-url origin
   • git push -u origin master

3. Access to https://vercel.com/, create an account or sign in

4. Access to https://vercel.com/import/git

5. Import the repository that you created

6. Add the environment variables

NEXT_DATOCMS_API_TOKEN="your_datocms_key"

Ready, we finished

I hope you liked this tutorial! ♥️

You can follow me in Github, https://github.com/pabloobandodev 🤟