I'm trying to do this because I'm using a CMS where users will be able to edit a data file to make changes to the page instead of the _config.yml.
I'm wondering if it's possible to reference a variable from the data file and place this reference within the _config.yml.
Here's an example of what I'm trying to do;
Data File (/_data/site-data.yml)
navigation:
navigation_colour: '#462634'
Config File (/_config.yml)
defaults:
-
values:
navigation:
navigation_colour: site.data.site-data.navigation.navigation-colour
Is something similar to this possible?
Thanks!
You can assign at least in one config-file variables, I have not tested this over multiple files.
Variables inside YAML
YAML, hello will become Greetings earthling!
something: &hello Greetings earthling!
myref: *hello
MARKDOWN
{{ site.data.samplelist.myref }}
Jekyll does not parse variables in _config.yml. However inside your blog you can use liquid tags like {{site-data.navigation.navigation-colour}}. See here.
If its mandate to replace variables in _config.yml then use a custom or standard replacement plugin with grunt. So effective grunt build task will first perform token replacement in _config.yml and then do jekyll build.
Related
I have a data file which is being used inside a Jekyll template:
/{project}/_data/mydata.json
I also want this data to be available on the live website from a JavaScript:
/{project}/_site/mydata.json
Somehow I want one of the following:
Automatically copy itself from "_data" to "_sites" whenever changes are made.
Have the template read the data file from /{project}/mydata.json since this file will already get copied to the "_sites" folder.
What is the easiest way to maintain a single version of the data file inside both Jekyll templates and JavaScripts?
File /{project}/mydata.json
---
layout: null
---
{{ site.data.mydata | jsonify }}
With jekyll serve or on github, this will be updated each time your /{project}/_data/mydata.json is updated.
Et voilà !
I'm using the Gulp to build my SCSS, Pug and ES6 assets for my static website. I know it's possible to hash file names and output the files in a different directory.
For my specific example:
my Pug markdown are found in the ~/src/pages directory and getting built to the ~/public/ directory.
My SCSS stylesheets are found in the ~/src/stylesheets directory. These are getting built to the and getting ~/public/style directory
My problem is, when I'm referring to my stylesheets files from Pug, I have to refer to the already-built folder like this:
link(rel='stylesheet', href='./style/example.css')
For my IDE, this doesn't make sense, because the style directory doesn't exist in the ~/src/pages directory.
What I would find the most useful is that I can refer to my stylesheets like the example below:
link(rel='stylesheet', href='../stylesheets/example.scss')
Is there any way this is possible or am I completely going in the wrong direction? If not, where am I looking for?
Solution to make the file name like hash
gulp, for automating our task
gulp-rev, for renaming our files with random hashes.
gulp-rev-collector, for switching non-hashed references by hashed-references inside our files.
rev-del, for deleting non-hashed files in our /dist folder.
Sample code :
gulpfile.js
gulp.task("revision:rename", ["serve"], () =>
gulp.src(["dist/**/*.html",
"dist/**/*.css",
"dist/**/*.js",
"dist/**/*.{jpg,png,jpeg,gif,svg}"])
.pipe(rev())
.pipe(revdel())
.pipe(gulp.dest("dist"))
.pipe(rev.manifest({ path: "manifest.json" }))
.pipe(gulp.dest("dist"))
);
manifest.json
{
style.css: style-ds9udjvci.css,
main.js: main-dijds9xc9.min.js
}
For creating our revision update in the file like
Rewrite every reference for every key of manifest.json to it’s respective value inside every html/json/css/js file (i.e: <link href="style.css"> would become <link href="style-ds9udjvci.css">)
gulp.task("revision:updateReferences", ["serve", "revision:rename"], () =>
gulp.src(["dist/manifest.json","dist/**/*.{html,json,css,js}"])
.pipe(collect())
.pipe(gulp.dest("dist"))
);
You can use something like gulp-watch for real-time compiling of your .scss files, then your /style/example.css file will exist and it will be recompiled automatically when you modify example.scss
You may need to move some directories around to get everything to link, but you can use watch to build your Pug files too, so your site will always be up to date.
Basically, you make a change on any file in your project and view the update live.
Gulp cannot automatically change the file paths used inside the htmls. Therefore you will have to use the generated file path for accessing the style files.
Although if you want to have the file path as the folder structure of your scss, then you will have to replace the contents of the pug file after gulp has finished converting it to HTML.
You can convert the html to String and use the .replace method to replace whatever content you want to change and finally parse the string to a HTML document.
Hope this helps!!
I've inherited a process that converts markdown content into html using jekyll.
If I remove the yaml front matter between ---, by client request to simplify the process for editors,
---
product: Product Name
capability: testing
infotype: Overview
audience:
---
# Testing file 2
This is another testing file.
The jekyll build doesn't convert the file.
# Testing file 2
This is another testing file.
When I have the front matter in the testing 2 file I see the following in the log when running build --verbose
Rendering: user-administration/testing-file-2.md
Pre-Render Hooks: user-administration/testing-file-2.md
Rendering Markup: user-administration/testing-file-2.md
Rendering Layout: user-administration/testing-file-2.md
but without the front matter there is no message in the log related to testing-file-2.md
This testing-file-2.md is part of a collection of other files that have metadata. They are render into an html website but not the testing-file-2.md when the metadata is removed.
Is there a way for jekyll to build and render files without front matter?
Jekyll does not ignore any files. Rather, for each file, it decides whether the file is:
a static file, which can be copied as-is to the output folder (_site), or
a file to be processed first.
Markdown files (.md) are processed by kramdown and Liquid if they start with YAML frontmatter:
---
---
otherwise they are treated as static files, and copied to _site with no processing.
There is a workaround that might work for you using include_relative; but it may cause more trouble for your client's editors than it's worth, depending how they work.
You can include a static file inside a file to be processed. Your static file might be plain-text.md:
# Static text file
This is a file with no YAML frontmatter.
Then, separately, you create a markdown file with frontmatter that will include the plain-text file inside it. Say, processed-text.md:
---
---
{% include_relative plaintext.md %}
Then your plain text will be processed and appear on your site as /processed-text. Think of the file processed-text.md as a kind of template for holding plain-text.md.
You'll want to see the docs on include_relative, especially the fact that the file to be included can't be above the including file in the file system.
I've read that it's a requirement to have at minimum at empty front matter or jekyll will ignore the file
---
---
I'm pretty sure I've seen in Jekyll blog projects with multiple source document directories, such as _posts and _pages, but the source parameter in the _config.yml file can only take 1 directory as its argument, and neither an array nor a space separated string of directories works.
Am I misunderstanding the meaning of the source parameter? I'm expecting it to be used by watch to specify which files' changes will trigger a build, and which files to build.
Also, I have fragments such as about.md which can be included in other pages. What is the best location for files like this one?
The source configuration refers to your <project_root>, not individual directories within the project root. By default, its set to your current_directory (the location from where you are running jekyll build (or) serve.
Jekyll watches all nested files and directories deep within the source directory by default.
about.md is not meant to be seen as a fragment to be included in other files. Its a full-blown "page" that would render into _site/about.html or _site/about/index.html depending on your permalink settings.
Fragments to be included in other pages live inside the _includes directory and are inserted via the Liquid construct {% include <fragment-filename>.html %}
Other than _layouts, _includes and _sass, directories that start with an underscore are ignored by Jekyll unless you configure Jekyll to see them as "collections". _posts is a pre-defined and hard-coded collection directory.
For more information on Jekyll, refer the official documentation at https://jekyllrb.com
If anyone, like me, is looking to include several source folders in github-pages, you can simply configure the jekyll root in github-page on the master branch. I.e. not on gh-page branch, nor on the docs folder.
Thus, all folder is processed. README.md are treated as index.md and you can easily make relative links from the main README.md at the root to any other doc which are "below" it in the file hierarchy. Thus having jekyll cover all your code documentation.
I have a data file which is being used inside a Jekyll template:
/{project}/_data/mydata.json
I also want this data to be available on the live website from a JavaScript:
/{project}/_site/mydata.json
Somehow I want one of the following:
Automatically copy itself from "_data" to "_sites" whenever changes are made.
Have the template read the data file from /{project}/mydata.json since this file will already get copied to the "_sites" folder.
What is the easiest way to maintain a single version of the data file inside both Jekyll templates and JavaScripts?
File /{project}/mydata.json
---
layout: null
---
{{ site.data.mydata | jsonify }}
With jekyll serve or on github, this will be updated each time your /{project}/_data/mydata.json is updated.
Et voilà !