Project: Build a Personal Website

Your first 'real' Rails project will help you get a job as well.

Scroll down...

Content

Resources

Comments

As we've said before, it is very important to take ownership of your web presence and having a simple and clear developer's website is the best way to do so. You can link to your blog, write your own story in your About page, and show off your portfolio. It's a chance to display your personality and capability completely on your own terms. It's also something of a Rite of Passage as a newly minted developer.

A personal site should not be complicated (at least not at this point) and should be just a single page. Your goal is simple: people searching for you should be able to see you and, later, your portfolio of work. Think of it as a creative resume.

Get Inspired

The best way to get inspired is by looking around the web at personal websites. The point is to build something that's clean, simple, and useful.

Start by reading Why Every Job Seeker Should Have a Personal Website for inspiration and looking over the links in this Hacker News thread. Then scroll through the sites below.

Many of the sites you see on the web just use pre-configured themes -- and with good reason. That's all you should use for now as well! A good place to start is StartBootstrap, particularly their "Creative" theme.

Example Websites

Jessica Chan's personal website

Sean Moynihan's Personal Website

Ivy Xing's Personal Website

Luke Solomon's Personal Website

A Few More

Choose a Platform

If you have prior development experience, you can build your website from scratch. Otherwise, it's fine to use a convenient editor like Wordpress. Many students end up using a simple static site generator like one of the following:

  1. RawGit.com lets you send a simple HTML file from Github to the web and is probably the simplest option out there.
  2. Github Pages allows you to produce real sites using simple Github repositories. Useful because it ties directly to your Github profile. This is your best option if you don't have a lot of experience or desire to dig in deeply but still want something reasonably functional.
  3. Jekyll, a simple but widely used static site generator which runs on Github and uses templates for the layouts.
  4. Middleman, a more complex static site generator which uses a lot of Rails-like functionality.
  5. Hugo is rapidly growing in popularity and written in Go.
  6. Surge.sh is a free deployment platform for client-side apps.

Once you have chosen your platform, you will need to read through its documentation and learn how to use it. Welcome to development!

The point here is that it doesn't actually matter what platform you use. You can choose one which is basic in anticipation of ultimately building your own or you can choose to learn about a more complex one because it's a fun experience. What matters is that you get a basic landing page out on the web somehow.

Build the Landing Page

Now get started on your new Internet home! The key thing is to get something basic out there, so you should start with just a single landing page with no frills. Only after this single page site is deployed should you move on and add any additional features.

Remember: A clean, simple page that looks good is far better than a complicated site that is a mess or half-finished.

Your site should contain:

  1. Your Name
  2. That you are a developer
  3. Your LinkedIn, Blog, and Github links
  4. A link to contact you (e.g. a mailto link)

Keep it simple! SIMPLE IS GOOD. Now build this very basic version of the site. Deploy it to your own domain (e.g. http://www.foobar.com).

Unless you have a strong opinion of how to lay out your site, just copy the layout used below. Some flavor of it is used in almost every effective junior developer's website. You don't get points for struggling to design your own site from the ground up!

Feel free to make your name a bolder "designer" font like Source Sans Pro (from Google Webfonts)

Personal Website Mockup

Add a Few Features

When you have deployed the basic version, add on a section with your portfolio and flesh out how to contact you. Use images as much as possible and make them click back to your Github for that project.

You can also include a link to your resume if LinkedIn isn't enough. Check out JSONResume.org for a series of resume themes and free hosting of them.

Appendix: Designing Your Own

  1. Google around and explore developer websites. If you read a blog post on Hacker News, look around that person's site and see what they've done well.
  2. For creative inspiration, check out the websites at the end of this article. They're much more design focused than you need to be, so don't panic.


Sign up to track your progress for free

There are ( ) additional resources for this lesson. Check them out!

There are no additional resources for this lesson just yet!

Sorry, comments aren't active just yet!

Next Lesson: Start Blogging