Introduction
Recently, I've been feeling pressure from within me to start writing about my experience using React as it is one of the most dynamic and powerful front-end libraries that I have so far learned and started using off my bucket list of frameworks
This is the first blog project that I am building in react and I think having a personal blog as a developer would be a good thing. That way I can create awesome content and publish articles on my blog. Probably if there is a feature to integrate these articles onto other blogging platforms; well and good. I decided to use NextJS for its awesome reusable and beautiful components.
Now, this can also be classified as getting ahead of oneself because I am experiencing and using NextUI for the first time to build a react app. But thanks be to documentation.
Set up a development environment
First, let's start by setting up our development environment. You will need to have Node.js and npm (Node Package Manager) installed on your computer. If you don't have them already, you can download them from the official website (nodejs.org/en).
Create the blog app
Once you have Node.js and npm installed, you can create a new project by running the following command in your terminal:
npx create-next-app my-blog
This will create a new folder called "my-blog" and will install all the necessary dependencies for our project.
Install the markdown library
Next, we need to install the react-markdown library, which will allow us to use and easily display markdown content in our blog posts. You can install it by running the following command:
npm install react-markdown
Now that we have the necessary dependencies, let's start building our blog. First, we need to create a new folder called "pages" at the root of our project. Inside this folder, we will create a new file called "index.js". This file will be responsible for displaying our blog's home page.
Building starts here
In the "index.js" file, we need to import the "Head" component from "next/head" and the "Link" component from "next/link". We will also import the "react-markdown" library that we installed earlier.
import Head from 'next/head';
import Link from 'next/link';
import ReactMarkdown from 'react-markdown';
Next, we need to create a new function called "Home" that will return the HTML for our home page. In this function, we will use the "Head" component to set the title of our page and the "Link" component to create links to our blog posts. We will also use the "react-markdown" library to display the content of our blog posts.
function Home() {
return (
<div>
<Head>
<title>My Blog</title>
</Head>
<Link href="/post1">
<a>Post 1</a>
</Link>
<Link href="/post2">
<a>Post 2</a>
</Link>
<Link href="/post3">
<a>Post 3</a>
</Link>
</div>
);
}
export default Home;
Now that we have our home page set up, we need to create the pages for our blog posts. In the "pages" folder, create a new file for each of your posts (e.g. "post1.js", "post2.js", etc.). In these files, we will use the same "Head" and "Link" components as before, but this time we will also use the "react-markdown" library to display the content of our blog posts.
Create first post
Here's an example of what the "post1.js" file might look like:
import Head from 'next/head';
import Link from 'next/link';
import ReactMarkdown from 'react-markdown';
const source = `
# Post 1
This is the first post on my blog.
In this first post, I have decided to discuss some of the latest trends in technology and how they are impacting our daily lives.
To display the content of our blog post, we will use the "ReactMarkdown" component and pass it to the "source" variable that contains our markdown content.
function Post1() {
return (
<div>
<Head>
<title>Post 1 - My Blog</title>
</Head>
<Link href="/">
<a>Home</a>
</Link>
<ReactMarkdown source={source} />
</div>
);
}
export default Post1;
Now that we have our home page and blog post pages set up, we can start adding content to our blog. To do this, you can simply edit the "source" variable in each of your blog post files and add your own markdown content.
You can also style your blog using CSS by creating a new file in the "static" folder called "styles.css" and linking to it in the "Head" component of your pages.
Run the blog on localhost
To run your blog, you can use the following command in your terminal:
npm run dev
This will start a development server and your blog will be available at localhost:3000.
Deploy to Vercel (production)
Once you have completed building your blog and are satisfied with the result, it's time to deploy it to a production environment. To do this you'll need to compile a production-ready project from the development by running the command below in your terminal
npm run build
NOTE: Don't forget to run the build command before deploying to the cloud.
Once you're done running the build command, you can deploy to Vercel. You will need to create an account on Vercel if you haven't already. If you're logged in, you can connect your GitHub account and push code directly from your repository into deployment. Choose the repository which has the code for this project.
Navigate to the "Import Project" page on Vercel and select the option to "Import your project from GitHub, GitLab, or Bitbucket". Select the repository that contains your blog, and then click "Deploy". Vercel will automatically build and deploy your project and will provide you with a unique URL for your blog.
You can also configure your domain name on Vercel so your blog will be accessible with your own custom domain name. this has to be paid for though.
Now, your blog is live and ready for the world to see! Vercel will also automatically rebuild and redeploy your project whenever you push updates to your repository.
Congratulations! You have now built your first personal blog using React and Next.js. With this basic setup, you can easily add more pages, and posts and customize the design of your blog according to your preference.
Hope this tutorial helped you in creating your personal blog. Happy blogging!
Sharing my understanding of concepts and approaches to problem-solving gives me happiness and it also helps me further my career. If you have any questions, feel free to reach out!
Connect with me on Twitter, LinkedIn, and GitHub!
Also, reach out to me, if you love to discuss startup building and building open-source software directly through my email📧 .