The default site setup for a new Jekyll site has a layout specified as "home" in index.md:
---
# You don't need to edit this file, it's empty on purpose.
# Edit theme's home layout instead if you wanna make some changes
# See: https://jekyllrb.com/docs/themes/#overriding-theme-defaults
layout: home
---
If I follow the link, it tells me to create a _layouts folder and create a file in it named home.html and that will be used as the home layout. But if that file doesn't exist Jekyll defaults back to the normal home page.
Where is Jekyll pulling the default layout from?
This default layout comes from the theme, which is gem based and is stored on your computer.
To locate a theme’s files on your computer:
Run bundle show followed by the name of the theme’s gem, e.g., bundle show minima for Jekyll’s default theme. This returns the location of the gem-based theme files. For example, the Minima theme’s files might be located in /usr/local/lib/ruby/gems/2.3.0/gems/minima-2.1.0 on macOS.
Source
I would suggest to start without a theme. Invisible files do not really help you to understand an already quite abstract concept. Remove the theme and write your own layouts and CSS. When you get how it works, you also truly understand how a theme works and what it can and cannot do.
Removing the standard (or any other) theme is simple. Just go to the _config.yml file and remove theme: minima. Now you will use only visible files. You might also want to remove the 'Gemfile', but that requires you to also remove the 'jekyll-feed' plugin from the config. No problem, as you can easily roll your own: https://jekyllcodex.org/without-plugin/rss-feed/
From this version of the manual:
Run bundle info --path followed by the name of the theme's gem, e.g., bundle info --path minima for Jekyll's default theme.
The layout files will be in the _layouts sub-directory of the path returned by the command above.
Related
I'm interested in using Jekyll to host a dozen business websites that share a lot of information and web interfaces in common. Hence, I'm curious if what I'm about to ask is easily supported by Jekyll.
If this were another website platform like WordPress, Magento, etc.. etc... I might set up default templates for my website like this:
tpl/default/header.html
tpl/default/footer.html
tpl/default/privacy-policy.html
tpl/default/pricing.html
tpl/default/contact/map.html
tpl/default/contact/form.html
Then for each business that signs up with me, I will set up a folder for them called tpl/<businessname>/. Then, the platform will create a website using all the html files in the tpl/<businessname>/ directory. Whenever a template does not exist in the tpl/<businessname> directory, then the platform will use the corresponding template in the tpl/default/ directory.
As an example, let's say Bicycle Shop wants a website from me. I go ahead and create this:
tpl/bicycyle-shop/contact/map.html
Then in my layout files, I might make calls like this:
<?php
define('ORG','bicycle-shop');
put_tmpl('contact/form.html'); // this will use tpl/default/contact/form.html
put_tmpl('contact/map.html'); // this will use tpl/bicycle-shop/contact/map.html
function put_tmpl($tplname) {
if(file_exists('tpl/'.ORG.'/'.$tplname))
include('tpl/'.ORG'.'/'.$tplname);
else
include('tpl/default/'.explode('/',$tplname)[count(explode('/',$tplname))-1]);
}
?>
I'm curious how a behaviour like this is achieved in Jekyll?
ADDITIONAL
One way that just occurred to me was to have a _config.yml that has variables like:
tmpl:
home: tpl/default/header.html
pricing: tpl/default/pricing.html
...etc...
Then each business has _config<businessname>.yml that overrides the appropriate tmpl variables. Would that be the Jekyll convention? Or is there something out of the box with Jekyll that does this better?
There are themes... you just install a theme as a gem in your config. When you need to override a theme file, you just put that file in your _layouts or _includes directory.
Super simple.
I found a jekyll theme I like which is hosted on github (theme page info here). The theme supports configuring my theme on github pages with the remote_theme key in _config.yaml, but I'm uncomfortable letting a third party's repository control the appearance and client-side code of my site.
Assuming there's a particular revision of theme files that I've audited and I'm satisfied with, how do I make sure that this revision gets used?
Some ideas:
Can I fork the theme repo and use remote_theme: myaccount/my-fork.
Can the remote_theme syntax support a particular revision hash?
Is using remote_theme simply equivalent to copying all the theme data inside my repo _layout and _style folders?
From the docs you can use an #GITREF syntax to use a specific branch/tag/commit
You may also optionally specify a branch, tag, or commit to use by appending an # and the Git ref (e.g., benbalter/retlab#v1.0.0 or benbalter/retlab#develop). If you don't specify a Git ref, the master branch will be used
I'm working on the documentation (https://global-coffee-data-standard.readthedocs.io) of my JSON schema (https://raw.githubusercontent.com/andrejellema/GlobalCoffeeDataStandard/master/schema/global-coffee-data-standard.schema.json)
The basics I have working (thanks to a lot of help from this forum) but now I would like to include the docson widget to show my code more beautiful (https://global-coffee-data-standard.readthedocs.io/en/latest/explanation.html#id13)
I've read this page https://threesixtygiving-standard.readthedocs.io/en/latest/_static/docson/README/ and I'm wondering how to install docson locally but more important on ReadTheDocs.
Do I need to run npm i docson localy? If so which files do I commit to my _static folder so ReadTheDocs can work with it as well?
Or can I put some magic in conf.py to let Sphinx handle it?
EDIT
I tried adding the docson files to my _static folder and it seems to work when I add this code to my ReST file:
<script src="_static/docson/js/widget.js" data-schema="https://raw.githubusercontent.com/andrejellema/GlobalCoffeeDataStandard/master/schema/global-unique-id.json"></script>
But only when I add just one docson widget. When I add more I get this error in the console:
only one instance of babel-polyfill is allowed.
So I'm assuming this is not the correct workflow.
What is the correct workflow to add multiple docson widgets to my page.
I've got mkdocs.yml file which looks like:
site_name: blabla
pages:
- One page: page2.md
- Second page: page2.md
- Navigation: Navigation.md
When I open it url is like this: http://10.2.0.8/blabla/master/Navigation.md and doesn't work and I get 404 Not Found
nginx/1.14.0 (Ubuntu) error. If I delete .md at the end of url it works fine.
However, on locally it opens like http://127.0.0.1:8000/Navigation/
does anyone know what's the problem with this?
As described in the official mkdocs documentation, the intended behavior is that http://10.2.0.8/blabla/master/Navigation.md does not exist, but rather http://10.2.0.8/blabla/master/Navigation as shortcut for http://10.2.0.8/blabla/master/Navigation/.
What might have gone wrong in your case is the deployment of the HTML & CSS files. Assuming that your markdown sources are in ~/blabla, a mkdocs build --clean within that directory will create a subdirectory ~/blabla/site/ which you then have to deploy in the respective directory, say /var/www/html/blabla/. Under Linux, I suggest a rsync -r --delete-before ~/blabla/site/* /var/www/html/blabbla/. In other words: The issue might also be that you simply have not deployed the whole site or at a different place.
I'm using this yeoman generator (https://github.com/Swiip/generator-gulp-angular) for my project. And have added a couple of bower libraries, namely, videojs, ngDialog.
The problem I'm experiencing is that the css files included in these libraries aren't being packaged up into the vendor.css file like the rest of the packages are. I know that that the generator uses wiredep, but I'm afraid I don't know enough about it to find out what went wrong.
Basically, when I go to view source, I see that there are style includes underneath the vendor.css style include, eg.
<link rel="stylesheet" href="../bower_components/ngDialog/css/ngDialog.css">
Also notice how it is included using "../". This would break if I'm in an HTML file that is in a directory other than the root.
Any pointers?
Thanks.
John.
Basically you don't have to worry about the building process, the gulpfile provided by gulp-angular is well configured for you future including bower components.
Once you run bower install your_component, be sure to run gulp build again in command line, it will then include the needed styles to your index.html.
If you would like to know more about the underlying process with that, you may check yourapp/src/index.html from line 12 to line 20 to get a sense of it. For how wiredep works for your bower components, the official document should suffice.