Skip to Content
I'm available for work
Amy Shields

4 mins read


Setting Up Modern Developer Blog Template (Digital Garden Starter)

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.

Series: Using this template

Episodes: (2/3)

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.

  1. Use the repo as a template
  2. Install dependencies with pnpm install
  3. Edit utils/metadata.ts with your information and general settings
  4. Edit utils/uses-data.ts with software & hardware you use
  5. Edit utils/projects-data.ts with your projects
  6. Edit utils/navigation-links.ts with the links you want in the navigation
  7. Edit content/pages/now with your availability
  8. Edit content/pages/about with your bio
  9. Run the development server with pnpm dev

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

Writing content

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
hello.js
1let hello = "hello darkness";
2
3console.log(hello, "my old friend");
hello.js
1let hello = "hello darkness";
2
3console.log(hello, "my old friend");

Deployment

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.

  1. Update package.json author information
  2. Publish your repo to GitHub
  3. Create a new project on Vercel and import your repo
  4. Set up the NEXT_PUBLIC_BASE_URL environment variable on Vercel to point to your website's root URL
  5. If you plan to use analytics and/or newsletter providers, set up the respective environment variables on Vercel
  6. Build and deploy 🎉

Customization

Fonts

This project uses Inter as the default font. You can change it on app/layout.tsx using the next/fonts package.

Colors

The project uses Tailwind colors and @shadcn/ui config. Customize the colors on globals.css.

Signature

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

Images and other media files are located in public/ directory. You can use them in your content by using the /<filename>.<ext> path.

Metadata

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.

Analytics

Vercel

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

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.

Others

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.

Newsletter subscription

WIP as I'm still deciding which email tools to support. Feel free to open an issue if you have any suggestions or a PR if you want to implement it yourself.

Hero section

You can choose between 3 different hero variants to use in app/(site)/page.tsx by changing the imported hero component.

  1. HeroSimple - A simple centered hero section with image, title, and subtitle.
  2. HeroVideo - 2 column hero section with Videoask embed on one side and title and subtitle on the other.
  3. HeroImage - 2 column hero section with image on one side and title, and subtitle on the other.
  4. HeroMinimal - small hero section name & job title

Other tips & tricks

Image optimization

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.

  • jamstack
  • technology
  • javascript
  • frontend
  • development
  • opinion