How to set up/embed github profile or github repository cards on your Jekyll personal website?
I am expecting to embed my personal projects from github in the form of widgets on my personal website.
I don't see a direct way to include data in static Jekyll HTML files.
But there are options:
GitHub offers a JSON API for repos and users. Not sure what profile information you're looking for.
Jekyll has data files in YAML where you can store this data and read information from.
My initial idea is to get data in JSON and convert it to YAML, manually or programmatically. Then, you can build a Jekyll site that reads the information from the YAML files.
You can try out the manual way:
Read data from https://api.github.com/users/cadamini/repos using https://reqbin.com/
Convert the resulting JSON file using https://www.json2yaml.com/
Put the resulting YAML file in your Jekyll instance, e.g in _data/github/repos.yml (exclude the hyphens).
Extract:
- id: 540417594
node_id: R_kgDOIDYeOg
name: add-theme-github-pages-demo
full_name: cadamini/add-theme-github-pages-demo
private: false
Use the following code/syntax to access the information:
{% for item in data.github.repos %}
{{ item.name }}
{% endfor %}
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à !
How do I access static files in a collection?
I have (I think) followed the instructions at
https://jekyllrb.com/docs/collections/
I created a dir ./_test and static files ./_test/a and ./_test/b and added a corresponding collection entry in _config.yml:
collections:
- test
After this I cannot use site.test.files to get an array containing the files ./_test/a and ./_test/b (as should be possible, per my interpretation of the above Jekyll documentation).
(I use the Jekyll version provided by GitHub-Pages.)
Say you have both, some files with yaml front matter and static files witch are not processed by jekyll. These files can be accessed as follows:
files with front matter:
{% assign test_docs = site.test %}
{{ test_docs }}
static files:
{% assign test_coll = site.collections | where: "label", "test" | first %}
{{ test_coll.files }}
As you asked explicitly for static files, in the code above {{ test_coll.files }} contains the array with both files /_test/a and /_test/b. But, only if these files do not have a yaml front matter.
Since I list all my posts in one page called fotos.html I don't need the individual posts to appear as HTML files in the _site output directory. How can I tell Jekyll to not output the .md posts in the _posts directory as individual HTML files?
[
E.g. The contents of Firmwochenende.html are present in fotos.html with properly formatted title and date. Firmwochenende.html includes only photos and nothing else, which is not useful at all.
I build using build exec jekyll serve and host on Github Pages: https://github.com/junge-pfarre/junge-pfarre.github.io
These are the relevant parts of _config.yml:
defaults:
- scope:
path: ""
values:
layout: "default"
- scope:
path: "assets/flyer"
values:
flyer: true
markdown: kramdown
permalink: :title
A simple post has these contents:
---
title: Jugendandacht Gründonnerstag
---
![Altar der Josefskapelle in der Pfarrkirche Baden St. Stephan][1]
[1]: {{ site.baseurl }}{% link /assets/fotos/Jugendandacht2018.jpg %}
You'll need to use a custom collection rather than the default as the _posts collection is, by design, always going to output individual files. If you create a new collection, you can specify output: false for that collection in your config file while still being able to iterate through it and display the content. From the Jekyll documentation:
# Config file
collections:
your_collection_name:
output: false
However, I saw that you mentioned pagination in the comments. I don't believe GitHub currently supports a gem that has pagination functionality for collections other than _posts (like jekyll-paginate-v2, though they're in talks on merging this in eventually). In the meantime, it looks like there are some solutions out there to help with this limitation.
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.
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à !