How I Coded Up My Own Blog with NextJS and WordPress

JuanCarlos Chavez
JuanCarlos Chavez
Posted underTech

If you are reading this post before in 2020 or 2021, odds are the website you are reading is built with the technologies I will be mentioning. I say this since you can inspect the code on this page pretty easily by right clicking any where on the page an hitting “inspect” and be able to see the html, css, and javascript.

How to right-click and “Inspect” a website

What is NextJS?

My blog is written using NextJS, a react framework many popular companies such as Netflix, Hulu, Uber use to build their companies websites. NextJS is also built by the same team that made Vercel, a platform solution that provides production-grade hosting for your NextJS deployments.

What is WordPress?

WordPress is “the engine that runs under the hood” of over 400 million websites as of 2020. The fancy word for it is a “content management system” which allows non-coders to be able to create pages, blogs, and e-commerce stores with it’s free and open source code base. It’s also pretty cheap to find hosting for and there are plenty of “one-click” installs for it.

The holy grail of templates

In the web development world, there is always shade thrown at PHP and WordPress since they resemble “legacy” code bases and have a history of being hacked once it’s outdated. But WordPress as a tool to create pages, blogs, and content has been pretty solid and that is why it continues to support about 1/3rd of all websites on the internet.

Modern javascript frameworks such as React and NextJS have proven to be industry standard and some of the “hottest” tech to work on in the web development world. Luckily, Vercel has a sample application that integrates WordPress as an API and NextJS as a server side rendered pages:

https://github.com/vercel/next.js/tree/canary/examples/cms-wordpress

Design

I based the design off an awesome simplistic blog I came across through the another web dev friend: https://tinyprojects.dev/

I followed a similar structure and content.

_____________

Is this is something you would like to learn more about, send me an email > hey@juancchavez.com

Get notified about tech, design, and entrepreneurship posts:

Subscribe to our newsletter to get to know about my latest projects and posts.


More Stories

Youtube, Podcast, & Life Updates – March 2021

The beginning of the quarter of the year is always a hectic time for me. We’re just coming off from holidays, getting back into work, & preparing for tax season. I always tend to feel refreshed and ready to attack the year in Jan & Feb with my list of goals in hand, being filled […]

JuanCarlos Chavez
JuanCarlos Chavez

How To Code a Personal Website STEP by STEP for Beginners! With FREE Hosting 2021 Edition

Have you ever wanted to learn to code but didn’t know where to start? You are in the right place. This blog is to help accompany the video above as a written guide. Who is this guide for? This tutorial is designed for those who are total beginners to web development and coding. Have you […]

JuanCarlos Chavez
JuanCarlos Chavez

Working on my second Youtube Video

I am at the beginning of my content creation journey and I have to admit, it’s asking me a lot deeper questions of myself and who am I more than I thought. Some questions come to mind: What kind of stuff do you want to share with the world? What would you do if you […]

JuanCarlos Chavez
JuanCarlos Chavez

2021 Goals

This is the year that I’ve decided to be more open than ever especially in the digital space. One way of doing this is by sharing the goals I am attempting to accomplish this year. It was tough trying to balance setting achievable goals and ambitious goals. I, as the pragmatic type, try to lean […]

JuanCarlos Chavez
JuanCarlos Chavez

How I created my first video & launched my YouTube Channel

First of all, Happy 2021! I know the craziness still exists but man it feels good that a fresh new number was added to the year ? Why start a YouTube Channel? There are 5 main reasons why I decided to finally hit record & upload: I want to be a producer rather than a […]

JuanCarlos Chavez
JuanCarlos Chavez

Recreating NASA’s UI for their Mission Control Tech

It’s pretty cool that NASA has an open-source javascript project that anyone can contribute to. You can actively write some code with the mission of space exploration & scientific discovery with some HTML, CSS, and JavaScript! This was my first glimpse into NASA’s openMCT program where they are determined to create a universal mission control […]

JuanCarlos Chavez
JuanCarlos Chavez

The Simple Intro Guide to Accounting for Small Businesses

When you create a business the first step is to register your business with your state. Each state has different processes fortunately (or unfortunately) that you could learn to do yourself but it can get clunky and weird. If you have some extra money (around $500) it’s highly recommended that you start your business with […]

JuanCarlos Chavez
JuanCarlos Chavez

Creating a project proposal for an agency in Notion

I have been using Notion for all list keeping including clients for the web design agency I am working to build over at omadesign.co My objective was to create a template “Project Proposal” plan for my future clients. I’ve looked at other samples and watched a few explanations on YouTube can came up with my […]

JuanCarlos Chavez
JuanCarlos Chavez