Doing a personal website with next js and DatoCMS

Pablo Obando — Mon, 27 Jul 2020 00:04:48 +0000

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

git clone --single-branch --branch tutorial https://github.com/pabloobandodev/personal-website.git
cd personal-website && git branch -m master
yarn install or npm install
yarn dev or npm run dev
open the project in your favorite code editor
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

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

DatoCMS

Access to https://dashboard.datocms.com/login, create an account or sign in
Create a new project --> Start from "Blank Project"
Access the project you just created
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

Title: is a text, single-line string
Excerpt, is a text, single-line string
Content, is a text, multiple-paragraph text
Cover image, is a media, single asset
Date, is a date and time, date
Author, is a links, single link (validations, specified model, select Author model)
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

Change the name of the file .env-example to .env
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"

Go to lib/datocms.ts
- Delete the return of getAllPosts and getPost
- Discoment the code of getAllPosts and getPost
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/

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

Ready, to see your updated site

Go to your terminal
Stop the local server
Re-raise the local server
Go to http://localhost:3000/

Done, you should already see your site with your data

Deploy

Go to GitHub a create a new repository
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
Access to https://vercel.com/, create an account or sign in
Access to https://vercel.com/import/git
Import the repository that you created
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 🤟

Understanding React Context to Beginners or Lazy people 🥱

Pablo Obando — Thu, 16 Apr 2020 00:58:11 +0000

Do you know what's Context and how to use it with Hooks?

If you:

Doesn't understand the React Docs yet (in some moment you'll do it)
Only wants an explicit and easy tutorial 🦥

You're in the correct place!

What will be the path we will follow?

We're going to understand what is Context and what problem does it solve, then we're going through code!

Without further ado, let's do it 🏄‍♂️

In many applications, we have a state global (data which we need to manipulate in deferents parts of the app 💾)

Context, is a "state management" which provides a way to pass data through the component tree without having to pass props down manually at every level.

Now, we will through the steps to implement Context in our Apps

1- Creating our Context:

2- Subscribing our Components to the Context:

Every Context comes with a Provider, you need to wrap your components with the Provider this will allows to the components subscribe to the Context changes.

The Provider accepts a value prop to be passed to consuming components that are descendants

3- Consuming the Context in our component:

You can use a is a React component that subscribes to the Context changes which uses the "render props" technique to consume the value of the Context

In this example we're going to use the Hook useContext which accepts a Context object (the value returned from React.createContext) and returns the current Context value for that Context

It's important to remember that the current Context value is determined by the value prop of the nearest above the calling component in the tree.

Well people this it's all, to this point I hope that you can create a Context, subscribed your components and change the current value of the Context since a child (look carefully out the second image of the step 3)

DEV Community: Pablo Obando