Changelog
Set-up a blog and share what you ship as easy as 1-2-3!
A Next.js blog starter project built with MDX and Chakra UI. Fully-customizable and open source, so don't hesitate to add new features and report bugs!
Features
- A stylish changelog
- Celebrate your team's achievements - with team credits on each post
- Easy-to-use admin panel
Getting started
The easiest way to try this starter is to run it locally on your computer.
First, you'll need to create your own copy of this starter. You can do so by clicking the "Use this template" button on GitHub and filling out the form.
Once you've cloned the repository, install dependencies and start the Next.js server:
# Using yarn
yarn install
yarn dev
# Using npm
npm install
npm run devIf you want to change the default environment variables, create a .env.local file like this:
cp .env.local.example .env.local
## Deploying
You can deploy your blog to any hosting provider that supports Next.js. We recommend Vercel, as it is the easiest way to deploy Next.js apps.
To deploy you'll need to make sure you include the right environment variables. You can find some examples of our environment variables in the .env.local.example file.
Routes
/pages/:pageNumber- displays paginated articles/- redirects to/pages/0/changelogs/:id- displays one article
File structure
bin # Scripts
components # Reusable components
├─ core
├─ mdx-layout.tsx
└─ ...
lib # Types, theme, utilities, services
pages
├─ changelogs # MDX articles
├─ page
│ └─ [page].tsx # Paginated articles
├─ _app.tsx
└─ _middleware.ts
...Writing articles
To write a new blog post, create a new .mdx file in the /pages/changelogs directory.
Anatomy of an MDX article
MDX is a superset of markdown that lets you write JSX directly in your markdown files. It is a powerful way to add dynamic interactivity, and embed components within your content, helping you to bring your pages to life.
Learn more 👉 Next.js: Using MDX, Using MDX
Branding customization
Most of the branding elements can be found in <Navbar> and <Footer> components. To customize these components, update the code in these directories: