[存档] 一个非常简单但功能强大的个人网站,集成了诸如 Twitter、GitHub、Dribbble、Instagram、Foursquare、Tumblr、WordPress 等社交功能。
[存档] 一个非常简单但功能强大的个人网站,集成了诸如 Twitter、GitHub、Dribbble、Instagram、Foursquare、Tumblr、WordPress 等社交功能。
Sorry, but this project is no longer maintained. Please use the new version, called Syte2.
PS. The project as of June 2016 still works fine if you want to use it.
Syte is a really simple but powerful packaged personal site that has social integrations like Twitter, GitHub, Dribbble, Instagram, Foursquare, Tumblr, Wordpress, Linkedin, Spotify/Last.fm, SoundCloud, Bitbucket, StackOverflow, Flickr and Steam. You can see it in action on my personal site.
Syte uses Tumblr or Wordpress.com for blogging and your blog will be the primary page of the site.
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.
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.
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.
Syte has Instagram integration, which means that you can show your Instagram pictures within your site like a profile.
Syte has foursquare integration, which means that you can show your foursquare check-ins within your site like a profile.
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.
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 Guram's website
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.
Syte has Tent.io integration, which means that you can show your Tent.io public posts within your site like a profile.
Syte has Steam integration, which means that you can show your Steam Community profile within your site.
Syte has StackOverflow integration, which means that you can show your StackOverflow profile within your site.
Syte has Flickr integration, which means that you can show your Flickr photos within your site.
Syte has LinkedIn integration, which means that you can show your LinkedIn profile information within your site.
Syte is responsive, which means that it scales down to a mobile device screen size.
Syte uses the Django web framework to handle requests and call the integration APIs (with python). 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 Node.js, maybe I'll put one together sometime.)
On the frontend Syte uses HTML5 and CSS3 while using the LESS CSS preprocessor. Syte also uses several JS libraries listed below:
For static compression and minification Syte uses some Node.js libraries:
For deployment Syte uses Heroku 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.
There are a few steps in order to get Syte configured, but don't worry they are pretty easy.
Note I recommend you branching your fork and not checking in sensitive settings to GitHub!
Warning Do not place OAuth keys and tokens in a public repository.
There are a few things that are defaulted to have my information so you have the initial structure of the site.
To start off change the pictures to have your picture, navigate to syte > static > imgs and replace pic.png with your picture and favicon.ico with your favicon in this case I use my picture as well. Please make sure you keep the same sizes. pic.png is 84x84px and favicon.ico is 32x32px.
Then make some text and link changes. Open base.html located in syte > templates > base.html and make the following changes:
meta="description" content to have a description about you.meta="keywords" content to have keywords about you.title tag to have your name.header tag change the h1 tag to have your name.header tag change the h2 tag to have a short description about you.nav tag change the twitter-link href to point to your twitter profile, if you don't have twitter just remove that whole line.nav tag change the github-link href to point to your GitHub profile, if you don't have GitHub just remove that whole line.nav tag change the dribbble-link href to point to your Dribbble profile, if you don't have Dribbble just remove that whole line.nav tag change the steam-link href to point to your Steam community profile, if you don't have Steam just remove that whole line.nav tag change the stackoverflow-link href to point to your StackOverflow profile, if you don't have StackOverflow just remove that whole line.nav tag change the flickr-link href to point to your Flickr profile, if you don't have Flickr just remove that whole line.nav tag change the contact-link href to point to your email address.class="mobile-nav" div change the h3 link text to have your domain name or your name.Then pick your adjacent color and change the @adjacent-color hex value in variables.less located in syte > static > less > variables.less 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...
Syte uses Tumblr or Wordpress for blogging.
If you have a Tumblr blog you will need to get the api_key needed to call their APIs. In order to do that register your site with them by going to http://www.tumblr.com/oauth/register, 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 http://www.tumblr.com/oauth/apps, save the OAuth Consumer Key value that's the api_key we need for Syte.
Once you have the api_key from Tumblr you have to enter it in syte_settings.py located in syte > syte_settings.py. Once you open that file enter the key under TUMBLR_API_KEY, also please enter your Tumblr url under TUMBLR_BLOG_URL see the example on how it should be formatted.
For now Syte only support wordpress blogs that are build using wordpress.com.
Open syte > syte_settings.py and under WORDPRESS_BLOG_URL enter ther url of your wordpress.com blog, also under BLOG_PLATFORM set it to "wordpress".
Comments are available through Disqus 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 syte_settings.py under DISQUS_SHORTNAME, also make sure to have DISQUS_INTEGRATION_ENABLED set to True in order to work.
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 https://dev.twitter.com/apps/new. 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 Consumer key and the Consumer secret make sure you save those.
Next you will need your access tokens, on the bottom of that page there is a link called Create my access token click on that. Once you are done you will be given the other two pieces of the puzzle, the Access token and the Access token secret make sure you save those as well.
Once you have those four items from Twitter you have to enter them in your syte_settings.py located in syte > syte_settings.py. Once you open that file enter the following:
Consumer key string you saved under TWITTER_CONSUMER_KEYConsumer secret string you saved under TWITTER_CONSUMER_SECRETAccess token string you saved under TWITTER_USER_KEYAccess token secret string you saved under TWITTER_USER_SECRETIf you want to turn off the Twitter integration just set TWITTER_INTEGRATION_ENABLED to False.
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 https://github.com/settings/applications/new to register your application.
Enter the Application Name, Main URL and Callback URL. For the Callback URL enter http://127.0.0.1:8000/github/auth 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 Client ID and Client Secret.
Once you have those two items from GitHub you have to enter them in your syte_settings.py located in syte > syte_settings.py. Once you open that file enter the following:
GITHUB_CLIENT_IDGITHUB_CLIENT_SECRETAfter 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 http://127.0.0.1:8000/github/auth, 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 Access Token
You can also get your access token via the GitHub api using curl:
curl -i -u "username:password" https://api.github.com/authorizationsOnce you have your access token from GitHub you have to enter them in your syte_settings.py located in syte > syte_settings.py. Once you open that file enter it under GITHUB_ACCESS_TOKEN
After you validated that your GitHub integration worked go back to GitHub page and change the Callback URL 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 GITHUB_OAUTH_ENABLED to False.
If you want to
暂无开放 Issues，或尚未同步最近议题。