Random behavior due to a file conflict running a Jekyll theme locally? - jekyll

I have, in some unexplained way, managed to get my first Jekyll site with the "Agency" theme running locally.
However, there is something that is still not right. I extracted all the files from the biggest zip file of the theme, which seem to cover all files.
First I must point out that I'm not using GitHub at all for my site. Using only local resources on my Windows machine (afaik), and I'm developing by browsing http://localhost:4000.
I get this warning:
Jekyll Feed: Generating feed for posts
Conflict: The following destination is shared by multiple files.
The written file may end up with unexpected contents.
C:/web/_site/assets/css/agency.css
- assets/css/agency.scss
- C:/web/assets/css/agency.css
...done in 0.1660095 seconds.
This creates strange behaviour. I run these commands:
bundle update
bundle exec jekyll serve
... The site works perfectly until I make some changes that make the style of the page go bananas. I assume it has to do with the warning of the CSS file. It's like it reverts back to some default CSS and my latest changes won't show.
When running the serve command everything auto-updates anyway. The CSS warning conflict never goes away though.
In my _confg.yml file, I could run any of these lines (or comment them both out) and it will work:
theme: raviriley/agency-jekyll-theme
remote_theme: raviriley/agency-jekyll-theme
I'm still confused in general about how Jekyll works and what might have happened in my case. Hope someone can help me solve the conflict thing.

Not sure what you have changed in your CSS but I cannot reproduce your issues using the Agency theme locally on Windows (I have downloaded the theme here and copied all files).
By default, the _config.yml file contains this line for the theme: theme: jekyll-agency. After running bundle and starting the jekyll server, I can see the page. Any modification, such as * { color: red } shows fine, I don't get errors in the logs.
One difference to your version
There is no agency.css file but only the SCSS version of it. The SCSS file is localed in assets\css\agency.scss
This file imports all the other variables and styles. The styles are placed in scss files in these three folders:
base
components
variables
Of course, you can also add styles to the agency.scss file but I would not do it, the component/layout structure makes sense. Read about the Sass Basics here: https://sass-lang.com/guide

Related

Tailwind: Lost config file (how to recover/regenerate it)?

Summary: I took over managing a TailwindCSS website and don't have the tailwind.config.js file.
Problem: How do I rebuild the TailwindCSS for my site, without the tailwind.config.js file used to create it?
Question: is there a way to reverse generate/create the tailwind.config.js file used to generate the TailwindCSS used on my website?
Detail: I just joined a company where the person I replaced (who left the company), built our corporate website using TailwindCSS. The problem is, I can't find the config file used to build the Tailwind CSS bundle - preventing me from creating new html pages. How can I "reverse generate" from the existing CSS I have to recreate the build config.js file used for Tailwind?
What have I tried: I have tried loading up a single page of our corporate site at https://play.tailwindcss.com/ and iterating (manually) on what the config.js file might have included that generated our corporate website; however, the output is radically off.
As such, is there a technical way to "reverse generate" what the tailwind.config.js was that resulted in the CSS that generated my site?
I would start by setting up a sandbox to experiment with site rebuilding. Try building existing content with default Tailwind config, then compare the output with your live site. Using diff -ur should help you identify specific features that need to be configured. Adjust these config options and build again until the list of differences between your sandbox and the live site are minimal (date stamps or similar).
You might also try doing a grep -r for any config options you know would have been used. Keep in mind that the config file does not have to be called tailwind.config.js (see the docs for more). You might get lucky and find that the config was just named something unexpected.

Setting a GitHub pages site from a Jekyll-generated page

I cannot setup a new Jekyll-based GitHub pages site based on the tutorials I've read. Here is the full list of steps I took:
Ran jekyll new jek_test. This created a new dir.
Used GitHub desktop to create a git repository in that dir, then pushed it to a new git repository, jek_test.
In the project settings GitHub Pages panel, I choose master branch as source.
So far this had no effect I could see. Navigating to https://gadial.github.io/jek_test/ yielded a 404 error.
I added the following two lines to the projects Gemfile:
source "https://rubygems.org"
gem "github-pages", group: :jekyll_plugins
Now, after pushing to GitHub, the https://gadial.github.io/jek_test/ link is working, but the page loaded is obviously incorrect; the CSS is not loaded, the links are wrong, etc.
I guess I am missing several crucial steps, but all the tutorials I've found either go "simply push it and everything will be ok", or seem to assume I am not using a Gem-based theme, meaning all the layouts, css files etc. are explicitly stored in the _layouts directories etc.
Am I going about this the right way? What is the simplest method to get a Jekyll-generated site up and running on GitHub pages?
You are using minima which is the default so, that's not the issue but, if you have a look at your about.md you'll see that it is looking for a layout called page. You currently don't have a _layouts folder
Try creating a folder called _layouts and create a layout in that called page.html with however you want it to display the contents of all files with layout : page
The default page.html can be found here.
You will need to change url to "https://gadial.github.io" and baseurl to "/jek_test".
If this two attributes are not set up properly, Jekyll won't know where to look for your resources.

Setting up a GitHub Pages project page. Page is up but images and main.css are not loading

Hello People of Stack Overflow,
First time setting up a project page on GitHub pages. I'm thinking I probably missed something very simple, but I have tried everything I could find, also hoping that even though this question has a high probability of being a bit idiotic that the formatting is pretty good.
The story so far...
Hosting a static site on GitHub pages. It's a project page based on a working repository. I created a gh-pages branch and pushed to this branch. That branch is now set to default and all the files are up on the repo I have looked at several questions on stack overflow that are very similar to the problem I am having but they don't seem to be quite the same.
The page is loading here
but neither the images or the CSS formatting is loading. The page was built with html, css and bootstrap.
Questions that are very like the problem:
This seems the closest: static resources not loading (rep < 10)
Maybe I need to address the root file somehow in the _config.yml? Like in this question: github pages not building (rep < 10)
Thinking the answer lies here: in the jekyll docs (rep < 10)
Avenues explored:
Created .nojykell file in the root folder, this seemed to be the best option as I don't actaully need jykell.
As another possible route, Created config.yml file
with keep_files: [img, app.js, main.css];
and then include: [img, app.js, main.css];
also added highlighter: rouge; in the 1st line, per a build error.
Jykell gave me an H10 error at one point and I installed kramdown, although that did not do anything, got the same error. This seems like an unnecessary step because I'm not using jekyll, just need a spot to serve the files already created in the interwebs.
Updated ruby
Removed ../ in front of files on the .html pages
Other things you might need to know:
File structure:
- root
- img
- .nojykell (empty)
- app.js
- index.html
- artist.html
- gallery.html
- main.css
Let me know if you have any suggestions and thanks. :)
Good to see you figured it out.
For future reference, a .nojykell wouldn't have solved the problem:
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.
https://github.com/blog/572-bypassing-jekyll-on-github-pages

Build directory .js files missing, css link broken, jpegs not processing - common issue?

I'm running HTML5 Boilerplate 3.0 and the latest ant build script. I'm on Windows 7.
After a few issues, the .bat file now executes and everything runs. Upon completion though the script directory is my publish folder is empty, though I have the following .js files in my intermediate directory:
js/scripts-concant.min.js
js/scipt.js
js/plugins.js
js/libs/jquery-1.7.1.js
js/lib/modernizr-2.5.3.min.js
In a possibly related issue, my .css file is minified and renamed and links beautifully from index.html but the rest of the files continue to try to link to style.css
In a maybe possibly related issue, I get a can't open for writing error on every single jpeg that it tries to open. They're copied across fine though, so I just wanted to include this for completion.
I've Googled to no avail and can't seem to find a common reason this would happen. I'd really appreciate any pointers, I don't mind fixing things myself, I just can't find a common thread here.
Many thanks.
For the css issue I was having this issue because I had to include all index files by putting specifying *.html in config/project.properties file.
# Web Pages
#
# These are the pages (files) that will be served to users (.html, .php, .asp, etc).
Files in this property will
# be minified / optimised and have any stylesheet or javascript references updated to
the minified examples
#
# The paths need to be relative
#
# Files can be added in a comma separated form
file.pages = *.html
Don't know about the other issues

HTML5 mobile boilerplate build script empties HTML files

All files seems to have run through the build script without any problems except my HTML files. They get added to my publish folder but are completely empty. I have tried both ant build and ant minify.
If i comment out this line file.pages.default.include = index.html, 404.html the files don't get emptied.
One more weird thing happend to. My generated css version started at around 40 the first time i ran the script. Doesn't matter at all really. Just a bit odd.
Update:
I noticed i get this error. ERROR: For JavaScript or CSS compression YUI compressor jar file must be present in the same directory as HtmlCompressor jar.
Read a thread where Paul Irish was saying that updating to the latest htmlcompressor jar should solve it. I did that but some reference somewhere needs to be updated with the new filename to cause now i get an error saying that the htmlcompressor jar couldn't be found.
For those who have the same issue, this has just been answered at the mobile boilerplate site: https://github.com/shichuan/mobile-html5-boilerplate/issues/46