SvelteKit deployment on gh - pages doesn't work. Only HTML is shown, CSS and JS doesn't load - deployment

If I build the project locally and view the preview, everything works fine. If I deploy it to gh-pages only HTML is shown and JS & CSS cannot be loaded. Why is that? I don't find what I am doing wrong, i asked on the official svelte discord server too.
What I used:
Framework: SvelteKit
Adapter: #sveltejs/adapter-static
Hosting Service: GitHub => gh-pages
Deploy Action: https://github.com/marketplace/actions/deploy-to-github-pages
The build files are all in one branch that gets published to gh-pages.
=> Result:
gh-pages-site: https://jonasfroeller.github.io/jonasfroeller/de
repo: https://github.com/jonasfroeller/jonasfroeller/tree/master/portfolio
"dependencies": {
"#tailwindcss/typography": "^0.5.9",
"daisyui": "^2.46.1",
"iconify-icon": "^1.0.2",
"typesafe-i18n": "^5.18.1"
}
svelte.config.js > paths.base: process.env.NODE_ENV === 'production' ? '/jonasfroeller' : ''
may be important: The whole website is inside of a dynamic route called [lang]. If you don't specify a lang you are being forworded.
Error example in the console: GET https://jonasfroeller.github.io/jonasfroeller/\\\_app/immutable/chunks/i18n-svelte-76a2aa52.js net::ERR_ABORTED 404
I tried 2 other actions but they resulted simillar. I also tried adding a .nojekyll file to the build folder because jekyll doesn't like "_,.,#,~", that didn't work as well. (https://stackoverflow.com/questions/40333629/cant-load-existing-js-file-on-gh-pages)

There is documentation on this specifically.
There are two options:
Disable Jekyll by simply placing a .nojekyll file in static
Change the name of the _app directory to something not starting with _ via kit.appDir in the Svelte config.

Related

Cant deploy site on either github pages or netlify. Nuxt2 and Tailwind project

Hello i have build a project in Nuxt2 and Tailwind. But I cant deploy it on github pages or netflify..
Here is my project in guthub https://github.com/Astborg/cocktailappNuxt/
On github pages its just loading..
on netlify it failes;
Here is the URL of a hosted app: https://vocal-dusk-d7176e.netlify.app/
Here are my build settings
And here are some changes that I did to your project to have it properly hosted on Netlify: https://github.com/kissu/cocktailappNuxt/blob/main/nuxt.config.js#L3
Simplest advice for you:
Build from main
Add an index.html and .nojekyll file in the root
Make sure the builds restart and you're page will be up and running.

Downloaded Jekyll website from Github and it doesnt serve Locally

I created a website with Jekyll and uploaded it to github. This allowed me to host my site for free (It's mostly just a template at the moment) repo here:
https://github.com/themallardcomplexion/themallardcomplexion.github.io
It serves fine online with the domain name but I tried to download it and serve it locally but get the following errors:
Configuration file: none
Source: C:/Users/isw/Desktop/Taijisoce/themallardcomplexion.github.io-master
Destination: C:/Users/isw/Desktop/Taijisoce/themallardcomplexion.github.io-master/_site
Incremental build: disabled. Enable with --incremental
Generating...
Build Warning: Layout 'post' requested in themallardcomplexion.github.io-master/_posts/2019-01-19-welcome-to-jekyll.markdown does not exist.
Build Warning: Layout 'default' requested in themallardcomplexion.github.io-master/404.html does not exist.
Build Warning: Layout 'page' requested in themallardcomplexion.github.io-master/about.md does not exist.
Build Warning: Layout 'home' requested in themallardcomplexion.github.io-master/index.md does not exist.
done in 0.587 seconds.
Auto-regeneration: enabled for 'C:/Users/isw/Desktop/Taijisoce/themallardcomplexion.github.io-master'
Server address: http://127.0.0.1:4000
Server running... press ctrl-c to stop.
It serves with no formatting and just shows a plain text site.... any ideas?
I have tried downloading the code via the Github app and downloading it as zip
The errors are coming from Jekyll looking for layouts for the pages you built. You need to make a /_layouts/ folder with all the layouts your site needs:
/_layouts/
|
|--default.html
|
|--post.html
|
|--page.html
|
These all correspond to the build warnings that are coming up. See the Jekyll tutorials and docs for more details.
Also, instead of downloading the repo, it's better to clone it. That way you can work on changes locally then push changes to GitHub. Here's the link to docs for cloning a repo

Jekyll website on Github pages not rendered as expected

I cloned a Jekyll Theme - Solid for use in my personal project website. When running it using jekyll serve locally, I get this as the output:
However, when I hosted it using Github Pages, this is what I get as the output:
Basically, all the images are loading. Even the network monitor in the browser shows status 200 for all the files, including stylesheets and scripts. There is no 404 Not Found error for any dependency file.
Also, as per the instructions from the theme README.md, I also changed the _config.yml accordingly:
baseurl: "/solid-tesing" #important: start with / -> repository name
url: "https://sahilarora535.me"
I also tried publishing the website as the main user website in the repository username.github.io with appropriate changes in the _config.yml, however, this also gave the same output. What and where is the error?
Additional Information - The jekyll serve command runs the server successfully, with 3 warnings. On removing the code with warnings, no change in the resulting website is seen.
Figured out the problem. The original code had a css file with yaml block and liquid tags in it. I don't understand why it was being correctly rendered locally, however, yaml is not supported in css. I changed the extension of the css file to scss and everything worked like a charm.
However, I still am not sure if yaml actually works in css. The source code had a lot of bad tweaks to include site color variables in _config.yml to stylesheet file.

Github page using hexo, how to get my theme supported?

I want to host a simple blog on Github pages. Therefore I set up a repository and used Hexo as a compile and deployment tool.
After testing my site locally I run the following command:
hexo deploy --generate
Sadly I, just a few seconds later, get the following message from Github:
The page build failed with the following error:
The hacker theme is not currently supported on GitHub Pages. For more
information, see
https://help.github.com/articles/adding-a-jekyll-theme-to-your-github-pages-site.
For information on troubleshooting Jekyll see:
https://help.github.com/articles/troubleshooting-jekyll-builds
If you have any questions you can contact us by replying to this
email.
How can I publish my site using the hacker theme? If this is not possible which themes are supported by Github? How do I use them with Hexo?
Bypassing Jekyll on GitHub Pages
It is now possible to completely bypass Jekyll processing on GitHub
Pages by creating a file named .nojekyll in the root of your pages
repo and pushing it to GitHub. This should only be necessary if your
site uses files or directories that start with underscores since
Jekyll considers these to be special resources and does not copy them
to the final site.
Source: https://github.com/blog/572-bypassing-jekyll-on-github-pages
[..] I used the username.github.io repo and deployed directly to master
and it works!
https://github.com/CodeDaraW/Hacker/issues/9

Correctly hosting Jekyll website on Git Pages

I am desperate.My mission is to deploy a static website generated using Jekyll into GitHub Pages, using the "Project" option (instead of the user option).
Somehow, when I use Jekyll to check the website in my machine, everything works fine. But once I deploy it to Git Pages, all my CSS files stop working, and every link leads to a 404 not found error.
I have followed several guides and tutorials but they all fail:
Using Github Pages to host a website v2
Jekyll Documentation
Building Static Sites with Jekyll
building-a-docs-site-with-jekyll-github-pages
So far I always created the repositories, the branches and I always push everything. I do not believe the error is in the deployment, but in some place else.
My repo can be found here:
Fl4m3Ph03n1x web-tutorials repo
For those of you wondering, so far the repository is only the result of one tutorial:
- AndrewMunssel tutorial
I have also tested other tutorials, but I always end up with a problem. Is my code wrong? Are the tutorials I am following outdated and incorrect? What should I do?
Everything on your site is in a sub directory off of the domain so the main site is accessed here
http://fl4m3ph03n1x.github.io/web-tutorials/
The templates are pointing to directories on the root of the domain so it is trying to load your stylesheets from http://fl4m3ph03n1x.github.io/assets rather than where they are located http://fl4m3ph03n1x.github.io/web-tutorials/assets/ the same thing is happening for your posts.
What you need to do is set the baseurl in your _config.yml
baseurl: /web-tutorials
you then need to modify your templates so that the paths to CSS and JS use the following convention
{{ site.baseurl }}/path/to/css.css
and for post links
{{ site.baseurl }}{{ post.url }}
You also need to update the site setting in _config.yml