run/pages/themes/blog/index.mdx

# Get Started

import Callout from 'nextra-theme-docs/callout'

<Callout>
  An example of the blog theme can be found
  [here](https://github.com/vercel-solutions/nextjs-portfolio-starter).
</Callout>

Similar to the docs theme, you can install the blog theme with the following commands:

### Configurations

1. Install Next.js, Nextra and React: `yarn add next nextra react react-dom`

2. Install the blog theme: `yarn add nextra-theme-blog`

3. Create the following Next.js config and theme config under the root directory:

```jsx
// next.config.js
const withNextra = require('nextra')({
  theme: 'nextra-theme-blog',
  themeConfig: './theme.config.js',
  // optional: add `unstable_staticImage: true` to enable Nextra's auto image import
})
module.exports = withNextra()
```

```jsx
// theme.config.js
export default {
  footer: <p>MIT 2021 © Nextra.</p>,
  head: ({ title, meta }) => (
    <>
      {meta.description && <meta name="description" content={meta.description} />}
      {meta.tag && <meta name="keywords" content={meta.tag} />}
      {meta.author && <meta name="author" content={meta.author} />}
    </>
  ),
  readMore: 'Read More →',
  titleSuffix: null,
  postFooter: null,
  cusdis: {
    appId: 'your_app_id',
    host: 'your_host(optional)',
    lang: 'your_lang'
  },
  darkMode: false,
  navs: [
    {
      url: 'https://github.com/shuding/nextra',
      name: 'Nextra'
    }
  ]
}
```

4. Create `pages/_app.js` and include the theme stylesheet:

```jsx
import 'nextra-theme-blog/style.css'

export default function Nextra({ Component, pageProps }) {
  return <Component {...pageProps} />
}
```

5. You are good to go!

---

<Callout>
You can also use [`<style jsx>`](https://nextjs.org/docs/basic-features/built-in-css-support#css-in-js) to style elements inside `theme.config.js`.
</Callout>