Monday, September 27, 2010

Make and Host Your Own Customized, Personal Landing Page in a Few Minutes

By Adam Dachis

Make and Host Your Own Customized, Personal Landing Page in a Few Minutes

Make and Host Your Own Customized, Personal Landing Page in a Few MinutesPersonal landing like Flavors.me are really popular right now, but we prefer more complete control over what Google has to say about us. Here's a Lifehacker-made, easily customizable, open-source solution that you can place on any server and have running in minutes.

What do you need to get started? Not much:

Click here for a demo.

Once you download the ZIP file containing the customizable homepage—which we've dubbed Lifehacker.me—you'll need to unzip and upload everything to a directory on your web server. (If you want the page to show up as your site's default home page, you'd upload every file inside the lifehackerme folder to the root of your server.)

Once you've done that, all you need to do is configure the config.php file in the conf directory. The following video will walk you through the entire process and show you what everything does.

Make and Host Your Own Customized, Personal Landing Page in a Few Minutes

If you don't want to sit through a video, however, here's a quick start guide.

  • First things first: Open up config.php with your text editor of choice (it's in the conf directory). You'll see a bunch of options. You can customize the visual style if you want, but you don't have to. Here you can add text shadow, change the color of your name and the navigation, and add a custom background image. A background image can be any full URL, so just upload a photo somewhere on your server and point it toward that. Any image will work as it's big enough to fill the browser window.
  • Setting up Flickr is the most work you're going to do, but it's really pretty easy. All you have to do is enter your Flickr username as you see it in your photo stream URL. For example, my URL is http://flickr.com/photos/dachis so my username, in this case, would be dachis. In addition to the username, you need a Flickr API key. You can sign up for a free API key (approval is very fast). You'll want to set $accounts['flickr']['username'] equal to your username and $accounts['flickr']['apikey'] to your API key.
  • Adding your Vimeo, YouTube, and Twitter accounts are much easier because you only have to specify your username. For example, $accounts['vimeo']['username'] would be set to your Vimeo username. This is the same for both YouTube and Twitter. That's all you have to do.
  • In the photos and videos section you'll see $general['about_photos'] and $general['about_videos']. Setting these variables to a string of text will let you add a description to each page.

That's it. If you don't want to add a particular account, just leave it blank. It won't show up in your navigation.

Make and Host Your Own Customized, Personal Landing Page in a Few MinutesClick the image above for a closer look.

Right now Lifehacker.me supports Flickr, Vimeo, YouTube, and Twitter, but if you want to add services or customize beyond this point, you can do anything you want. This landing page is completely open source, and we're hosting the source on github. Feel free to alter the CSS and add new features. It's yours to use as you please. If you do something really fun, we'd love if you forked the code on github and submitted pull requests so others can benefit from your new functionality!


Lifehacker.me makes use of two awesome open source projects, PrettyPhoto and Galleria. These are both really awesome tools in their own right and are free to use in your projects. Be sure to check them out!

Number of comments
  • Share this:

No comments:

Post a Comment

CrunchyTech

Blog Archive