astro-paper icon indicating copy to clipboard operation
astro-paper copied to clipboard

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

Open johanazhu opened this issue 1 year ago • 3 comments

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.

johanazhu avatar Jan 28 '24 09:01 johanazhu

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

benjaminrae avatar Feb 21 '24 10:02 benjaminrae

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>

satnaing avatar Jul 24 '24 16:07 satnaing

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.

JeS24 avatar Aug 27 '24 09:08 JeS24