57 lines
2.3 KiB
Markdown
57 lines
2.3 KiB
Markdown
# Next.js + Tailwind CSS + MDX Starter Template
|
|
|
|
A starter template for Next.JS with Tailwind and MDX. Intentionally limited feature-set to keep things simple. (If you want a more comprenhensive starter template check out https://github.com/timlrx/tailwind-nextjs-starter-blog).
|
|
|
|
Includes instructions on how to rapidly customize the site.
|
|
|
|
Preview online at https://nextjs-tailwind-mdx-tau.vercel.app
|
|
|
|
## Features
|
|
|
|
Pre-configured with the following;
|
|
|
|
* Tailwind for easy styling. Booted off NextJS default tailwindcss example (https://github.com/vercel/next.js/tree/canary/packages/create-next-app)
|
|
* Markdown / MDX rendering support. All markdown/MDX in `/content/` gets auto-rendered into the site.
|
|
* Configurable e.g. site title etc (secret config in environment variables). See `Configuration` below.
|
|
* Simple theming via `components/Layout.js`. Used to provide a standard them for all pages. Customizable NavBar and Footer with configurable nav links.
|
|
* Analytics: Google analytics support following https://github.com/vercel/next.js/tree/canary/examples/with-google-analytics
|
|
* SEO: basic SEO out of the box (via https://github.com/garmeeh/next-seo)
|
|
|
|
## How to use
|
|
|
|
Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
|
|
|
|
```bash
|
|
npx create-next-app --example https://github.com/datopian/portaljs/tree/main/examples/nextjs-tailwind-mdx
|
|
# or
|
|
yarn create-next-app --example https://github.com/datopian/portaljs/tree/main/examples/nextjs-tailwind-mdx
|
|
```
|
|
|
|
Then run the app:
|
|
|
|
```bash
|
|
cd myapp
|
|
npm run dev
|
|
```
|
|
|
|
## Configuration
|
|
|
|
See `config` directory:
|
|
|
|
* `config/siteConfig.js` for site wide configuration especially for general theme (e.g. title) and SEO
|
|
* `config/navLinks.js` for configuration of navigation links
|
|
|
|
### How to customize the content directory location?
|
|
|
|
Open up `pages/[...slug].js` and change the `CONTENT_PATH` variable.
|
|
|
|
### Theming
|
|
|
|
We suggest the following:
|
|
|
|
* Replace the favicon in `public/favicon.ico` or use the svg favicon ...
|
|
* Add a logo: add image to `public` e.g. then open `components/layout.js` and replace footer logo link
|
|
|
|
Tweaking the theme in general: open up `components/Layout.js` and tweak away.
|
|
|