An open source blogging (digital gardening) template for developers using Next.js app router, MDX, Contentlayer, Tailwind CSS, @shadcn/ui , Lucide Icons, and more.
If you love this template and/or use it, please give it a star on GitHub. This will help more people discover it, thus help improving the template.
Note: This project is always evolving and it's far from being perfect or even done. I'm always open to suggestions and contributions. Feel free to open an issue or a PR if you have any ideas or suggestions. You can also see the roadmap for planned features if you want to contribute.
- Motivation
- Getting Started
- Customization
- Examples
- Features & Roadmap
- Contributing
- Inspiration & Mentions
- Support
As a developer who creates content, I want to have a blog & digital garden where I can share my thoughts and ideas with the world. Now, there's not really a "perfect solution" for this currently. With included analytics, SEO, email subscriptions, modern tooling, simple design, etc. We either have to build one from scratch, use a design template and code the features, or use a CMS/no-code tool.
So I decided to build a solution that I would use myself. This is the result.
If you want to see how I set up this template for my own digital garden, you can check out this commit with all the changes.
- Use the repo as a template
- Install dependencies with
pnpm install - Edit
utils/metadata.tswith your information and general settings - Edit
utils/uses-data.tswith software & hardware you use - Edit
utils/projects-data.tswith your projects - Edit
utils/navigation-links.tswith the links you want in the navigation - Edit
content/pages/nowwith your availability - Edit
content/pages/aboutwith your bio - Run the development server with
pnpm dev
Open http://localhost:3000 in your browser to see the result.
You can write content in Markdown or MDX. The content is located in content/ and is organized in folders. The pages folder contains the pages. The posts folder contains the blogposts. The projects folder contains the projects.
Editing list pages is done in the lib folder.
/uses-lib/uses-data.ts/projects-lib/projects-data.ts/social-lib/social-data.ts
You can deploy the project with Vercel or any other hosting provider. If you want to use Vercel, you can use the button at the top of this README.
- Update
package.jsonauthor information - Publish your repo to GitHub
- Create a new project on Vercel and import your repo
- Set up the
NEXT_PUBLIC_BASE_URLenvironment variable on Vercel to point to your website's root URL - If you plan to use analytics and/or newsletter providers, set up the respective environment variables on Vercel
- Build and deploy 🎉
This project uses Inter as the default font. You can change it on app/layout.tsx using the next/fonts package.
The project uses Tailwind colors and @shadcn/ui config. Customize the colors on globals.css.
There's a signature component to use in the footer. You can edit the signature on components/signature.tsx. I used Figma to write the signature with Caveat font and exported it as SVG. You can do the same and update the SVG in the component.
Images and other media files are located in public/ directory. You can use them in your content by using the /<filename>.<ext> path.
You can change the metadata and author details in utils/metadata.ts. This will be used around the site for titles, social links, social handles, SEO, etc.
You can edit navigation links in lib/navigation-links.ts.
To configure, you need to enable it on Vercel project dashboard by selecting your Project and then click the Analytics tab and click Enable from the dialog.
Umami is a simple, easy to use, web analytics solution with self-hosting option! You can read more about it on Umami website. (Hint: On Railway, you can self-host it low cost or even free).
Configure:
Set NEXT_PUBLIC_UMAMI_SCRIPT_URL & NEXT_PUBLIC_UMAMI_WEBSITE_ID environment variables on your .env.local file and on Vercel dashboard.
Supporting other analytics providers are in progress. Feel free to open an issue if you have any suggestions or a PR if you want to implement it yourself.
MailerLite is a simple email marketing tool for all types of businesses. You can read more about it on MailerLite website.
Configure:
Set EMAIL_API_BASE, EMAIL_API_KEY, and EMAIL_GROUP_ID environment variables on your .env.local file and on Vercel dashboard.
Supporting other newsletter providers are in progress. Feel free to open an issue if you have any suggestions or a PR if you want to implement it yourself.
You can choose between 3 different hero variants to use in app/(site)/page.tsx by changing the imported hero component.
HeroSimple- A simple centered hero section with image, title, and subtitle.HeroVideo- 2 column hero section with Videoask embed on one side and title and subtitle on the other.HeroImage- 2 column hero section with image on one side and title, and subtitle on the other.HeroMinimal- small hero section name & job title
Optimize images in seconds for free with ImageOptim. Install on your Mac, then open the public folder in Finder. Select all images, right-click, and choose "Open with > ImageOptim". This will optimize all images in the folder.
Note: DO NOT overdo it. You can easily make images look bad with lossy compression algorithms.
Create a PR and add your blog to this list if you're using the template!
- Basic functionality of reading pages and posts
- Basic design dark/light mode
- MDX code highlighting
- Readme.md
-
robots.txt&sitemap.xml - RSS Feed
- Reading time estimate
- LICENSE
- contributing.md
- MDX components (TOC & footnotes)
- general config & metadata (author, URL, socials, etc.)
- uses page
- Link in bio page
- OG image generation
- projects page
- about section on homepage
- search & command bar
- Analytics: Vercel, Umami
- Post series
- Not found page
- contributing docs
- Docs refresh
- Back to top button
- Social icons component
- Social sharing buttons
- Tags
- newsletter integration (form, api route, keys, thank you/welcome page, MailerLite provider)
- Other newsletter providers (Convertkit, Substack, Buttondown, Mailchimp, etc)
- Other analytics providers (fathom, simplelytics, plausible, etc)
- CLI and/or recipes
- Post series page
- prev/next post links
- related posts
- Newsletter previous issues page
- Layouts/templates system
- Notion data source
- Sanity data source
- hero title and subtitle text HTML support(?)
- Design improvements (whitespace, layout, etc.)
- error, and loading pages
- Code preview component
- Code highlight improvements (copy code, theme)
-
manifest.json - Rich project cards
- CV template
- Authenticated pages and/or hidden content (behind email address)
- 100 lighthouse score
- Command bar fuzzy search in content
- Pagination
- SEO improvements
- Accessibility audit
- TypeScript fixes
- Redesign uses page
- Redesign projects page
- general refactor
- general cleanup
- implement content security policies
- implement a videoask-like solution for the hero section
- RSS feed improvements (image, description, etc.)
- multi-author support (?)
- Post like counter (?)
- Visitor counter (?)
- code playground instead of code highlighting (?)
- Commenting system (?)
- keyboard-based navigation with hotkeys (?)
- multilang support (?)
This project is from developers for developers. All contributions are welcome! Please feel free to:
- Report a bug
- Discuss the current state and ideas for improvements
- Submit a fix
- Propose new features
- Fork the repo and create your branch from
develop. - Add your code.
- Update the documentation.
- Make sure your code lints and the app builds.
- Open pull request to
developbranch.
Any contributions you make will be under the MIT Software License. In short, when you submit code changes, your submissions are understood to be under the same MIT License that covers the project. Code of Conduct can be found here.
- Delba Oliveira Personal Blog - Using and structuring table of contents with Contentlayer
- timlrx/tailwind-nextjs-starter-blog - Idea
If you love this template and/or use it, please give it a star on GitHub.