Doing a personal website with next js and DatoCMS
Tags: react, typescript, javascript, graphql
Published: 2020-07-27 00:04:48

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/poui7dsjxpeo6rke14vy.png)

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*

![](https://www.datocms-assets.com/30813/1595806846-screen-shot-2020-07-26-at-17-39-09.png)


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 

![](https://www.datocms-assets.com/30813/1594145630-screen-shot-2020-07-07-at-12-11-40.png)

We are going to create a model
Post: you must enable a draft/published system in additional settings!
![](https://www.datocms-assets.com/30813/1594080182-screen-shot-2020-07-06-at-17-59-27.png)

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)

![](https://www.datocms-assets.com/30813/1594081442-screen-shot-2020-07-06-at-18-23-30.png)

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"

3. Go to lib/datocms.ts
    * Delete the return of getAllPosts and getPost
    * Discoment the code of getAllPosts and getPost

4. Go to lib/constants.tsx
    * Update that data with your information

This is the file constants.tsx of my project!

![](https://www.datocms-assets.com/30813/1594160633-code.png)


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

5. 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 <url of your repository>
    * 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

![](https://www.datocms-assets.com/30813/1594089506-screen-shot-2020-07-06-at-20-37-19.png)

NEXT_DATOCMS_API_TOKEN="your_datocms_key"  
    
Ready, we finished

![](https://www.datocms-assets.com/30813/1594089710-screen-shot-2020-07-06-at-20-41-27.png)

I hope you liked this tutorial! ♥️

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