Building A Blog Website with Next.js

Hein Thant — Tue, 01 Aug 2023 19:42:01 +0000

I've always wanted a platform that truly reflects my passion for coding and writing. In the past few weeks, I started exploring Next.js and decided to build a personal blog website as a side project. In this article, I want to share my experience and a few things I learned while building this project.

If you want to see my blog in action, check it out at www.indiecoder.tech.

Simple and User-friendly Design

I went for mobile-first approach when designing my blog. I also wanted my website to feel familiar, like scrolling through a social media platform. So, I designed the navbar and homepage to look like a social media app. I also added a dark/light mode feature which is essential in modern web design.

Content Management

I chose Hygraph for managing posts and other content on my website. It offers a GraphQL API and an intuitive UI to easily define schema and organize content. To interact with the API, I used graphql-request library which provides a convenient way to make GraphQL requests.

Dynamic Routing and SSG

I learned about many powerful features of Next.js while building this app. Dynamic routing and static site generation are especially amazing. With its folder-based routing system, we don't need to set up routers manually like in a React app. For example, when I create about/page.tsx file inside app/ directory, Next.js renders the page on /about route.

To render individual blog posts, I set up a folder like app/posts/[slug]/page.tsx where [slug] is a dynamic parameter for each post. Although Next.js can handle most of the dynamic stuff, it doesn't automatically know which routes to generate during the build time. This results in server-side rendering of the page. We can avoid this by defining generateStaticParams function. Here's the function I used for generating all routes for posts.

export const generateStaticParams = async () => {
  const posts = await getPosts();
  return posts.map((post) => ({ slug: post.slug }));
};

Comment System

Every blog needs some social interaction, like comments and reactions. I didn't want to spend a lot of time on creating a reliable comment system. After some research, I found Giscus which uses GitHub Discussions to integrate comments. It's very easy to customize and use. Just adding one component gave me a fully-functional comment system with authentication and reactions.

Conclusion

Creating my blog website with Next.js has been an amazing experience. Although it's still basic, I feel proud of what I've built and I plan to add more features in the future.

You can explore the source code on GitHub. I'd love to hear your feedback and suggestions to make it even better.

Thank you for joining me on this journey, and happy coding! 😊

Deploying a Rails app on Render

Hein Thant — Tue, 04 Jul 2023 17:55:57 +0000

When it comes to deploying web applications, choosing the right platform can significantly impact development efficiency and overall performance. The Render platform offers a powerful and user-friendly solution for deploying Rails apps. In this tutorial, I'll walk you through a step-by-step guide on how to deploy your Rails + PostgreSQL applications on Render.

Creating Build Script

The first step in preparing your Rails app for deployment is to create a custom build script. This script will allow you to define specific steps required to build your application. To create the script, follow these steps:

Step 1. Open your Rails project's directory.
Step 2. Create a new file named render-build.sh inside bin directory.
Step 3. Paste the following script. You can also add the necessary build steps, such as installing node dependencies and compiling assets

#!/usr/bin/env bash
# exit on error
set -o errexit

bundle install
bundle exec rake assets:precompile
bundle exec rake assets:clean
bundle exec rake db:migrate

Step 4. To ensure bin/render-build.sh script is executable, run the following command in your terminal:

chmod a+x bin/render-build.sh

Configuring Database and Environment Files

Several configurations need to be updated before deploying your Rails app on Render.
Step 1. Update config/database.yml with the following changes.

production:
  <<: *default
  url: <%= ENV['DATABASE_URL'] %>

Step 2. Open config/puma.rb and uncomment the following lines.

max_threads_count = ENV.fetch("RAILS_MAX_THREADS") { 5 }
min_threads_count = ENV.fetch("RAILS_MIN_THREADS") { max_threads_count }
threads min_threads_count, max_threads_count

port ENV.fetch("PORT") { 3000 }

environment ENV.fetch("RAILS_ENV") { "development" }

pidfile ENV.fetch("PIDFILE") { "tmp/pids/server.pid" }

workers ENV.fetch("WEB_CONCURRENCY") { 4 }

preload_app!

plugin :tmp_restart

Step 3. Enable public file server in config/environments/production.rb.

config.public_file_server.enabled = ENV['RAILS_SERVE_STATIC_FILES'].present? || ENV['RENDER'].present?

Step 4. Make sure that your project has config/master.key file. If you don't have a master key yet, delete credentials.yml.enc and run this command to generate a new one.

EDITOR="code --wait" rails credentials:edit

Setting up PostgreSQL database

Render simplifies the process of setting up a PostgreSQL database for your Rails app. Follow these steps to get your database up and running:
Step 1. Log in to your Render dashboard.
Step 2. Create a new PostgreSQL database.
Step 3. Provide a name for your database.
Step 4. For database and username values, use the ones specified in config/database.yml.

production:
  <<: *default
  url: <%= ENV['DATABASE_URL'] %>
  database: your_database
  username: your_user
  password: <%= ENV["YOUR_APP_DATABASE_PASSWORD"] %>

Step 5. Copy the generated Internal Database URL and Password as you'll need them later.

Deployment

With your app and database configurations in place, it's time to deploy on Render.

On Render dashboard, click New and choose Web Service.
Select Ruby as the environment.
In the Commands section, specify the build and start commands.
- Build : ./bin/render-build.sh
- Start : bundle exec puma -C config/puma.rb
Next, add the necessary environment variables:
- DATABASE_URL : User the Internal Database URL you copied earlier.
- YOUR_APP_DATABASE_PASSWORD: Use the Password you copied.
- RAILS_MASTER_KEY : Add the key from config/master.key
Finally, click Create Web Service to deploy your application.

Conclusion

Congratulations! You've successfully deployed your Rails app on the Render platform. I hope you found this step-by-step guide helpful in successfully deploying your own application. If you have any further questions or need additional guidance, feel free to reach out to me.

Happy Coding!

DEV Community: Hein Thant

Building A Blog Website with Next.js

Simple and User-friendly Design

Content Management

Dynamic Routing and SSG

Comment System

Conclusion

Deploying a Rails app on Render

Creating Build Script

Configuring Database and Environment Files

Setting up PostgreSQL database

Deployment

Conclusion