Welcome in this repo!
This is the place where we are saving our WIP files for limulo.net website.
For this particular restyle we are using a Jekyll theme called Hyde made by Mark Otto.
First we need to update this git repository the usual way, using git add, git commit and git push.
Than we need to compile the site an upload it to the server usign Filezilla.
The command to use to compile is
bundle exec jekyll build
Possibly you can use the --future argument.
Then you need to open FileZilla and upload the _site folder content.
Use the following options which makes the job easier:
- toggle synchronized browsing on;
- toggle directory comparison on;
- "overwrite if different size or source newer" + "Always use this action";
If you want the page to appears inside the sidebar you have to give that page a front matter like the one shown below
---
layout: page
title: myAwsomwTitle
---
where you explicitly define the title for the page.
If you don't want your page to appear in the sidebar, simply put the title of the page outside the front matter:
---
layout: page
---
# myAwsomwTitle
to create a post put relevant information inside the front matter such as:
- title
- date
- excerpt
- categories
A post cannot avoid having at least one category since categories provides the site navigation logic. If you want your post to have more than one category, simply put all of them inside square brackets, comma separeted. For example:
category: [installation, issue]
A post can also have a shortcut image that will be shown at the bottom of the homepage.
shortcut: shortcut-jags.png
If you don't specified a dedicated image for the post, the post will be given a default image accoring to its belonging to a particular category.
In this case you will not see the post listed in the homepage but you can access the post browsing its category page.
Here a list of the categories currently in use:
- sound-design: work, tool
- installation: none, soundface, issue
- coding: math, physics, graphics, physical-computing, sound
- game: experiment, scumm, technique, abandonia(?)
- teaching: none
- linuxday2016: installation
Here you can find more information, but in general below the code you can use to creare a simple table with an header and content centered:
header cell 1 | header cell 2 | header cell 3
| :-: | :-: | :-: |
data 1 | data 2 | data 3
To create a note section, simly put this line of code after the paragraph end (on a new line):
{: .note}
Use font-awesome-png-converter, an interesting utility to convert vectorial fonts into png images.
Donwload the last Font awesome archive and browse inside it.
Use the following command to generate the IMAGE from the corresponding CHARACTER:
icon-font-to-png --css ../css/font-awesome.css --ttf ./fontawesome-webfont.ttf --size 110 CHARACTER --filename IMAGE
We can use MathJax as explained in the Jekyll Documentation here.
If you want to write a mathematical formula you have to create a math latex block (here some info on how to create latex formulae), than you have to surround it with two dollar sign:
$$ x+y = 5 $$
Use the Extensions -> Render -> LaTeX formula... extension. In the editable field add LaTeX formulae like the one shown below:
$\frac{1}{\sqrt{2}}$
Use these liquid tags before and after code blocks. Here's a list of supported languages.
{% highlight c %}
[code blocks]
{% endhighlight %}
Because of the filesystem structure of the website,
we are usign 2 important YAML variable inside the config.yml file:
- url:
http://www.limulo.net - baseurl:
/website
We have to pay attention when we create:
Use the folling code for links:
<h3 class="post-title"><a href="{{ site.baseurl }}{{post.url}}">{{ post.title }}</a></h3>
instead of this:
<h3 class="post-title"><a href="{{post.url}}">{{ post.title }}</a></h3>
Use this synthax:
[here'a link between post]({{ site.baseurl }}{% post_url 2015-02-01-name-of-the-post %})
instead of this:
[here'a link between post]({% post_url 2015-02-01-name-of-the-post %})
Use the following code in inserting images:
instead of this one:
Because we want to load MathJax and FontAwesome scripts only when it is necessary, we inserted inside the head.html file some Liquid Code to prevent these scripts to be loaded in each page of the web site.
Thisi code checks if the page/post contains special variables inside the Front Matter so to decide if the corresponding script has to be loaded.
Here's the code:
{% if page.usefa %}
<!-- Font Awesome -->
<script src="https://use.fontawesome.com/d68500c562.js"></script>
{% endif %}
{% if page.usemath %}
<!-- MathJax for matemathics formulae rendering -->
<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript"></script>
{% endif %}
If you want your page to use math formulae remember to insert the variable usemath in the Front Matter like this:
...
usemath: true
___
Here you will find a useful link!
We use Open Web Analytics. Direct link to our site analytics. Wiki
- Liquid Syntax;
- Jekyll official site;
- Hyde theme repository and demo page;
- Inkscape extensions (this one for example let's you create circuits symbols)!
The following instructions worked for me:
sudo apt-get install ruby-dev;sudo gem install bundler;bundle install;