Campanula Tailwind Templates

Campanula

A simple blog template built with Next.js that allows you to generate static blog pages from Markdown files.

#contentlayer #daisy-ui #daisyui #next-themes #nextjs #nextjs13 #tailwind #tailwindcss #unified #react
Demo Download

Campanula

A simple blog template built with Next.js that allows you to generate static blog pages from Markdown files.

  • Next.js by Vercel ver13
  • Styled with Tailwind CSS
  • Designed using themes and components from daisyUI. You can customize it with daisyUI theme. You can also create your own theme.
  • All pages & blog articles are made with Mardown file
  • Switchable dark mode
  • Support MDX file
  • Preconfigured security headers
  • SEO friendly with RSS feed, Atom feed, sitemaps

Demo

Check out the live demo: https://campanula-demo.vercel.app/

Usage

Prerequisites

Make sure you have the following software installed:

Installation

  1. Clone the repository:

    git clone https://github.com/sakurabird/Campanula.git
cd Campanula

  2. Install the dependencies:

    npm install

Configuration

  1. Update the site metadata in the data/siteMetadata.js file.
  2. Please place the favicon, icon, and apple-icon images directly under the app folder. For detailed instructions, please refer to the official website: Metadata Files: favicon, icon, and apple-icon | Next.js
  3. Please create the static pages following the instructions below.
  4. Please create the blog posts following the instrucsions below.
  5. Please edit data/headerNavLinks.ts to set the navigation items for the header.

Creating Static Pages

By default, there are two static pages, Home and About, and all others are related to blog posts.
Please also check out the following article on routing:
Routing and blog navigation
Please also check out the following article on asset files:
The location of asset files in Campanula

Creating Home Page

The Home page is the default page that is displayed when you visit a website created using Campanula.
The configuration method for the Home page has been summarized in another article.
Please take a look at:
How to create a Home page in Campanula

Creating About Page

The About page is a static page intended for self-introductions and the like.
It can be accessed with the path /about.
The configuration method for the About page has been summarized in another article.
Please take a look at:
How to create a About page in Campanula

Creating Blog Posts

  1. Create new blog posts by adding Markdown files to the data/blog directory. Please use the extension mdx. ex: title-of-your-post.mdx. The filenames of MDX files will be used as part of the URL. To avoid compatibility and encoding issues in the URL, it is recommended to use characters from the ASCII character set.

  2. Add necessary frontmatter to each Markdown file, including title, date, and any other relevant information.

Frontmatter

Each blog post must have a front matter.

Currently 9 fields are supported.

title: (required)
date: (required)
category: (required)
tags: (optional)
subtitle: (optional)
lastmod: (optional)
draft: (required)
metadescription: (optional)
image: (optional, if none provided defaults to `ogImage` in siteMetadata config)

Here's an example of a post's frontmatter:

---
title: "Cats: The Adorable Feline Friends"
date: "2022-02-22"
category: "Animal"
tags: ["cat"]
subtitle: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris hendrerit rhoncus risus, nec rutrum sapien sodales sit amet."
lastmod: "2023-04-23"
draft: false
metadescription: "Cats are cute, cuddly, and make great companions."
image: "/images/blog/cat.jpg"
---

Deployment

First, run the development server:

npm run dev

Open http://localhost:3000 with your browser to see the result.

To deploy your blog to the production server, run the following command:

npm run build

The easiest way to deploy Next.js to production is to use the Vercel platform developed by the creators of Next.js.

Customizing the UI

TODO

Feel free to customize the template to suit your needs. You can modify the layout, styles, and even add new features.

You can customize it with daisyUI theme. You can also create your own theme.

Referenced information

Thank you for the reference to quality information. Mr. timlrx's code was fantastic, and I have adopted many aspects of it in this project. Thank you so much for your contributions.

Resources

I used the materials from the following websites. Thank you very much!

Notes

  • If you change the theme variable in siteMetadata.js, the screen will automatically switch to the light mode when you refresh the page after building. If you want to display the dark mode, please press the theme toggle button in the header.
  • For cases where you have made significant changes to the file structure or renamed files and need to remove files generated by frameworks or libraries, I have prepared the command npm run clean. This command will not remove the source code or assets, but it will clean up generated files.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Top categories

tailwind daisyui resume portfolio email blog dashboard landing-page admin ecommerce
Loading Svelte Themes