This is a Next.js, Tailwind CSS blogging starter template.
Use it to build your own blog. Simply fork and follow the instructions below.
Currently acting as my personal blog.
- Next.js First: use framework (Next.js) features when possible and avoid reinventing the wheel.
- Few deeply integrated services: Uses a simple set of services with free tiers that are well integrated into the platform.
- ✅ Next.js
/appdir - ✅ Blog-like layouts
- ✅ SEO friendly with RSS feed, sitemaps and metadata.
- ✅ Projects page
- ✅ TOC (Table of contents)
- ✅ Static Site Generation (SSG)
- ✅ UI Components built using Shadcn/ui
- ✅ blog pages using MDX and Contentlayer
- ✅ Styled using Tailwind CSS
- ✅ Written in TypeScript
- ✅ Copy code button
- ✅ Search with cmd+k
- ✅ Mobile-friendly
- ✅ Customizable tailwind theme
- ✅ View count for each post using Prisma and Turso
- ✅ Font optimization with next/font
- ✅ Light and dark theme
- ✅ Posthog for analytics
- ✅ Math display supported via KaTeX
- ✅ Github alerts via remark-github-blockquote-alert
- ✅ Automatic image optimization via next/image
- ✅ Server side code syntax highlight with Rehype Pretty Code
- ✅ Preconfigured security headers
- Clone the repo
npx degit 'FranciscoMoretti/site'- Personalize
siteMetadata.js(site related information) - Modify the content security policy in
next.config.jsif you want to use other analytics provider or a commenting solution other than giscus. - Personalize
authors/default.md(main author) - Modify
projectsData.ts - Modify
headerNavLinks.tsto customize navigation links - Add blog posts
- Create the
.envfilecp .env.example .envand set the environment variables - Deploy on Vercel
npm installFirst, run the development server:
bun devdata/siteMetadata.js - contains most of the site related information which should be modified for a user's need.
data/authors/default.md - default author information (required). Additional authors can be added as files in data/authors.
data/projectsData.js - data used to generate styled card on the projects page.
data/headerNavLinks.js - navigation links.
data/logo.svg and public/static/logo.png - replace with your own logo.
data/blog - replace with your own blog posts.
public/static - store assets such as images.
app/manifest.webmanifest - store assets such as images (Next.js Docs)
app/favicon.ico, app/icon.png, and app/apple-icon.png, app/android-chrome-192x192.png, app/android-chrome-512x512.png - replace with your own favicon, and icon files (Next.js Docs)
tailwind.config.js and css/tailwind.css - tailwind configuration and stylesheet which can be modified to change the overall look and feel of the site.
css/rehype-code.css - controls the styles associated with the code blocks. Feel free to customize it and use your preferred prismjs theme e.g. Rehype Pretty Code.
contentlayer.config.ts - configuration for Contentlayer, including definition of content sources and MDX plugins used. See Contentlayer documentation for more information.
components/MDXComponents.js - pass your own JSX code or React component by specifying it over here. You can then use them directly in the .mdx or .md file. By default, a custom link, next/image component, table of contents component and Newsletter form are passed down. Note that the components should be default exported to avoid existing issues with Next.js.
layouts - main templates used in pages:
- There are currently 3 post layouts available:
PostLayout,PostSimpleandPostBanner.PostLayoutis the default 2 column layout with meta and author information.PostSimpleis a simplified version ofPostLayout, whilePostBannerfeatures a banner image. - There are 2 blog listing layouts:
ListLayout, the layout used in version 1 of the template with a search bar andListLayoutWithTags, currently used in version 2, which omits the search bar but includes a sidebar with information on the tags.
next.config.js - configuration related to Next.js. You need to adapt the Content Security Policy if you want to load scripts, images etc. from other domains. 3. Replace the opengraph-image.jpg for your own image and opengraph-image.alt.txt for its alt text. Opengraph Image
Check out the setup guide. Get the API key and set it in the .env file.
Push the prisma DB
npm run db:pushAnalytics are provided automatically by Vercel and their free tier is a great way to start. As an alternative, Posthog is integrated as well.
To use Posthog you need to create an account and set the keys in the .env file
NEXT_PUBLIC_POSTHOG_KEY=<ph_project_api_key>
NEXT_PUBLIC_POSTHOG_HOST=<ph_instance_address>
Content is modelled using Contentlayer, which allows you to define your own content schema and use it to generate typed content objects. See Contentlayer documentation for more information.
Facing issues? Check the FAQ page and do a search on past issues. Feel free to open a new issue if none has been posted previously.
Feature request? Check the past discussions to see if it has been brought up previously. Otherwise, feel free to start a new discussion thread. All ideas are welcomed!