A statically generated portfolio site using Next.js, Markdown, and TypeScript

The personal site starter creates a site that includes:

• professional information
• links to your online presence
• ability to subscribe
• blog posts with social sharing
• responsiveness for mobile
• easy customization

You can see a demo here:

https://jacoborshalick.me

This project incoporates aspects of the following templates:

• blog-starter
• Next-JS-Landing-Page-Starter-Template

Blog posts are stored in /_posts as Markdown files with front matter support. Adding a new Markdown file in there will create a new blog post.

To create the blog posts we use remark and remark-html to convert the Markdown files into an HTML string, and then send it down as a prop to the page. The metadata of every post is handled by gray-matter and also sent in props to the page.

Demo

https://jacoborshalick.me

Performance

The site gets a near perfect Lighthouse score so you can expect your site to be extremely performant.

Deploy with AWS Amplify

You can deploy the personal-site-starter using AWS Amplify. A complete tutorial can be found here:

Host a portfolio site with Next.js and AWS in under 30 minutes

How to use

Execute create-next-app with npm, Yarn, or pnpm to bootstrap the example:

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

yarn create next-app --example https://github.com/jorshali/personal-site-starter personal-site-starter-app

pnpm create next-app --example https://github.com/jorshali/personal-site-starter personal-site-starter-app

Now you can simply run:

npm run dev

Your personal site should be up and running on http://localhost:3000! If it doesn't work, post on GitHub discussions.

Enabling subcribers

You can use the aws-subscribers project to store subscribers in AWS. You can find a tutorial to integrate the aws-subscribers project here:

Start tracking subscribers in AWS in under 30 minutes

Using a custom domain

It's easy to setup a custom domain with AWS Amplify. You can find a tuotrial to setup your own custom domain here:

Configure a custom domain for your AWS Amplify App

Contributions welcome

Contributions are certainly welcome! Whether you would like to enhance the site starter, or feature your site that was built with the starter, simply submit a pull request. To feature your site, simply add it to this README in the pull request.

Notes

personal-site-starter uses Tailwind CSS (v3.0).