How i made this site

📆 2024-06-10

📍 Home

Introduction

For my Professional Networking course, I was tasked with creating a portfolio website with a blog. This was the perfect opportunity to learn a new technology, and I decided to use Next.js. I had a little experience with React and wanted to delve deeper into it. Additionally, I wanted an easy way to manage the website and find a straightforward solution for hosting and deployment.

Why Next.js

I chose Next.js because it is a React framework that allows you to build server-side rendered (SSR) applications. SSR means that the initial HTML is generated on the server, which can improve performance and SEO. Next.js also provides a great developer experience with features like automatic code splitting and hot module replacement. It has a robust community, numerous plugins, and many examples to help you get started.

I began by watching some YouTube tutorials and reading the documentation. After creating a few small projects to get the hang of it, I started working on my portfolio website. For the UI, I could have written the CSS myself, but I decided to use Tailwind CSS because it is easy to use and has a lot of pre-made components. I also used components from the Chad CDN library, which looked good and were easy to use, adding another layer of new learning.

Hosting and Deployment with Vercel

I discovered Vercel, a platform that allows you to host and deploy your website with ease. You can connect your GitHub repository, and with every push to the main branch, it will automatically deploy your website. This feature was excellent because I could easily update my website and see the changes live. Additionally, I didn’t have to worry about hosting and setting up deployment pipelines myself, and Vercel offers a free tier perfect for small projects like this.

Tools I Used

• Vercel
• Chad CDN/UI
• Tailwind CSS

YouTube Tutorials

• Next.js Crash Course
• Tailwind CSS Crash Course

Managing the Blog

After setting up the homepage, I started working on the blog. I wanted to make it easy to add new blog posts and have a good overview of all posts. I decided to use Markdown files for the blog posts because they are easy to write and manage. Although I could have created a full backend or used a CMS tool, this would have taken more time. Now, I have a single site to manage everything, making it easy to edit and deploy.

To handle MDX files efficiently, I used Velite. Velite allows you to compile and import MDX files as React components, letting you write your blog posts in Markdown and include React components directly within them. This streamlines the process of integrating dynamic content and complex UI elements in your Markdown files.

Tools and Tutorials for Managing the Blog

• Velite
• MDX
• Josh Tried Coding Tutorial
• Jolly Coding Tutorial

Conclusion

After several days of work, I have a good-looking website that is easy to manage and deploy. I learned a lot about Next.js and Tailwind CSS, and I am happy with the result. I will continue to work on the website, adding new features and blog posts. Additionally, I plan to learn more about React and Next.js and maybe create more projects with them. I am pleased with the result and hope you like it too. If you have any feedback or questions, feel free to contact me. I would be happy to help you.