I just installed Jekyll and generated a new site and modified almost nothing of the default configuration.
I can serve it well locally.
But when I push the source code to Github Pages or deploy it on Gitlab with a build script, I have the same result: the CSS doesn't load.
I haven't changed anything in the layout. I thought this would be the kind of feature that should work by default.
The repo:
https://github.com/bmrejen/jekyll_blog
The Github Pages:
https://bmrejen.github.io/jekyll_blog/
It says
"Could not find the original style sheet."
Try to add this in jekyll_blog/_config.yml
baseurl: /PROJECT
url: http://USERNAME.github.io
I saw in your history you deleted the URL & baseurl and insert it wrong.
If you still can't understand how to insert, you can watch this tutorial, it's cover it:
Hosting on Github Pages
Related
I'm trying to run Next js on top of Netlify, but I get 404s except for the root page, and Netlify doesn't show any logs, so I don't know what the error is.
In the React app, I had to create a redirects file under puiblic, so I tried that too, but it doesn't work. What should I do?
It is a _redirects file not redirects,You can also use netlify.toml instead, and it should be located in publish directory it's important!
Here you have few resource which are very helpful ;-) source-1 , source-2 , source-3. Good Luck!
I've built out a new site in Next.js and have deployed it on vercel.com (their free Hobby plan).
Everything works except that I built out some sample pages and put them into /public (as instructed by the Nextjs docs) so I have a directory structure as follows:
/public/demo/gencenter/gencenter.html which I'm expecting to be visible on
https://cfsnap.com/demo/gencenter/gencenter.html
but I'm getting a 404 (the console reports "failed to load resource.... 404")
Anyone know if a Next.js has any handles I should jiggle to make static files load? For giggles I put a few image files in the /public directory and I can call them directly and they appear as expected:
https://cfsnap.com/demo/gencenter/swimCalendar.png
I read about naming conflicts in the Next.js docs but "gencenter.html" is unique and doesn't exist anywhere else.
Any help would be greatly appreciated.
Rich
Vercel uses clean urls, causing the file "index.html" to be renamed to "index". When I updated my internal links to point to "index" everything started working again. Only applies to html files apparently, CSS and image files remain unaffected.
https://vercel.com/docs/configuration#project/clean-urls
I have a bunch of images in a hidden gallery, only shown when a user clicks on a certain button.
On the development server, everything is fine, no errors or issues, but when I deploy my website and open the gallery the images don't show and throw a 404 error in the console (I included the required props).
When I replace the <Image/> component with <img>, everything is fine on the development server and live. Can anyone please help? I searched a lot and I didn't find anything like this issue.
My solution:
I had the same issue and solved it by renaming the image file names.
How the issue arose:
I had renamed the images, only changing uppercase to lowercase letters. This resulted in the files being wrongly named in my github repository. After a rename with new characters, the files were correctly updated on github.
Image Optimization using Next.js' default loader is not compatible with next export.
Possible solutions:
Use next start, which starts the Image Optimization API.
Use Vercel to deploy, which supports Image Optimization.
Configure a third-party loader in next.config.js.
That means: Only assets that are in the public directory at build time will be served by Next.js. Files added at runtime won't be available
To solve this problem. I just used next-optimized-images for static image and next/image for images from the cloud.
Kindly read this article for more understanding: https://dev.to/jameswallis/next-image-and-next-optimized-images-a-brief-comparison-4c4i
Create a folder on root call it 'static' which is bassically /static/imagename.png
Set the source to the image like so;
<img src="/static/imagename.png" />
This should load the static image in file both in dev environment and build file.
New to Amplify. Following the tutorial on AWS and everything looks good.
Now I want to add a simple html file, called abc.html, just some basic html code for a test. But when I try to visit the url: https://www.yourdomain.com/abc.html, it redirects the url to https://www.yourdomain.com/abc/. So it basically doesn't recognize there is a file called abc.html. How can I add new files to Amplify?
From Amplify console, everything looks OK. It responded to the git push. Provision, build, deploy, verify are all green. It just can't recognize the new added file. Any suggestions?
I figure out the problem. Post it here in case people have the same problem.
It's a bug in Amplify web framework. If you access the file before the branch gets built and deployed, the web framework can't find the file. So it will show 404 page and record the url as 404. Later, even if you build and deploy the file through Amplify, the web framework still remembers the 404 response to the specific url. It won't refresh. That's why if you add a html file to the repo and access it before Amplify finishes deployment, the file is forever treated as not exist.
The tranquilpeak website doesnt render properly on netlify even though it looks fine locally. screen shots are below.
My repo is located here. Any help would be greatly appreciated.
It took me multiple trials and errors to get my site to work fine locally. The previous attempts lead to the same result as you can see on the netlify picture.
Successful local attempt:
a) create an empty folder
b) setwd(folder)
c) new_site(theme = "kakawait/hugo-tranquilpeak-theme")
d) create a project in the existing folder
e) init a git repository in this folder
Previous attemps:
- creating a generic project, then using new_site(theme = "kakawait/hugo-tranquilpeak-theme")
- creating a new "website using blogdown" project, asking for the "kakawait/hugo-tranquilpeak-theme" theme.
Screenshots
serve_site:
netlify:
Your issue comes from your asset paths being built to look for them at your base url path set in config.toml, which happens to be your old server.
During development on Netlify, Hugo works well for me by changing my baseURL.
config.toml
# baseURL = "https://www.simoncoulombe.com/"
baseURL = "/"
Then you can always change it back once you have the domain pointing to Netlify.
Note: add your public folder to your .gitignore when hosting on Netlify. public will get built by your build command.