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, Last.fm, SoundCloud, Bitbucket, StackOverflow, Flickr.
You can see Syteup in action on my personal website.
A more up to date but less stable version is available here.
Syteup use Tumblr, Wordpress.com or Blogger for blogging and your blog will be the primary page of the site.
Suteup currently support many different social services:
Some other services integration is planed. For more up to date list of currently supported services and planed services isavailable on TODO.md 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 updatethen, 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 distwhich 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.jsonIN PROGRESS
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: /id_rsa.pub
}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 wordpress.com 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 https://developers.google.com/apis-explorer/#p/blogger/v3/blogger.blogs.getByUrl)
"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.
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 services.flickr and configure services_settings.flickr as follow:
"flickr": {
"username": String, // your username
"user_id": String // your user id (you can get it from http://idgettr.com/)
}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 services.youtube and configure services_settings.youtube 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
http://lejenome.me/tests/syteup-settings/linkedin.html?client_id=<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.
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
}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
}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
}Syteup is developed by lejenome (Moez Bouhlel) based on Syte by Rigo (rodrigo neri). Thanks to The Contributors for booth the old Syte code and Syteup code.
This program is free software; it is distributed under the MIT Licence.
Copyright (c) 2014, Moez Bouhlel (bmoez.j@gmail.com) & The Contributors
