forked from rigoneri/syte
/
index.html
498 lines (353 loc) · 37.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>Syte by rigoneri</title>
<link rel="stylesheet" href="stylesheets/styles.css">
<link rel="stylesheet" href="stylesheets/pygment_trac.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="javascripts/respond.js"></script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lt IE 8]>
<link rel="stylesheet" href="stylesheets/ie.css">
<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
</head>
<body>
<div id="header">
<nav>
<li class="fork"><a href="https://github.com/rigoneri/syte">View On GitHub</a></li>
<li class="downloads"><a href="https://github.com/rigoneri/syte/zipball/master">ZIP</a></li>
<li class="downloads"><a href="https://github.com/rigoneri/syte/tarball/master">TAR</a></li>
<li class="title">DOWNLOADS</li>
</nav>
</div><!-- end header -->
<div class="wrapper">
<section>
<h1>Syte</h1>
<p>Syte is a really simple but powerful packaged personal site that has social integrations like Twitter, GitHub, Dribbble, Instagram, Foursquare, Tumblr, Last.fm, SoundCloud and Bitbucket. You can see it in action on <a href="http://rigoneri.com">my personal site</a>.</p>
<h3>There is only one rule</h3>
<p>You can use, reproduce and do whatever you want with Syte but I would like you to choose a different adjacent color as the ones used by the people below. Once you have chosen your color and deployed your Syte based site, please send a pull request with an image of you containing the color on the border like the ones below. The image needs to be 60x60 px.</p>
<p><a href="http://rigoneri.com"><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/rigoneri.png?raw=true" alt="rigoneri"></a>
<a href="http://sambao21.com"><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/sambao21.png?raw=true" alt="sambao21"></a>
<a href="http://keithentzeroth.com"><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/keithentzeroth.png?raw=true" alt="keithentzeroth"></a>
<a href="http://garrypolley.com"><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/garrypolley.png?raw=true" alt="garrypolley"></a>
<a href="http://www.henklein.com"><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/snooze82.png?raw=true" alt="snooze82"></a>
<a href="http://johncoogan.com"><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/johncoogan.png?raw=true" alt="johncoogan"></a>
<a href="http://blog.atomitware.tk"><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/mithrandiragain.png?raw=true" alt="mithrandiragain"></a>
<a href="http://blog.stacktrace.ch"><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/href.png?raw=true" alt="href"></a>
<a href="http://aristidesfl.herokuapp.com"><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/aristidesfl.png?raw=true" alt="aristidesfl"></a>
<a href="http://aureax.xn--hwg34fba.ws"><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/aureax.png?raw=true" alt="aureax"></a>
<a href="http://evilfaeton.com"><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/evilfaeton.png?raw=true" alt="evilfaeton"></a>
<a href="http://eveiga.herokuapp.com"><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/eveiga.png?raw=true" alt="eveiga"></a>
<a href="http://mikaelo.herokuapp.com"><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/mikaelo.png?raw=true" alt="mikaelo"></a>
<a href="http://mikehodgson.com"><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/mikehodgson.png?raw=true" alt="mikehodgson"></a>
<a href="http://charliekey.me"><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/charliekey.png?raw=true" alt="charliekey"></a>
<a href="http://atb.herokuapp.com/"><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/andrewthebold.png?raw=true" alt="andrewthebold"></a>
<a href="http://oyvind-ingvaldsen.net"><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/oyvind-ingvaldsen.png?raw=true" alt="BobuSumisu"></a>
<a href="http://nurihodges.herokuapp.com"><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/nurihodges.png?raw=true" alt="nurihodges"></a>
<a href="http://markwatson.us"><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/mrkrwtsn.png?raw=true" alt="markwatson"></a>
<a href="http://manavo.com"><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/manavo.png?raw=true" alt="manavo"></a>
<a href="http://rshepherd.org"><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/rshepherd.png?raw=true" alt="rshepherd"></a>
<a href="http://willieavendano.me"><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/wavendano.png?raw=true" alt="wavendano"></a>
<a href="http://yurytsukerman.com"><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/yurytsukerman.png?raw=true" alt="yurytsukerman"></a>
<a href="http://www.javisoto.es"><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/javisoto.png?raw=true" alt="javisoto"></a>
<a href="http://www.joneisen.me"><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/joneisen.png?raw=true" alt="joneisen"></a>
<a href="http://www.natetarrh.com"><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/natetarrh.png?raw=true" alt="natetarrh"></a>
<a href="http://natearnold.me"><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/arnonate.png?raw=true" alt="arnonate"></a>
<a href="http://mobileiteration.com"><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/mobileiteration.png?raw=true" alt="mobileiteration"></a>
<a href="http://owened.co.nz"><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/owen.png?raw=true" alt="owen"></a>
<a href="http://danielcampo.com"><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/danielcampo.png?raw=true" alt="danielcampo"></a>
<a href="http://bhashkar.me"><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/bhashkar.png?raw=true" alt="bhashkar"></a>
<a href="http://lukelee-syte.herokuapp.com"><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/lukelee.png?raw=true" alt="lukelee"></a>
<a href="http://dcochran.com"><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/dannycochran.png?raw=true" alt="dannycochran"></a>
<a href="http://sraghavan.net"><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/srir.png?raw=true" alt="srir"></a>
<a href="http://www.returnbooleantrue.com"><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/jeff-tchang.png?raw=true" alt="tachang"></a>
<a href="http://junseki.com"><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/junseki.png?raw=true" alt="junseki"></a>
<a href="http://allyd.herokuapp.com"><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/allydimg.png?raw=true" alt="allydimg"></a>
<a href="http://hussfelt.net"><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/hussfelt.png?raw=true" alt="hussfelt"></a>
<a href="http://amastys.ru"><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/amastys.png?raw=true" alt="amastys"></a>
<a href="http://dami.me"><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/damilare.png?raw=true" alt="damilare"></a>
<a href="http://eventh.herokuapp.com"><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/eventh.png?raw=true" alt="eventh"></a>
<a href="http://claytonferris.com"><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/clayferris.png?raw=true" alt="clayferris"></a>
<a href="http://alexmeswarb.com"><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/ameswarb.png?raw=true" alt="alexmeswarb"></a>
<a href="http://pranayairan.herokuapp.com"><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/pranayairan.png?raw=true" alt="pranayairan"></a>
<a href="http://lfranchi.com"><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/lfranchi.png?raw=true" alt="lfranchi"></a>
<a href="http://jihonrado.es"><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/jihonrado.png?raw=true" alt="jihonrado"></a>
<a href="http://www.dmragone.com"><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/dmragone.png?raw=true" alt="DavidRagone"></a>
<a href="http://bronskiy.com"><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/bronskiy.png?raw=true" alt="bronskiy"></a>
<a href="http://darrenmowat.co.uk"><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/darrenmowat.png?raw=true" alt="darrenmowat"></a>
<a href="http://jeffsheets.herokuapp.com"><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/sheetsj.png?raw=true" alt="sheetsj"></a>
<a href="http://jacobeiting.com"><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/jeiting.png?raw=true" alt="jeiting"></a>
<a href="http://chrisbolton.me"><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/chriskun.png?raw=true" alt="chriskun"></a>
<a href="http://www.calebalbritton.com"><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/calebalbritton.png?raw=true" alt="calebalbritton"></a>
<a href="http://ying82.herokuapp.com"><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/vincentying.png?raw=true" alt="vincentying"></a>
</p>
<h2>Social Integrations</h2>
<h3>Blog: Tumblr</h3>
<p>Syte uses <a href="http://tumblr.com">Tumblr</a> for blogging and your blog will be the primary page of the site.</p>
<p><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/f-1.png?raw=true" alt="Syte Home"></p>
<h3>Twitter</h3>
<p>Syte has Twitter integration, which means that when someone clicks on a link that points to a user's Twitter profile the profile is loaded within your site along with the user's latest tweets.</p>
<p><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/f-2.png?raw=true" alt="Syte Twitter"></p>
<h3>GitHub</h3>
<p>Syte has GitHub integration, which means that when someone clicks on a link that points to a user's GitHub profile the profile is loaded within your site along with a list of the user's repos.</p>
<p><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/f-3.png?raw=true" alt="Syte GitHub"></p>
<h3>Dribbble</h3>
<p>Syte has Dribbble integration, which means that when someone clicks on a link that points to a user's Dribbble profile the profile is loaded within your site along with the user's latest shots.</p>
<p><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/f-4.png?raw=true" alt="Syte Dribbble"></p>
<h3>Instagram</h3>
<p>Syte has Instagram integration, which means that you can show your Instagram pictures within your site like a profile. Currently the only way to display your pictures is through their iPhone and Android apps, this is not even possible through their website.</p>
<p><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/f-5.png?raw=true" alt="Syte Instagram"></p>
<h3>Foursquare</h3>
<p>Syte has foursquare integration, which means that you can show your foursquare check-ins within your site like a profile.</p>
<p><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/f-9.png?raw=true" alt="Syte Foursquare"></p>
<h3>Last.fm</h3>
<p>Syte has Last.fm integration, which means that when someone clicks on a link that points to a user's Last.fm profile the profile information will be loaded directly in the site along with a listing of the most recently scrobbled tracks.</p>
<p><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/f-6.png?raw=true" alt="Syte Lastfm"></p>
<h3>SoundCloud</h3>
<p>Syte has SoundCloud integration, which means that when someone clicks on a link that points to a user's SoundCloud profile the profile information will be loaded directly in the site along with a listing of the user's SoundCloud tracks. Since I don't use SoundCloud, you can see an example on <a href="http://blog.guramkajaia.com/">Guram's website</a></p>
<p><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/f-7.png?raw=true" alt="Syte Soundcloud"></p>
<h3>Bitbucket</h3>
<p>Syte has Bitbucket integration, which means that when someone clicks on a link that points to a user's Bitbucket profile the profile is loaded within your site along with a list of the user's repos.</p>
<p><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/f-8.png?raw=true" alt="Syte Bitbucket"></p>
<h2>Responsive UI</h2>
<p>Syte is responsive, which means that it scales down to a mobile device screen size.</p>
<p><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/f-r-1.png?raw=true" alt="Syte Responsive 1"><img src="https://github.com/rigoneri/syte/blob/master/readme-imgs/f-r-2.png?raw=true" alt="Syte Responsive 1"></p>
<h2>Technologies Used</h2>
<p>Syte uses the <a href="https://www.djangoproject.com/">Django</a> web framework to handle requests and call the integration APIs (with <a href="http://www.python.org/">python</a>). However it doesn't necessarily need to be in Django since the majority of the work is on the frontend (I would love to see a fork using <a href="http://nodejs.org/">Node.js</a>, maybe I'll put one together sometime.)</p>
<p>On the frontend Syte uses HTML5 and CSS3 while using the <a href="http://lesscss.org">LESS</a> CSS preprocessor. Syte also uses several JS libraries listed below:</p>
<ul>
<li><a href="http://github.com/jrburke/requirejs">require.js</a></li>
<li><a href="http://handlebarsjs.com/">handlebars.js</a></li>
<li><a href="http://momentjs.com/">moment.js</a></li>
<li><a href="fgnass.github.com/spin.js">spin.js</a></li>
<li><a href="http://twitter.github.com/bootstrap/javascript.html#modals">bootstrap-modal.js</a></li>
<li><a href="https://github.com/allmarkedup/jQuery-URL-Parser">jQuery URL Parser</a></li>
<li><a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html">google-code-prettify</a></li>
</ul><p>For static compression and minification Syte uses some <a href="http://nodejs.org/">Node.js</a> libraries:</p>
<ul>
<li><a href="http://search.npmjs.org/#/less">less</a></li>
<li><a href="http://search.npmjs.org/#/uglify-js">uglify-js</a></li>
</ul><p>For deployment Syte uses <a href="http://www.heroku.com/">Heroku</a> since it's free for 750 dyno-hours per month. While the included instructions are for Heroku, Syte doesn't necessarily need to be deployed there.</p>
<h2>Setup Instructions</h2>
<p>There are a few steps in order to get Syte configured, but don't worry they are pretty easy.</p>
<p><code>Note</code> I recommend you branching your fork and not checking in sensitive settings to GitHub!
<code>Warning</code> Do not place OAuth keys and tokens in a public repository.</p>
<h3>Base content changes</h3>
<p>There are a few things that are defaulted to have my information so you have the initial structure of the site.</p>
<p>To start off change the <strong>pictures</strong> to have your picture, navigate to <code>syte > static > imgs</code> and replace <strong>pic.png</strong> with your picture and <strong>favicon.ico</strong> with your favicon in this case I use my picture as well. Please make sure you keep the same sizes. <strong>pic.png</strong> is 84x84px and <strong>favicon.ico</strong> is 32x32px.</p>
<p>Then make some text and link changes. Open <strong>base.html</strong> located in <code>syte > templates > base.html</code> and make the following changes:</p>
<ol>
<li>Change the <code>meta="description"</code> content to have a description about you.</li>
<li>Change the <code>meta="keywords"</code> content to have keywords about you.</li>
<li>Change the <code>title</code> tag to have your name.</li>
<li>Inside the <code>header</code> tag change the <code>h1</code> tag to have your name.</li>
<li>Inside the <code>header</code> tag change the <code>h2</code> tag to have a short description about you.</li>
<li>Inside the <code>nav</code> tag change the <strong>twitter-link</strong> href to point to your twitter profile, if you don't have twitter just remove that whole line.</li>
<li>Inside the <code>nav</code> tag change the <strong>github-link</strong> href to point to your GitHub profile, if you don't have GitHub just remove that whole line.</li>
<li>Inside the <code>nav</code> tag change the <strong>dribbble-link</strong> href to point to your Dribbble profile, if you don't have Dribbble just remove that whole line.</li>
<li>Inside the <code>nav</code> tag change the <strong>contact-link</strong> href to point to your email address.</li>
<li>Under <code>class="mobile-nav"</code> div change the <strong>h3</strong> link text to have your domain name or your name.</li>
</ol><p>Then pick your <strong>adjacent color</strong> and change the <code>@adjacent-color</code> hex value in variables.less located in <code>syte > static > less > variables.less</code> Make sure the color you chose is not used by anyone on the list up above. If you want blue pick a different shade of blue, there are hundreds out there...</p>
<h3>Setting up your blog (Tumblr)</h3>
<p>If you already have a Tumblr blog good! If you don't <a href="https://www.tumblr.com/">signup for one here</a> it's really easy! I might eventually make Syte integrate with WordPress as well, if you beat me to it please send a pull request.</p>
<p>Once you have your Tumblr blog you will need to get the <code>api_key</code> needed to call their APIs. In order to do that <strong>register your site</strong> with them by going to <a href="http://www.tumblr.com/oauth/register">http://www.tumblr.com/oauth/register</a>, fill in the information about your site, there is no need to enter a default callback url or an icon. Once you are done your website will be listed under <a href="http://www.tumblr.com/oauth/apps">http://www.tumblr.com/oauth/apps</a>, save the <code>OAuth Consumer Key</code> value that's the <code>api_key</code> we need for Syte.</p>
<p>Once you have the <code>api_key</code> from Tumblr you have to enter it in <strong>syte_settings.py</strong> located in <code>syte > syte_settings.py</code>. Once you open that file enter the key under <code>TUMBLR_API_KEY</code>, also please enter your Tumblr url under <code>TUMBLR_BLOG_URL</code> see the example on how it should be formatted.</p>
<h4>Comments</h4>
<p>Comments are available through <a href="http://disqus.com/">Disqus</a> in order to get yours setup, make sure to signup through their website. Once you are done you will be given a Disqus shortname. Grab the shortname and enter it in <strong>syte_settings.py</strong> under <code>DISQUS_SHORTNAME</code>, also make sure to have <code>DISQUS_INTEGRATION_ENABLED</code> set to True in order to work.</p>
<h3>Setting up Twitter integration</h3>
<p>Twitter has another level of security, therefore we need more information instead of just an api_key like Tumblr. To get started create a new application on Twitter for your website by going to <a href="https://dev.twitter.com/apps/new">https://dev.twitter.com/apps/new</a>. Once you are done creating your application you will be taken to your application page on Twitter, there you already have two pieces of the puzzle, the <code>Consumer key</code> and the <code>Consumer secret</code> make sure you save those.</p>
<p>Next you will need your access tokens, on the bottom of that page there is a link called <strong>Create my access token</strong> click on that. Once you are done you will be given the other two pieces of the puzzle, the <code>Access token</code> and the <code>Access token secret</code> make sure you save those as well.</p>
<p>Once you have those four items from Twitter you have to enter them in your <strong>syte_settings.py</strong> located in <code>syte > syte_settings.py</code>. Once you open that file enter the following:</p>
<ul>
<li>
<code>Consumer key</code> string you saved under <code>TWITTER_CONSUMER_KEY</code>
</li>
<li>
<code>Consumer secret</code> string you saved under <code>TWITTER_CONSUMER_SECRET</code>
</li>
<li>
<code>Access token</code> string you saved under <code>TWITTER_USER_KEY</code>
</li>
<li>
<code>Access token secret</code> string you saved under <code>TWITTER_USER_SECRET</code>
</li>
</ul><p>If you want to turn off the Twitter integration just set <code>TWITTER_INTEGRATION_ENABLED</code> to False.</p>
<h3>Setting up GitHub integration</h3>
<p>GitHub has the same level of security as Twitter, but they don't provide a button that makes it easy to get the access token, so instead we have to get the access token ourselves. To get started sign in to GitHub and go to <a href="https://github.com/settings/applications/new">https://github.com/settings/applications/new</a> to register your application.</p>
<p>Enter the <strong><em>Application Name</em></strong>, <strong><em>Main URL</em></strong> and <strong><em>Callback URL</em></strong>. For the Callback URL enter <code>http://127.0.0.1:8000/github/auth</code> for now since we will get the access token while running it locally. Once you are done registering your application you will be given the <strong><em>Client ID</em></strong> and <strong><em>Client Secret</em></strong>.</p>
<p>Once you have those two items from GitHub you have to enter them in your <strong>syte_settings.py</strong> located in <code>syte > syte_settings.py</code>. Once you open that file enter the following:</p>
<ul>
<li>
<strong><em>Client ID</em></strong> under <code>GITHUB_CLIENT_ID</code>
</li>
<li>
<strong><em>Client Secret</em></strong> under <code>GITHUB_CLIENT_SECRET</code>
</li>
</ul><p>After you have entered those two items, follow the steps below for running your Syte locally on your machine. Once you have your Syte running navigate to <code>http://127.0.0.1:8000/github/auth</code>, you will be taken to GitHub's website and will be asked to sign in and authorize your application. After you authorized your application you will be taken back to your Syte and you will be given your <strong><em>Access Token</em></strong></p>
<p>You can also get your access token via the GitHub api using curl:</p>
<pre><code>curl -i -u "username:password" https://api.github.com/authorizations
</code></pre>
<p>Once you have your access token from GitHub you have to enter them in your <strong>syte_settings.py</strong> located in <code>syte > syte_settings.py</code>. Once you open that file enter it under <code>GITHUB_ACCESS_TOKEN</code></p>
<p>After you validated that your GitHub integration worked go back to GitHub page and change the <strong><em>Callback URL</em></strong> field to have your domain info (this is not required), then make sure you turn off the GitHub OAuth integration setting so you don't make that available to everyone in the Internet. You can do that by setting <code>GITHUB_OAUTH_ENABLED</code> to False.</p>
<p>If you want to turn off GitHub integration just set <code>GITHUB_INTEGRATION_ENABLED</code> to False.</p>
<h3>Setting up Dribbble integration</h3>
<p>You don't have to do anything to setup the Dribbble integration. If you want to turn off this feature just set <code>DRIBBBLE_INTEGRATION_ENABLED</code> setting to False in syte_settings.py.</p>
<h3>Setting up Instagram integration</h3>
<p>Instagram has the same level of security as GitHub and similar steps on getting the access token ourselves. To get started go to <a href="http://instagram.com/developer/">http://instagram.com/developer/</a>, sign in and crate a new client by clicking on the <strong><em>Manage Clients</em></strong> link on the top right side.</p>
<p>Enter the <strong><em>Application Name</em></strong>, <strong><em>Description</em></strong>, <strong><em>Website</em></strong> and <strong><em>OAuth redirect_Uri</em></strong>. For the OAuth redirect_uri enter <code>http://127.0.0.1:8000/instagram/auth</code> for now since we will get the access token while running it locally. Once you are done registering your client you will be given the <strong><em>Client ID</em></strong> and <strong><em>Client Secret</em></strong>.</p>
<p>Once you have those two items from Instagram you have to enter them in your <strong>syte_settings.py</strong> located in <code>syte > syte_settings.py</code>. Once you open that file enter the following:</p>
<ul>
<li>
<strong><em>Client ID</em></strong> under <code>INSTAGRAM_CLIENT_ID</code>
</li>
<li>
<strong><em>Client Secret</em></strong> under <code>INSTAGRAM_CLIENT_SECRET</code>
</li>
</ul><p>After you have entered those two items, follow the steps below for running your Syte locally on your machine. Once you have your Syte running navigate to <code>http://127.0.0.1:8000/instagram/auth</code>, you will be taken to Instagram's website and will be asked to sign in and authorize your application. After you authorized your application you will be taken back to your Syte and you will be given your <strong><em>Access Token</em></strong> and your <strong><em>User ID</em></strong></p>
<p>Once you have those two items from Instagram you have to enter them in your <strong>syte_settings.py</strong> located in <code>syte > syte_settings.py</code>. Once you open that file enter the following:</p>
<ul>
<li>
<strong><em>Access Token</em></strong> under <code>INSTAGRAM_ACCESS_TOKEN</code>
</li>
<li>
<strong><em>User ID</em></strong> under <code>INSTAGRAM_USER_ID</code>
</li>
</ul><p>After you validated that your Instagram integration worked go back to Instagram page and change the <strong><em>OAuth redirect_uri</em></strong> field to have your domain info (this is not required), then make sure you turn off the Instagram OAuth integration setting so you don't make that available to everyone in the Internet. You can do that by setting <code>INSTAGRAM_OAUTH_ENABLED</code> to False.</p>
<p>If you want to turn off Instagram integration just set <code>INSTAGRAM_INTEGRATION_ENABLED</code> to False.</p>
<h3>Setting up Foursquare integration</h3>
<p>Foursquare has the same level of security as Instagram and similar steps on getting the access token ourselves. To get started go to <a href="https://foursquare.com/oauth/register">https://foursquare.com/oauth/register</a>, sign in and register a new consumer.</p>
<p>Enter the <strong><em>Application Name</em></strong>, <strong><em>Application Website</em></strong> and <strong><em>Callback URL</em></strong>. For the callback url enter <code>http://127.0.0.1:8000/foursquare/auth</code> for now since we will get the access token while running it locally. Once you are done registering your consumer you will be given the <strong><em>Client ID</em></strong> and <strong><em>Client Secret</em></strong>.</p>
<p>Once you have those two items from Foursquare you have to enter them in your <strong>syte_settings.py</strong> located in <code>syte > syte_settings.py</code>. Once you open that file enter the following:</p>
<ul>
<li>
<strong><em>Client ID</em></strong> under <code>FOURSQUARE_CLIENT_ID</code>
</li>
<li>
<strong><em>Client Secret</em></strong> under <code>FOURSQUARE_CLIENT_SECRET</code>
</li>
</ul><p>After you have entered those two items, follow the steps below for running your Syte locally on your machine. Once you have your Syte running navigate to <code>http://127.0.0.1:8000/foursquare/auth</code>, you will be taken to Foursquare's website and will be asked to sign in and authorize your application. After you authorized your application you will be taken back to your Syte and you will be given your <strong><em>Access Token</em></strong>.</p>
<p>Once you have the access token from Foursquare you have to enter them in your <strong>syte_settings.py</strong> located in <code>syte > syte_settings.py</code>. Once you open that file enter the following:</p>
<ul>
<li>
<strong><em>Access Token</em></strong> under <code>FOURSQUARE_ACCESS_TOKEN</code>
</li>
</ul><p>After you validated that your foursquare integration worked go back to Foursquare page and change the <strong><em>Callback URL</em></strong> field to have your domain info (this is not required), then make sure you turn off the foursquare OAuth integration setting so you don't make that available to everyone in the Internet. You can do that by setting <code>FOURSQUARE_OAUTH_ENABLED</code> to False.</p>
<p>If you want to turn off Instagram integration just set <code>FOURSQUARE_INTEGRATION_ENABLED</code> to False.</p>
<p>Additionally if you don't want people to know where you are currently at, you can set 'FOURSQUARE_SHOW_CURRENT_DAY' to False and it will only show check-ins more than a day old.</p>
<h3>Setting up Last.fm integration</h3>
<p>The Last.fm integration does not make any authenticated calls so setting it up only requires that you register an application with Last.fm and get an API key.</p>
<p>To get an API key simply follow the <a href="http://www.last.fm/api">Getting started instructions</a>. You can then view your API Key from <a href="http://www.last.fm/api/account">your api account page</a>.</p>
<p>Once you have your API Key from Last.fm you have to enter it in your <strong>syte_settings.py</strong> located in <code>syte > syte_settings.py</code>. Once you open that file enter the following:</p>
<ul>
<li>
<strong><em>API_KEY</em></strong> under <code>LASTFM_API_KEY</code>
</li>
<li>
<strong><em>USERNAME</em></strong> under <code>LASTFM_USERNAME</code>
</li>
</ul><p>If you want to turn off Last.fm integration just set <code>LASTFM_INTEGRATION_ENABLED</code> to False.</p>
<h3>Setting up SoundCloud integration</h3>
<p>In order to setup the SoundCloud integration you first need to create a SoundCloud application by going to <a href="http://soundcloud.com/you/apps">http://soundcloud.com/you/apps</a>. Once you have the <code>CLIENT_ID</code> from SoundCloud open the <strong>syte_settings.py</strong> file and enter it under the <code>SOUNDCLOUD_CLIENT_ID</code> setting.</p>
<p>Inside <strong>syte_settings.py</strong> there are two other options to configure how your SoundCloud tracks will be shown.</p>
<ul>
<li>
<code>SOUNDCLOUD_SHOW_ARTWORK</code> (Boolean) set this option to true if you want to show your track artwork on page.</li>
<li>
<code>SOUNDCLOUD_PLAYER_COLOR</code> you can set your widget theme color here. Use Hex values only without <code>#</code> </li>
</ul><p>If you want to turn off SoundCloud integration just set <code>SOUNDCLOUD_INTEGRATION_ENABLED</code> to False.</p>
<h3>Setting up Bitbucket integration</h3>
<p>The Bitbucket integration does not make any authenticated calls nor does it require a registered API key.</p>
<p>If you want to turn off Bitbucket integration just set <code>BITBUCKET_INTEGRATION_ENABLED</code> to False.</p>
<h4>Comment</h4>
<p>To display the fork count on repositories set <code>BITBUCKET_SHOW_FORKS</code> to True. The Bitbucket API require one call for each repository to get fork count, which is disabled by default.</p>
<p>The Bitbucket API throttles the user resource to 100 calls every 30 minutes.</p>
<h2>Running & Deployment Instructions</h2>
<p>Now that you have everything setup and ready to go we will be able to run the project locally and deploy to Heroku with the instructions below. Please note that these instructions are for Mac, which should be the same for Linux systems. If you have problems with these instructions on Windows, let me know or send a pull request.</p>
<h3>Running Syte locally</h3>
<p>Running locally is really easy if you are on a Mac since you already have some stuff installed out of the box. To start off install these python packages:</p>
<ul>
<li><a href="http://www.virtualenv.org/en/latest/index.html">virtualenv</a></li>
<li><a href="http://www.doughellmann.com/projects/virtualenvwrapper/">virtualenvwrapper</a></li>
</ul><p>Once you have those two installed go to your Syte directory and run the following commands:</p>
<pre><code>$ mkvirtualenv syte
$ workon syte
(syte)$ pip install --use-mirrors -r requirements.txt
</code></pre>
<p><code>Note</code> On Mac/Linux you need to modify your shell startup file to add mkvirtualenv and workon commands, see <a href="http://virtualenvwrapper.readthedocs.org/en/latest/install.html#shell-startup-file">virtualenvwrapper installation instructions</a></p>
<p>This will install all the project dependencies listed in requirements.txt including Django. Now all you have to do is run the Django project and go to <a href="http://127.0.0.1:8000">http://127.0.0.1:8000</a>.</p>
<pre><code>python manage.py runserver
</code></pre>
<h3>Compressing Statics</h3>
<p>Compressing static files like CSS and JS are done using <a href="http://nodejs.org/">Node.js</a>. This step is important since it will get all your static files and make tiny bit small so your site can be run faster when it's out there on the so called World Wide Web :)</p>
<p>In order to get there you need to first install <a href="http://nodejs.org/">node.js</a>, they have automatic installers which makes installation really easy. Then you need to install <a href="http://npmjs.org/">Node Package Manager (npm)</a> by running the following command:</p>
<pre><code>curl http://npmjs.org/install.sh | sudo sh
</code></pre>
<p>After npm is installed you need to install two node packages <code>less</code> and <code>uglify-js</code>. To do that run the following commands:</p>
<pre><code>sudo npm install less -g
sudo npm install uglify-js -g
</code></pre>
<p><code>Note</code> windows users be sure to create the directories <code>syte > static > css</code> and <code>syte > static > js > min</code> first if it doesn't already exist.</p>
<p>Then whenever you want to release a new version of static update the <code>COMPRESS_REVISION_NUMBER</code> in <strong>syte-settings.py</strong> and run the compress python command from your syte directory:</p>
<pre><code>python compress.py
</code></pre>
<p>This will create a minified version of your CSS in <code>syte > static > css</code> and the minified version of your JavaScript in <code>syte > static > js > min</code>.</p>
<p><code>Note</code> If you are using Windows and is having problems on compressing statics checkout issue <a href="https://github.com/rigoneri/syte/issues/14">#14</a> to see if it helps.</p>
<h3>Deploying to Heroku</h3>
<p>Deploying to Heroku is extremely easy and free, that's why I chose it over Amazon or similar. That's another fork I would love to see, different deployment instructions maybe to an Amazon EC2 micro instance.</p>
<p>First signup to <a href="http://heroku.com">Heroku</a> then follow these simple <a href="https://devcenter.heroku.com/articles/django">Django deployment instructions</a> I already have the requirements.txt and the Procfile ready to go, but before you actually deploy there are two things you need to change:</p>
<ol>
<li>Change the <code>DEPLOYMENT_MODE</code> value to prod in <strong>syte_settings.py</strong> located in <code>syte > syte_settings.py</code>
</li>
<li>Change the <code>SITE_ROOT_URI</code> value to your Heroku app url in <strong>syte_settings.py</strong> see the available example to how it should be formatted.</li>
</ol><h2>Contributing</h2>
<p>There are plans for several services to be added in the
<a href="https://github.com/rigoneri/syte/blob/master/TODO.md">TODO file</a>. One of
these services is a good place to start when looking for ways to help. Also
posting/fixing <a href="https://github.com/rigoneri/syte/issues">issues</a> is always
helpful.</p>
<p>If you would like to add support for a new service you might find the <a href="https://github.com/rigoneri/syte/blob/master/HELP.md">HELP
file</a> useful on how to
get started and where your new code might go, etc.</p>
<p>Also, the <a href="https://github.com/rigoneri/syte/blob/master/DESIGN.md">DESIGN file</a>
can be a useful resource when starting out with the project and trying to
understand roughly how it all fits together.</p>
<h2>Credit</h2>
<p>Syte was developed by <strong>Rigo</strong> (rodrigo neri). Check his personal site out at <a href="http://rigoneri.com">http://rigoneri.com</a> and follow him on twitter <a href="http://twitter.com/#!/rigoneri">@rigoneri</a></p>
<h2>License</h2>
<p>The MIT License</p>
<p>Copyright (c) 2012, Rodrigo Neri <<a href="https://github.com/rigoneri" class="user-mention">@rigoneri</a>></p>
<p>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:</p>
<p>The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.</p>
<p>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.</p>
</section>
</div>
<!--[if !IE]><script>fixScale(document);</script><![endif]-->
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-32107379-1");
pageTracker._trackPageview();
} catch(err) {}
</script>
</body>
</html>