38 changed files with 2372 additions and 3 deletions
@ -1 +1,46 @@ |
|||
_site |
|||
_site/ |
|||
.sass-cache/ |
|||
|
|||
# Windows image file caches |
|||
Thumbs.db |
|||
ehthumbs.db |
|||
|
|||
# Folder config file |
|||
Desktop.ini |
|||
|
|||
# Recycle Bin used on file shares |
|||
$RECYCLE.BIN/ |
|||
|
|||
# Windows Installer files |
|||
*.cab |
|||
*.msi |
|||
*.msm |
|||
*.msp |
|||
|
|||
# Windows shortcuts |
|||
*.lnk |
|||
|
|||
# ========================= |
|||
# Operating System Files |
|||
# ========================= |
|||
|
|||
# OSX |
|||
# ========================= |
|||
|
|||
.DS_Store |
|||
.AppleDouble |
|||
.LSOverride |
|||
|
|||
# Thumbnails |
|||
._* |
|||
|
|||
# Files that might appear on external disk |
|||
.Spotlight-V100 |
|||
.Trashes |
|||
|
|||
# Directories potentially created on remote AFP share |
|||
.AppleDB |
|||
.AppleDesktop |
|||
Network Trash Folder |
|||
Temporary Items |
|||
.apdisk |
|||
|
|||
@ -0,0 +1,22 @@ |
|||
The MIT License (MIT) |
|||
|
|||
Copyright (c) 2015 Heiswayi Nrird |
|||
2017 Franco Masotti <franco.masotti@student.unife.it> |
|||
|
|||
Permission is hereby granted, free of charge, to any person obtaining a copy |
|||
of this software and associated documentation files (the "Software"), to deal |
|||
in the Software without restriction, including without limitation the rights |
|||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
|||
copies of the Software, and to permit persons to whom the Software is |
|||
furnished to do so, subject to the following conditions: |
|||
|
|||
The above copyright notice and this permission notice shall be included in all |
|||
copies or substantial portions of the Software. |
|||
|
|||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
|||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
|||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
|||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
|||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
|||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE |
|||
SOFTWARE. |
|||
@ -0,0 +1,18 @@ |
|||
#!/usr/bin/make -f
|
|||
|
|||
# Copyright (c) 2017 Franco Masotti.
|
|||
# See LICENSE file for details.
|
|||
|
|||
all: build serve |
|||
|
|||
build: |
|||
@jekyll build -V --safe -t |
|||
|
|||
serve: |
|||
@jekyll serve |
|||
|
|||
serve-global: |
|||
@jekyll serve --host=0.0.0.0 |
|||
|
|||
clean: |
|||
@rm -rf _site |
|||
@ -0,0 +1,417 @@ |
|||
# The Plain Libre |
|||
|
|||
The Plain Libre is just another minimalist Jekyll theme that |
|||
designed to focus on writing matters. This theme is best use for personal blog. |
|||
|
|||
This theme relies on [100% free software](https://www.gnu.org/philosophy/free-sw.en.html), |
|||
does not include any Javascript and the font used is served from the local instance. |
|||
It has been tested on [Parabola GNU/Linux-libre](https://www.parabola.nu/). |
|||
|
|||
[Original version](https://github.com/heiswayi/the-plain) |
|||
|
|||
## Screenshots |
|||
|
|||
 |
|||
 |
|||
|
|||
## This version compared to the original one [1443d83](https://github.com/frnmst/the-plain-libre/commit/1443d83ec881a7bfd4b62975da29f72f8f99d38a) |
|||
|
|||
- Removed all analytics |
|||
- Removed Google font |
|||
- Removed Gravatar |
|||
- Removed MathJax |
|||
- Simpler image handling |
|||
- Fully static commenting system |
|||
- Full tag and category support |
|||
- Excerpts support |
|||
- Better search Engine Optimization (SEO) |
|||
- Compressed html output |
|||
- Basic sitemap |
|||
- Style |
|||
- Changed main font |
|||
- Changed background colors |
|||
- Bigger font rendering |
|||
- `outline: none` for links |
|||
- Last post update shown |
|||
- Lists CSS: `circle` instead of `disk` |
|||
|
|||
### TODO |
|||
|
|||
- Follow web typography guidelines like [these](http://webtypography.net/toc/) |
|||
- Better mobile support |
|||
- CNAME? |
|||
- shell scipt that builds example posts, images (base64 or similar), etc using: |
|||
|
|||
cat <<-EOF |
|||
# whatever |
|||
EOF |
|||
|
|||
so that examples and real blog content can be decoupled. |
|||
This script will be called using the Makefile. |
|||
|
|||
## Theme installation |
|||
|
|||
# pacman -S ruby |
|||
$ gem update |
|||
$ gem install jekyll jekyll-sitemap |
|||
|
|||
## Building and serving |
|||
|
|||
Local serving (127.0.0.1) |
|||
|
|||
$ make |
|||
|
|||
Global serving (0.0.0.0) |
|||
|
|||
$ make serve-global |
|||
|
|||
## Tutorial |
|||
|
|||
### Commenting system |
|||
|
|||
#### Overview |
|||
|
|||
This theme handles comments in the most static way possible: |
|||
a `mailto` link is generated for each post thanks to GMAIL mail aliases, using |
|||
the address specified in the `_config.yml` file. This idea came out while |
|||
reading [this](https://caurea.org/2012/03/31/this-blog-has-comments-again.html) |
|||
page. |
|||
|
|||
Moreover, for each post a comment section gets exposed. To get comments inside |
|||
this section, you must create a new file in the `_comments` directory using the |
|||
corresponding posts path name as file name. Let's say a user sends a comment |
|||
for the `another-post` post. The `mailto` link will have this structure: |
|||
|
|||
<your_gmail_email>+2017-02-11-another-post@gmail.com |
|||
|
|||
You may notice the substring `2017-02-11-another-post` after the gmail's email |
|||
(but it works for any mailer system supporting these kind of mail aliases). |
|||
This string is part of the file name corresponding to the post which is: |
|||
|
|||
./_posts/2017-02-11-another-post.md |
|||
|
|||
Let's ingnore the `./_posts/` and `.md` substrings for a moment and save |
|||
`2017-02-11-another-post` somewhere. Since a post may have more than a |
|||
comment, we must distinguish between one and another. To do this we create a |
|||
new directory using the comment path, like the following: |
|||
|
|||
$ mkdir _/comments/2017-02-11-another-post |
|||
|
|||
and we will save the comment files inside to keep things tidy. |
|||
|
|||
We then create a new markdown file corresponding to the comment, and its |
|||
file name will be used as an id, for example: |
|||
|
|||
0.md |
|||
|
|||
You can use any non spaced string, and avoid using `.md` except at the end of |
|||
this file name. |
|||
|
|||
Out final comment path is: |
|||
|
|||
./comments/2017-02-11-another-post/0.md |
|||
|
|||
As a final remark you may have noticed that each comment is referenced as a |
|||
paragraph (using the id) and that markdown is enabled by default. |
|||
|
|||
#### Comment attributes |
|||
|
|||
Comment files have 5 attributes: |
|||
|
|||
- `layout` |
|||
- Always use `comment` as variable. |
|||
|
|||
- `date` |
|||
- Use the format reported by the following date command: |
|||
|
|||
$ date "+%F %T %z" |
|||
|
|||
- `from` |
|||
- string representing the name or the id or the mail of the person that |
|||
commented the post. |
|||
|
|||
- `subject` |
|||
- String representing the mail subject. |
|||
|
|||
For example: |
|||
|
|||
--- |
|||
layout: comment |
|||
title: This is another post |
|||
date: 2017-02-11 23:37:05 +0100 |
|||
from: x.y@y.x, A Mailer |
|||
subject: test subject |
|||
--- |
|||
|
|||
This is a test comment for the `Hello again` post. |
|||
|
|||
```python |
|||
def hi |
|||
``` |
|||
|
|||
### Media files |
|||
|
|||
Extending [this](https://eduardoboucas.com/blog/2014/12/07/including-and-managing-images-in-jekyll.html) |
|||
ideas I came up with the following: |
|||
|
|||
#### Overview |
|||
|
|||
Just like comments, each media file is contained in one directory corresponding |
|||
to a post. However, unlike comments, media content may be referenced from more |
|||
than one post. This is how it works. |
|||
|
|||
#### File locations |
|||
|
|||
If out example post is `./_posts/2017-02-11-another-post.md` and we want to add |
|||
media files to it, we must create a corresponding directory in `_media`: |
|||
|
|||
./_media/2017-02-11-another-post |
|||
|
|||
We can now place our file inside, for example: |
|||
|
|||
./_media/2017-02-11-another-post/terminal.png |
|||
|
|||
#### Possible combinations |
|||
|
|||
Now, let's go back to `./_posts/2017-02-11-another-post.md`. To be able to |
|||
display that picture we need to use the `include` liquid tag. In the simplest |
|||
form the only required parameter is the file name: |
|||
|
|||
```liquid |
|||
{% include image.html file="terminal.png" %} |
|||
``` |
|||
|
|||
You can also use the `alt` and/or `capiton` tags: |
|||
|
|||
```liquid |
|||
{% include image.html file="terminal.png" alt="ter" caption="A terminal example caption" %} |
|||
``` |
|||
|
|||
You can also use plain markdown, which is not advisable in this case, since |
|||
you need to input the whole path: |
|||
|
|||
 |
|||
|
|||
#### Calling files from another post |
|||
|
|||
In some cases you may want to recall media files from another post. You can do |
|||
that using the `otherpost` tag. Let's say we are in the |
|||
`./_posts/2015-09-09-download-this-theme.md` post. |
|||
|
|||
```liquid |
|||
{% include image.html file="2017-02-11-another-post/terminal.png" alt="Terminal" caption="A terminal image from the other post" otherpost=true %} |
|||
``` |
|||
|
|||
As you can see you don't have to specify the full path but only the post name |
|||
slash the file name. The rest is filled in automatically. |
|||
|
|||
Finally, notice the `otherpost=true` tag at the end. |
|||
|
|||
#### Notice and warning |
|||
|
|||
If you do not include the `alt` tag a default one will be provided instead. |
|||
|
|||
This include feature is currently available only for images. |
|||
|
|||
### Static pages |
|||
|
|||
Reading [this](https://mademistakes.com/articles/using-jekyll-2016/#pages-for-everything-else) |
|||
gave me the idea to move the static pages like index, 404, etc.. in the |
|||
`./_pages` directory. If you want to add new pages remember to add a sensible |
|||
`permalink` for each page and remember to keep `include: [ "_pages" ]` |
|||
and: |
|||
|
|||
collections: |
|||
pages: |
|||
output: false |
|||
|
|||
in the `_config.yml` file. |
|||
|
|||
### Tags and categories |
|||
|
|||
#### Overview |
|||
|
|||
In this theme tags and categories are considered the same thing. I will use the |
|||
word *tag* to speak about both tags and categories. |
|||
|
|||
I gathered some ideas from [here](https://blog.webjeda.com/jekyll-categories/) |
|||
and using the official Jekyll documentation. |
|||
|
|||
A full list of tags is present on the home page, i.e: `./_pages/index.html`. |
|||
This list is just a set of links pointing to the appropriate entry in the |
|||
`./_pages/tags.md` page. This page has that same list as well as links to each |
|||
post belonging to a tag. |
|||
|
|||
If a post contains at least one tag, this is reported at the top of the page |
|||
with a link pointing to the appropriate bookmark of `./_pages/tags.md` (just |
|||
like in the home page). A user looking at a post can see all related posts just |
|||
by clicking at those tag links. |
|||
|
|||
#### Format |
|||
|
|||
The tag entry is optional which means that you can specify from 0 to n tags. If |
|||
you want to add some, simply write your comma separated list of tags in the |
|||
front matter of your post: |
|||
|
|||
tags: [tag 0, tag 1, ... , tag n] |
|||
|
|||
Let's make an example. What follows is the front matter of the |
|||
`./_posts/2015-09-09-download-this-theme.md` post. |
|||
|
|||
--- |
|||
title: Download this Theme |
|||
updated: 2017-04-09 00:29 |
|||
categories: Download |
|||
tags: [download, terminal, image from another post] |
|||
--- |
|||
|
|||
As you may have noticed, tags can contain spaces. |
|||
|
|||
Once you run make, you should see the following links |
|||
just below the `Download this Theme` title: |
|||
|
|||
*download* *terminal* *image from another post* |
|||
|
|||
### Excerpts |
|||
|
|||
Excerpts are reported in the home page. |
|||
|
|||
Use the `<!--more-->` tag inside a post to mark the end of the excerpt. |
|||
|
|||
If this tag is omitted, the first 10 words of the post will be reported |
|||
instead. You can specify the number of words in the excerpt by editing the |
|||
`excerpt_words` variable in the `./_config.yml` file. |
|||
|
|||
If you are not interested in excerpts set the `excerpt_enabled` variable to |
|||
false in `./_config.yml`. |
|||
|
|||
Have a look at |
|||
[this article](http://frontendcollisionblog.com/jekyll/snippet/2015/03/23/how-to-show-a-summary-of-your-post-with-jekyll.html) |
|||
for more ideas. |
|||
|
|||
### RSS feeds |
|||
|
|||
This theme contains an Atom file useful for RSS feeds in `./_pages/feed.xml` |
|||
|
|||
The link to `feed.xml` is available in the footer of every page |
|||
thanks to a modified public domain svg icon. The purpose is that your readers |
|||
open this link with a feed reader so that they remain up to date with your |
|||
posts. |
|||
|
|||
A patch has been added to the SVG image because it was badly rendered on some |
|||
browsers available for Android. See |
|||
[this](http://bitiotic.com/blog/2012/04/12/fixing-svg-aspect-ratio-lossage-on-webkit/) |
|||
article. |
|||
|
|||
### Search Engine Optimizaition (SEO) |
|||
|
|||
I'm a noob in this field so I followed |
|||
[this](https://blog.webjeda.com/optimize-jekyll-seo/) tutorial |
|||
and [this](ttps://varvy.com/) SEO checker. |
|||
|
|||
- meta |
|||
- sitemaps |
|||
- images |
|||
- always use alt tags. For images in `./_assets` these are already coded |
|||
in. |
|||
- responsiveness |
|||
- the theme is reported |
|||
[responsive by Google](https://search.google.com/search-console/mobile-friendly?hl=it&id=LupFsm0FA2J9L4PoK8LAVw) |
|||
- robots.txt |
|||
- social media and other stuff |
|||
- TODO |
|||
|
|||
#### meta and other SEO tags |
|||
|
|||
meta tags are available in the `./_includes/head.html` file. These include: |
|||
`title`, `description` and canonical links. |
|||
|
|||
The description meta tag uses the first available, in this order, of the |
|||
following: |
|||
- Front matter `description` tag |
|||
- Page excerpt |
|||
- Site description |
|||
|
|||
It is advised to use the `description` tag since excerpts or the site |
|||
description may not relate to the (whole) page content. Here's an example: |
|||
|
|||
--- |
|||
title: This is another post |
|||
updated: 2017-04-09 23:00 |
|||
tags: [other, liquid, terminal] |
|||
description: How to use markdown and liquid to render images belonging to a |
|||
post. |
|||
--- |
|||
|
|||
You can also edit the following variables in `./_config.yml`to limit the number |
|||
of words in the `description` meta tag. Avoid values greater than `160` as |
|||
reported by previously cited articles: |
|||
|
|||
meta_description_words |
|||
meta_excerpt_words |
|||
meta_site_description_words |
|||
|
|||
#### Sitemaps |
|||
|
|||
A sitemap used for web crawlers is available thanks to the |
|||
[jekyll-sitemap](https://github.com/jekyll/jekyll-sitemap) plugin. |
|||
|
|||
There is also a (very) basic sitemap for users under the `/sitemap/` permalink |
|||
which has a link for it at the top of each page. |
|||
|
|||
#### robots.txt |
|||
|
|||
This very important file must be put under the root of your domain. It is used |
|||
by web crawlers (a.k.a bots, spiders, etc) to get access information about the |
|||
website. In our case it is also important to tell these programs that our site |
|||
has a `sitemap`. Read [this](http://www.robotstxt.org/robotstxt.html) |
|||
and |
|||
[this](https://support.google.com/webmasters/answer/6062596?hl=en&ref_topic=6061961) |
|||
for more information. |
|||
|
|||
For example, since this project is called `the-plain-libre` and is published |
|||
under `https://frnmst.github.io/the-plain-libre`, we need to put the robots.txt |
|||
file just under `https://frnmst.github.io/`, i.e |
|||
|
|||
https://frnmst.github.io/robots.txt |
|||
|
|||
Since I didn't have neither a "user page" nor a domain I created a dummy [user |
|||
page](https://github.com/frnmst/frnmst.github.io) repository and I copied the |
|||
`robots.txt` file from the generated `./_site` directory from Jekyll. This |
|||
works for me. This means that in my case the `robots.txt` in this repository is |
|||
ignored by the bots. |
|||
|
|||
I guess that if you have multiple repository pages you can edit |
|||
the robots.txt file appropriately and set rules (and sitemap locations) for |
|||
each one of them. |
|||
|
|||
### Mobile support |
|||
|
|||
Mobile support is available for this theme through the CSS file. It works but |
|||
it could be much better. |
|||
|
|||
### Avatar |
|||
|
|||
Use a squared avatar in `./_assets/avatar.jpg`. |
|||
|
|||
### Compressed HTML output |
|||
|
|||
By default Jekyll leaves lots of whitespace in the html source. You can verify |
|||
this yourself. |
|||
|
|||
Since useless white space == useless data, we transmit useless bytes, thus |
|||
slowing down the website. |
|||
|
|||
For this reason I decided to use a compressed html output thanks to |
|||
[jekyll-compress-html](https://github.com/penibelst/jekyll-compress-html), |
|||
which is a pure liquid layout to be used as a wrapper on the |
|||
`./_layouts/default.html` layout. |
|||
|
|||
jekyll-compress-html is released under the MIT license. |
|||
|
|||
## License |
|||
|
|||
Copyright (C) 2017, Franco Masotti <franco.masotti@student.unife.it> |
|||
|
|||
[MIT](LICENSE.md) |
|||
|
|||
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 8.8 KiB |
@ -0,0 +1,22 @@ |
|||
--- |
|||
# Front matter comment to ensure Jekyll properly reads file. |
|||
|
|||
#@font-face { |
|||
# font-family: 'TowerPrintStandard'; |
|||
# src: url('{{ site.baseurl }}/fonts/Tower_Print.eot'); |
|||
# src: url('{{ site.baseurl }}/fonts/Tower_Print.woff'); |
|||
# src: url('{{ site.baseurl }}/fonts/Tower_Print.svg'); |
|||
# src: url('{{ site.baseurl }}/fonts/Tower_Print.ttf'); |
|||
#}; |
|||
--- |
|||
|
|||
@font-face { |
|||
font-style: normal; |
|||
font-weight: normal; |
|||
font-family: 'HiLo-DecoRegular'; |
|||
src: url('{{ site.baseurl }}/assets/fonts/HiLo-Deco.ttf'); |
|||
}; |
|||
@import 'main'; |
|||
@import 'syntax'; |
|||
|
|||
|
|||
|
After Width: | Height: | Size: 418 B |
Binary file not shown.
|
After Width: | Height: | Size: 463 B |
|
After Width: | Height: | Size: 7.3 KiB |
@ -0,0 +1,98 @@ |
|||
# Site Info |
|||
title: "Franco Masotti's blog" |
|||
description: "A blog about libre software experiences and everything else" |
|||
|
|||
# Author Info |
|||
author_name: "Franco Masotti" |
|||
author_email: franco.masotti@student.unife.it |
|||
github_username: frnmst |
|||
avatar_path: avatar.jpg |
|||
|
|||
# Site Settings |
|||
baseurl: "" # Base URL must end WITHOUT a slash, default: "" |
|||
permalink: /notes/:title # Post permalink. If you change this you must |
|||
# modify all the occurencies manually. |
|||
timezone: Europe/Rome # https://en.wikipedia.org/wiki/List_of_tz_database_time_zones |
|||
|
|||
# Site Build |
|||
highlighter: rouge |
|||
markdown: kramdown |
|||
kramdown: |
|||
input: GFM |
|||
sass: |
|||
style: :compressed |
|||
|
|||
# Other Params |
|||
include: [ "_pages" ] |
|||
exclude: [ "LICENSE", "README.md", "CNAME", "vendor", "Gemfile", "Makefile", "_repository_assets" ] |
|||
|
|||
# Ruby gems |
|||
gems: |
|||
- jekyll-sitemap |
|||
|
|||
# Excerpts |
|||
excerpt_enabled: true |
|||
excerpt_separator: "<!--more-->" |
|||
excerpt_words: 20 |
|||
|
|||
# Meta tag options |
|||
meta_description_words: 140 |
|||
meta_excerpt_words: 140 |
|||
meta_site_description_words: 140 |
|||
|
|||
# Keep comments hidden |
|||
collections: |
|||
comments: |
|||
output: false |
|||
pages: |
|||
output: false |
|||
media: |
|||
output: true |
|||
assets: |
|||
output: true |
|||
|
|||
defaults: |
|||
- |
|||
scope: |
|||
path: "" |
|||
values: |
|||
layout: "null" |
|||
- |
|||
scope: |
|||
type: "pages" |
|||
values: |
|||
layout: "page" |
|||
- |
|||
scope: |
|||
type: "posts" |
|||
values: |
|||
layout: "post" |
|||
is_post: true |
|||
- |
|||
scope: |
|||
path: "_pages/index.html" |
|||
values: |
|||
is_home: true |
|||
- |
|||
scope: |
|||
path: "_pages/404.md" |
|||
values: |
|||
is_404: true |
|||
- |
|||
scope: |
|||
path: "_pages/tags.md" |
|||
values: |
|||
is_tags: true |
|||
- |
|||
scope: |
|||
path: "_pages/sitemap.html" |
|||
values: |
|||
is_sitemap: true |
|||
- |
|||
scope: |
|||
path: "comments" |
|||
type: comments |
|||
values: |
|||
layout: comment |
|||
is_comment: true |
|||
|
|||
@ -0,0 +1,67 @@ |
|||
<article><div class="divider"></div></article> |
|||
|
|||
<div class="comment-environment"> |
|||
<article> |
|||
<div class="comment"> |
|||
<div class="title"><h2>Comments</h2></div> |
|||
|
|||
{% capture mail %}{{ site.author_email }}{% endcapture %} |
|||
{% assign mail_substring = mail | split: '@' %} |
|||
{% assign mail_username = mail_substring[0] %} |
|||
{% assign mail_domain = mail_substring[1] %} |
|||
{% if page.is_post %} |
|||
{% capture mailto_prefix %}{{ mail_username }}+{{ page.path | remove: ".md" | remove: "_posts/" }}{% endcapture %} |
|||
{% else %} |
|||
{% capture mailto_prefix %}{{ mail_username }}+{{ page.path | remove: ".html" | remove: ".md" | remove: "_pages/" }}{% endcapture %} |
|||
{% endif %} |
|||
<div class="title"> |
|||
<h3> |
|||
<a href="mailto:{{ mailto_prefix }}@{{ mail_domain }}"> |
|||
Post a new comment</a> |
|||
</h3> |
|||
</div> |
|||
|
|||
{% for comment in site.comments %} |
|||
|
|||
{% assign page_path = page.path | replace: "_posts/", "" | remove: ".md" %} |
|||
{% assign comment_fullpath = comment.path | replace: "_comments/", "" | split: "/" %} |
|||
{% assign comment_path = comment_fullpath[0] %} |
|||
{% assign comment_id = comment_fullpath[1] | remove: ".md" %} |
|||
|
|||
{% if comment_path == page_path %} |
|||
{% if forloop.first %} |
|||
<div class="divider"></div> |
|||
{% endif %} |
|||
|
|||
<div class="comment-headers"> |
|||
<table> |
|||
<tr> |
|||
<td>Subject</td> |
|||
{% comment %} |
|||
<!-- Link to single comment --> |
|||
{% endcomment %} |
|||
<td><a href="#{{ comment_id }}" id={{ comment_id }}>{{ comment.subject }}</a></td> |
|||
</tr> |
|||
<tr> |
|||
<td>From</td> |
|||
<td>{{ comment.from }}</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Date</td> |
|||
<td>{{ comment.date | date: "%c, %:z GMT" }}</td> |
|||
</tr> |
|||
</table> |
|||
</div> |
|||
|
|||
{{ comment.content | markdownify }} |
|||
{% comment %} |
|||
<!-- Don't print the divider after the last comment --> |
|||
{% endcomment %} |
|||
{% if forloop.last == false %} |
|||
<div class="divider"></div> |
|||
{% endif %} |
|||
{% endif %} |
|||
{% endfor %} |
|||
</div> |
|||
</article> |
|||
</div> |
|||
@ -0,0 +1,29 @@ |
|||
<div class="footer"> |
|||
<span class="block"> |
|||
<span class="rss"> |
|||
<!--The feed svg image is a modified version of |
|||
https://publicdomainvectors.org/download.php?file=rodentia-icons_application-x-feed.svg |
|||
which is released under public domain--> |
|||
<a href="{{ site.baseurl }}/feed.xml"> |
|||
<img src="{{ site.baseurl }}/assets/rodentia-icons_application-x-feed.svg" |
|||
alt="RSS"></a> |
|||
</span> |
|||
</span> |
|||
<span class="block"> |
|||
Made using <a href="http://jekyllrb.com/">Jekyll</a> & |
|||
<a href="https://github.com/frnmst/the-plain-libre" title="The |
|||
Plain Libre theme by Franco Masotti">The Plain Libre</a> |
|||
</span> |
|||
<span class="block"> |
|||
Website content is released under the |
|||
<span class="copyright"> |
|||
<img src="{{ site.baseurl }}/assets/by-sa.svg" alt="CC-BY-SA"> |
|||
</span> |
|||
license |
|||
</span> |
|||
<span class="block"> |
|||
© {{ site.time | date: '%Y' }} {{ site.author_name }} |
|||
</span> |
|||
</div> |
|||
|
|||
|
|||
@ -0,0 +1,18 @@ |
|||
{% comment %}<!--Seo metas -->{% endcomment %} |
|||
<meta charset="UTF-8"> |
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|||
|
|||
{% if page.title %} |
|||
<title>{{ page.title }}</title> |
|||
{% else %} |
|||
<title>{{ site.title }}</title> |
|||
{% endif %} |
|||
|
|||
<meta name="description" |
|||
content="{% if page.description %}{{ page.description | truncate: site.meta_description_words }}{% else if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: site.meta_excerpt_words }}{% else %}{{ site.description | truncate: site.meta_description_words }}{% endif %}"> |
|||
|
|||
<link rel="icon" href="{{ site.baseurl }}/assets/favicon.png"> |
|||
<link rel="stylesheet" href="{{ site.baseurl }}/assets/core.css"> |
|||
<link rel="alternate" type="application/atom+xml" title="{{ site.title }}" href="{{ site.baseurl }}/feed.xml" /> |
|||
<link rel="canonical" href="{{ page.url | prepend: site.baseurl | prepend: site.url }}"> |
|||
@ -0,0 +1,22 @@ |
|||
<div class="main"> |
|||
<a href="#main">skip to main content</a> |
|||
{% if page.url != '/sitemap/' %} |
|||
<a href="{{ site.baseurl }}/sitemap/">sitemap</a> |
|||
{% endif %} |
|||
</div> |
|||
<aside class="logo"> |
|||
|
|||
{% if page.url == '/index.html' or page.url == '/' %} |
|||
{% assign link = '/about' %} |
|||
{% assign prompt = 'About' %} |
|||
{% else %} |
|||
{% assign link = '/' %} |
|||
{% assign prompt = 'Back to Home' %} |
|||
{% endif %} |
|||
|
|||
<a href="{{ link | prepend: site.baseurl }}"> |
|||
<img src="{{ site.baseurl }}/assets/{{ site.avatar_path }}" width="80px" height="80px" alt="avatar" class="avatar"> |
|||
</a> |
|||
<span class="logo-prompt">{{ prompt }}</span> |
|||
|
|||
</aside> |
|||
@ -0,0 +1,18 @@ |
|||
{% if include.otherpost == true %} |
|||
{% assign url = "/media/" | append: include.file %} |
|||
{% else %} |
|||
{% capture url %}/media/{{ page.path | remove: "_posts/" | remove: ".md" | append: "/" | append: include.file }}{% endcapture %} |
|||
{% endif %} |
|||
|
|||
{% if include.caption %} |
|||
<figure> |
|||
<a href="{{ url | prepend: site.baseurl }}" target="_blank" class="image"> |
|||
<img src="{{ url | prepend: site.baseurl }}" alt="{% if include.alt %}{{ include.alt }}{% else %}Image{% endif %}"> |
|||
</a> |
|||
<caption>{{ include.caption }}</caption> |
|||
</figure> |
|||
{% else %} |
|||
<a href="{{ url | prepend: site.baseurl }}" target="_blank" class="image"> |
|||
<img src="{{ url | prepend: site.baseurl }}" alt="{% if include.alt %}{{ include.alt }}{% else %}Image{% endif %}"> |
|||
</a> |
|||
{% endif %} |
|||
@ -0,0 +1,8 @@ |
|||
<div class="page-navigation"> |
|||
{% if page.is_home != true %} |
|||
<a class="home" href="{{ site.baseurl }}/" title="Back to |
|||
Homepage">Home</a> |
|||
<span>·</span> |
|||
{% endif %} |
|||
<a href="#main" title="Back to top">Top</a></span> |
|||
</div> |
|||
@ -0,0 +1,17 @@ |
|||
<div class="page-navigation"> |
|||
{% if page.next.url %} |
|||
<a href="{{ site.baseurl }}{{ page.next.url }}" title="NEXT: |
|||
{{page.next.title}}"><<</a> |
|||
<span> · </span> |
|||
{% endif %} |
|||
<a href="{{ site.baseurl }}/" title="Back to |
|||
Homepage">Home</a> |
|||
<span> · </span> |
|||
<a href="#main" title="Back to top">Top</a> |
|||
{% if page.previous.url %} |
|||
<span> · </span> |
|||
<a href="{{ site.baseurl }}{{ page.previous.url }}" |
|||
title="PREV: {{ page.previous.title }}">>></a> |
|||
{% endif %} |
|||
</div> |
|||
|
|||
@ -0,0 +1,19 @@ |
|||
{% assign site_tags = site.tags | sort %} |
|||
|
|||
{% comment %} |
|||
<!--Tags summary with links as pararaphs --> |
|||
{% endcomment %} |
|||
|
|||
<article> |
|||
<div class="tag-list"> |
|||
{% for tag in site_tags %} |
|||
{% assign tagg = tag[0] | slugify %} |
|||
{% if page.is_home %} |
|||
{% capture link %}{{ site.baseurl }}/tags/#{{ tagg }}{% endcapture %} |
|||
<a href="{{ link }}">{{ tag[0] }}</a> |
|||
{% else %} |
|||
<a href="#{{ tagg }}">{{ tag[0] }}</a> |
|||
{% endif %} |
|||
{% endfor %} |
|||
</div> |
|||
</article> |
|||
@ -0,0 +1,10 @@ |
|||
--- |
|||
# Jekyll layout that compresses HTML |
|||
# v3.0.2 |
|||
# http://jch.penibelst.de/ |
|||
# © 2014–2015 Anatol Broder |
|||
# MIT License |
|||
--- |
|||
|
|||
{% capture _LINE_FEED %} |
|||
{% endcapture %}{% if site.compress_html.ignore.envs contains jekyll.environment %}{{ content }}{% else %}{% capture _content %}{{ content }}{% endcapture %}{% assign _profile = site.compress_html.profile %}{% if site.compress_html.endings == "all" %}{% assign _endings = "html head body li dt dd p rt rp optgroup option colgroup caption thead tbody tfoot tr td th" | split: " " %}{% else %}{% assign _endings = site.compress_html.endings %}{% endif %}{% for _element in _endings %}{% capture _end %}</{{ _element }}>{% endcapture %}{% assign _content = _content | remove: _end %}{% endfor %}{% if _profile and _endings %}{% assign _profile_endings = _content | size | plus: 1 %}{% endif %}{% for _element in site.compress_html.startings %}{% capture _start %}<{{ _element }}>{% endcapture %}{% assign _content = _content | remove: _start %}{% endfor %}{% if _profile and site.compress_html.startings %}{% assign _profile_startings = _content | size | plus: 1 %}{% endif %}{% if site.compress_html.comments == "all" %}{% assign _comments = "<!-- -->" | split: " " %}{% else %}{% assign _comments = site.compress_html.comments %}{% endif %}{% if _comments.size == 2 %}{% capture _comment_befores %}.{{ _content }}{% endcapture %}{% assign _comment_befores = _comment_befores | split: _comments.first %}{% for _comment_before in _comment_befores %}{% if forloop.first %}{% continue %}{% endif %}{% capture _comment_outside %}{% if _carry %}{{ _comments.first }}{% endif %}{{ _comment_before }}{% endcapture %}{% capture _comment %}{% unless _carry %}{{ _comments.first }}{% endunless %}{{ _comment_outside | split: _comments.last | first }}{% if _comment_outside contains _comments.last %}{{ _comments.last }}{% assign _carry = false %}{% else %}{% assign _carry = true %}{% endif %}{% endcapture %}{% assign _content = _content | remove_first: _comment %}{% endfor %}{% if _profile %}{% assign _profile_comments = _content | size | plus: 1 %}{% endif %}{% endif %}{% assign _pre_befores = _content | split: "<pre" %}{% assign _content = "" %}{% for _pre_before in _pre_befores %}{% assign _pres = _pre_before | split: "</pre>" %}{% assign _pres_after = "" %}{% if _pres.size != 0 %}{% if site.compress_html.blanklines %}{% assign _lines = _pres.last | split: _LINE_FEED %}{% capture _pres_after %}{% for _line in _lines %}{% assign _trimmed = _line | split: " " | join: " " %}{% if _trimmed != empty or forloop.last %}{% unless forloop.first %}{{ _LINE_FEED }}{% endunless %}{{ _line }}{% endif %}{% endfor %}{% endcapture %}{% else %}{% assign _pres_after = _pres.last | split: " " | join: " " %}{% endif %}{% endif %}{% capture _content %}{{ _content }}{% if _pre_before contains "</pre>" %}<pre{{ _pres.first }}</pre>{% endif %}{% unless _pre_before contains "</pre>" and _pres.size == 1 %}{{ _pres_after }}{% endunless %}{% endcapture %}{% endfor %}{% if _profile %}{% assign _profile_collapse = _content | size | plus: 1 %}{% endif %}{% if site.compress_html.clippings == "all" %}{% assign _clippings = "html head title base link meta style body article section nav aside h1 h2 h3 h4 h5 h6 hgroup header footer address p hr blockquote ol ul li dl dt dd figure figcaption main div table caption colgroup col tbody thead tfoot tr td th" | split: " " %}{% else %}{% assign _clippings = site.compress_html.clippings %}{% endif %}{% for _element in _clippings %}{% assign _edges = " <e;<e; </e>;</e>;</e> ;</e>" | replace: "e", _element | split: ";" %}{% assign _content = _content | replace: _edges[0], _edges[1] | replace: _edges[2], _edges[3] | replace: _edges[4], _edges[5] %}{% endfor %}{% if _profile and _clippings %}{% assign _profile_clippings = _content | size | plus: 1 %}{% endif %}{{ _content }}{% if _profile %} <table id="compress_html_profile_{{ site.time | date: "%Y%m%d" }}" class="compress_html_profile"> <thead> <tr> <td>Step <td>Bytes <tbody> <tr> <td>raw <td>{{ content | size }}{% if _profile_endings %} <tr> <td>endings <td>{{ _profile_endings }}{% endif %}{% if _profile_startings %} <tr> <td>startings <td>{{ _profile_startings }}{% endif %}{% if _profile_comments %} <tr> <td>comments <td>{{ _profile_comments }}{% endif %}{% if _profile_collapse %} <tr> <td>collapse <td>{{ _profile_collapse }}{% endif %}{% if _profile_clippings %} <tr> <td>clippings <td>{{ _profile_clippings }}{% endif %} </table>{% endif %}{% endif %} |
|||
@ -0,0 +1,33 @@ |
|||
--- |
|||
layout: compress |
|||
--- |
|||
|
|||
<!DOCTYPE html> |
|||
<html lang="en"> |
|||
<head> |
|||
{% include head.html %} |
|||
</head> |
|||
<body> |
|||
{% include header.html %} |
|||
|
|||
{% if page.is_home %} |
|||
{% include tag_list.html %} |
|||
{% endif %} |
|||
<main> |
|||
{{ content | replace: '↩', '↩︎' }} |
|||
</main> |
|||
|
|||
{% comment %}<!--Can't use == false since page.is_home might be undefined.-->{% endcomment %} |
|||
{% if page.is_home != true and page.is_404 != true and page.is_tags != true and page.is_sitemap != true %} |
|||
{% include comments.html %} |
|||
{% endif %} |
|||
|
|||
{% if page.is_post %} |
|||
{% include post_navigation.html %} |
|||
{% else %} |
|||
{% include page_navigation.html %} |
|||
{% endif %} |
|||
|
|||
{% include footer.html %} |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,19 @@ |
|||
--- |
|||
layout: default |
|||
--- |
|||
|
|||
<article> |
|||
|
|||
<h1 class="title">{{ page.title }}</h1> |
|||
|
|||
<div class="divider"></div> |
|||
|
|||
{% if page.is_tags %} |
|||
{% include tag_list.html %} |
|||
{% endif %} |
|||
|
|||
<div id="main"></div> |
|||
{{ content }} |
|||
|
|||
</article> |
|||
|
|||
@ -0,0 +1,36 @@ |
|||
--- |
|||
layout: default |
|||
--- |
|||
|
|||
<article> |
|||
|
|||
<div class="center"> |
|||
<h1>{{ page.title }}</h1> |
|||
<time>First written on {{ page.date | date: '%B %-d, %Y' }}</time> |
|||
{% assign page_date = page.date | date: '%F' %} |
|||
{% assign page_updated = page.updated | date: '%F' %} |
|||
{% if page_date != page_updated %} |
|||
<br /> |
|||
<br /> |
|||
<time>Last updated on {{ page.updated | date: '%B %-d, %Y' }}</time> |
|||
{% endif %} |
|||
{% if page.tags %} |
|||
<br /> |
|||
<br /> |
|||
{% assign page_tags = page.tags | sort %} |
|||
<div class="tag-list"> |
|||
{% for tag in page_tags %} |
|||
{% assign tagg = tag | slugify %} |
|||
{% capture link %}{{ site.baseurl }}/tags/#{{ tagg }}{% endcapture %} |
|||
<a href="{{ link }}">{{ tag }}</a> |
|||
{% endfor %} |
|||
</div> |
|||
{% endif %} |
|||
</div> |
|||
|
|||
<div class="divider"></div> |
|||
<div id="main"></div> |
|||
|
|||
{{ content }} |
|||
|
|||
</article> |
|||
@ -0,0 +1,9 @@ |
|||
--- |
|||
layout: page |
|||
title: 404 |
|||
permalink: 404.html |
|||
--- |
|||
|
|||
:( |
|||
|
|||
Looks like this page doesn't exist. |
|||
@ -0,0 +1,63 @@ |
|||
--- |
|||
layout: page |
|||
title: About |
|||
permalink: /about/ |
|||
--- |
|||
|
|||
## Presentation |
|||
|
|||
Hello web world. |
|||
|
|||
This blog tells my experiences with software, computing, "hacks", |
|||
hardware, technology and whatever comes to my mind I want to share. |
|||
|
|||
Usually, when I talk about software I mean |
|||
[free software](https://www.gnu.org/philosophy/free-sw.en.html). This means |
|||
that most probably I won't talk about proprietary software and operating |
|||
systems like Windows, MacOs, etc... but only about GNU/Linux, GNU/Linux-libre |
|||
distributions or whatever fully free computing environments will come up. Who |
|||
knows what the future will hold us... |
|||
|
|||
At the moment I am a proud [Parabola GNU/Linux-libre](https://parabola.nu) |
|||
user running a very lightweight desktop environment like |
|||
[spectrwm](http://www.spectrwm.org) after going through years of |
|||
[OpenBox](http://openbox.org) |
|||
|
|||
I hope that this turns out to be a useful blog for anyone that encouters |
|||
similar problems I have solved. |
|||
|
|||
Enjoy! |
|||
|
|||
P.S: I also hope my use of english is correct. If that is not the case don't |
|||
hesitate to mail me. |
|||
|
|||
## Comment rules |
|||
|
|||
Every post (and some other pages like this one) contain a comment section which |
|||
is just a `mailto` link to my private mail containing an id to that post or |
|||
comment. You can just click or copy that link and send me an email. |
|||
|
|||
When you send me an email I will moderate it. By default I will report |
|||
verbatim: |
|||
- the subject |
|||
- the sending date |
|||
- your name, if present, or your email if you request so in the comment. If |
|||
none is available I will simply use `anonymous` in this field. |
|||
- the content which can be written in krmarkdown (the one used on GitHub and |
|||
GitLab) |
|||
|
|||
## Contacts |
|||
|
|||
You will find me on [GitHub](https://github.com/frnmst), |
|||
[GitLab](https://gitlab.com/frnmst), [GNU Social](https://quitter.no/frnmst), |
|||
[mail one](mailto://franco.masotti@student.unife.it), |
|||
[mail two](mailto://franco.masotti@live.com), |
|||
[Tox](tox:9D855839E4BB0ADBF4F49063BF2ABC1479A7728011F20B563EA104B2EE10FF19DC8C255D8F3D), |
|||
[XMPP](xmpp://franco.masotti@xabber.de) and other |
|||
less relevant web locations. |
|||
|
|||
You won't find me on Facebook, Whatsapp, Twitter, and similar. |
|||
|
|||
If you want to see another similar blog wich I co-autor have a |
|||
look at [Linux Difficile](https://linuxdifficile.wordpress.com/). |
|||
|
|||
@ -0,0 +1,45 @@ |
|||
--- |
|||
layout: null |
|||
permalink: feed.xml |
|||
--- |
|||
<?xml version="1.0" encoding="utf-8" ?> |
|||
<feed xmlns="http://www.w3.org/2005/Atom"> |
|||
|
|||
<title>{{ site.title | xml_escape }}</title> |
|||
<subtitle>{{ site.description | xml_escape }}</subtitle> |
|||
<link href="{{ site.baseurl }}/" rel="alternate"/> |
|||
<link href="{{ site.baseurl | append: feed.xml }}" rel="self"/> |
|||
<rights>Copyright @ |
|||
{{ site.time | date: '%Y' }}, |
|||
{{ site.author_name | xml_escape }}</rights> |
|||
<icon>{{ site.baseurl }}/assets/favicon.png</icon> |
|||
|
|||
<author> |
|||
<name>{{ site.author_name | xml_escape }}</name> |
|||
<uri>{{ site.baseurl }}</uri> |
|||
<email>{{ site.author_email | xml_escape }}</email> |
|||
</author> |
|||
|
|||
<updated>{{ site.time | date_to_xmlschema }}</updated> |
|||
<id>{{ site.baseurl }}/</id> |
|||
<generator version="{{ jekyll.version }}">Jekyll</generator> |
|||
|
|||
{% for post in site.posts %} |
|||
|
|||
{% assign content = post.content | replace: "↩", "↩︎" %} |
|||
{% assign content = content | replace: "data-lang", "lang" %} |
|||
{% assign content = content | replace: "<mark>", "<b>" | replace: "</mark>", "</b>" %} |
|||
|
|||
<entry> |
|||
<title type="html">{{ post.title | xml_escape }}</title> |
|||
<id>{{ post.url | prepend: site.baseurl }}</id> |
|||
<updated>{{ post.updated | date_to_xmlschema }}</updated> |
|||
<published>{{ post.date | date_to_xmlschema }}</published> |
|||
<content type="html" xml:lang="en"> |
|||
<![CDATA[{{ content }}]]> |
|||
</content> |
|||
</entry> |
|||
|
|||
{% endfor %} |
|||
|
|||
</feed> |
|||
@ -0,0 +1,41 @@ |
|||
--- |
|||
layout: default |
|||
permalink: index.html |
|||
--- |
|||
|
|||
<section> |
|||
<div id="main"></div> |
|||
{% for post in site.posts %} |
|||
{% unless post.next %} |
|||
<h3>{{ post.date | date: '%Y' }} ~</h3> |
|||
{% else %} |
|||
{% capture year %}{{ post.date | date: '%Y' }}{% endcapture %} |
|||
{% capture nyear %}{{ post.next.date | date: '%Y' }}{% endcapture %} |
|||
{% if year != nyear %} |
|||
<h3>{{ post.date | date: '%Y' }} ~</h3> |
|||
{% endif %} |
|||
{% endunless %} |
|||
|
|||
<ul> |
|||
<li> |
|||
<div class="post-date"> |
|||
<span>{{ post.date | date: "%b %d" }}</span> |
|||
</div> |
|||
<div class="title"> |
|||
<a href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a> |
|||
</div> |
|||
{% if site.excerpt_enabled %} |
|||
<div class="excerpt"> |
|||
{% if post.content contains site.excerpt_separator %} |
|||
{{ post.excerpt | strip_html }} |
|||
{% else %} |
|||
{{ post.excerpt | strip_html | truncatewords: site.excerpt_words }} |
|||
{% endif %} |
|||
</div> |
|||
{% endif %} |
|||
</li> |
|||
</ul> |
|||
|
|||
{% endfor %} |
|||
|
|||
</section> |
|||
@ -0,0 +1,27 @@ |
|||
--- |
|||
layout: page |
|||
title: Sitemap |
|||
permalink: /sitemap/ |
|||
--- |
|||
|
|||
{% assign site_pages = site.pages | sort %} |
|||
<h3>Pages</h3> |
|||
<ul> |
|||
{% for page in site_pages %} |
|||
{% if page.title != 404 %} |
|||
<li> |
|||
<a href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a> |
|||
</li> |
|||
{% endif %} |
|||
{% endfor %} |
|||
</ul> |
|||
|
|||
{% assign site_posts = site.posts | sort %} |
|||
<h3>Posts</h3> |
|||
<ul> |
|||
{% for post in site_posts %} |
|||
<li> |
|||
<a href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a> |
|||
</li> |
|||
{% endfor %} |
|||
</ul> |
|||
@ -0,0 +1,28 @@ |
|||
--- |
|||
layout: page |
|||
title: Tags |
|||
permalink: /tags/ |
|||
--- |
|||
|
|||
<div class="tag-posts"> |
|||
|
|||
<article> |
|||
|
|||
{% assign site_tags = site.tags | sort %} |
|||
|
|||
{% for tag in site_tags %} |
|||
<h3 id="{{ tag[0] | slugify }}">{{ tag[0] }}</h3> |
|||
<ul> |
|||
{% assign tag_name = tag | first %} |
|||
{% for post in site.tags[tag_name] %} |
|||
<li> |
|||
<a href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a> |
|||
</li> |
|||
{% endfor %} |
|||
</ul> |
|||
{% endfor %} |
|||
|
|||
</article> |
|||
|
|||
</div> |
|||
|
|||
@ -0,0 +1,168 @@ |
|||
--- |
|||
title: Qemu SSH tunnel |
|||
updated: 2017-04-24 19:00 |
|||
tags: [qemu, ssh tunnel] |
|||
description: How to use qemu via vnc and SSH |
|||
--- |
|||
|
|||
Hello readers, |
|||
|
|||
I was in need to run a virtual machine to do some experiments an `archiso` |
|||
(sic) and `parabolaiso`. My `Intel(R) Core(TM)2 Quad CPU Q8200 @ |
|||
2.33GHz` PC desktop processor does not support virtualization technology which |
|||
means that when I run a virtual machine it's very, very slow (barely usable). |
|||
So I thought: why not use the home server which has newer hardware and |
|||
supports virtualization: |
|||
|
|||
```shell |
|||
$ lscpu | grep Virtualization |
|||
Virtualization: VT-x |
|||
``` |
|||
|
|||
Now, some time ago I've written a |
|||
[simple script](https://github.com/frnmst/qvm) to handle my "QEMU needs", |
|||
VirtualBox is not available on Parabola and I don't like the available QEMU |
|||
frontends. |
|||
|
|||
So, after about 1 hour of information retreival throughout Internet articles I |
|||
was able to connect all the dots... Here it is. |
|||
|
|||
## Premise |
|||
|
|||
The technique used here is called ["SSH |
|||
tunneling"](https://en.wikipedia.org/wiki/Tunneling_protocol#Secure_Shell_tunneling) |
|||
and enables you to use an SSH server as an intermediary between the client and |
|||
a remote server. Let's see a trivial scheme of the VNC setup |
|||
|
|||
``` |
|||
port 22 port 5900 |
|||
client <--> intermediary server <--> remote server |
|||
^ (it's in a localhost location |
|||
| in respect to the intermediary |
|||
| server) |
|||
| |
|||
| |
|||
| port 5901 |
|||
| |
|||
$ vncviewer 127.0.0.1:1 (:1 is equivalent to :5901) |
|||
``` |
|||
|
|||
## Terminology |
|||
|
|||
- `127.0.0.1`: local address (a.k.a `localhost`) |
|||
- `server.address`: address of the intermediary server |
|||
- `server-user`: login name of the intermediary server |
|||
- `vm-user`: login name of the virual machine |
|||
|
|||
## Server |
|||
|
|||
First thing: since my server does not have a GUI I installed the |
|||
`qemu-headless` package. |
|||
|
|||
Here is the modified version of the install function of qvm |
|||
|
|||
```shell |
|||
installs() |
|||
{ |
|||
qemu-system-x86_64 -m "$vm_memory" \ |
|||
-enable-kvm \ |
|||
-monitor pty -vnc 127.0.0.1:0 \ |
|||
-cdrom "$img_name" \ |
|||
-boot order=d \ |
|||
"$vhd_name" & |
|||
} |
|||
``` |
|||
|
|||
This line does the magic: |
|||
```shell |
|||
-monitor pty -vnc 127.0.0.1:0 \ |
|||
``` |
|||
|
|||
The run function has now that same magic line: |
|||
```shell |
|||
[...] |
|||
qemu-system-x86_64 \ |
|||
-m "$vm_memory" \ |
|||
-enable-kvm \ |
|||
-monitor pty -vnc 127.0.0.1:0 \ |
|||
-device e1000,netdev=user.0 \ |
|||
-netdev user,\ |
|||
id=user.0,hostfwd=tcp::"$host_port"-:"$guest_port",\ |
|||
hostfwd=tcp::"$ssh_host_port"-:"$ssh_guest_port" \ |
|||
-virtfs local,path="$shared_data_path",\ |
|||
security_model=none,mount_tag="$mount_tag" \ |
|||
"$vhd" & |
|||
[...] |
|||
``` |
|||
|
|||
Make sure to have the following configurations in the OpenSSH configuration |
|||
(`/etc/ssh/ssh_config`) otherwise the next steps won't work |
|||
|
|||
AllowTcpForwarding yes |
|||
PermitOpen yes |
|||
|
|||
## Client |
|||
|
|||
Before starting the VNC client, you must create an SSH socket (tunnel). |
|||
|
|||
```shell |
|||
$ ssh -N -f -L 5901:127.0.0.1:5900 server-user@server.address |
|||
``` |
|||
|
|||
You must now install vnc clients like |
|||
[gtk-vnc](https://wiki.gnome.org/Projects/gtk-vnc) or |
|||
[TigerVNC](http://www.tigervnc.org). |
|||
I've noticed that TigerVNC seems to handle window resizes better, so I decided |
|||
to go for that. |
|||
|
|||
```shell |
|||
$ vncviewer 127.0.0.1:1 |
|||
``` |
|||
|
|||
You should now see the virtual machine. |
|||
|
|||
## SSH |
|||
|
|||
The next thing was to connect to the SSH daemon on the virtual machine just |
|||
like what qvm enables you to do. I thought I could use the same method of VNC. |
|||
|
|||
Once the SSH daemon is up and running you can connect to it with the following |
|||
command from the intermediary server: |
|||
|
|||
```shell |
|||
$ ssh -p 2222 vm-user@127.0.0.1 |
|||
``` |
|||
|
|||
The SSH port of the virual machine is the default one (22). qvm exposes the |
|||
port 2222 by default so you can connect from `localhost` with it. |
|||
|
|||
We need another step to be able to connect remotely and directly to the virtual |
|||
machine from our client: |
|||
|
|||
```shell |
|||
$ ssh -N -f -L 2223:127.0.0.1:2222 server-user@server.address |
|||
``` |
|||
|
|||
then |
|||
|
|||
```shell |
|||
$ ssh -p 2223 vm-user@127.0.0.1 |
|||
``` |
|||
|
|||
You should now see the login. |
|||
|
|||
## Final considerations |
|||
|
|||
You can use this method also for internet browsing and lots of other stuff. |
|||
Infact, using SSH implies that the traffic between the client and remote server |
|||
is encrypted, but using VNC directly by default is NOT so pay |
|||
attention. |
|||
|
|||
Cheers! |
|||
|
|||
## Resources |
|||
|
|||
- <http://blog.scottlowe.org/2013/08/21/accessing-vnc-consoles-of-kvm-guests-via-ssh/> |
|||
- <https://www.dragonsreach.it/2012/10/06/ssh-tunneling-for-vnc/> |
|||
- <https://www.cyberciti.biz/faq/linux-kvm-vnc-for-guest-machine/> |
|||
- <https://www.cyberciti.biz/faq/howto-setup-vnc-server-ssh-client-tunnel-via-internet/> |
|||
@ -0,0 +1 @@ |
|||
main.scss |
|||
@ -0,0 +1,474 @@ |
|||
body { |
|||
background-color: #e6e6e6; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
font-size: 1.5em; |
|||
font-family: 'HiLo-DecoRegular'; |
|||
padding: 20px; |
|||
margin: 0; |
|||
-webkit-font-smoothing: antialiased; |
|||
-webkit-text-size-adjust: 100%; |
|||
@media (min-width: 992px) { |
|||
padding: 35px 50px; |
|||
} |
|||
} |
|||
|
|||
h2, |
|||
h3, |
|||
h4, |
|||
h5 { |
|||
margin: 45px 0 25px; |
|||
} |
|||
|
|||
img { |
|||
max-width: 100%; |
|||
} |
|||
|
|||
a { |
|||
outline: none; |
|||
color: inherit; |
|||
text-decoration: none; |
|||
border-bottom: 1px solid #555; |
|||
&.image { |
|||
display: block; |
|||
text-align: center; |
|||
border: 0; |
|||
border-radius: 5px; |
|||
margin: 30px 0; |
|||