Using Jekyll 2.5.3, I've tried to set default values in _config.yml (I'm just playing around to get a feel for it right now). I'm trying to set a default layout right now on a site I'm serving locally. I have set --watch and that's working fine. When I set any YAML defaults in _config.yml, Jekyll does not apply the defaults at all.
Here's the config file I'm currently using:
name: jekyll test
description: test server
url: "http://localhost:4000"
markdown: rdiscount
permalink: pretty
defaults:
-
scope:
path: ""
values:
layout: "default"
The default layout is not applied to any page. I've tried with the title as well, with the same result.
My index.md:
---
title: index
----
{{ page.title }}
My default.html:
<style>
body {
background-color: black;
color: white;
font-family: "Helvetica", Arial, sans-serif;
}
</style>
<body>
{{ content }}
</body>
The default layout works fine when put into the YAML Front Matter of the index page itself, the main reason I'm looking for this is so I can apply default.html to 404 pages. The other elements in config.yml aren't giving me any trouble. Is there something I've done wrong?
Fixed it myself - --watch does not listen for changes to files that aren't included in the site itself (namely _config.yml, which is used to generate pages at runtime). To apply changes to the site configuration, I just had to restart Jekyll and feel a little stupid.
Bottom line: I have learned my lesson. If changes don't appear to be saving, turn it off and on again before asking.
I had this issue. There was an extra space after toggling a comment '#' tag in the frontmatter of my index.md:
---
#title: index
title: index2
----
and I fixed it by removing the space:
---
#title: index
title: index2
----
Related
I'm in a .NET shop; Octopus and TeamCity are used for deploying to our testing and production environments. I added some .WOFF2 fonts to the /_css/fonts folder, and I'm referencing them as follows:
#font-face {
font-family: Roboto;
src: url(/_css/fonts/Roboto-Bold-webfont.eot);
src: url(/_css/fonts/Roboto-Bold-webfont.woff2) format('woff2'), url(/_css/fonts/roboto-bold-webfont.woff), <!-- other fallback fonts -->
The .WOFF2 fonts appear on localhost, but somehow they are being omitted from the build output. What's weird is there is a reference to a .WOFF2 of FontAwesome that is successfully being output. I've checked the properties of the fonts in Visual Studio, and all the new (non-outputting) fonts are set to Copy Always to output directory. Despite all our efforts, we keep getting 404 errors for those fonts.
TIA for any help you can provide!
You can add a MIME type inside the IIS Manager.
Open the "MIME types" in your server Home page (or Home page of your specific
Add ".woff2" with MIME type "font/woff2".
In my case it works with IIS 7.5.
I am using creat-react-app (CRA) and simply want to include a png file placed in the public folder via CSS (I keep all image files there).
Now I am trying to reference this image via CSS (I only added the background-image line to a freshly generated CRA app):
.App-header {
background-color: #222;
height: 150px;
padding: 20px;
color: white;
background-image: url("../public/example.png");
}
You attempted to import example.png which falls outside of the project src/ directory
How do I reference the image file from within the CSS-file without copying somewhere inside /src? I also don't want to eject the application and get rid of the error message.
Edit: This question is different from The create-react-app imports restriction outside of src directory because it does not show how to solve this problem at a CSS level. The proposed solution is to add the style inside the JavaScript file which I don't want to do.
Just use a / before the name, this will make it relative to the output root, which includes anything in the public folder (provided the finished hosted application is served at the root of a domain).
so for the question asked above:
.App-header {
background-color: #222;
height: 150px;
padding: 20px;
color: white;
background-image: url("/example.png");
}
the critical part being
/example.png
refers to a file, example.png, that is in the public folder (served at the root level)
Could also be relative:
one could also use
./example.png
provided that the css file was also imported from the public/build directory, this would be relative to the css file and not depend on being served at the domain root, but typically in CRA webpack will bundle the CSS and it may or may not be loaded from this location. (you could import it in the html file directly using rel tag with the %PUBLIC_URL%/Styles.css macro)
In my case, to access the images from css/scss, had to move the images directory as well as fonts, to the src directory. After which i was able to refer them in the css/scss files directly,
background-image: url("/images/background.jpg");
references:
https://github.com/facebook/create-react-app/issues/829
https://create-react-app.dev/docs/using-the-public-folder/
there is a special page about the /public folder in the official documentation:
https://create-react-app.dev/docs/using-the-public-folder/
Here is how you should refer to the public folder:
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
or
render() {
return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;
}
BUT, you can't use those solution in a css file. So you'll have to precise the ressource from the js files:
const MyComp = () => {
return <div style={{ backgroundImage: `${process.env.PUBLIC_URL}/img/logo.png` }} />;
}
I was using "public" folder but it says here to use images inside "src" folder:
https://create-react-app.dev/docs/using-the-public-folder/
"Normally we recommend importing stylesheets, images, and fonts from
JavaScript."
Remove the extra .. in the relative path. :)
Use "./image.png".
The logic behind is that the css file you will place the code in, will be part of index.html when the app is finished, built and deployed.
The only way that helped me is adding full URL-adress to the image path. So this one can help:
background-image: url("http://localhost:3000/background.jpg");
Using the URL directly doesn't work for my environment, for me I needed to specify the path TO the image FROM the current directory.
eg;
/src/styles/style.css
cursor: url("../../public/images/image.png"), auto;
/src/public/images/image.png
background-image: url("http:/images/pexels-photo-1.jpg");
I'm developing an App using Ionic 2. Right now, I've this style:
ion-content {
background-image: url('/assets/images/orange-background.svg');
background-repeat: no-repeat;
background-size: 101%;
}
When I ionic serve this works fine, but when I upload a new version to Ionic View channel, this example doesn't work neither any example of background-image with an .svg.
I already tried Ionic - svg does not appear but didn't work.
Thanks in advance.
Edit 1
I already tried this url in background-image:
assets/images/orange-background.svg
/assets/images/orange-background.svg
../assets/images/orange-background.svg
./assets/images/orange-background.svg
None of this worked :'(
Edit 2
I just discovered that this problem only happens on iOS.
Maybe the url is incorrect. In the .css files: url ('../assets/images/orange-background.svg').
In other case, did you make the difference: In Whindows an image.SVG will works when you test the app in a browser but wont in Linux (Also Android). It seems that an image.SVG is the same as image.svg in windows.
I had a similar problem, and I realized that the file was called "Background.svg", and on my css I had:
background-image: url("../assets/imgs/background.svg");
Once I changed the file name to "background.svg" the problem was fixed.
Metalsmith portrays itself as a ridiculously simple static site generator. I'm trying to write the most basic of sites just to get myself familiar with the basics of the software, but I can't seem to get even that to build. Here's my folder structure:
|- build/
|- index.js
|- src/
|-index.html
|- templates
|-index.hbt
My index.js file:
var Metalsmith = require('metalsmith');
Metalsmith(__dirname)
.destination('./build')
.build();
My index.html file:
---
title: Home
template: index.hbt
---
And my index.hbt template:
<!doctype html>
<html>
<head>
<title>FOO</title>
</head>
<body>
something
</body>
</html>
My understanding is that the build command should look through the src directory and parse any file it finds with that YAML stuff at the top. So it should look at index.html, see that it renders using the templates/index.hbt template, and basically just move the file into build/index.html. But when I run node index.js I get absolutely nothing. No progress indicator, no "Done building your stuff!" message, just a blinking command prompt line. My build directory is empty. Obviously something is breaking, but there are no logs to check, and no status messages to google. What am I doing wrong? Shouldn't there be at least one page created in the build directory?
Found the answer, in a comment on a tutorial, of all places: https://blog.robinthrift.com/2014/04/14/metalsmith-part-1-setting-up-the-forge/. It's also on the github examples: https://github.com/segmentio/metalsmith
According to those links, you need to include an error callback on the .build() function:
Metalsmith(__dirname)
.build(function(err) {
if (err) throw err;
});
In addition to the error callback issue, which you've already identified, I think you're missing a few things in your files. True, Metalsmith is very simple, but its simplicity means that a lot of the functionality (like support for templates) is brought by modules that you need to install and include explicitly.
You say the content of your index.js file is:
var Metalsmith = require('metalsmith');
Metalsmith(__dirname)
.destination('./build')
.build();
Is that everything you have in you index.js? If you want to use Handlebars templates, you need to explicitly add the metalsmith plugin that handles templates, and instruct it to use handlebars:
var Metalsmith = require('metalsmith');
var templates = require('metalsmith-templates');
Metalsmith(__dirname)
.destination('./build')
.use(templates('handlebars'))
.build();
And make sure that you install the metalsmith-templates and handlebars modules from npm.
Also, you probably know this, but in your index.hbt, you'll need to change
<title>FOO</title>
to
<title>{{ title }}</title>
in order to load the title metadata from index.html.
Let me know if this gets you going, or if you need more help.
Well, I'm using Brunch.io to replace the traditionnal Grunt.js. To perfom the build very fast, I've set on my brunch-config.coffee file, the "native" mode, and I've downloaded all the compass mixins
plugins:
sass:
mode: 'native'
I've not tryed all the compass-mixins, but everything seem's allright, except when I try to include web-font, so adding this on a _font.scss file for exemple :
#include font-face("oxy_reg",
font-files("oxygen-regular-webfont.eot",
"oxygen-regular-webfont.svg",
"oxygen-regular-webfont.ttf",
"oxygen-regular-webfont.woff"
));
result this on the generated css file :
#font-face {
font-family: "oxy_reg";
src: font-files("oxygen-regular-webfont.eot", "oxygen-regular-webfont.svg", "oxygen-regular-webfont.ttf", "oxygen-regular-webfont.woff"); }
but it's not a good css format, the right one (doing by ruby, when I set mode to "ruby" on the brunch-config.coffee) should be this :
#font-face {
font-family: "oxy_reg";
src: url('oxygen-regular-webfont.eot?1422206651') format('embedded-opentype'), url('oxygen-regular-webfont.svg?1422206651') format('svg'), url('oxygen-regular-webfont.ttf?1422206651') format('truetype'), url('oxygen-regular-webfont.woff?1422206651') format('woff'); }
well, I've got no error, but the generated script is not good !
Hope someone get a idea what I'm doing wrong !
see you