Dr Reardon Website

Dr Reardon Website is a personal website template for an astrophysicist, built on Next.js with Tailwind CSS and Tailwind UI, that turns Markdown and MDX articles into a live personal site.

What is Dr Reardon Website?

Dr Reardon Website is a template for a personal academic website, specifically themed for an astrophysicist. It is built with Next.js, a React framework, and styled with Tailwind CSS using Tailwind UI components. The template takes article content written in Markdown (.md) or MDX (index.mdx) and renders a website with a development server on localhost:3000.

Key Features

• Next.js framework — The site runs on Next.js, providing a local development server at localhost:3000 and production-ready static output.
• Tailwind CSS plus Tailwind UI — Styling is done with utility classes from Tailwind CSS, and prebuilt components come from Tailwind UI, a paid component library.
• Markdown and MDX article publishing — Create articles as .md files in /pages/articles; for images, create a folder with index.mdx and picture files.
• Environment-based configuration — The site's public URL is set through the NEXT_PUBLIC_SITE_URL variable in a .env.local file.
• Live auto-updating — Editing files in /src automatically refreshes the site in the browser.

Who is it for?

• Astrophysicists and researchers — Launch a personal site to present research interests, publications, and a biography.
• Academic bloggers — Publish articles without a CMS by writing plain Markdown or MDX files.
• Developers learning Next.js — Explore how a Next.js project is structured, including environment variables and article routing.

What can you do with it?

• Share research articles: Write an article as a .md file, drop it in /pages/articles, and it appears on the site.
• Add image-rich posts: Create a folder named for the article URL, place an index.mdx file and images inside, and the site displays them.
• Customize the design: Edit files in /src to change the layout, colors, and content while the dev server updates in real time.

How does it work?

1. Install dependencies with npm install.
2. Create a .env.local file and set NEXT_PUBLIC_SITE_URL to your public URL.
3. Start the development server with npm run dev.
4. Open http://localhost:3000 to view the site, then edit files in /src to customize.

FAQ

How do I install the template?

Run npm install in the project root, create a .env.local file that sets NEXT_PUBLIC_SITE_URL, then run npm run dev and open http://localhost:3000.

How do I publish a new article?

Add a my-article-url.md file in the /pages/articles folder. For articles with pictures, create a folder named my-article-url containing an index.mdx file and image files.

What is the purpose of the NEXT_PUBLIC_SITE_URL variable?

It sets the public URL of your website. Next.js uses it to resolve absolute links and metadata during the build process.

Can I customize the design?

Yes. Edit files in the /src folder; the site auto-updates as you edit, so you see changes immediately.