{"id":13911076,"url":"https://github.com/thedevdavid/digital-garden","last_synced_at":"2025-04-06T13:11:46.345Z","repository":{"id":175372570,"uuid":"653755544","full_name":"thedevdavid/digital-garden","owner":"thedevdavid","description":"An open source blog (digital garden) template for developers","archived":false,"fork":false,"pushed_at":"2024-02-23T23:21:51.000Z","size":24671,"stargazers_count":294,"open_issues_count":2,"forks_count":35,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-03-30T11:11:17.335Z","etag":null,"topics":["appdirectory","blog","contentlayer","developer-tools","digital-garden","mdx","next-blog","next-starter","nextjs","nextjs-blog","nextjs-starter","nextjs-template","nextjs13","react","shadcn-ui","tailwind-css","tailwind-template","tailwindcss","template","vercel"],"latest_commit_sha":null,"homepage":"https://thedevdavid-digital-garden.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thedevdavid.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-06-14T17:03:00.000Z","updated_at":"2025-03-26T01:06:39.000Z","dependencies_parsed_at":"2024-09-22T18:46:29.968Z","dependency_job_id":null,"html_url":"https://github.com/thedevdavid/digital-garden","commit_stats":{"total_commits":133,"total_committers":5,"mean_commits":26.6,"dds":"0.045112781954887216","last_synced_commit":"ef15e3ad3739e0ace642759d8a235f44ff4926a6"},"previous_names":["thedevdavid/digital-garden"],"tags_count":11,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thedevdavid%2Fdigital-garden","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thedevdavid%2Fdigital-garden/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thedevdavid%2Fdigital-garden/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thedevdavid%2Fdigital-garden/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thedevdavid","download_url":"https://codeload.github.com/thedevdavid/digital-garden/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247485290,"owners_count":20946398,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["appdirectory","blog","contentlayer","developer-tools","digital-garden","mdx","next-blog","next-starter","nextjs","nextjs-blog","nextjs-starter","nextjs-template","nextjs13","react","shadcn-ui","tailwind-css","tailwind-template","tailwindcss","template","vercel"],"created_at":"2024-08-07T00:01:56.351Z","updated_at":"2025-04-06T13:11:46.328Z","avatar_url":"https://github.com/thedevdavid.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","nextjs","blog","Boilerplates \u0026 Starters"],"sub_categories":[],"readme":"# Modern Developer Blog Template (Digital Garden Starter)\n\n![GardenPromo](/screenshots/garden-promo.jpg)\n[More screenshots here](/screenshots/)\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fthedevdavid%2Fdigital-garden%2F)\n\nAn open source blogging (digital gardening) template for developers using [Next.js](https://nextjs.org/) app router, MDX, [Contentlayer](https://contentlayer.dev/), [Tailwind CSS](https://tailwindcss.com/), [@shadcn/ui](https://ui.shadcn.com/) , [Lucide Icons](https://lucide.dev/icons), and more.\n\nIf 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.\n\n![GitHub Repo stars](https://img.shields.io/github/stars/thedevdavid/digital-garden?style=social)\n\n**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](#features--roadmap) for planned features if you want to contribute.\n\n## Table of Contents\n\n- [Motivation](#motivation)\n- [Getting Started](#getting-started)\n  - [Writing content](#writing-content)\n    - [Frontmatter](#frontmatter)\n  - [Deployment](#deployment)\n- [Customization](#customization)\n  - [Fonts](#fonts)\n  - [Colors](#colors)\n  - [Signature](#signature)\n  - [Images](#images)\n    - [Homepage Avatar](#homepage-avatar)\n  - [Metadata](#metadata)\n    - [Navigation](#navigation)\n    - [Social links](#social-links)\n  - [Analytics](#analytics)\n    - [Vercel](#vercel)\n    - [Umami](#umami)\n    - [Plausible](#plausible)\n    - [Google Analytics](#google-analytics)\n    - [Other analytics providers](#other-analytics-providers)\n  - [Newsletter subscription](#newsletter-subscription)\n    - [MailerLite](#mailerlite)\n    - [Other newsletter providers](#other-newsletter-providers)\n  - [Hero section](#hero-section)\n  - [Other tips \u0026 tricks](#other-tips--tricks)\n    - [Image optimization](#image-optimization)\n- [Examples](#examples)\n- [Features \u0026 Roadmap](#features--roadmap)\n- [Contributing](#contributing)\n  - [Contributors](#contributors)\n  - [How?](#how)\n- [Inspiration \u0026 Mentions](#inspiration--mentions)\n- [Support](#support)\n\n## Motivation\n\nAs a developer who creates content, I want to have a blog \u0026 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.\n\nSo I decided to build a solution that I would use myself. This is the result.\n\n## Getting Started\n\nIf you want to see how I set up this template for my own digital garden, you can check out [this commit](https://github.com/thedevdavid/website-2023/commit/fb10942d424a1389f9c4c1605849e45ff718656d) with all the changes.\n\n1. Use the repo as a template\n2. Install dependencies with `pnpm install`\n3. Edit `utils/metadata.ts` with your information and general settings\n4. Edit `utils/uses-data.ts` with software \u0026 hardware you use\n5. Edit `utils/projects-data.ts` with your projects\n6. Edit `utils/navigation-links.ts` with the links you want in the navigation\n7. Edit `content/pages/now` with your availability\n8. Edit `content/pages/about` with your bio\n9. Run the development server with `pnpm dev`\n\nOpen [http://localhost:3000](http://localhost:3000) in your browser to see the result.\n\n### Writing content\n\nYou 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.\n\nEditing list pages is done in the `lib` folder.\n\n- `/uses` - `lib/uses-data.ts`\n- `/projects` - `lib/projects-data.ts`\n- `/social` - `lib/social-data.ts`\n\n#### Frontmatter\n\nFrontmatter is used to define metadata for pages and posts. It's located at the top of the file and is written in YAML. You can define the following fields:\n\n- `title` - The title of the page/post\n- `description` - The description of the page/post\n- `publishedDate` - The date of the post (not used on pages)\n- `lastUpdatedDate` - The date of the page/post\n- `tags` - List of tags for the post. You can add new tags by adding them to the `tagOptions` list. (not used on pages)\n- `series` - The series of the post. A series has a title and an order number for a post. (not used on pages)\n- `author` - The author of the post. An author has a name, and image. (not used on pages)\n- `status` - Whether the page/post is published or draft\n\n### Deployment\n\nYou can deploy the project with [Vercel](https://vercel.com/) or any other hosting provider. If you want to use Vercel, you can use the button at the top of this README.\n\n1. Update `package.json` author information\n2. Publish your repo to GitHub\n3. Create a new project on Vercel and import your repo\n4. Set up the `NEXT_PUBLIC_BASE_URL` environment variable on Vercel to point to your website's root URL\n5. If you plan to use [analytics](#analytics) and/or [newsletter](#newsletter-subscription) providers, set up the respective environment variables on Vercel\n6. Build and deploy 🎉\n\n## Customization\n\n### Fonts\n\nThis project uses [Inter](https://rsms.me/inter/) as the default font. You can change it on `app/layout.tsx` using the `next/fonts` package.\n\n### Colors\n\nThe project uses Tailwind colors and @shadcn/ui config. Customize the colors on `globals.css`.\n\n### Signature\n\nThere'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.\n\n### Images\n\nImages and other media files are located in `public/` directory. You can use them in your content by using the `/\u003cfilename\u003e.\u003cext\u003e` path.\n\n#### Homepage Avatar\n\nHere's a quick tutorial on how to make a similar avatar in Figma in under 2 minutes. [https://youtu.be/Ny-VaEEhJKM](https://youtu.be/Ny-VaEEhJKM)\n\n### Metadata\n\nYou 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.\n\n#### Navigation\n\nYou can edit navigation links in `lib/navigation-links.ts`.\n\n#### Social links\n\nYou can edit social links in `lib/social-data.ts`. You can also add new social links by adding them to the file and using the platform name as the key and the URL as the value. The `SocialButton` component will automatically add the icon for the platform if it's supported in [simple-icons](https://simpleicons.org/).\n\n### Analytics\n\n#### Vercel\n\nTo configure, you need to enable it on [Vercel project dashboard](https://vercel.com/dashboard) by selecting your Project and then click the Analytics tab and click Enable from the dialog.\n\n#### Umami\n\nUmami is a simple, easy to use, web analytics solution with self-hosting option! You can read more about it on [Umami website](https://umami.is/). _(Hint: On [Railway](https://railway.app), you can self-host it low cost or even free)_.\n\nConfigure:\nSet `NEXT_PUBLIC_UMAMI_SCRIPT_URL` \u0026 `NEXT_PUBLIC_UMAMI_WEBSITE_ID` environment variables on your `.env.local` file and on Vercel dashboard.\n\n#### Plausible\n\nPlausible is a simple, lightweight, open-source alternative to Google Analytics. You can read more about it on [Plausible website](https://plausible.io/).\n\nConfigure:\nSet `NEXT_PUBLIC_PLAUSIBLE_DOMAIN` \u0026 `NEXT_PUBLIC_PLAUSIBLE_SCRIPT_URL` environment variables on your `.env.local` file and on Vercel dashboard. If you're concerned about ad blockers, you can proxy the plausible script through your own domain. You can read more about it [here](https://plausible.io/docs/proxy/guides/nextjs).\n\n#### Google Analytics\n\nGoogle Analytics is a web analytics service offered by Google that tracks and reports website traffic, currently as a platform inside the Google Marketing Platform brand. You can read more about it on [Google Analytics website](https://analytics.google.com/).\n\nConfigure:\nSet `NEXT_PUBLIC_GOOGLE_ANALYTICS_ID` environment variable on your `.env.local` file and on Vercel dashboard.\n\n#### Other analytics providers\n\nSupporting 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.\n\n### Newsletter subscription\n\n#### MailerLite\n\nMailerLite is a simple email marketing tool for all types of businesses. You can read more about it on [MailerLite website](https://www.mailerlite.com/).\n\nConfigure:\nSet `EMAIL_API_BASE`, `EMAIL_API_KEY`, and `EMAIL_GROUP_ID` environment variables on your `.env.local` file and on Vercel dashboard.\n\n#### Other newsletter providers\n\nSupporting 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.\n\n### Hero section\n\nYou can choose between 3 different hero variants to use in `app/(site)/page.tsx` by changing the imported hero component.\n\n1. `HeroSimple` - A simple centered hero section with image, title, and subtitle.\n2. `HeroVideo` - 2 column hero section with Videoask embed on one side and title and subtitle on the other.\n3. `HeroImage` - 2 column hero section with image on one side and title, and subtitle on the other.\n4. `HeroMinimal` - small hero section name \u0026 job title\n\n### Other tips \u0026 tricks\n\n#### Image optimization\n\nI recommend optimizing images fast for free with [ImageOptim](https://imageoptim.com/mac). Install on your Mac, then open the `public` folder in Finder. Select all images, right-click, and choose \"Open with \u003e ImageOptim\". This will optimize all images in the folder.\n\nNote: DO NOT overdo it. You can easily make images look bad with lossy compression algorithms.\n\n## Examples\n\n- [https://davidlevai.com/](https://davidlevai.com/) - My own digital garden\n- [Dragons and Codes Digital Garden](https://dragonsandcodes.com) - Simple modifications [Source](https://github.com/dragonsandcodes/digital-garden-v2)\n- [Shafie Mukhre's Blog](https://shafiemukhre.com) - [Source](https://github.com/shafiemukhre/website-2023)\n- [Praveen kumars's Blog](https://sumandeepuniversity.org) - [Source](https://github.com/gramythedj/digital-garden)\n- [Steven Selolo's Blog](https://stevenselolo.com/) - [Source](https://github.com/StevenPss/website-2023)\n- [Marton's Blog](https://www.martondobos.com/) - [Source](https://github.com/dobosmarton/digital-garden)\n\n\n**Create a PR and add your blog to this list if you're using the template!**\n\n## Features \u0026 Roadmap\n\n- [x] Basic functionality of reading pages and posts\n- [x] Basic design dark/light mode\n- [x] MDX code highlighting\n- [x] Readme.md\n- [x] `robots.txt` \u0026 `sitemap.xml`\n- [x] RSS Feed\n- [x] Reading time estimate\n- [x] LICENSE\n- [x] contributing.md\n- [x] MDX components (TOC \u0026 footnotes)\n- [x] general config \u0026 metadata (author, URL, socials, etc.)\n- [x] uses page\n- [x] Link in bio page\n- [x] OG image generation\n- [x] projects page\n- [x] about section on homepage\n- [x] search \u0026 command bar\n- [x] Analytics: Vercel, Umami, Plausible, Google Analytics\n- [x] Post series\n- [x] Not found page\n- [x] contributing docs\n- [x] Docs refresh\n- [x] Back to top button\n- [x] Social icons component\n- [x] Social sharing buttons\n- [x] Tags\n- [x] newsletter integration (form, api route, keys, thank you/welcome page, MailerLite provider)\n- [x] more MDX components (katex, math)\n- [x] author content definition\n- [x] SEO improvements\n- [ ] Other newsletter providers (Convertkit, Substack, Buttondown, Mailchimp, etc)\n- [ ] Other analytics providers (fathom, simplelytics, etc)\n- [ ] RTL Support\n- [ ] Post series page\n- [ ] prev/next post links\n- [ ] related/similar posts\n- [ ] Donate component \u0026 page\n- [ ] CLI and/or recipes\n- [ ] Newsletter previous issues page\n- [ ] Layouts/templates system\n- [ ] Notion data source\n- [ ] Sanity data source\n- [ ] Design improvements (whitespace, layout, etc.)\n- [ ] lightbox for images\n- [ ] implement content security policies\n- [ ] Code preview component\n- [ ] Code highlight improvements (copy code, theme)\n- [ ] Rich project cards\n- [ ] Landing page/offer page/freebie page\n- [ ] CV template\n- [ ] Authenticated pages and/or hidden content (behind email address)\n- [ ] 100 lighthouse score\n- [ ] Command bar fuzzy search in content\n- [ ] Accessibility audit\n- [ ] more MDX components (oembed)\n- [ ] error, and loading pages\n- [ ] TypeScript fixes\n- [ ] Redesign social page (link in bio)\n- [ ] Redesign uses page\n- [ ] Redesign projects page\n- [ ] general refactor\n- [ ] general cleanup\n- [ ] implement a videoask-like solution for the hero section\n- [ ] RSS feed improvements (image, description, etc.)\n- [ ] custom admin CMS(?)\n- [ ] hero title and subtitle text HTML support(?)\n- [ ] Pagination (?)\n- [ ] multi-author support (?)\n- [ ] Post like counter (?)\n- [ ] Visitor counter (?)\n- [ ] code playground instead of code highlighting (?)\n- [ ] Commenting system (?)\n- [ ] keyboard-based navigation with hotkeys (?)\n- [ ] multilang support (?)\n\n## Contributing\n\n### Contributors\n\n- [@thedevdavid](https://twitter.com/thedevdavid)\n- [@br4adam](https://github.com/br4adam)\n\nThis project is from developers for developers. All contributions are welcome! Please feel free to:\n\n- Report a bug\n- Discuss the current state and ideas for improvements\n- Submit a fix\n- Propose new features\n\n### How?\n\n1. Fork the repo and create your branch from `develop`.\n2. Add your code.\n3. Update the documentation.\n4. Make sure your code lints and the app builds.\n5. Open pull request to `develop` branch.\n\nAny 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](http://choosealicense.com/licenses/mit/) that covers the project. Code of Conduct can be found [here](https://gist.github.com/thedevdavid/08e306cee9dc1b6b7f3c209827277a82).\n\n## Inspiration \u0026 Mentions\n\n- [Delba Oliveira Personal Blog](https://github.com/delbaoliveira/website) - Using and structuring table of contents with Contentlayer\n- [timlrx/tailwind-nextjs-starter-blog](https://github.com/timlrx/tailwind-nextjs-starter-blog) - Idea\n\n## Support\n\nIf you love this template and/or use it, please give it a star on GitHub.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthedevdavid%2Fdigital-garden","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthedevdavid%2Fdigital-garden","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthedevdavid%2Fdigital-garden/lists"}