Styles not rendering in Jekyll site - css

I'm trying to get started with a blog using Jekyll. With Ruby, bundler and gems installation out of the way, I've spun up a site. The problem now is that the styles don't seem to render.
The site's src code is here, https://github.com/soumasish/Blog
I'm not sure if the problem is because the SASS isn't compiling or the site is just not able to pick up the CSS.
Any help appreciated.

I'm assuming you mean the styles aren't loading when you visit https://soumasish.github.io/Blog/, locally it looks fine.
It's requesting the CSS file at /css/main.css, which is an absolute URL. This absolute URL negates the base path of Blog, resulting in a request to:
https://soumasish.github.io/css/main.css
But the CSS file is located here:
https://soumasish.github.io/Blog/css/main.css
To fix it, you can add a baseurl option to _config.yml:
baseurl: "/Blog"
Or add that to the url setting (but baseurl is the recommended way):
url: "https://soumasish.github.io/Blog"

Related

Tailwind CSS works locally but doesn't work on GitHub Pages

I made a static site with Tailwind CSS and it's working locally but it's not working on GitHub Pages. I don't know what to do. Pls help.
Do you have a link to your Github Pages website so we could check what's wrong ?
A hint : Check in your console if your stylesheet link is wrong or isn't found. I'd guess on an absolute path pointing to root, instead of a relative path, but it's a wild guess without more info about your code.

Redirect .style.css page and website should load css

Let me explain scenario.
The style.css path has been set as-
https (colon)// xyz dot com/main/css/style.css
As style.css is file readable in browser I want to block the access at the same time website pages should load css.
Things tried so far-
1) If I block access to /style.css file in httpd.conf then css doesn't load and website opens up without theme and styles.
2) If I redirect /style.css to /main in .htaccess then again website loads without theme and styles.
I would appreciate a guidance in layman's language as am still learning and even after referring to many posts on stackoverflow; unfortunately couldn't find the answer.
Your css files need to be accessed by the browser. Then they will also be available for the users. It's inevitable. You can't allow access to the browser and block them to users.
If you want to protect your work, you can obfuscate them with a tool such as http://cssobfuscator.com/ or integrate it directly in your gulp build with e.g. gulp-css-gsub. They will be usable by the browser but it will be difficult to reuse them.

Jekyll blog won't load CSS

I have cloned a Jekyll Bootstrap installation with GitHub pages. Everything is working but the CSS and JavaScript aren't being loaded in the website. It looks like a barebones HTML site.
Here is the website: https://heavensgospel.github.io/
Here is the website's files: https://github.com/heavensgospel/heavensgospel.github.io
Apparently those files are missing from your file system.
Your /assets/themes/bootstrap/css/ folder seems to contain only one file style.css, while other files seem to be missing. Similarly, JavaScript files too are missing.

Disable wordpress css on subdirectory

Ok this is almost a repost except I know the cause. Ok So I have a site in a subdirectory under my www folder (which appears to simply be a link to the public_html folder.) Anyhow this site is not a wordpress site, even though the parent site is. My wp-admin wp-content and wp-includes directories are also in the same spot.
My problem is that the second site in the subdirectory is automatically using the wordpress css for some reason. I do not want it to do that. I have a css file for it, but it does not load it and uses the wordpress one instead.
Is there a way to correct this so that it only uses the css file I tell it to use?
The only way that this site will use the Wordpress CSS is if it somehow imports the Wordpress CSS. View the page source and try do discover from where the site is getting the Wordpress CSS. Make sure that you are not calling the tag anywhere. If you have managed to strip away the Wordpress CSS, then just reference the desired CSS as you would with a static HTML site. The fact that it is in the same directory as the Wordpress directories will not make a difference.
Ok I fixed this. I simply renamed the css file to something other than style.css In this case I name it santastyle.css as this site is meant to work as a secret santa website. This solved the problem.

How do I use Jekyll in a subdirectory?

Jekyll assumes that the generated site will be served from the root directory, and subsequently all of the links are absolute beginning with "/". I'd like to serve out a blog from a subdirectory, i.e., http://www.example.com/~user/blog.
Setting permalink variable (http://jekyllrb.com/docs/permalinks/) would be a partial fix, but doesn't address other things such as css files.
I'll be glad for any pointers.
You want to use the baseurl config option in your _config.yml file. Permalinks will then be relative to that. See the Jekyll docs for the baseurl option:
http://jekyllrb.com/docs/configuration/
Assuming you are using at least Jekyll 1.0.0.

Resources