Hazelong.com

Getting What You Pay for your Web Design & Development

This post is for people who hire freelancers or web design/development companies to do their web design. I can safely say that I spend a good deal of time dealing with friends who have problems with their newly done website and the bad ethics of the companies they worked with.

I am annoyed at these so-called web designers sometimes and have finally decided to blog about it. All the things you want to know.. the shit things that we do and what is good. You will find out after reading this post.

Templates, templates and templates. Resell and reuse.

Why a RM 500 web design is not a web design

Promises are easy to make. Over promise and under deliver is the motto here. Here is what you are most probably promised -

1. A blog or shopping cart system
2. A contact form
3. Banner design
4. Added feature of any of the following – Slider, Facebook page widget, menu bar

To design a website takes time. Time to research and time to design. To bring the web design to live, means we have to transfer the design to codes. That takes time. Usually a month for quality design. RM 500 a month, how to survive??

That is why.. 
A RM 500 web design that is offered is usually based on templates. Templates that they have designed and coded before. Then they recycle the same thing and reuse the design. Change the colors, put in a different logo and call that a new design.

Heck, I won’t be surprised if the template it NOT original. You might even find the template in themeforest.com, woothemes.com and some other themes provider.

So to make things fast, I just buy a theme for USD 20. Sell it for RM 500 and change the logo. Easy money. But what if I do not have enough customers? I have a company to run and staff to feed.

Easy. If you wanna add a twitter widget, pay. If you wanna change the banner image, pay. If you wanna update your ‘press’ page. Pay. 

Maintenance is steady income.

Maintenance is steady income. If you can only afford to pay RM 500 for a design, please spend less and buy an original theme from the 2 links I mentioned. They are easy to customized and easy to use. Cheaper. Better. And you don’t need to pay your web designer to change 2 sentences cuz your spelling was wrong.

Something is just not right with my new website

Did you notice that everytime you update your website and no one knows about it? When you were in blogspot, your followers were all updated each time you post something new. Now nothing appears in Facebook, Twitter or even Google. What could be wrong?

Or you did a search for your own web pages in Google, but nothing appears. You have to do tedious things manually ONE by ONE like putting up images or copy pasting links from a section to another.

Want to add a banner? There is no link to do it.

You wanted to do something, but you went into the admin backend.. clicked on EVERY single link and settings page. Can’t find the exact page to fix what you are supposed to fix. What is wrong?

When we have a AWESOME web design.. we can either code it with good semantic markups or do it poorly. And the sad thing is, you won’t be able to tell the difference. But the code is actually the most important part of a website.

To check this, get on Google Chrome or Safari and just visit your website. Right click on anywhere in the page and inspect element. Check the head section, if it has less than 20 lines then it is not a very good sign.

Bad coding in head section

Head sections is where we make sure that your website is easily accessible in Google, make sure your updates can be read via any RSS reader and website like Facebook or Twitter (they have apps to automatically read your feeds). Here we also specify all the important keywords in your website that is relevant to Google searches. Like if you have a shop selling nail polishes, ‘manicure’ is an important keyword.

Healthy head section. You can tell alot by looking at this section.

Expand the body section, if everything is in tables… it is not a good sign. Tables are old way of coding a website. And this probably means you are paying each time you wanna change something to the website.

Tables. So messy. And lots of inline styling.

Proper standards are divs wraps littered with classes and IDs. Also, if you see lots of numbers in them, it means you can easily create things on the fly in the backend like Blogger page elements or WordPress widgets.

Good body section. Friendly tags for you to know what is what.

What does it means when they say they will ‘submit your website to Google and Yahoo search engines’?

This is an old technology back when Google and Yahoo bots couldn’t crawl websites and those websites goes unnoticed. However, your website will most likely go unnoticed if your head sections are lacking certain codes and especially if it does not support RSS feeds. A proper website will already contain codes to be automatically discovered by Google and other search engines.

Google Submit your Content

There is no need to submit to them unless your website is all static pages and lacking those codes. However, you can do some advanced stuff with google Submit your Content to better refine your SEO and analytics results.

The power we hold is enormous

The most important thing now

We hold alot of power as web developers. If the client is rude to us and we just broke up… no problem. I can just log on to their website and delete everything. When we hold everything, we can demand for payment when it comes to maintenance.

So to prevent this, you need to understand the following concept first :

Domains are like addresses. Hazelong.com is a domain. Hazelong.my is a domain. You can’t do anything with JUST a domain. They are just like addresses. Words only.

Servers or Hosting are like houses. You can buy them at exabytes.com.my or ipserverone.com. I use Ipserverone btw. You can assign addresses to your house. A house can have many addresses.

For example. a house can have hazelong.com, hazelong.my. And also have kyspeaks.com or cheeserland.com.

Houses do alot more than domains. They keep all your files in neat little folders. And they are programmed to magically accept certain platforms. If you are using wordpress or a CMS, find out the requirement of the CMS. Make sure your house can support it.

Like for example, wordpress need the house to be able to parse PHP language.

How do the house know which address to use? Easy. We use something call a DNS manager(usually a website) to point the addresses to that house. Without the login for this manager, your domain and your hosting is a sitting duck.

So when you have your new website make sure you get the following from them :-

1. Cpanel login – This is where you login into your house(server) and can do nifty things like creating email accounts, making folders and creating logins to access your files via FTP. You can also download backups of your database(all your posts, products, settings, pages, comments.. the meat of your website).
2. FTP login – If you do not have the Cpanel login, make sure you get your FTP login at least. And download Filezilla to login to your FTP. Sometimes we can be assholes and grant you access to just one miserable folder in your house. Like a maid’s entrance. You won’t be able to do anything in this case. Make sure you can see ALL your files and folders when you navigate through them.
3. Domain management URL & login – This is where you check when your domain is expiring. And you can have the option to change domain hosting(some companies are cheaper) when you hold this information. You can also change the owner of this domain to be under YOUR name and not the web developer’s name.
4. DNS management URL & login – With this tool, you can add new domains and point them to your houses.

When you have these 4 items, you are as free as a genie. If anything goes bad between you and the web developer, all you need to do is download backups and change to another provider. You can revoke their FTP logins, change passwords to prevent them from meddling with your website.

After all, you paid for your website, you should have the keys. In this case, the 4 logins. If you found out that you have been cheated, it is best to play pretend that you do not know anything and try to acquire this 4 keys at all cost.

Another important thing to get are instructions to do little things like uploading an image for your banner or changing a slideshow.

How to choose a good web designer/developer

1. Word of mouth – This is the safest choice. Find out how much, what will be given and make sure that there is very little maintenance needed, else the initial cheap fee you pay is just a deposit to a larger payment in the future.
2. Check the portfolio – If the portfolio shows websites that look similar, go away. Bad design, look away. Look for versatile web design that are different in both look and functions. Check out the codes for the website that they have done.
3. Avoid Static pages packages – if the package that they are offering have only static pages and nothing that you can update on your own, run. It means that you have to pay them to update each time.
4. Find out what CMS are they using – Make sure that you will be able to post news, images, slideshows or products.. or anything you planned to do with their CMS. Do not accept even if there is one lacking, cuz that means you will need to pay them to do it. Also, make sure they are honest about who created the CMS. Some developers pass other themes as if they created it.
5. They must have a good looking website. Duh.
6. Response time – Fast reply is a good sign. No reply is still ok, it probably means they are swamped and too busy. Slow replies with no justification are bad. The last thing you need is your website on downtime cuz they didn’t bother to reply your emails.

Web design services offered in a bad looking website.

Common practices of a good web design are -

• Lengthy time needed to just come up with a good concept for the website. It means that its original and not based on a template.
• Attention paid to the smallest details. Little icons like facebook and twitter are beautiful and fitting the theme. There are special little extras added to your website like jQuery animations to make your website different from the rest. A pixel of gray border makes a hell lot of difference.
•  Errors and bugs are common during the coding process as the web developer clean up the codes.

It is at least a month’s worth of job and do be prepared to fork money for a proper web design and development job.  If you are looking for e-commerce design, do be careful as they are all templates modified to fit the shopping cart system. Make sure that your website do not look like their previous works.

If you have any other questions, just comment and I’ll answer.

btw, I’m not disclosing where I get the images from. This is the reason why most of the companies do not put their prices online, so that it cannot be used to their disadvantage like this. But it’s good for education no?

Restoring Deleted Files in FTP via Cpanel

Here I am at 2 am and there is an emergency email from a client. Went to the Mac and meddle with some files, trying to right some wrong. Feeling like a boss, I started deleting all the redundant files and fucking hell, I deleted the entire album of photos. From 2007 til 2011. All the photos gone.

I started sweating. Images of cigarettes appear in my head. I sat there stoned. Ok calm down. Solutions solutions.

Option 1// .trash Folder

I navigated to each folder and start looking for the deleted folders. Especially in the Trash can. Nothing there. /.trash folder is empty too. FML

Option 2// SSH

Ok ok. fine fine. I’ll just log in to the cPanel and give myself a SSH access. No login credentials were given for either. After trying a few times, holy moly I am in the cPanel. Fuck yea meme – I feel like a hacker. No time to gloat, SSH settings here we go.

Generate public keys.. private keys. I have done this before. but the instructions are swimming in front of me cuz I am too fucking stressed. Great. And what’s that search function for Terminal again. I can’t remember. Damn.

Option 3//Backups in cPanel

Not likely to work. Since it wasn’t set up and there are just daily and partial downloads. But wait.

I mouse over the Home Directory button, I saw a tar.gz file with a DATE attached to it. I pumped my fist in the air and copy the link, change the date to the day before and downloaded it.

While I waited, I look at the server administrator email and did a google to find out who is the fucker that owns the server whom folders I deleted. Somehow I feel like it is all his fault. It is so nice to blame people at times like these.

Download is done. I unzipped. Took damn long. No luck, the date didn’t matter, it is a download of the current state of the files.

I have to try system backup. I click on the daily button. I am guessing they back up before I deleted the folders, since I made the changes 1 hour before. It couldn’t back up that fast. I had to download it before they started the new back up.

Downloading again. Paranoid, I search for the compression ratio of tar.gz. I calculated the current size and checked with my first download. It matched. Add that to the SQL file size and all I need is for this file to be WAY bigger than the first one in size. 641 mb. It’s a good sign.

I unzipped it. The files shown are weird. I saw a homedir.tar file. 634 mb. Hurray. I unzipped it.

YES.

It is all there. I lost a few files in the end but thats the recent files which I am sure my client still have them in her pc somewhere. In fact, this so called Daily backup is 5 days late. So I have 5 days worth of photos to apologize for in the end. Better than 4 years of photos.

Hope my experience help you if you are in a similar sticky situation.

How to use a big banner for your Facebook page

Have you been to Forever 21′s Facebook page or Victoria’s Secret fb page? Did you notice that their landing page is a big banner? You can have the same for your Facebook page too in just 3 simple steps!

Big banner when people visit your Facebook page

I have recently done the same for my Paintlust Facebook page and its really easy to do this..

Clickable banners for your Facebook fan page.

Step 1 : Install the Wildfire iFrame app

Click here and click on Install this app to continue..
You will be prompted to choose a page to add to, select your page and continue.

Step 2 : Creating the banners

Before you continue, you have to design your banners and photos. Make one picture for each link and they have to be 520px wide only.

Insert your html

After you have designed your banners, in the iFrame app’s Fans view type in your html.  I usually do a clickable image link something like this :

<a href="http://linkhere.com"><img src="http://imageurlhere.com"></a>

Stack all your html up in the Custom HTML text box. When you are done, do the same for Non-Fans view Custom HTML.

Save and Preview, continue editing until you are satisfied.

Step 3 : Make this tab your landing page

Now you need to set this tab to be the default tab when people visit your Facebook page. To do that, go to Edit Page > Manage Permissions > Default Landing Tab

Make it the landing page!

And set the Welcome tab to be the default.

There all done!

Support my Facebook page if you are so kind

Brief CSS Workflow tutorial without design

Today I would like to share how I usually CSS code a website without a pre made Photoshop design of the website. This is just the workflow that I usually follow and I hope you will enjoy my post

The software

CSSedit

I usually use CSSedit because this is the software that allows me to code CSS the fastest. Through out this article, you will get to see what this software can do.

If you are not using CSSedit, I recommend that you work with either Safari or Chrome in your CSS projects, this can save you a lot of hassle when you check other browsers later on.

Coding the theme core

So what I usually do is code my WordPress theme or website theme in PHP & HTML first. I layout everything properly in divs without worrying about CSS.

Base CSS

CSSedit's override function. Just open any website in the live preview and you can now override any CSS on the fly!

Every good website need at least 2 starting CSS file. You need a reset.css, this is basically a bunch of CSS codes that tells every browser out there to behave the same. You will spend less time writing different codes for other browsers if you have a good reset.css.

Get your reset.css from either of these coders, that or write your own. Its just a one time thing.

• Eric Meyer’s reset
• YUI 3 Yahoo reset
• and others..

After throwing in the reset, you need your base CSS. By saying base, it means you need the essentials to style all the common attributes for today’s web. You may want to have different ones for certain CMS like for instance if you are on WordPress, you need to include styling for their post gallery and sticky posts.

An example of the base CSS that you can use to start up your CSS project each time

This would be good enough to start you on any CSS project, try not to be too specific when it comes to this or else it will be hell of a ride to customize them. Keep them light with only some font styling and floats. As long as they are easy to change.

Don't forget to include base CSS for form styling

Live Preview on the left, Style.css override on the right

Once you are proper, you can fire up CSSedit and open up your live website on the left (in this case, art.hazelong.com) and override the main CSS file that you want to change. The funky thing about CSSedit is as you code, you can see the website transform automagically!

As you can see, the website is now very bare but it looks simple enough for us to work on.

Headings is important

Each topic comes with a set of Covered CSS elements that you can research and learn more about them before you continue.

Covered CSS elements :

1. font-family
2. font-size
3. line-height
4. H1,H2,H3,H4,H5

First thing I like to do is establish the mood for the website, since we do not have a design to go with this time. The very first thing is to give it a nice font for all the headings and body text. This can determine the direction of the design.

Instant fonts for your website

It’s 2011, unless you are still stuck in 2005 you can continue to use SIFR or images for fonts but all the cool dudes are using Google Font Api now. Make the switch!

Decide on the fonts and the design that you are going for.

This is what I get after I have decided on the font families. I am not too worried about size or colors yet.

Position & Size makes everything nice!

Covered CSS elements :

1. position
2. width, min-width, max-width
3. vertical-align
4. display
5. *not recommended : height, min-height, max-height
6. overflow
7. float
8. clear
9. padding
10. margin
11. font-size

Next comes the fun part. Push your divs up, down, left, right to get the layout that you want. Amend your code to allow for further CSS customization if need be.

At this stage, I only worry about positioning and making sure everything is the correct size.

I don’t really care about colors for now but I block in some colors to get the feel that I want. I may change everything in the next step. Note that the number 5 in red aligns with the picture’s top. This is all about alignment, top, middle or bottom. Pick one that makes the design look clean.

Generous padding around text doesn't hurt your users' eyes

Learn the difference between padding and margin. I usually have a rule when I am working with paddings, I don’t declare padding on elements that has a declared width. This prevent a lot of browser conflicts with their different rendering of box-model.

Don’t do this :

div{width:500px; padding:20px}

Do this instead :

div{width:500px;}
div #element-inside-div{padding:20px}

Buttons and links are given the proper padding and sizing. Grid layouts have to have the same margin horizontally and vertically

I repeat this for all pages and make sure everything is in order before I continue to the next step. Here is a list of troubleshooting that might help you :

1. My floats fuck things up! Read more about overflow:hidden
2. I don’t know how to align elements! Read more about display, position:relative and use margin to push things to the desired position.
3. How do I get things to center? Read  more about margin:0 auto; vertical-align and text-align
4. My design looks messy, why? The more things that align together, the less messy your website will look. Be pixel perfect. Get x-Scope to help.

Pretty things and CSS3

Covered CSS elements :

1. background-image, background-repeat, background-repeat
2. color, backgound-color
3. border

CSS3 generators that you will love:

1. Rounded corners // border-radius
2. Background Gradient // via background-image
3. Text Shadow // text-shadow
4. Other Shadows // box-shadow

Note the icons for the search bar, email icon in the social sharing area and the number 5 background

Icons and background images do a hell lot of difference. The first thing you gotta do is throw in a background image and then work on your icons. This is where you finalize your design, I have decided to change the Heading’s font. Pick a color scheme and stick to it. This is the final round.

Icons are all lumped into ONE single png file. (Yes you need the PNG fix plugin/script)

Before you save your icons separately one by one, note that the standard now allows us to put everything into one file, I usually call this the sprite.png. Loading this one time is better than requesting every single icon or background image. To use this file, you have to set the background-position so that the correct icon shows up.

#element{background-image:/sprite.png;
background-repeat:no-repeat;
background-position: 30px 120px; /* this finds the correct icon */ 

Buttons and background images clean up the design

Now it is also time to do all the CSS3, so put in all the rounded corners and gradients that you want.

This current stage is also the only set of codes you need to change when you want to revamp your website according to trend.

All these pretty stuff are dependent on trend, doing this at one go with one group of CSS separate from the positioning CSS makes it easier to change and amend when you decide to give your website a haul next time.

The Polishing and Finishing

This is the deciding step that separates the awesome design from the good design. You need user friendly stuff and also some easter eggs here and there.  For this step, you need to learn jQuery, HTML5 or master CSS3 animation properties. Finishing touches does what it is called, it finishes a piece of creative work. If you skip this part, your design will lack the funk that it needs to have.

Clicking on the form's input selects it and gives it a glow. (from Twitter trend)

This is very subjective and depends on what you like after browsing the net every day. I have my own default set of finishing touches, and I add on to them in every website.

Comment reply buttons fade in when you mouseover the comment

Because my comments list design is mostly whitespace, having a button for every comment is a huge distraction and I have decided to keep them out of the eye’s sight until the user needs them.

The longer the tag, the more popular it is

I also wanted a multicolored tag cloud that makes the tag longer the more popular it is. The trick to do this is WordPress is very simple. I love to include a scripts.php in my theme (note that it is .php and not .js) Making it .php allows my scripts to take in PHP functions. The script that I use is included here, (I am still a noob in jQuery and nuked my Switch function so I switched to if/else instead)

<script type="text/javascript">// <![CDATA[
var $j = jQuery.noConflict(); //enable the use of $j
$j(document).ready(function() {
//tags width
$j(".tagcloud a").each( function(){
var topic = $j(this).attr('title').split(' '); //splits the "title = 5 topics"
var percent = topic[0]/*100 //uses the number of topics and get the width of the tag from there
var color = "#1E859E" //default color
$j(this).css("width", percent + '%' ); //sets the width of the tag
if (percent <= 10) { color = "#1E859E"; //individual colors for each set } else if (percent > 10 && percent <= 20) { color = "#209D9C"; } else if (percent > 20 && percent <= 30) { color = "#1F9E81"; } else if (percent > 30 && percent <= 40) { color = "#22B065"; } else if (percent > 40 && percent <= 50) { color = "#48B127"; } else if (percent > 50 && percent <= 60) { color = "#82B128"; } else if (percent > 60 && percent <= 70) { color = "#A9B128"; } else if (percent > 70 && percent <= 80) { color = "#B07126"; } else if (percent > 80 && percent <= 90) { color = "#B12727"; } else if (percent > 90 && percent <= 100) { color = "#B02547"; } $j(this).css("background-color", color ); //sets the  background color }); });
// ]]></script>

I also sorted my tags according to the topic count to make the design look neater.

Don't forget your error pages

All done! Wait, now comes the horrid part!

Check your browser version. Omaikot I actually made a meme comic fml.

One last thing to do, browser checking. Before you open up all the browsers and key in your website link, make sure your browser is updated to the latest version.

Decide on a set of browsers and check all of them

It is usually like this, if it works on Safari it works on Chrome. If it works on Firefox, it most likely will work in Opera. Check all the forms, positioning and font-size. You can even be an anal ass by making screenshots of all of them and then layering all of them with the Difference blending mode in Photoshop. I don’t do that,  but if you want to be my guest.

Since I work on Safari, Chrome plays nice with my website and I only need browser specific CSS for Firefox and Opera. This is the code that you will need to fix your CSS.

/*--Firefox--*/
@-moz-document url-prefix() {
/* your css here */
}
/*--Opera--*/
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){
/* your css here */
}

What is next after this? After this, you will need to code a mobile theme, which will be discussed next time. Have fun coding!

Installing Image Magick for Paperclip on Centos 5

Many projects require the use of Image Magick to automatically resize and generate thumbnails for their applications. Recently, I have set up my server to house Rails applications and the next steps would be to install Image Magick and also a mail server to handle emails.

Install Image Magick

yum install gcc*

Note that yum install imagemagick will not work on Centos properly.

cd /tmp

Head to ftp://ftp.fifi.org/pub/ImageMagick/ and find out the latest release of the .tar.gz file.

wget ftp://ftp.fifi.org/pub/ImageMagick/ImageMagick-x-x-x-x.tar.gz

This will download the files into the tmp folder.

tar xzf ImageMagick-x.x.x-x.tar.gz
cd ImageMagick-x.x-x.tar.gz
.configure

Untar the file and configure the installation.

make 
make install

After this I realized that I actually need the RMagick gem. However in my local machine I did not install this and Paperclip works just fine. I am just gonna omit the RMagick gem and see how things goes.

It actually works so long as there is a link to the Imagemagick folder in the environment file. In /config/environments/production.rb insert this code :

  Paperclip.options[:command_path] = "/usr/local/bin/"

The path may differ depending on the installation, to find out the full path, you can run this command.

 which convert

Now in your /home/demoapp/public/system folder, you have to ensure that it has proper permission so that Paperclip can write to it. You may need to change ownership to the git user if it is not working.

After that restart apache and Paperclip uploads will work.

Deploying Rails to Centos : Capistrano

Thank you for following this series, this will be the last part of the series where we actually bring our development app to our remote server. Learning Rails has been a tremendous journey for me, the learning curve is not steep at all and it allows me to experiment and also to learn how to set up my own server to house it. Thanks to all the people that wrote tutorials and made railscasts out there I have learnt so much but this is just the beginning. This would not have been possible if I wasn’t introduced to the language itself by the_empty from webdevrefinery.

Deploying Rails to Centos 5

• Part 1 // Apache
• Part 2 // mySQL
• Part 3 // Git
• Part 4 // Ruby, Gems & Rails
• Part 5 // Passenger
• Part 6 // Gitosis
• You are here!

Right, before deploying with Capistrano we should make sure our application is fully prepared for deployment. The first thing we should do is strengthen our local’s .gitignore file. It should have the following lines :

log/*.log
*.log
tmp/**/*
tmp/*
doc/api
doc/app
config/database.yml.sample

Next, we should rename the database.yml file so that it doesn’t clash with other developer’s copy since they might differ from yours. Renaming it to database.yml.sample ensures that the production’s copy remain intact and the file doesnt clashes with other developers on your team. There is a great post by Simone Carletti about this issue that you should definitely check out.

You should also make sure that you have a root path pointing to some controller, meaning your index page should be properly routed and the public folder’s index.html is removed.

If you are on a shared host, you should mind your gems cuz they might upgrade their pack of gems without notifying you. To prevent anything from breaking you should unpack each gem to the vendor folder.

local $ cd vendor
local $ gem unpack money

To enable the gems to have version control, you just need to copy the contents of the lib folder to vendor

$ cp -R money-1.5.9/lib/* .
$ cp money-1.5.9/MIT-LICENSE LICENSE-money
$ rm -Rf money-1.5.9/
$ ls

Make sure you copy in the license depending on the gem’s license agreements.

In the future when you have upgraded your gems you can follow the same procedure again :

$ gem unpack money
Unpacked gem: 'money-1.7.1'
$ cp -Rf money-1.7.1/lib/* .
$ cp -f money-1.7.1/MIT-LICENSE LICENSE-money
$ rm -Rf money-1.7.1 

Remember to update your database.yml file to include your remote server’s database for the production database and make sure that it is using the mysql2 for the production database.

There are also some things you can tighten up when it comes to security. You can read more about it in this book. Important things to note are the following:

• Never evaluate user input
• Never evaluate SQL input

One last thing to check is to make sure you have eager associations for all your active records so that you can have the best optimal database performance.

If your remote server is using mySQL but your local machine is running SQLite for your app, you might also want a copy of the mySQL gem in your local machine.

gem install mysql2

Remember to include all this in the Gemfile

group :development, :test do
gem 'sqlite3-ruby', '1.2.5', :require => 'sqlite3'
end
group :production do
gem 'mysql2'
end

Run one last time after you are done.

 bundle install

When you are done, remember to push your changes up to the gitosis server.

 git commit -am "for deploy"
git push origin master

Alright. Capistrano. Yay!

First thing to do is to install Capistrano locally in your development machine. Capistrano only runs in the local machine and it uses SSH or SFTP to connect to your remote server. You do not need to install Capistrano in your remote server.

 local $ gem install capistrano

Check if it is working by doing :

 cap

If it shows you an error of not being able to find your Ruby Gems, then you need to install the <code>echoe</code> gem.

gem install echoe

Then you can see a list of capistrano tasks.

 cap -T

Now that it’s installed and working we can start. Finally. CD into your working directory.

 capify .

Remember the dot after capify.

This will create a <code>Capify</code> file in your working directory and a deploy.rb in your config folder. To deploy, we just need to ammed the deploy.rb file.

require 'bundler/capistrano'
set :application, "demoappname"
set :deploy_to,  "/home/#{application}"

server "yourdomain.com", :app, :web, :db, :primary => true

default_run_options[:ptr] = true # Ensure password prompt is prompt true
set :repository, 'git@yourdomain.com:demoappname.git' # your private/public url and user

set :scm, 'git' #scm utility name
set :branch, 'master' #remote branch to push
set :deploy_via, :copy # If you have public like github.com then use :remote_cache
set :user, 'root'
set :admin_runner, 'root'
#set :use_sudo, false #to avoid tty error

And also add the following lines for Passenger to work.

 namespace :deploy do
desc 'Restart Application'
task :restart, :roles => :app do
run "#{current_path}/tmp/restart.txt" #tells passenger to restart app
end
desc 'Start Application -- not needed for Passenger'
task :start, :roles => :app do
#empty since using passenger
end
end

Now you can prepare your server for deployment.

cap deploy:setup

You may need to enter your password and if you get a tty error just uncomment this line from yourdeploy.rb

set :use_sudo, false #to avoid tty error

If all goes well, your application directory in your remote server should have 2 new folders, releases and current Now, go back and edit your apache config file in your remote server in the VirtualHosts chunk section. This is your current chunk

DocumentRoot /home/demoapp/public

Change it to this and you should be all set to go after you restart your apache server.

DocumentRoot /home/demoapp/current/public

Check your deployment dependencies.

cap deploy:check

Ok. Time for deployment. For the first deployment, you can do this.

cap deploy:update

Now, errors may pop up now an then.. for my first deploy, I spent the whole night figuring out what I did wrong only to realize I forgot to push my app to gitosis first. lol.

Another error would be the bundle install error where they say that I changed my Gemfile without adding Gemfile.lock to git. Hmm. I couldn’t fix it but a fresh deploy on an empty folder fixed it. I cleared out my demo app and deleted the demoapp folder.

After that, ssh into your remote server and CD into your app’s directory.

rake RAILS_ENV=production db:schema:load

This will create all the nessecary tables for your application. The reason why the deployment is separated into this 2 steps, update and rake is to enable you to debug errors faster instead of doing one whole chunk of deploying to realize that the last step does not work and you have to redo the whole thing.

If you run into errors saying that you do not have mysql2 gem then you probably installed the wrong gem. It should be mysql2 gem not mysql gem, the mysql gem is now stale and no longer supported. You need to install this gem and also define it in Gemfile PLUS ensure that database.yml uses mysql2, not mysql.

If all goes well, all tables would be created, then you can run a test of whether anything works or not by doing

 rails console [production]

>> app.get("/")

If it returns 200 or 302 (or any other 2xx or 3xx code, or even 4xx if you haven’t configured the ”/” url for your application), you’re probably set. If it returns something in the 500’s, you’ll want to check your log/production.log and see why it blew up.

Next, try to access any static asset in your public folder by pointing your browser to http://yourdomain.com/javascripts/prototype.js
It should display the javascript file. If it doesn’t you probably have some issues with apache. Make sure your VirtualHosts is pointing to demoapp/current/public folder

When it works, it is time to start the magic.

 cap deploy:start

I need to cry now. Thanks for reading. Peace out.

After that, for every subsequent release you can just issue this command.

 cap deploy