WebNomad :: website and slideshow

Artichoke logo

WebNomad is a set of shell scripts to generate websites and image galleries fit for desktop as well mobile and tablet browsing. It can be operated on any device running ZShell, its themes are based on Bootstrap CSS, pages can be written in Markdown syntax interlaced into HTML, while it uses JQuery and BlueImp to make slideshows using all files found into a directory.

This software is console terminal based, yet fairly simple to operate. To make a website it is enough to have a bit of shell experience and to know HTML or even easier Markdown.

Downloads

To get a stable release of WebNomad go on our file download zone:

files.dyne.org/webnomad

 

 

Demo

The current version of WebNomad is 0.2 and as such this is a very early release, but well established functionality. This software is already used in production for a number of dyne.org websites, see some examples:

☞ Yurt.in (image slideshow)

☞ Jaromil.dyne.org (portfolio website)

☞ Silente.dyne.org (sound narrative website)

Usage

As of now, webnomad is operated from a Terminal. A simple interface might be built in future if donors request it.

Docs in Spanish

First create a directory for your website, then place the webnomad directory inside it, i.e. the one downloaded from the source archive or git repo.

From a terminal, cd inside your new website’s directory and run:

 ./webnomad/init

the skeleton of your new webpage is created inside the directory:

 views/ -> contains the pages you want to edit
 tmpl/ -> contains templates like header, footer and navbar

Now go customise files in tmpl/ with your favorite HTML editor and then go as well in views/ to create your web pages, better start from index.html.

To see results, run ./webnomad/render and your webpages will be in pub/ with all markdown rendered, header navbar and footer applied. To preview open the pub/index file with a web browser (chromium is recommended, since it does not need the .html extension on local files…)

Upload your website with a recursive Scp or Rsync from pub/* on any webserver.

Use Markdown

To avoid the tedious task of using HTML tags for everything, even simple formatted text, webnomad supports interlacing markdown sections within an HTML page. This is simply done opening and closing the tags <markdown> … </markdown> which can recur more than once in the same document.

This approach simplifies the use of markdown within a bootstrap styled page, where you can use the <div> classes of bootstrap as usual, directly in HTML, but then go on filling them up with our beloved simplified markup – *cough* *cough* – markdown.

You’ll need to have installed a markdown interpreter in the path to be able to use this markup language in your pages.

Image Slideshow

To create an image slideshow simply create a page with extension .gal inside the views/ directory, for example one can call it

 views/vacation_in_Italy.gal

To add images into it one should create a -files directory inside views/ better if named after the gallery page, something like:

 views/vacation_in_Italy-files/

Proceed copying your images inside the -files directory, resized to the format you want them to appear in the slideshow. One can also use webnomad/convert an optional script that helps to do batch conversions (ImageMagick is then needed).

Now fill in the filenames of your images inside the .gallery file, one per line, relative to the views/ path. For instance our views/vacation_in_Italy.gallery file can contain:

 vacation_in_Italy-files/Fontana_di_Trevi.jpeg
 vacation_in_Italy-files/Torre_di_Pisa.jpeg
 vacation_in_Italy-files/Er_cupolone.jpeg
 vacation_in_Italy-files/Spiaggia_con_bagnanti.jpeg
 vacation_in_Italy-files/Io_e_te_sudati.jpeg

At last run webnomad/render and the slideshow will be ready at the page in pub/ which in our case is pub/vacation_in_Italy.

Got suggestions?

Be welcome to stay in touch with us via IRC or Github, file a pull request or just go fork the pain away. WebNomad is open source and nomadic software, simple to modify in its source: its all shell script ;^)

WebNomad on GitHub

In fact its design is kept nomadic and off-the-cloud by the fact one includes the webnomad/ directory inside the project, so that if we update this code it won’t affect you until you decide to update it into your project. Our long term compatibility plans is simple: we won’t fiddle with your stuff. Enjoy!