Commit

Commit is a Tailwind UI site template built using Tailwind CSS and Next.js.

Getting started

To get started, first install dependencies via npm:

npm install

Next, create a .env.local file in the root of your project and set the NEXT_PUBLIC_SITE_URL environment variable to your site's public URL:

NEXT_PUBLIC_SITE_URL=https://example.com

Then start the development server:

npm run dev

Finally, open http://localhost:3000 in your browser to view the website.

Customizing

We've tried to build this template exactly the same way we'd build it if it we were building a real website, so there's no weird configuration files or global variables like you might see in a product that has been built as a "theme" rather than as an actual site.

Instead, you make changes by just opening the files you want to change, and changing whatever it is you want to change.

We'll cover a lot of the fundamentals here to help you get going quickly, but at the end of the day the whole codebase is yours and you should feel free to edit everything directly as much as you need to.

Project structure

The template is built as a pretty standard Next.js website, but using the src folder so things like the app directory are located at ./src/app instead of being top-level.

Title and metadata

You can update your site's metadata in ./src/app/layout.jsx.

Hero content

The main hero section for the site that includes your logo, headline, description, and links are all located in ./src/components/Intro.jsx.

Adding changelog entries

All of the changelog entries are stored in one big ./src/app/page.mdx file. We were inspired to set it up this way by how projects commonly maintain plaintext CHANGELOG files, and thought it would be cool to parse this sort of format and turn it into a nicely designed site.

Each changelog entry should be separated by a horizontal rule (---) and should include an <h2> with a date, specified as an MDX annotation:

---

![](@/images/your-screenshot.png)

## My new changelog entry {{ date: '2023-04-06T00:00Z' }}

Your content...

You can find the newsletter sign up form in ./src/components/SignUpForm.jsx — if you have a newsletter you'll want to wire this up with whatever mailing list software you use to get it to actually work.

RSS feed

The site uses a route handler to automatically generate an RSS feed at run time based on the rendered home page.

You can edit the metadata for the feed (like the title and description) in ./src/app/feed.xml/route.js.

Make sure to set your NEXT_PUBLIC_SITE_URL environment variable as the RSS feed needs this to generate the correct links for each entry.

License

This site template is a commercial product and is licensed under the Tailwind UI license.

Learn more

To learn more about the technologies used in this site template, see the following resources:

Tailwind CSS - the official Tailwind CSS documentation
Next.js - the official Next.js documentation
Motion One - the official Motion One documentation
MDX - the official MDX documentation

LuisSempre / commits