vercel / nextjs-portfolio-starter

Easily create a portfolio with Next.js and Markdown.
https://demo.vercel.blog
664 stars 263 forks source link

Making the posts page index page #43

Open mertdeveci5 opened 8 months ago

mertdeveci5 commented 8 months ago

Is there a way to make the posts page the index default page? I believe that should be the case as this is a blogpost website.

Also what is the best way to customise the design of the pages?

Note: Not sure if nextra is still maintained

MiConnell commented 6 months ago

I think the best workaround I found for this is making index.mdx look like this

---
type: posts
title: Posts
date: 2024-03-28
---

and then moving the about page to pages/about/index.mdx

this way the homepage is your posts directory and then the about section is a header link.

Give it a shot and let me know if this works for you.

In terms of design you can still use nextjs components, for example adding an image to the about page:

import Image from 'next/image'

<div style={{
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  height: '100%',
}}>
  <div style={{
    borderRadius: '50%',
    overflow: 'hidden',
    width: '250px',
    height: '250px',
    margin: 'auto',
  }}>
    <Image
      src="/images/profile.png"
      alt="Photo"
      width={250}
      height={250}
      priority
      className="next-image"
    />
  </div>
</div>