Skip to content

feat: add support for Astro base path #621

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sirlisko wants to merge 3 commits into
base: main
Choose a base branch
from
Open

feat: add support for Astro base path #621

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7e74394
feat: add support of astro base
sirlisko Mar 15, 2026
ab8a2ce
docs: add base documentation
sirlisko Mar 15, 2026
936c985
fix: add base to SITE config to prevent type errors
sirlisko Mar 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions astro.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import { SITE } from "./src/config";
// https://astro.build/config
export default defineConfig({
site: SITE.website,
base: SITE.base,
integrations: [
sitemap({
filter: page => SITE.showArchives || !page.endsWith("/archives"),
Expand Down
2 changes: 1 addition & 1 deletion src/components/BackButton.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { SITE } from "@/config";
<div class="app-layout flex items-center justify-start">
<LinkButton
id="back-button"
href="/"
href={import.meta.env.BASE_URL}
class="focus-outline -ms-2 mt-8 mb-2 hover:text-foreground/75"
>
<IconChevronLeft class="inline-block size-6 rtl:rotate-180" />
Expand Down
17 changes: 13 additions & 4 deletions src/components/Breadcrumb.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,19 @@
---
// Remove current url path and remove trailing slash if exists
// Remove trailing slash from current pathname if exists
const currentUrlPath = Astro.url.pathname.replace(/\/+$/, "");

const base = import.meta.env.BASE_URL;

// Strip base prefix to get the path relative to the base
// e.g. /blog/tags/tailwindcss => /tags/tailwindcss
const baseWithoutTrailing = base.endsWith("/") ? base.slice(0, -1) : base;
const pathAfterBase = currentUrlPath.startsWith(baseWithoutTrailing)
? currentUrlPath.slice(baseWithoutTrailing.length)
: currentUrlPath;

// Get url array from path
// eg: /tags/tailwindcss => ['tags', 'tailwindcss']
const breadcrumbList = currentUrlPath.split("/").slice(1);
const breadcrumbList = pathAfterBase.split("/").filter(p => p !== "");

// if breadcrumb is Home > Posts > 1 <etc>
// replace Posts with Posts (page number)
Expand All @@ -28,7 +37,7 @@ if (breadcrumbList[0] === "tags" && !isNaN(Number(breadcrumbList[2]))) {
class="font-light [&>li]:inline [&>li:not(:last-child)>a]:hover:opacity-100"
>
<li>
<a href="/" class="opacity-80">Home</a>
<a href={base} class="opacity-80">Home</a>
<span aria-hidden="true" class="opacity-80">&raquo;</span>
</li>
{
Expand All @@ -45,7 +54,7 @@ if (breadcrumbList[0] === "tags" && !isNaN(Number(breadcrumbList[2]))) {
</li>
) : (
<li>
<a href={`/${breadcrumb}/`} class="capitalize opacity-70">
<a href={`${base}${breadcrumb}/`} class="capitalize opacity-70">
{breadcrumb}
</a>
<span aria-hidden="true">&raquo;</span>
Expand Down
24 changes: 16 additions & 8 deletions src/components/Header.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,25 @@ import IconMenuDeep from "@/assets/icons/IconMenuDeep.svg";
import LinkButton from "./LinkButton.astro";
import { SITE } from "@/config";

const base = import.meta.env.BASE_URL; // e.g. "/blog/"

const { pathname } = Astro.url;

// Remove trailing slash from current pathname if exists
const currentPath =
pathname.endsWith("/") && pathname !== "/" ? pathname.slice(0, -1) : pathname;

// Strip base prefix so isActive comparisons work without the base segment
const baseStripped = base.endsWith("/") ? base.slice(0, -1) : base;
const pathWithoutBase = currentPath.startsWith(baseStripped)
? currentPath.slice(baseStripped.length) || "/"
: currentPath;

const isActive = (path: string) => {
const currentPathArray = currentPath.split("/").filter(p => p.trim());
const currentPathArray = pathWithoutBase.split("/").filter(p => p.trim());
const pathArray = path.split("/").filter(p => p.trim());

return currentPath === path || currentPathArray[0] === pathArray[0];
return pathWithoutBase === path || currentPathArray[0] === pathArray[0];
};
---

Expand All @@ -43,7 +51,7 @@ const isActive = (path: string) => {
]}
>
<a
href="/"
href={base}
class="absolute py-1 text-xl leading-8 font-semibold whitespace-nowrap sm:static sm:my-auto sm:text-2xl sm:leading-none"
>
{SITE.title}
Expand Down Expand Up @@ -72,25 +80,25 @@ const isActive = (path: string) => {
]}
>
<li class="col-span-2">
<a href="/posts" class:list={{ "active-nav": isActive("/posts") }}>
<a href={`${base}posts`} class:list={{ "active-nav": isActive("/posts") }}>
Posts
</a>
</li>
<li class="col-span-2">
<a href="/tags" class:list={{ "active-nav": isActive("/tags") }}>
<a href={`${base}tags`} class:list={{ "active-nav": isActive("/tags") }}>
Tags
</a>
</li>
<li class="col-span-2">
<a href="/about" class:list={{ "active-nav": isActive("/about") }}>
<a href={`${base}about`} class:list={{ "active-nav": isActive("/about") }}>
About
</a>
</li>
{
SITE.showArchives && (
<li class="col-span-2">
<LinkButton
href="/archives"
href={`${base}archives`}
class:list={[
"focus-outline flex justify-center p-3 sm:p-1",
{
Expand All @@ -108,7 +116,7 @@ const isActive = (path: string) => {
}
<li class="col-span-1 flex items-center justify-center">
<LinkButton
href="/search"
href={`${base}search`}
class:list={[
"focus-outline flex p-3 sm:p-1",
{ "[&>svg]:stroke-accent": isActive("/search") },
Expand Down
1 change: 1 addition & 0 deletions src/config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
export const SITE = {
website: "https://astro-paper.pages.dev/", // replace this with your deployed domain
base: "", // set to e.g. "/blog/" to serve under a sub-path
author: "Sat Naing",
profile: "https://satnaing.dev/",
desc: "A minimal, responsive and SEO-friendly Astro blog theme.",
Expand Down
2 changes: 2 additions & 0 deletions src/data/blog/how-to-configure-astropaper-theme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ During development, it's okay to leave `SITE.website` empty. But in production m
```js file=src/config.ts
export const SITE = {
website: "https://astro-paper.pages.dev/", // replace this with your deployed domain
base: "", // set if your site is served under a sub-path, e.g. domain.com/blog
author: "Sat Naing",
profile: "https://satnaing.dev/",
desc: "A minimal, responsive and SEO-friendly Astro blog theme.",
Expand Down Expand Up @@ -53,6 +54,7 @@ Here are SITE configuration options
| Options | Description |
| --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `website` | Your deployed website URL |
| `base` | The base path your site is served under. Set this if your site lives at a sub-path such as `domain.com/blog` — in that case use `"/blog/"`. Leave it unset (or `"/"`) for a root deployment. |
| `author` | Your name |
| `profile` | Your personal/portfolio website URL which is used for better SEO. Put `null` or empty string `""` if you don't have any. |
| `desc` | Your site description. Useful for SEO and social media sharing. |
Expand Down
9 changes: 6 additions & 3 deletions src/layouts/Layout.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,10 @@ const {
profile = SITE.profile,
description = SITE.desc,
ogImage = SITE.ogImage ? `/${SITE.ogImage}` : "/og.png",
canonicalURL = new URL(Astro.url.pathname, Astro.url),
canonicalURL = new URL(Astro.url.pathname, Astro.site).href.replace(
/\/+$/,
"",
),
pubDatetime,
modDatetime,
scrollSmooth = false,
Expand Down Expand Up @@ -57,7 +60,7 @@ const structuredData = {
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="icon" type="image/svg+xml" href={`${import.meta.env.BASE_URL}assets/logo.png`} />
<link rel="canonical" href={canonicalURL} />
<meta name="generator" content={Astro.generator} />

Expand All @@ -72,7 +75,7 @@ const structuredData = {
<meta name="title" content={title} />
<meta name="description" content={description} />
<meta name="author" content={author} />
<link rel="sitemap" href="/sitemap-index.xml" />
<link rel="sitemap" href={`${import.meta.env.BASE_URL}sitemap-index.xml`} />

<!-- Open Graph / Facebook -->
<meta property="og:title" content={title} />
Expand Down
2 changes: 1 addition & 1 deletion src/pages/404.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import { SITE } from "@/config";
<span aria-hidden="true">¯\_(ツ)_/¯</span>
<p class="mt-4 text-2xl sm:text-3xl">Page Not Found</p>
<LinkButton
href="/"
href={import.meta.env.BASE_URL}
class="my-6 text-lg underline decoration-dashed underline-offset-8"
>
Go back home
Expand Down
6 changes: 3 additions & 3 deletions src/pages/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const recentPosts = sortedPosts.filter(({ data }) => !data.featured);
</h1>
<a
target="_blank"
href="/rss.xml"
href={`${import.meta.env.BASE_URL}rss.xml`}
class="inline-block"
aria-label="rss feed"
title="RSS Feed"
Expand Down Expand Up @@ -101,7 +101,7 @@ const recentPosts = sortedPosts.filter(({ data }) => !data.featured);
}

<div class="my-8 text-center">
<LinkButton href="/posts/">
<LinkButton href={`${import.meta.env.BASE_URL}posts/`}>
All Posts
<IconArrowRight class="inline-block rtl:-rotate-180" />
</LinkButton>
Expand All @@ -115,7 +115,7 @@ const recentPosts = sortedPosts.filter(({ data }) => !data.featured);
const indexLayout = (document.querySelector("#main-content") as HTMLElement)
?.dataset?.layout;
if (indexLayout) {
sessionStorage.setItem("backUrl", "/");
sessionStorage.setItem("backUrl", import.meta.env.BASE_URL);
}
});
</script>
2 changes: 1 addition & 1 deletion src/utils/getPath.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export function getPath(
.slice(0, -1) // remove the last segment_ file name_ since it's unnecessary
.map(segment => slugifyStr(segment)); // slugify each segment path

const basePath = includeBase ? "/posts" : "";
const basePath = includeBase ? `${import.meta.env.BASE_URL}posts` : "";

// Making sure `id` does not contain the directory
const blogId = id.split("/");
Expand Down