DEV Community

Cover image for Host a personal blog with Next.js and AWS in under 30 minutes
Jacob Orshalick
Jacob Orshalick

Posted on • Updated on

Host a personal blog with Next.js and AWS in under 30 minutes

A tutorial where you can learn how to use Next.js with AWS while actually building something useful.

We've all said it:

  • I want to setup a portfolio site
  • I want to learn Next.js
  • I want to try out AWS Amplify

How can I do it all?

Here's your chance. Finally, a tutorial where you learn while actually building something useful.


By the end of this article, you'll have your own personal blog, built with Next.js, and hosted on AWS. As an encore, I'll even show you how to setup your own domain and a subscriber service so you can share it with the world. It's never been easier to start some self-promotion.

Need proof? The article your reading was originally published to jacoborshalick.me. That site and article were created using the steps shown here.

So let's get your personal blog built!

Before you get started

You'll need a few things. You may already have some of them:

This tutorial assumes you have some JavaScript development experience. It also assumes you are comfortable working in the terminal and using Git. Outside of that, the tutorial will walk you through what you need to know.

About the personal site starter

The personal site starter creates a site that includes:

  • professional information
  • links to your online presence
  • ability to subscribe
  • blog posts
  • responsiveness for mobile

You can see an example at https://jacoborshalick.me.

The application was built with Next.js and Tailwind. The starter is a custom template inspired by the following projects:

Now let's get started.

Retrieve the personal site starter

Start by running create-next-app with npm:

npx create-next-app --example https://github.com/jorshali/personal-site-starter personal-site-starter-app
Enter fullscreen mode Exit fullscreen mode

Once this completes, simply run:

npm run dev
Enter fullscreen mode Exit fullscreen mode

Now your personal site starter should be up and running on http://localhost:3000!

Customize the project

You don't want my face and name on your blog. Let's fix that. Open the following file in your favorite editor:

src/lib/constants.ts

Here's how the constants modify the landing page:

Site constants for landing page

The About Me section can be customized with the following constants:

Site constants for About Me section

And finally, here's how the constants modify the footer:

Site constants for articles and footer

Now let's see how the new blog posts can be added in the _posts directory.

Adding blog posts

All blog posts are stored in /_posts as Markdown files. If you're unfamiliar with the Markdown format you can learn about it here. The Markdown is converted to HTML and displayed to the page.

The metadata of every post is handled by gray-matter and also sent in props to the page.

As an example, here is the markdown (with metdata) for the post your reading now.

You'll see examples in the starter, but you should define the following at the top of every markdown file:

---
title: 'My new blog post'
excerpt: 'This is the latest technology I have been learning'
coverImage: '/assets/blog/my-new-blog-post/image.jpg'
coverImageAttribution: 'Photo by John Doe on Unsplash'
date: '2023-01-20T07:00:00.000Z'
ogImage:
  url: '/assets/blog/my-new-blog-post/image.jpg'
---
Enter fullscreen mode Exit fullscreen mode

When a Markdown file is added, simply reload the landing page to see your new post.

Commit your project to a public Git repository

Commit your code to Git, then push your repository to the provider of your choice. Amplify supports:

Now let's deploy to AWS Amplify

Open the AWS Console, search for AWS Amplify, and open it. If you have not created an Amplify app before, simply scroll to the bottom of the page and select:

Amplify Hosting
> Host your web app > Get started

If you have created an app before, select:

New app > Host web app

Now choose your Git repository provider and select Continue.

Choose your Git repository provider

For most Git providers, you will be prompted to allow Amplify Hosting access to your repositories. Once you authorize access, choose the repository for the starter app and select Next.

Choose your Git repository

Amplify will automatically detect the correct build settings. Simply select Next to accept the default settings.

Accept the default build settings

When you reach the Review page, simply select Save and Deploy.

Review the settings and deploy

At this point, Amplify will build the project and deploy it. Expect to wait about 2–3 minutes for the build to complete. You can monitor progress in the Amplify console.

Monitor the build progress

Any change to the branch you selected during setup will now result in a new build and deployment. You can always return to the Amplify console to see the progress of a build or view the logs if a build fails.

View your site live on AWS

That's it! Your professional site is now live. You can access your site from the Domain link in the project build details.

If you run into any issues along the way, feel free to ask questions or post issues at: personal-site-starter.

What's next?

In the following posts, I'll show you how to track subscribers in AWS and how to setup a custom domain:

Setting up subscribers is optional. If you aren't ready for that just yet, you can disable subscribers in src/lib/constants.ts. Simply set SUBSCRIBE_ENABLED to false.

You can now register a custom domain and connect it through Route 53 in AWS. That way you can share your new portfolio site with the world.


Subscribe to my newsletter to get posts straight to your inbox: https://jacoborshalick.me

Top comments (4)

Collapse
 
elliot_brenya profile image
Elliot Brenya sarfo

Jacob, this guide is truly outstanding. It's clear that you put a lot of thought and care into creating it. This post is incredibly valuable and I'm grateful for the knowledge you've shared. Thank you so much for sharing it with us ✌🏽

Collapse
 
jorshali profile image
Jacob Orshalick

Thank you Elliot, I'm glad it's helpful! I will be releasing part 2 and part 3 soon so keep an eye out for more.

Collapse
 
jorshali profile image
Jacob Orshalick

The tutorial for setting up a custom domain is now available as well:

dev.to/jorshali/configure-a-custom...

Collapse
 
jorshali profile image
Jacob Orshalick

For those who want to setup an AWS Lambda for saving subscribers, the tutorial is now available:

dev.to/jorshali/start-tracking-sub...