A modern multipurpose blog theme built with Tailwind CSS & Next.js
This is a Next.js template bootstrapped with create-next-app. If you're new to Next.js I recommend you check out the official Next.js documentation first.
- Node.js 12.22.0 or later
- MacOS, Windows (including WSL), and Linux are supported
First, install the dependencies by navigating to the project directory in your terminal and run
npm install
# or
yarn install # if you have Yarn installedThis will install all the required dependencies and place them in a folder called node_modules in the root directory.
Once the dependencies are installed, you can run the development server:
npm run dev
# or
yarn devOpen http://localhost:3000 with your browser to see the result.
components- Directory of Components Files404- Components for 404 pageabout- Components for about pagecontact- Components for contact pageheaders- All header componentshome- Components for home pagelayout- All components related to the site layoutposts- Components for the post pageshared- Components that are reused in multiple pagessidebar- All sidebar componentssocial- Components for social media icons
config- Directory of configuration files that contain site-wide datacontent- Directory of all Content markdown filesauthors- Contains all markdown data files for authorscategories- Contains all markdown data files for post categoriespages- Contains all markdown data files for individual pagesposts- Contains all of the markdown data files for postsshared- Contains all of the markdown data files for shared components
libs- Directory of all library filespages- Directory of all pagespublic- Directory of images and external filesstyles- Contains the entry point CSS file for Tailwind CSSutils- Directory of javascript utility files
The config/site.config.js file contains default site data used across the site. You can change this data by editing the file
export default {
"metaData": {
"title" : "Banter | Multipurpose NextJS Blog Template",
"description" : "Banter - a modern, stylish Tailwind CSS template for any blog, magazine, or news site.",
"author" : "Tailwind Awesome",
"keyword" : "magazine, multipurpose, react, nextjs, blog, template",
"ogImage" : "/images/ogimage.jpg"
},
"baseURL" : "https://banter.tailwindawesome.com/",
"logo" : "/images/banter-logo.png",
"logoText" : "Banter",
"favicon" : "/images/banter-icon-logo.png",
"postPerPage" : 6,
"copyright" : "© 2022 Banter. All rights reserved."
}You can configure the navbar and footer links by editing the config/menus.js file and changing the name and link values.
You can add or modify your social media links in the config/social.js file:
export default [
{
name: 'facebook',
href: '#'
},
{
name: 'instagram',
href: '#'
},
{
name: 'twitter',
href: '#'
},
{
name: 'linkedin',
href: '#'
}
]However, if you add a social media link make sure to add its corresponding icon in the components/social directory.
All of the content data is in markdown format. If you are not familiar with markdown, you can take a look at this excellent markdown cheat sheet that provides a quick overview of all the Markdown syntax elements.
All of the markdown files are located in the content directory. Banter uses gray-matter to parse our YAML front matter and markdown content. All of the frontmatter data for each content file is located at the top of the file in between 3 hyphens. Below the frontmatter is the markdown content.
You can add new or customize existing authors in the content/authors directory. Each author's file name is the slug for that particular author's page. For example, the author Mark Jack has a corresponding markdown file named mark-jack.md and an author page at /authors/mark-jack.
Every author has data in the following format:
---
name: "Mark Jack"
image: "/images/authors/mark-jack.jpeg"
role: "Staff Writer"
social_links:
- name: "twitter"
url: "#"
- name: "facebook"
url: "#"
- name: "instagram"
url: "#"
- name: "linkedin"
url: "#"
---
Lorem ipsum dolor sit amet mauris quis phasellus ornare dui lectus. Laoreet habitasse eiusmod nulla odio tortor neque diam convallis morbi dolore molestie tellus faucibus pharetra.All of the author images are stored in the public/images/authors directory. The markdown content below the frontmatter is the author's bio.
Similar to the site's social links, if you add a social media link make sure to add its corresponding icon in the components/social directory.
All of the posts are located in the content/posts directory. All of the posts have data in the following format:
---
title: "15 Ways to Grow Your Startup"
description: "Lorem ipsum dolor sit amet tempus bendum labore laoreet.Hendrerit lobortis a leo curabitur faucibus sapien ullamcorper do labore odio."
image: "/images/posts/archive-02.jpeg"
date: "2022-04-05T16:56:47+06:00"
author: "Matt Burgess"
time_to_read_in_minutes: 12
views: 6807
category: "Startup"
tags: ["Growth", "Tips", "List", "Idea"]
group: "Archived"
---
Aliqua venenatis gravida et urna molestie leo adipiscing dolore leo euismod quam. Aenean porta curabitur convallis pellentesque velit platea at neque phasellus.All of the post images are stored in the public/images/posts directory. The markdown content below the frontmatter is the post content.
Every post has a category, author, and tags and is grouped by the group field for site organization.
If you add a new author or category, make sure to create their corresponding markdown files in the content/authors and content/categories directories respectively.
The /about, /contact and /privacy pages have their corresponding data in the content/pages/about.md, content/pages/contact.md and content/pages/privacy.md markdown files respectively.
You can edit the newsletter section content and form data in the content/shared/newsletter.md markdown file.
This theme uses the latest version of Tailwind CSS: v3.
Tailwind CSS and its dependencies were installed via npm as recommended by the official Tailwind installation docs for next.js. If you are not familiar with the Tailwind CSS framework I would recommend you check out the Tailwind documentation.
You can find the tailwind.config.js and postcss.config.js files at the root of the directory. The entry point CSS file is located at styles/globals.css. This file contains the @tailwind directives and any additional CSS used in the template. We've tried to minimize custom CSS and only define a few custom classes for the hamburger menu in the navbar.
Tailwind allows you to customize what it generates using the tailwind.config.js file at the root of the project directory. For this theme, we have defined a few extra utility classes. We have also added the paths to all of our template files to the content option to tree-shake unused styles and optimize your final build size. This template additionally uses 2 official Tailwind plugins (@tailwindcss/aspect-ratio, @tailwindcss/typography) to generate additional utility classes.
This template uses the Roboto Font family from the Google Fonts Library. The font is included in /pages/_document.js and leverages the Automatic Webfont Optimizations by next.js.
The icons used for this theme are part of the Hero Icons set that is free to use and published under the MIT License.
Some of the examples in Banter use Nucleo App icons which we have acquired a license for. You are free to use the Nucleo icons included in this template on your projects, but if you are interested in using the rest of their premium icons you can buy a license on their website.
All of the images for posts, categories, authors and website components are from Unsplash.
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out their Next.js deployment documentation for more details.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
If you need additional help setting up the template or have any questions, feel free to contact us at [email protected].