# Docs Theme

import { Callout, Steps } from 'nextra/components'

<Callout>This website is built with the docs theme.</Callout>

you can install the blog theme with the following commands:

## Getting start

<Steps>

### Install Next.js, Nextra and React

```sh npm2yarn
npm i react react-dom next nextra
```

### Install the docs theme

```sh npm2yarn
npm i nextra-theme-docs
```

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

```jsx filename="next.config.mjs"
import nextra from 'nextra'

const withNextra = nextra({
  theme: 'nextra-theme-blog',
  themeConfig: './theme.config.js'
  // optional: add `staticImage: true` to enable Nextra's auto image import
})
export default withNextra()
```

```jsx filename="theme.config.js"
/**
 * @type {import('nextra-theme-docs').DocsThemeConfig}
 */
export default {
  projectLink: 'https://github.com/shuding/nextra', // GitHub link in the navbar
  docsRepositoryBase: 'https://github.com/shuding/nextra/blob/master', // base URL for the docs repository
  titleSuffix: ' – Nextra',
  nextLinks: true,
  prevLinks: true,
  search: true,
  customSearch: null, // customizable, you can use algolia for example
  darkMode: true,
  footer: true,
  footerText: `MIT ${new Date().getFullYear()} © Shu Ding.`,
  footerEditLink: `Edit this page on GitHub`,
  logo: (
    <>
      <svg>...</svg>
      <span>Next.js Static Site Generator</span>
    </>
  ),
  head: (
    <>
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <meta name="description" content="Nextra: the next docs builder" />
      <meta name="og:title" content="Nextra: the next docs builder" />
    </>
  )
}
```

### You are good to go!

</Steps>

---

<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>
