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!
You'll need a few things. You may already have some of them:
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.
Now let's get started.
npx create-next-app --example https://github.com/jorshali/personal-site-starter personal-site-starter-app
Once this completes, simply run:
npm run dev
Now your personal site starter should be up and running on http://localhost:3000!
You don't want my face and name on your blog. Let's fix that. Open the following file in your favorite editor:
Here's how the constants modify the landing page:
The About Me section can be customized with the following constants:
And finally, here's how the constants modify the footer:
Now let's see how the new blog posts can be added in the
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.
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' ---
When a Markdown file is added, simply reload the landing page to see your new post.
Commit your code to Git, then push your repository to the provider of your choice. Amplify supports:
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:
> 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.
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.
Amplify will automatically detect the correct build settings. Simply select Next to accept the default settings.
When you reach the Review page, simply select Save 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.
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.
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.
In the following posts, I'll show you how to track subscribers in AWS and how to setup a custom domain:
- Start tracking your subscribers in AWS in under 30 minutes
- Configure a custom domain for your AWS Amplify App
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
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