Personal Blog Website

My peronal website, portfolio and blog. Blog is powered by Headless Hashnode CMS.

Features

• Simple and clean UI
• Blog via Headless Hashnode CMS
• Portfolio with Github pinned projects
• Responsive design
• Dark mode

Tech Stack

• Next.js
• Tailwind CSS
• GraphQL (for requests)

Headless Hashnode CMS

This website uses Headless Hashnode CMS to fetch and display blog posts. You can use it for free. It consumes Hashnode's Public APIs, and gives you a fully customizable blog that can be deployed anywhere, including a subpath of a custom domain. Combined with Hashnode's headless mode, it unlocks entirely new possibilities. You can now use Hashnode's world class editor and dashboard to author content and collaborate.

Local Development

1. Fork and clone this repository

2. Create a Hashnode account and create a blog. (ignore if you already have one)

3. Create a new Github Personal Access Token with repo scope. Here's how. This will be used to fetch your Github pinned projects.

4. For testing locally. Create a .env.local file in the root of the project and add the following environment variables:

   NEXT_PUBLIC_HASHNODE_GQL_ENDPOINT=https://gql.hashnode.com
   NEXT_PUBLIC_HASHNODE_PUBLICATION_HOST="your-blog-name.hashnode.dev"
   NEXT_PUBLIC_BASE_URL="/blogs"
   NEXT_PUBLIC_MODE=development
   HOST_URL="http://localhost:3000"
   GITHUB_API_ENDPOINT=https://api.github.com/graphql
   GITHUB_PERSONAL_ACCESS_TOKEN="your-github-personal-access-token"

5. Make required adjustments. Most of the personal information can be updated from app/lib/profile.json.

6. To test locally, first install dependencies with npm install and then run npm run dev.

Deployment to Vercel

1. Follow the steps mentioned in the Local Development section.

2. Create a new Vercel account and connect your Github account. Skip if you already have one.

3. Import this repository to Vercel.

4. Add the environment variables mentioned in the Local Development section to Vercel's environment variables. Make the following adjustments:

   NEXT_PUBLIC_MODE=production
   HOST_URL="https://your-website-url"

5. Deploy the project.

6. Your website should be live now.

7. If you want to use a custom domain, you can add it from the Vercel dashboard. Read more about it here.

8. Go to your hashnode blog settings.

9. In the domain section, enable headless mode and add blog base url as your-website-url/blogs.

Your blog should be live now.

License

This project is open source and available under the Apache 2.0 License. You are free to use it for personal or commercial use. If you like this project, consider giving it a star. 🌟

Support

If you like this project, consider supporting me. You can also contribute to this project. 🚀

Connect

• Twitter
• LinkedIn
• Email