AstroPortfolioBlog

blog-template (oyuh) — Astro Portfolio Template

By oyuh

An Astro-based personal blog and portfolio template derived from Lawson Hart's personal website, supporting posts and notes content collections and template snapshot export.

Explore the design

Compare the page layouts and mobile experience. Open any screenshot for a closer look.

3 previews
Desktop homepage1 / 3
Desktop captureTop of page

Actual screenshot captured by the server browser.

All pages & views 3

Screenshots show visual appearance; interactive behavior may differ.

Recorded 2026-10-11View source

What stands out

A quick read of the recorded project description.

01

Built with Astro and TypeScript, styled with Tailwind, and using a component-based layout

02

Manages two content types, posts and notes, through Content Collections

03

Post frontmatter supports fields such as tags, draft, cover image, OG image, and tryLink

04

Provides a template sandbox and export script to generate a public snapshot with private paths removed

05

The export workflow forcibly excludes .env* files to prevent secrets from leaking with the snapshot

06

The code is MIT licensed, allowing free use, modification, commercial use, and distribution

Template Details

This repository is the Astro codebase for the blog/article section of lawsonhart.me, and also serves as a lightweight blog template that can be published and reused. It uses Astro and TypeScript, manages two content types—posts and notes—through Content Collections, is styled with Tailwind, and adopts a component-based layout. The repository includes a template sandbox and export workflow: after listing private paths in template-excludes.txt, you can preview in a sandbox copy with the excluded items removed using bun template:dev, then export a filtered snapshot with node scripts/export-template.cjs; the exporter also forcibly excludes .env* files. Site configuration is centralized in src/site.config.ts, where you need to modify url, title, author, description, and the navigation links menuLinks. Post frontmatter supports fields such as title, description, publishDate, updatedDate, tags, draft, coverImage, ogImage, tryLink, and technologies. Optional integrations are driven by import.meta.env and involve comment services, GitHub components, and Umami analytics; relevant variables include PUBLIC_COMMENTS_API_ORIGIN, PUBLIC_COMMENTS_DEBUG, GITHUB_TOKEN/GITHUB_OWNER/GITHUB_REPO, and UMAMI_*.

AstroPortfolioBlog

Is it right for your project?

Use Cases

  • Build a personal blog and publish posts and notes
  • Use as a personal portfolio site to showcase projects and an about page
  • Export a publicly shareable template snapshot while retaining private integrations
  • Customize site metadata and navigation structure based on an existing Astro project

Suitable For

  • Front-end developers familiar with Astro and TypeScript
  • Individuals who need a single site for both a blog and a portfolio
  • Developers who want to maintain a private site while publishing a template externally
  • Projects that accept using bun as the package manager

Getting started & customization

Use these recorded setup notes alongside the repository instructions for your chosen version.

  1. 1

    Requires Node.js 20+ and bun; install dependencies with bun install

  2. 2

    bun install runs the postinstall patch script scripts/patch-astrojs-mdx-server.cjs, which is expected behavior

  3. 3

    At minimum, update url, title, author, and description in src/site.config.ts, and adjust menuLinks as needed

  4. 4

    Optional integrations such as comments, GitHub components, and Umami analytics require configuring the corresponding environment variables; see src/env.d.ts for the full list

  5. 5

    Before exporting the template, first list private paths in template-excludes.txt and verify with bun template:dev

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This entry covers the free version in the public repository under the MIT license; the free scope is the code of this version and does not mean that external services or third-party assets are free.

Must comply with when using

  • Free use, modification, commercial use, and distribution of this version's code are permitted.
  • When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
  • The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.

Additional costs & items to verify

  • Demo images, fonts, icons, and other third-party assets must be checked against their respective licenses and cannot be judged solely by the code's MIT license.
  • External services such as domains, hosting, databases, payments, or AI may incur additional charges.
  • Installing dependencies automatically runs a postinstall script that patches internal Astro MDX files; this is expected behavior, but it modifies dependencies and users should be aware of it.
  • The comment feature depends on an external comment service, and you must configure the PUBLIC_COMMENTS_API_ORIGIN environment variable to point to that service address.
  • GitHub components require providing the GITHUB_TOKEN, GITHUB_OWNER, and GITHUB_REPO environment variables, involving a GitHub account and access token.
  • Analytics depends on an external Umami service and can only be enabled after configuring the UMAMI_* environment variables.
  • Before exporting a public template, you must manually list private paths line by line in template-excludes.txt; otherwise private content may be included in the snapshot.
  • The exporter forcibly excludes .env* files, so the exported snapshot contains no environment variable configuration, and users must reconfigure it themselves.
View Original Text Basis

Permission is hereby granted, free of charge

Original License Text

`bun install` runs a `postinstall` patch for Astro MDX internals (see `scripts/patch-astrojs-mdx-server.cjs`). That's expected, not something going wrong.

Original README

- `PUBLIC_COMMENTS_API_ORIGIN`: the comments API origin, if you use the comment service

Original README

- `GITHUB_TOKEN`, `GITHUB_OWNER`, `GITHUB_REPO`: used for the GitHub-powered widgets

Original README

- `UMAMI_*`: used for analytics proxying/widgets, if enabled

Original README

1) Add private paths to `template-excludes.txt` (one workspace-relative path per line)

Original README

The exporter also hard-excludes any `.env*` files as defense-in-depth, so a stray secret can't ride along in the export.

Original README
https://github.com/oyuh/blog-template/blob/master/LICENSEhttps://github.com/oyuh/blog-template/blob/master/README.md

Compiled by DeepSeek based on repository license and README ·2026-10-11. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.

Project checks & description sources

Template Information

Source platforms
GitHub
Documentation and maintenance reference score
More documented · 85 / 100
Technologies
Astro
Website type
Portfolio · Blog
How this score is calculated

Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.

What to verify for this project

Repository update recorded
2026-10-11
Screenshot last checked
2026-10-11

A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.

The catalog identifies Astro as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.

Use a selection guide →

How this description was prepared

AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.

Review declaration: [email protected] · 2026-10-11

Inspect the recorded source material

SHA-256: 486be579317f20e4896697c0a8fd817dd317e4cee7b8edf5bf69d172793cbb5d

2026-10-11T11:16:57.183Z

Source file / repository
# blog-template (lawsonhart.me)

This is the Astro codebase that powers the blog/posts section of **lawsonhart.me**, and it doubles as a lightweight **blog template** you can publish and reuse.

The idea: clone it, customize the site config and content, and when you want to share it, export a "public template snapshot" that leaves the private integrations behind.

## What you get

- Astro 5 + TypeScript
- Content Collections for posts + notes
- Tailwind styling + a component-driven layout
- Opinionated linting/formatting (Biome + Prettier)

## Quick start

### Prerequisites

- Node.js 20+ (recommended)
- bun

### Install

```sh
bun install
```

### Run locally

```sh
bun dev
```

Open http://localhost:4321 and you should be looking at the site.

## Scripts

The ones you'll actually use day-to-day:

- `bun dev` / `bun start` runs the dev server
- `bun check` runs `astro check`
- `bun lint` runs Biome lint
- `bun format` formats code + imports (Biome + Prettier)

And the template-focused helpers:

- `bun template:dev` runs the site from a sandbox copy with the excluded paths removed
- `bun template:build` builds that sandbox copy, which is a nice way to verify the template export won't break

One heads-up: `bun install` runs a `postinstall` patch for Astro MDX internals (see `scripts/patch-astrojs-mdx-server.cjs`). That's expected, not something going wrong.

## Configure your site

At minimum, update the site metadata in `src/site.config.ts`:

- `url` (your domain)
- `title`, `author`, and `description`

You'll also probably want to adjust the navigation links (`menuLinks`) and rip out any integrations you don't use.

## Site credits

The About page includes a short credits section that references:

- Built with Astro
- Theme base: Astro Cactus

It also includes two quick links:

- `Info & stats` (internal): `/info-stats`
- `Blog template` (external): only shows up when configured via `PUBLIC_TEMPLATE_REPO_URL`

## Content & frontmatter

Posts live under `src/content/post/**` and notes live under `src/content/note/**`.

Post frontmatter supports:

```yaml
title: "Your Post Title"           # required
description: "Short summary"       # required
publishDate: "2025-09-01"          # required (string or date)
updatedDate: 2025-09-15             # optional
tags: [astro, webgl]                # optional
draft: false                        # optional (defaults false)
coverImage:                         # optional
  alt: "Alt text"
  src: ./cover.png
ogImage: "/og/custom.png"          # optional
tryLink: "https://example.app"      # optional (adds a "Try it live" button)
technologies: []                  # optional (Adds the icons of the used technologies) [You must also add them if needed]
```

## Environment variables

Optional integrations are driven by `import.meta.env`. The common ones:

- `PUBLIC_COMMENTS_API_ORIGIN`: the comments API origin, if you use the comment service
- `PUBLIC_COMMENTS_DEBUG`: enables client-side debug logging for comments
- `GITHUB_TOKEN`, `GITHUB_OWNER`, `GITHUB_REPO`: used for the GitHub-powered widgets
- `UMAMI_*`: used for analytics proxying/widgets, if enabled

See `src/env.d.ts` for the full list.

## Template sandbox + exporting

This is how the repo keeps the **real site** private while still producing a safe-to-publish **template snapshot**.

1) Add private paths to `template-excludes.txt` (one workspace-relative path per line)
2) Validate the template view:

```sh
bun template:dev
```

3) Export a filtered snapshot:

```sh
node scripts/export-template.cjs --out .template-export
```

The exporter also hard-excludes any `.env*` files as defense-in-depth, so a stray secret can't ride along in the export.

## License

MIT, see LICENSE.
Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.