Skip to main content
To replace the layout with React and SCSS Modules, see Custom layouts. The settings below configure the default layout; a custom PostList chooses which settings to use. Set home.title for the visible homepage heading and description for its subtitle. The homepage is generated automatically; no pages/index.mdx is needed. The homepage automatically lists published Markdown and MDX pages in pages/, newest first, with 12 articles per page. Pagination links lead to older articles at /page/2/, /page/3/, and so on. The links stay hidden when there is only one page. Each page uses the same selected layout.
  • Grid uses three columns on desktop, two on tablets, and one on phones.
  • Rows places one article across the available width, with its image beside the text. The image and text stack vertically on phones.
  • Column stacks articles in a centered reading column. Its width follows post.contentWidthEm, the same setting used by article bodies.
Cards show an optional cover, date and category, title, description, and author byline. They do not show reading time. Each card links to its article. Articles without a date appear last. You do not need to maintain a list of links in a homepage file: the home component generates the body. If you omit the title, it uses your site name followed by Blog. The site description appears below the homepage heading and is the fallback for search and social descriptions. The row above the posts is always visible. If any published post has a category, it shows All followed by the categories, ordered by their newest article. If no posts have categories, it shows N posts, where N is the number of published posts. An empty publication shows 0 posts and a simple empty state. Search stays on the right of the same row. In narrower layouts, the search field becomes an icon that opens the search dialog. Categories stay on one line and scroll horizontally beneath the search icon. Category pages preserve your selected layout and paginate independently, with 12 matching articles per page. For example, the second page of News appears at /category/news/page/2/. These links work without JavaScript.

Layout settings

Open Design → Customize → Home → Site to choose Grid, Rows, or Column. Changes appear in the preview; click Publish to apply them.
These same settings apply to local previews and builds. To change the layout inside an article, see Post layout.