satnaing / astro-paper

A minimal, accessible and SEO-friendly Astro blog theme
https://astro-paper.pages.dev/
MIT License
2.52k stars 522 forks source link

How to place astro-paper in a subdirectory of the website #253

Open johanazhu opened 9 months ago

johanazhu commented 9 months ago

Hello, I have a confusion. After I deploy astro-paper to vercel, I want to put the website under xxx.com/blog. When I set it in next.config.js of xxx.com

 async rewrites() {
    return [
      {
        source: '/blog/:subdir*',
        destination: 'http://xxx.com/:subdir*',
      },
      {
        source: '/(.*)',
        destination: '/',
      },
    ];
  },

Style and css error reporting, click on the article, there is no prefix (/blog)

PS:I am a Chinese and my English is not very good.

benjaminrae commented 8 months ago

Have you considered using a subdomain? That would make it https://blog.xxx.com. I see that pattern a lot more and I think it will be much easier to configure

satnaing commented 3 months ago

Hello @johanazhu I might be a little too late. However, here's the solution I can think of.

  1. Add a base and trailingSlash in astro.config.ts
export default defineConfig({
  // others
  base: "/blog",
  trailingSlash: "ignore",
  // others
)}
  1. Then, update all the links to include /blog/ or import.meta.env.BASE_URL at the start.
<a href=`/blog/posts/`>Posts</a>
<link rel="icon" type="image/svg+xml" href="/blog/favicon.svg" />
<script is:inline src=`${import.meta.env.BASE_URL}/toggle-theme.js`></script>
JeS24 commented 2 months ago

I have implemented a base URL in my fork that we use at our lab. It basically follows @satnaing's suggestion above. You can take a look here: https://github.com/JeS24/smlab-talks.

P.S.: There are some other changes that were needed in our case. Feel free to ignore those.