How to Build a Website

Posted:

Setup

  1. Get a Mac with an Internet connection, and turn it on.

    Experienced software engineers use Macs because they just work.

  2. Install Google Chrome, and set it as the default browser.

    It's fast and lets you inspect parts of a website by typing Command-Shift-C. (Although, I still prefer Firefox & Firebug for intense web development.)

  3. Install Xcode.

  4. Open Terminal (Press Command-Spacebar, start typing "terminal," and hit enter once Terminal is highlighted.), enter the following commands, and follow any instructions that Terminal prints out.

  5. Append some niceties to your ~/.bash_profile file.

    curl -s https://raw.github.com/gist/380318/.bash_profile >> "$HOME/bash_profile"

    Note: If you already have stuff in your ~/.bas_profile, open it in a text editor to fix any conflicts.

  6. Install Homebrew.

    ruby -e "$(curl -fsSL https://raw.github.com/gist/323731)"

  7. Install Git.

    brew install git

  8. Install useful Git aliases & configurations.

    bash <(curl -s https://raw.github.com/gist/419201/gitconfig.bash)

  9. Install RVM. Follow the instructions output by the command below:

    bash < <(curl -s https://rvm.beginrescueend.com/install/rvm)

  10. Install the current stable version of Ruby, according to Ruby Download.

    rvm install 1.9.3-p0

  11. Set your default Gemset to global.

    rvm --default use 1.9.2@global

  12. Update Ruby Gems and cleanup old versions of gems.

    gem update --system
gem update
gem cleanup

  13. Install a web framework, like Rails, Sinatra, or Jekyll, with which to build your website. Execute one of the following lines.

    gem install rails
gem install sinatra
gem install jekyll

  14. Create a directory in which to store all your websites. I like to put them in Projects.

    cd                # Change directory to home.
mkdir Projects    # Make a directory named "Projects."
cd Projects

  15. Create your first website.

    • Sinatra

      mkdir website # where "website" is the name of your website
cd website

      Highlight & copy (Command-C) the following code snippet:

      require "sinatra"

get "/" do
  "Hello World!"
end

      Run the following command in Terminal to paste it into a new file called app.rb:

      pbpaste > app.rb

    • Rails

      rails new website # where "website" is the name of your website
cd website

  16. Configure for RVM (optional), add all unignored files to the Git index, and make your first commit.

    echo rvm 1.9.2@website --create > .rvmrc # if you want a separate gemset
echo .DS_Store >> .gitignore # Ignore `.DS_Store` files.
git add -A                   # Add all unignored files to the index.
git ci                       # Stage all changes to files tracked by Git, and commit.

    To enter a commit message, type:

    1. i to enter insert mode,
    2. a commit message, like "1st commit: rails new website,"
    3. Control-[ (or Esc) to go from insert mode back to normal mode,
    4. Shift-ZZ to save & quit vim.

  17. Install Pow, and use it to view the website in a browser as you build it.

    curl get.pow.cx | sh
cd ~/.pow
ln -s ~/Projects/website

  18. View the website locally at http://website.dev/.

  19. Follow Rails Guides: Getting Started with Rails to enhance & customize the website.

  20. When the website is complete, deploy it for free with Heroku, which is built on the Amazon EC2 cloud.

Other stuff...

Ruby:

HTML5, CSS3, and Javascript:

Use jQuery, JSON, and AJAX with JSON to only load the parts of the page that change.