mirror of
https://github.com/jambonz/next-static-site.git
synced 2026-10-10 21:44:19 +00:00
79 lines
2.3 KiB
Plaintext
79 lines
2.3 KiB
Plaintext
# Get Started
|
||
|
||
Create your own Nextra site and deploy to Vercel:
|
||
|
||
[](https://vercel.com/import/git?s=https%3A%2F%2Fgithub.com%2Fshuding%2Fnextra&c=1)
|
||
|
||
Vercel will create the Nextra repository and deploy the site for you with just a few clicks.
|
||
Once done, every change in the repository will be deployed automatically.
|
||
|
||
---
|
||
|
||
### Configurations
|
||
|
||
1. Install Next.js and React: `yarn add next react react-dom`
|
||
|
||
2. Install Nextra and the docs theme: `yarn add nextra nextra-theme-docs`
|
||
|
||
3. Create the following Next.js config and theme config under the root directory:
|
||
|
||
```jsx
|
||
// next.config.js
|
||
const withNextra = require('nextra')('nextra-theme-docs', './theme.config.js')
|
||
module.exports = withNextra()
|
||
```
|
||
|
||
```jsx
|
||
// theme.config.js
|
||
export default {
|
||
repository: 'https://github.com/shuding/nextra', // project repo
|
||
docsRepository: 'https://github.com/shuding/nextra', // docs repo
|
||
branch: 'master', // branch of docs
|
||
path: '/', // path of docs
|
||
titleSuffix: ' – Nextra',
|
||
nextLinks: true,
|
||
prevLinks: true,
|
||
search: true,
|
||
customSearch: null, // customizable, you can use algolia for example
|
||
darkMode: true,
|
||
footer: true,
|
||
footerText: 'MIT 2020 © Shu Ding.',
|
||
footerEditOnGitHubLink: true, // will link to the docs repo
|
||
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" />
|
||
</>
|
||
}
|
||
```
|
||
|
||
4. Create `pages/_app.js` and include the theme stylesheet:
|
||
|
||
```jsx
|
||
import 'nextra-theme-docs/style.css'
|
||
|
||
export default function Nextra({ Component, pageProps }) {
|
||
return <Component {...pageProps} />
|
||
}
|
||
```
|
||
|
||
5. You are good to go!
|
||
|
||
---
|
||
|
||
import Callout from 'nextra-theme-docs/callout'
|
||
|
||
<Callout>
|
||
Any `.md` or `.mdx` file will turn into a doc page and be displayed in sidebar. You can also create a `meta.json` file to customize the page order and title.
|
||
|
||
Check the source code: https://github.com/shuding/nextra for more information.
|
||
</Callout>
|
||
|
||
<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>
|