search

timlrx / tailwind-nextjs-starter-blog

This is a Next.js, Tailwind CSS blogging starter template. Comes out of the box configured with the latest technologies to make technical writing a breeze. Easily configurable and customizable. Perfect as a replacement to existing Jekyll and Hugo individual blogs.
https://tailwind-nextjs-starter-blog.vercel.app/
MIT License
7.36k stars 1.84k forks source link

img source base path for GH pages breaks build #917

Open Rikidink opened 1 month ago

Rikidink commented 1 month ago

Describe the bug I followed the steps to host statically along with the steps to host on github pages. The yarn build step would always fail due to changing the img source path in components/Image.tsx to the provided one for GH pages deployment.

To Reproduce Follow section on "Static hosting services" in README. Follow steps in faq/github-pages-deployment.md. Run yarn build.

System Info:

Additional context I got it working by changing the img src path to an absolute path where {username} is my Github username and {repo-name} is my repo name:

import NextImage, { ImageProps } from 'next/image'

const Image = ({ src, ...rest }: ImageProps) => (
  <NextImage src={`https://{username}.github.io/{repo-name}${src}`} {...rest} />
)

export default Image
timlrx commented 1 month ago

Here's the recommended change required to deploy on github pages: https://github.com/timlrx/tailwind-nextjs-starter-blog/blob/main/faq/github-pages-deployment.md