Moez Bouhlel @lejenome

This is our checklist for any member interested to join the training:


For Windows Users

You can choose your preferred Text Editor or IDE to write python code, or you can pick one from our recommendation list:

For Linux (Ubuntu) Users

  • Python 3 (should be already installed, use python3 command instead of python)
  • Git

You can choose your preferred Text Editor or IDE or one of our suggestion list:

  • PyCharm
  • Vim / emacs / nano / ed (or cat command if you want)
  • IDLE3
  • Ninga-IDE
  • Netbeans >= 8.1 + Python plugin
  • IPython3 (Jupyter console)

Other (We will keep it for Saturday)

We will use the Django Framework in the training. To install Django, you need to use the pip command (already integrated on Python Windows installer, or install python3-pip for Ubuntu users). Launch your console (cmd on Windows), and run:

pip install Django


We will use GitHub to host our projects code. To be able to join the development, every member is required to create a GitHub account and email his profile link to

Keep in mind that GitHub is #1 code hosting service and you will mostly keep using it outside our training on future.

Learning Sources

Python 3





Show Comments

Here, we will add Segment support to Syteup.

Segment is “a customer data hub”. It makes it easy to integrate third-party tools (analytics, advertising,…) to your application throw an all-in-one single library.

To add Segment plugin support to Syteup, we need just 3 simple steps:

1- create plugins/segment.js plugin code file that will export the plugin module to the window object:

(function (window) {
    "use strict";
    function setupSegment(settings) { = || []; = [
        ]; = function (method) {
            return function () {
                var args =;
        for (var i = 0; i <; i++) {
            var key =[i];
  [key] =;
        } = function (key) {
            if (document.getElementById("analytics-js"))
            var script = document.createElement("script");
            script.type = "text/javascript";
   = "analytics-js";
            script.async = true;
            script.src = ("https:" === document.location.protocol ? "https://" : "http://") + "" + key + "/analytics.min.js";
            var first = document.getElementsByTagName("script")[0];
            first.parentNode.insertBefore(script, first);
        // Add a version to keep track of what's in the wild. = "2.0.9";
        // Load Analytics.js with your key, which will automatically
        // load the tools you've enabled for your account. Boosh!["write_key"]);
        // Make the first page call to load the integrations. If
        // you'd like to manually name or tag the page, edit or
        // move this call however you'd like.{ title: "Syteup" });
    window.segmentPlugin = { setup: setupSegment };

what we did is to add segment code (copied from segment tutorial) into the setupSegment function, then we export it as setup item on the plugin module which should be named segmentPlugin. As you note, the user depending write_key is read from the settings object of the plugin which will be added on the third step.

2- we add a script tag to the index.html file that will load the plugin code.

the script tag should be included in the plugins section just before js/plugins.js tag and it should be loaded on defer mode

<script defer src="plugins/segment.js"></script>

3- Finally, we add the plugin settings to the configuration file config.json

option to turn on/off the plugin inside the plugins option:

"plugins": {
    "segment": true

the plugin settings object that includes all user depending settings (here we will need the user’s write_key) on the plugins_settings option:

"plugins_settings": {
    "segment": {
        "write_key": "?????????"

All Done! we are ready to test our plugin.

Don’t be lazy, and send me a pull request with your plugins code and other patches to !

Show Comments

Syteup (a complete rewrite of Syte) is a really simple but powerful packaged personal site that has social integrations like GitHub, Dribbble, Instagram, Tumblr, Wordpress, Linkedin,, SoundCloud, Bitbucket, StackOverflow, Flickr.


You can see Syteup in action on here.

Social Integrations


Syteup use Tumblr, or Blogger for blogging and your blog will be the primary page of the site.

Syteyp Wordpress

Social Services

Suteup currently support many different social services:


Syteyp Github


Syteyp Flickr


Syteyp SoundCloud



Syteyp StackOverflow


Syteyp Bitbucket


Syteyp Dribbble


Syteyp Instagram


Syteyp Youtube


Syteyp LinkedIn


Syteyp Facebook


Syteyp Google+

Some other services integration is planed. For more up to date list of currently supported services and planed services isavailable on file.

NOTE: Some services can not be supported as accessing them from client side will give crackers full access to your account (e.g: Twitter, Foursquare) or the service provider does not support server side requirements (e.g: neither SOP nor jsonp are supported by Steam,…), if you want them to be implemented, ask the service provider to supported limited permission access tokens or other needed requirements.


Syteup dose not require any specific server side future as it is server-less moder HTML5 webapp.

First, you need to setup Syteup requirements by runnig the following commands:

npm install
bower update

then, you needs to rename src/config.json.sample file to config.json and customize it for your needs as explained on the flowing section then run

npm run dist

which will update the dist/ folder with your new settings. Then copy the contents of dist/ folder to you server and then everything is ready.

You can also use make command for custom src and dist folder and config file too.

make -j1 SRC=~/syteup/src DIST=/srv/website/www CONF=~/my_config.json



General Setup

Change all avatars images on src/imgs folder (pic.png, favicon.ico, apple-touch-icon*.png) by your avatar images with same sizes.

Setup the options of fields object on config.json file

"fields": {
  "username": String, // the pseudonym (nickname) you mostly known by
  "realname": String, // your complete real name
  "description": String, // a very short 'About Me' line
  "url": String, // the url of your website
  "contact": {
    "email": String, // your email
    "mobile": String, // [optional] your phone number e.g: (216) 00000000
    "tel": String, // [optional] your telephone number e.g: (216) 00000000
    "fax": String, // [optional] your fax number e.g: (216) 1111111
    "address": String, // [optional] just a short address e.g: Texas, USA
    "pgp_url": String, // [optional] url of your public pgp key file on your site e.g: /pubkey.asc
    "fingerprint": String, // [optional] your pgp key fingerprint e.g: 3A1D ADDD 332D 2EFB F816  21C3 84D8 5721 7365 9C9D
    "ssh_url": String // [optional] your ssh public certificate file url on your site e.g: /

Blog Setup

Set blog_platform to the bloggin platform that you will use, availbale platforms are “tumblr” and “blogger” and “wordpress”.

Next, you need to setup the options of the choosen platform on the blogs_settings.<platform_name> object as follow:


"wordpress": {
  "blog_url": String, // the url of your blog
  "tag_slug": String // [optional] tags of posts to import (space separated)


"blogger": {
  "blog_url": String, // your blog url
  "blog_id": String, // your blog id number (you can use
  "api_key": String, // your api key (See Below)
  "tag_slug": String // [optional] tags of posts to import (comma separated)

Steps to get your api_key are explained on the youtube section below.


"tumblr": {
  "blog_url": String, // your blog url
  "api_key": String, // your api key (See Below)
  "tag_slug": String // [optional] tag of posts to import (just one tag)

To get your api_key, register a new app here with any name and your website url as the default callback url. The “OAuth Consumer Key” of the application is your api_key.

Services Setup

For every service you would to enable, you should set services.<service_name> on config.json file to true and setup it options object services_settings.<service_name> on same file.

Disabled services can safely removed from booth services and services_settings objects on the config file.


enable services.github and configure services_settings.github as follow:

"github": {
  "username": String // your username


enable services.stackoverflow and configure services_settings.stackoverflow as follow:

"stackoverflow": {
  "username": String, // your username
  "user_id": String // your user id number


enable and configure as follow:

"flickr": {
  "username": String, // your username
  "user_id": String // your user id (you can get it from


enable services.bitbucket and configure services_settings.bitbucket as follow:

"bitbucket": {
  "username": String, // your username
  "show_forks": Boolean // show number of forks (It require a http request for every repository


enable services.soundcloud and configure services_settings.soundcloud as follow:

"soundcloud": {
  "username": String, // your username
  "client_id": String, // your client_id (See Below)
  "show_artwork": Boolean, // show tracks artworks
  "player_color": String // color of tracks player

To get an client_id, register an app here with any name you want, after you accept their Developer Policies, you get your Client ID.

enable services.lastfm and configure services_settings.lastfm as follow:

"lastfm": {
  "username": String, // your username
  "api_key": String // your api key (See Below)

To get an api_key, register a non comercial account here with any name and a small description, then you will get your API Key.


enable services.dribbble and configure services_settings.dribbble as follow:

"dribbble": {
  "username": String // your username


enable and configure as follow:

"youtube": {
  "username": String, // your username
  "api_key": String // your api key (See Below)

To get an api_key, create a project here with any name then click “Enable an API” and enable the API you need (“YouTube Data API v3” for YouTube, “Blogger API v3” for Blogger, “Google+ API” for Google+). Then on “Cendentials” tab, click “Create a new Key” then “Browser Key” and enter your website url then “Create” to get your API KEY.


enable services.gplus and configure services_settings.gplus as follow:

"gplus": {
  "user_id": String, // your user id number
  "api_key": String // your api key (See Below)

Steps to get your api_key are explained on the youtube section above.


enable services.facebook and configure services_settings.facebook as follow:

"facebook": {
  "username": String, // your username
  "access_token": String // your access token key (See Below)

to get you read only access_token, create a web application here. Then, choose it from “Application” menu from this page and click “Get Access Token” and select booth “user_activities”, “user_about_me” and “user_status”. After confirming, you will get your final access_token on the Access Token field.


enable services.instagram and configure services_settings.instagram as follow:

"instagram": {
  "username": String, // your username
  "access_token": String, // your access token key (TODO: NEED MORE DOCUMENTATION)
  "user_id": String // your user id number


enable services.linkedin and configure services_settings.linkedin as follow:

"linkedin": {
  "username": String, // your username
  "access_token": String // your access token key (See Below)

To get your read only access_token, register a new app here. Select “r_basicprofile” and “r_fullprofile” as your default scopes and add<YOUR_API_KEY>&client_secret=<YOUR_SECRET_API> to “OAuth 2.0 Redirect URLs” after replacing the two parameters with your API Key and your Secret Key. Then use this link to request your access token.

Plugins setup

Enabling a plugin depend on the type of plugin, either it’s a generic plugin or a blog plugin. For generic plugins, set plugins.<plugin_name> to true. and for blogs plugins, set blogs_settings.plugins.<plugin_name> to true.

Settings of every plugin are availbale on the plugins_settings.<plugin_name> object on config.json file as follow:


This plugin will enable disqus comments on every post. Just enable blogs_settings.plugins.disqus and configure plugins_settings.disqus as follow:

"disqus": {
  "url": String, // [optional] your disqus profile url
  "shortname": String, // your username
  "just_count": Boolean // [optional] just show the number of comments instead of the 'Show Comments' buttons


This plugin will add ShareThis widget to every post. Just enable blogs_settings.plugins.sharethis and configure plugins_settings.sharethis as follow:

"sharethis": {
  "publisher_key": String // your key


This plugin will add RSS entry that any browser can subscribe to. Just enable plugins.rss and configure plugins_settings.rss as follow:

"rss": {
  "url": String // the url of your rss feed file or an external rss feed from your blog platform

Google Analytics

This plugin will enable Google Analytics tracking. Just enable plugins.google_analytics and configure plugins_settings.google_analytics as follow:

"google_analytics": {
  "tracking_id": String // your tracking id e.g: UA-XXXXXXX-2


This plugin will enable Woopra tracking. Just enable plugins.woopra and configure plugins_settings.woopra as follow:

"woopra": {
  "tracking_domain": String, // TODO
  "idle_timeout": Number, // TODO
  "include_query": Boolean // TODO


This plugin will enable Segment services. Just enable plugins.segment and configure plugins_settings.segment as follow:

"segment": {
  "write_key": String // your write key

Gratipay Widget

This plugin will add Gratupay widget bollow the navigation menu. Just enable plugins.gratipay_widget and configure plugins_settings.gratipay_widget as follow:

"gratipay_widget": {
  "username": String // your gratipay username
Show Comments