---
title: Setting Up Modern Developer Blog Template (Digital Garden Starter)
publishedDate: "2023-05-31"
lastUpdatedDate: "2023-07-05"
tags:
  - starter
  - docs
  - development
  - javascript
  - frontend
description: 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.
status: published
series:
  order: 1
  title: "Using this template"
---

If 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.

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](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`

```js title="hello.js"
let hello = "hello darkness";

console.log(hello, "my old friend");
```

#### Frontmatter

Frontmatter 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:

- `title` - The title of the page/post
- `description` - The description of the page/post
- `publishedDate` - The date of the post (not used on pages)
- `lastUpdatedDate` - The date of the page/post
- `tags` - List of tags for the post. You can add new tags by adding them to the `tagOptions` list. (not used on pages)
- `series` - The series of the post. A series has a title and an order number for a post. (not used on pages)
- `author` - The author of the post. An author has a name, and image. (not used on pages)
- `status` - Whether the page/post is published or draft

## Deployment

You 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.

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](#analytics) and/or [newsletter](#newsletter-subscription) providers, set up the respective environment variables on Vercel
6. Build and deploy 🎉

## Customization

### Fonts

This project uses [Inter](https://rsms.me/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`.

#### Navigation

You can edit navigation links in `lib/navigation-links.ts`.

#### Social links

You can edit social links in `lib/social-data.ts`. You can also add new social links by adding them to the file. 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/).

### Analytics

#### Vercel

To 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.

#### Umami

Umami 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)_.

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.
