Static Site Generators

Markup languages

System for annotating a document in a way that is syntactically distinguishable from the text

For example:

• HTML
• LateX
• ...

Lightweight markup language: simple syntax, designed to be easy for a human to enter with a simple text editor, and easy to read in its raw form

Markdown

• a plain text formatting syntax
• text-to-HTML conversion tool

• Cheatsheet: here
• Demo: Dillinger
• List of Markdown tools: here

Markdown

Markdown

Other lightweight markup languages

• reStructuredText
• AsciiDoc

Static Site Generator

Static Site Generator

Static Site Generators

• List of 230 static site generators: here
• Most popular ones: Jekyll (Ruby) and Octopress(Ruby), Pelican(Python) and Nikola(Python)

Getting started with Pelican

Documentation: http://pelican.readthedocs.org

Virtualenv

An isolated working copy of Python which allows you to work on a specific project without worry of affecting other projects.

$ pip install virtualenv
$ virtualenv ~/virtualenvs/pelican
$ cd ~/virtualenvs/pelican
$ . bin/activate
						

Install Pelican and Markdown

$ pip install pelican
$ pip install markdown
						

Quickstart Pelican

$ pelican-quickstart
						

Pelican will ask you some questions about your site and will generate the following files:

 yourproject/
  ├── content
  │   └── (pages)
  ├── output
  ├── develop_server.sh
  ├── fabfile.py
  ├── Makefile
  ├── pelicanconf.py       
  └── publishconf.py
						

Comments on the generated files

 yourproject/
  ├── content
  │   └── (pages)
  ├── output
  ├── develop_server.sh
  ├── fabfile.py
  ├── Makefile
  ├── pelicanconf.py       
  └── publishconf.py
						

Content is the folder where you save your articles in Markdown or reST files.
Output is the folder that pelican generates with your site HTML, CSS and JS.
Makefile is an automated tool to help you generate, preview and upload your site.
fabfile.py is also another automated tool to help you generate, preview and upload your site (To use Fabfile.py you have to install Fabric pip install Fabric).
pelicanconf.py is the main settings file.
publishconf.py is the publish settings file.

Pelican Hello world! example

1. Open the text editor of your choice:
• Sumblime Text 2
• vim
• Notepad

2. Write something like:

   

3. Save it in: ../pelican/yourproject/content/helloworld.md

More Pelican

Pelican Settings

Open the configuration file: pelicanconf.py

http://docs.getpelican.com/en/3.3.0/settings.html

Pelican Themes

Jinja: Template engine for Python

Pelican Themes

Jinja: Template engine for Python

Pelican example

 
{% extends "base.html" %}
{% block body %}

{% for article in articles %}
{{ article.title }}
{% endfor %}

{% endblock %}
					

Pelican Themes

Theme Gallery

http://pelican-themes-gallery.place.org

Pelican Themes

Bootstrap3 Pelican Theme

https://github.com/DandyDev/pelican-bootstrap3

Copy this theme in your project folder

 yourproject/
  ├── theme
					

Point the theme variable of pelicanconf.py file to the folder

THEME = "pelican-bootstrap3"
#BOOTSTRAP_THEME = "simplex"
					

Bootswatch

http://bootswatch.com/

Custom Theme

My Pelican theme

https://github.com/chdoig/pelican-bootstrap3-lovers

My blogpost on Pelican

Customizing a Bootstrap-Pelican-Theme

http://chdoig.github.io/create-pelican-blog.html

Customize your site/blog tips

http://chdoig.github.io/create-pelican-blog.html

• Create blog layout
• Create color theme
• Set a background image
• Get a header image
• Set your profile picture
• Change fonts
• Custom buttons
• Custom social media icons