Eric Terpstra

On web development. Mostly.

Show menu Hide menu

CategoryTutorials

Things to Learn

Phaser Starter Project for WebStorm and Chrome: Modular TypeScript, Code Completion, and Live Debugging

June 3, 2013 / / 16 Comments

Game in Action

DEMO | CODE

Getting started with TypeScript and Phaser on OSX and Ubuntu has been a tricky proposition. My requirements for a development environment were as follows:

  • Use TypeScript as the primary language
  • Break the project into small files – preferably one module or class per file
  • Have all the benefits of TypeScript utilized by my IDE, namely code completion, error checking, and documentation for function signatures
  • File watchers that generate javascript and source maps on file save
  • Live debugging of TypeScript files

Thanks to the latest WebStorm (6.0.2 v129.541 as of this writing), Require.js, and Chrome DevTools, I have a great development environment set up to create Phaser games on OSX and Linux. Here’s how I did it:

First, grab the starter project from my GitHub account (thanks to Jesse Freeman for the inspiration).

git clone git@github.com:ericterpstra/phaser-webstorm-template.git

Then get the following four files from the Phaser ‘build’ folder:

  • phaser.js or phaser.min.js
  • phaser.d.ts
  • phaser-fx.js or phaser-fx.min.js
  • phaser-fx.d.ts

Copy those files to /phaser-webstorm-template/lib/

Then download require.js and put it in the same lib folder.

The contents of the lib folder

The contents of the lib folder

Now start WebStorm 6 (get the EAP version here). Close the existing project if it is open, and go to the welcome screen. Choose Create New Project from Existing Files. Then choose Source files are in a local directory, no Web server is yet configured and click Next.

A file selection window should appear. Find the phaser-webstorm-template folder, select it, and click the Project Root button. Then click Finish.

Find the phaser folder and make it the project root.

Find the phaser folder and make it the project root.

When the project finishes loading, open game/game.ts. After a few seconds, WebStorm should prompt you to add a ‘TypeScript’ file watcher. Click the Add Watcher link.

Click 'Add Watcher' when prompted.

Click ‘Add Watcher’ when prompted.

Once the watcher is added, go the the Webstorm menu (File menu in Linux) and open Preferences…. Click File Watchers under the Project Settings section, and double click the TypeScript entry. When the Edit Watcher window appears, add the following text to the Arguments: field:

 --target es5 --module amd
Edit the File Watcher settings.

Edit the File Watcher settings.

Click OK and return to the code editor. Open game/objects/Player.ts and also game/game.ts if it is not open already. Manually save both files to trigger the file watcher and regenerate the javascript and source map for each file. If this was successfull, the .js and .js.map files will appear underneath their respective .ts files, and can be viewed by clicking the expand arrow (see screenshot below).

Files

You should now be able to use WebStorm and have lots of assistance for TypeScript. Code completion, method signatures, documentation, error reporting, and all the other benefits of WebStorm should now be available.

Code hinting should be working in .ts files.

Code hinting should be working in .ts files.

For live debugging of code, open Google Chrome and point it to http://localhost:63342/phaser-webstorm-template/index.html and open the Chrome DevTools (Cmd-Alt-i on OSX, F12 on Linux). Click the Settings button (the little gear icon in the bottom-right corner of the DevTools window). Check the box next to Enable source maps in the General section.

Enable source maps.

Enable source maps.

Now, from the Sources tab, you should be able to open the Player.ts and game.ts files and set breakpoints and watch expressions and step through the code one line at a time! Awesome, right?

Chrome Debugging

That’s basically it. WebStorm apparently has TypeScript debugging built in as well, but I’ve had trouble getting it to work reliably. Once I do, I’ll update this post with info on live debugging from within WebStorm as well. Also in the works is a screencast and more in-depth explanation of the actual code within the project itself. Stay tuned.

Special thanks to Photon Storm for the Phaser framework, Jesse Freeman for the original Phaser project template, and for help debugging my modular TypeScript.

AngularJS SignIt! – Interchangeable Parse, StackMob and Backbone Services

October 21, 2012 / / 0 Comments

Note: This is a companion post to Example CRUD App – Starring AngularJS, Backbone, Parse, StackMob and Yeoman. If you haven’t read that yet, please do so, otherwise this might not make much sense.

The AngularJS SignIt! application basically has three different interactions with a web service – fetch petitions, save a signature, and fetch a list of signatures based on the selected petition. That’s it – a get, a save, and a query. Initially, I was only using Parse.com to store data, so it was possible to include Parse specific objects and methods in my controller to save and get data.

But then I remembered I have a StackMob account just sitting around doing nothing, and thought I should put it to good use. So now I have two (slightly) different options to store my signatures. Rather than jumbling up my controller with code specific to StackMob and Parse, I created a module to abstract the Parse and StackMob APIs into their own services. These services could then hide any code specific to Parse or StacMob behind a common interface used by the controller.

With the back-end(s) abstracted, all the controller needs to worry about is calling saveSignature, getPetitions, and getSignatures. Below is a severely truncated version of the Main Controller that shows the three methods in use. Notice there is no mention of Parse or StackMob.

var MainCtrl = ngSignItApp.controller('MainCtrl', function($scope,DataService) {

  // GET A LIST OF SIGNATURES FOR A PETITION
  $scope.getSignatures = function getSignatures (petitionId) {
    DataService.getSignatures(petitionId,function (results) {
      $scope.$apply(function() {
        $scope.signatureList = results;
      });
    });
  };

  // SAVE A SIGNATURE
  $scope.saveSignature = function saveSignature() {  
    DataService.saveSignature($scope.user, function() { //user is an object with firstName, lastName, email and signature attributes.
      $scope.getSignatures($scope.select2); //select2 is the value from the petition dropdown
    });  
  };

  // GET ALL PETITIONS
  DataService.getPetitions(function (results) {
    $scope.$apply(function() {
      $scope.petitionCollection = results;
      $scope.petitions = results.models;
    });
  });

});

If you look closely, you’ll see that each service method is prefixed with DataService. This is the injectable that provides either the StackMob service, or Parse service to the controller. Each of those services has an implementation of the getSignatures, saveSignature, and getPetitions. Take a look:

angular.module('DataServices', [])
// PARSE SERVICE
.factory('ParseService', function(){
    Parse.initialize("<PLEASE USE YOUR OWN APP KEY>", "<PLEASE USE YOUR OWN API KEY>");
    var Signature = Parse.Object.extend("signature");
    var SignatureCollection = Parse.Collection.extend({ model: Signature });
    var Petition = Parse.Object.extend("petition");
    var PetitionCollection = Parse.Collection.extend({ model: Petition });

    var ParseService = {

      // GET ALL PETITIONS
      getPetitions : function getPetitions(callback) {
        var petitions = new PetitionCollection();
        petitions.fetch({
          success: function (results) {
              callback(petitions);
          }
        });
      },

      // SAVE A SIGNATURE
      saveSignature : function saveSignature(data, callback){
        var sig = new Signature();
        sig.save( data, {
                  success: function (obj) {callback(obj);}
        });
      },

      // GET A LIST OF SIGNATURES FOR A PETITION
      getSignatures : function getSignatures(petitionId, callback) {
        var query = new Parse.Query(Signature);
        query.equalTo("petitionId", petitionId);
        query.find({
          success: function (results) {
            callback(results);
          }
        });
      }
   
    };

    return ParseService;
})
// STACKMOB SERVICE
.factory('StackMobService', function(){
    // Init the StackMob API. This information is provided by the StackMob app dashboard
    StackMob.init({
      appName: "ngsignit",
      clientSubdomain: "<PLEASE USE YOUR OWN SUBDOMAIN>",
      publicKey: "<PLEASE USE YOUR OWN PUBLICKEY>",
      apiVersion: 0
    });

    var Signature = StackMob.Model.extend( {schemaName:"signature"} );
    var SignatureCollection = StackMob.Collection.extend( { model: Signature } );
    var Petition = StackMob.Model.extend( {schemaName:"petition"} );
    var PetitionCollection = StackMob.Collection.extend( { model: Petition } );

    var StackMobService = {
     
      getPetitions : function getPetitions(callback) {
        var petitions = new PetitionCollection();
        var q = new StackMob.Collection.Query();
        petitions.query(q, {
          success: function (results) {
              callback(petitions.add(results));
          },
          error: function ( results,error) {
              alert("Collection Error: " + error.message);
          }
        });        
      },    

      saveSignature : function saveSignature(data, callback){
        var sigToSave = new Signature();
        sigToSave.set({
          firstname: data.firstName,
          lastname: data.lastName,
          petitionid: data.petitionId,
          email: data.email,
          signature: JSON.stringify(data.signature) //Also, StackMob does not allow arrays of objects, so we need to stringify the signature data and save it to a 'String' data field.
        });

        // Then save, as usual.
        sigToSave.save({},{
          success: function(result) {
            callback(result);
          },
          error: function(obj, error) {
            alert("Error: " + error.message);
          }
        });
      },

      getSignatures : function getSignatures(petitionId, callback) {
        var signatures = new SignatureCollection();
        var q = new StackMob.Collection.Query();
        var signatureArray = [];

        q.equals('petitionid',petitionId);

        signatures.query(q,{
          success: function(collection) {
            collection.each(function(item) {
              item.set({
                signature: JSON.parse(item.get('signature')),
                firstName: item.get('firstname'),
                lastName: item.get('lastname')
              });
              signatureArray.push(item);
            });
            callback(signatureArray);
          }
        });
      }
   
    };
    // The factory function returns StackMobService, which is injected into controllers.
    return StackMobService;
})

This is an abridged version of the DataServices module. To see the full code, as well as many more comments explaining the code, head over to GitHub. The main point to observe here is that each service has slightly different code for getSignatures, getPetitions, and saveSignature. Also, each service has its own initialization code for its respective back-end service. The controller could care less though, because as long as the service methods accept and provide data in the right format, it’s happy.

But how does the controller know which service to use? Well, if you paid attention to the controller code, you’ll see that ‘DataService’ is injected, which is not defined yet. In the full code, there is a service defined all the way at the bottom of the file. It looks like this:

.factory('DataService', function (ParseService,StackMobService,BackboneService,$location) {
  var serviceToUse = BackboneService;
  if ( $location.absUrl().indexOf("stackmob") > 0 || $location.absUrl().indexOf("4567") > 0 ) serviceToUse = StackMobService;
  if ( $location.path() === '/parse' ) serviceToUse = ParseService;

  return serviceToUse;
});

All the other services (ParseService, StackMobService, and BackboneService) are injected into this service. In case you are wondering, BackboneService is yet another back-end service that can be used in place of the others – see the full code for details. The code above simply examines the URL and decides which service get injected via DataService. If ‘parse’ appears as the url path (e.g. www.example.com/app/#/parse), then ParseService is returned. StackMob requires that HTML apps be hosted on their servers, so just check the domain name for ‘stackmob’ and return the StackMob service. If neither of these conditions occur, then the BackboneService is returned, and no data is saved.

In retrospect, I think what I’ve got here is the beginnings of an OO-like interface – where a set of functions are defined to form a contract with the client ensuring their existence. And the implementations of that interface are a set of adapters (or is it proxies?). If I had to do this over, I would use a proper inheritance pattern with DataService as the abstract parent, and the other services as the implementations or subclasses. One of these days I’ll get around to refactoring. One day…

Full Source: https://github.com/ericterpstra/ngSignIt

Install Yeoman and all its dependencies in Ubuntu Linux

October 1, 2012 / / 8 Comments

Yeoman is awesome, but holy jeez are there a lot of requirements to get it fired up for the first time. Listed below are all the commands I typed in to get every last Yeoman dependency installed. I did this on 64-bit Ubuntu. For 32-bit, you’ll need to download a different version of PhantomJS, but otherwise I’m pretty sure everything else works the same.

CURL

sudo apt-get update
sudo apt-get install curl

GIT

reference: http://evgeny-goldin.com/blog/3-ways-install-git-linux-ubuntu/

sudo apt-get install libcurl4-gnutls-dev libexpat1-dev gettext libz-dev libssl-dev
wget --no-check-certificate https://github.com/git/git/tarball/v1.7.12.2
tar -xvf v1.7.12.2
cd git-git-04043f4/
make prefix=/usr/local all
sudo make prefix=/usr/local install
git --version
rm -rRf git-git-04043f4
rm v1.7.12.2

NodeJS

reference: https://github.com/joyent/node/wiki/Installation

sudo apt-get install python-software-properties
sudo add-apt-repository ppa:chris-lea/node.js
sudo apt-get update
sudo apt-get install nodejs npm

RVM + Ruby 1.9.3

reference: http://ryanbigg.com/2010/12/ubuntu-ruby-rvm-rails-and-you/
You might want to grab a coffee. This is a long one.

sudo apt-get install build-essential
curl -L get.rvm.io | bash -s stable
echo '[[ -s "$HOME/.rvm/scripts/rvm" ]] && source "$HOME/.rvm/scripts/rvm"' >> ~/.bashrc
. ~/.bashrc
sudo apt-get install build-essential openssl libreadline6 libreadline6-dev curl git-core zlib1g zlib1g-dev libssl-dev libyaml-dev libsqlite3-dev sqlite3 libxml2-dev libxslt-dev autoconf libc6-dev ncurses-dev automake libtool bison subversion
rvm install 1.9.3
rvm use 1.9.3
rvm --default use 1.9.3-p194
ruby -v

Compass

reference: http://compass-style.org/install/

gem update --system
gem install compass

PhantomJS

Using apt-get will get you v. 1.4.0. The method below gets the latest version. For 32-bit, just remove ‘_64’ from each command.
reference: http://devblog.hedtek.com/2012/04/phantomjs-on-ubuntu.html

cd ~/
wget http://phantomjs.googlecode.com/files/phantomjs-1.7.0-linux-x86_64.tar.bz2
tar -xvf
cd /usr/local/share
sudo tar xvf ~/phantomjs-1.7.0-linux-x86_64.tar.bz2
sudo ln -s /usr/local/share/phantomjs-1.7.0-linux-x86_64/ /usr/local/share/phantomjs
sudo ln -s /usr/local/share/phantomjs/bin/phantomjs /usr/local/bin/phantomjs
phantomjs --version
rm ~/phantomjs-1.7.0-linux-x86_64.tar.bz2

JPEGTRAN / OptiPNG

sudo apt-get install libjpeg-turbo-progs
sudo apt-get install optipng

YEOMAN!!!

(finally!)

sudo npm install -g yo grunt-cli bower

And we’re done.

Code HTML5 in the Cloud with StackMob, Cloud9 and GitHub

May 15, 2012 / / 0 Comments

In my recent efforts to learn more about modern Javascript I’ve been looking around at different Backend-as-a-Service (BaaS) companies.  They presumably would provide a dead simple server option for whatever I’m working on so I can focus all my attention on the front-end.  I signed up for a number of different accounts to explore the feature set and documentation, and settled on StackMob due to the perceived ease of use, and the fact that their Javascript SDK is built on backbone.js (another current interest of mine).  After creating (and deleting) some dummy apps to get a feel for things, I eventually got a very simple, but usable, database put together.  What is interesting about StackMob is that they will host your front-end app, as well as provide the back-end.  Not only that, but you deploy to your front-end development server directly from GitHub.  It’s a pretty slick system.  And as soon as I realized that GitHub projects can be edited via the Cloud9 IDE, I had a nice little dev environment fully hosted in the cloud.

I’m not saying this combination is at all practical for serious use, but it could be useful in a pinch, or when monkeying around with some prototypes while using multiple computers.  Plus Cloud9 is just fun to look at, and this provided a good excuse to use it for real once in a while.  Oh, and it’s all free (as in beer).

To get started, sign up for a Stackmob account, and a GitHub account.  Both sites have amazing documentation for getting up-and-running on their respective services.  GitHub has very detailed instructions for setting up your account with a git client on Linux, OS X, and Windows.  If you haven’t already, follow those instructions, but do not yet create a repository.

Getting started in StackMob is just as easy.  Sign up for an account, then create an app.  Every app generated by StackMob starts with a Users table, which is enough for now.  Grab the Javascript SDK from the Get your SDK page, and follow the setup instructions in the Setup your JS SDK Dev Environment section.  Step 2 is optional if you just want to edit your app in the Cloud9 IDE.  Otherwise make sure you have Ruby installed and give it a try.  In Step 3, you will be instructed to create a GitHub repository. Do that.  While you are logged into GitHub, also set up automatic fetching, so your code will get deployed to your development server every time you push to GitHub.  The Hosting Your HTML5 App… page has all the necessary instructions. Make sure you have committed and pushed some files (likely the StackMob SDK) to your GitHub repository.

By this point, you can edit files locally, push the files to GitHub, and see your changes reflected online.  To start editing online, go to c9.io and log in using your GitHub account.  When you reach your dashboard, you should see a big green button that says Create New Project in the left-hand sidebar, as well as a section in the sidebar labeled Projects on GitHub.  The URL for your dashboard is http://c9.io/yourgithubusername.  If you cannot see your GitHub project, click the refresh button in the far lower left corner of the screen.  Select your StackMob GitHub project from the sidebar menu, and click Clone to Edit.  In the modal window, select Shared Development Server and click Checkout. It will take a minute, but your project should be created and listed under My Projects. Select your project and click Start Editing.  You should be taken to the editor window where you can open and edit your project files.  Take a few minutes to admire the lovely UI and its many features, and edit a file or two.

To test out your edits, open the console window (Menu: Windows > Console ) and run your usual git commands – e.g. git commit -a -m “msg” and git push. The Cloud9 git client will push your changes to your GitHub master branch, and those changes will then propogate almost immediately to your hosted StackMob application.

This is creating a web application in the cloud.  Development-in-the-cloud is not quite cut out for daily use, but if you really need to try out some code or get in a quick change from any computer (or tablet, or phone), this is a nifty way to do it.

 

Erase (zero out) free disk space on OSX, Windows and Ubuntu

March 31, 2012 / / 2 Comments

Three operating systems, three file systems, three methods to zero out disk space.  Fortunately, they are all pretty simple. Doing this is a good idea right before creating a drive image for backup, as it makes compression more efficient.

OSX – HFS+ (Mac OSX Journaled)

  1. Open Disk Utility
  2. Click on the OSX partition
  3. Click Erase from the tabbar menu
  4. Click Erase free space… button
  5. Choose the Fastest option – this will fill the partition with zeros one time.

Windows 7 – FAT32, NTFS, exFAT

  1. Download SDelete from Microsoft Technet
  2. Copy sdelete.exe to C:\Windows\System32 (or any folder in your system PATH).
  3. Run SDelete from the command-line using:  
    sdelete -p 1 -z c:\

    (where ‘c’ is the target drive letter)

Ubuntu – ext3, ext4

  1. Install the secure-delete package: 
    sudo apt-get install secure-delete
  2. Use fdisk to find the correct drive partition:
    fdisk -l

     The drive in question will be something like /dev/sda or /dev/sdb.  Each partition is numbered, like /dev/sdb1 and /dev/sdb2

  3. Mount the drive partition (if it is not already):  
    sudo mount /dev/sdb1 /mnt/hdd1
  4. Run 
    sfill -Ilz /mnt/hdd1

    where ‘hdd1’ is the location of the mounted partition in the filesystem.

Host Your Friends’ Websites for Fun and Profit! A Reseller Account Video Tutorial

October 9, 2008 / / 0 Comments

A little over two years ago, I signed up for a reseller account with HostingZoom and I’m very glad I did.  I don’t host very many sites, but the ones I do host pay for my own sites, as well as some non-profit sites that I host for free.  Not only this, but my friends are getting a better price for the same service than they normally would with their own shared account.  Confused?  Too good to be true?  I’ll explain step-by-step how to host websites using WebHost Manger (WHM) and cPanel software available from most webhosting companies that offer reseller plans. (Video tutorial included) This article assumes you already know what a little bit about web hosting.  For example:

  • You have set up a website once or twice before on a web server
  • You have used cPanel
  • You know what a domain name is, and how to buy one

If all of these statements are true, then there is no reason you can’t sell hosting packages to your friends, family and clients.  Follow the steps below, and view the video to get a solid idea of how this is done.

Find a Reseller Account

Probably the most difficult step is finding a decent company with a good reseller program.  Many webhosts offer reseller programs that simply offer you packages at a discount, and allow you to mark up each package you sell.  This is not correct.  A decent reseller program will be one flat rate per month for an unlimited amount of sites. There are dozens of web hosting companies that offer reseller plans.  When choosing a host, the most important part is to find an established company that has been in business for several years, and offers top notch support.  Do not underestimate the importance of support.  Only choose a company that offers the following support options:

  • Telephone Support – Hiring people to talk on the phone is expensive.  A company with phone support is serious.
  • 24/7 Helpdesk – If your site is on the fritz at 3am, you don’t want to wait to find out what the problem might be.
  • End user support – This is important.  End user support means that the hosting company will answer support questions for your customers! This is crucial.  If you set up a website for one of your friends, do you want them calling you at 9pm on a Friday night because they can’t remember their cPanel password? No, give them a support email address and they can open a ticket that will be handled by your hosting company.

Once you’ve found a good, reliable company after doing your homework and comparing costs and features, go ahead and sign up.  I’m not going to list decent prices here, because hosting packages are constantly getting less and less expensive, and deals change by the day.  You’ll need to do some legwork on your own to find the best price. For the purpose of this tutorial, I will be using examples from the company I currently use, HostingZoom.  They have a standard WHM/cPanel setup and many prices and packages to choose from.  Some other companies have customized control panels (such as fasthosts.com).  These may be easier, and offer more or less flexibility.  The only real way to judge is try it for yourself (hopefully with a demo or free trial).

Sign Up For a Reseller Account

For demonstration purposes, I’ll be using ResellerZoom as a reference for this tutorial, although any company that uses Webhost Manager and cPanel (WHM/cPanel) will likely be the same.  If you look at the ResellerZoom site, you will see 6 different plans.   Most companies will offer similar plans.  I avoid Windows because most software I use (WordPress and Drupal) run best on linux, and Windows is often more expensive.  Also, take note that the Budget Reseller plan does not include end-user support or billing software, so that plan is to be avoided.  I chose the Advanced Resller plan because it was cost effective, and at the time the Failover plan was not available.  I may switch to the Failover plan soon, however, to provide increased reliability to myself and my friends.

You’ll likely have to prepay for a few months to get the advertised rate.  I go in 3 month increments.  This gets me a good deal, but doesn’t lock me into a long contract, so if something should go wrong, I can switch companies without losing too much money.

Upon signing up, you will likely recieve an email detailing all the login information.  This will be similar to the information you received when signing up for a normal hosting account, with a few extra bits – namely, the login info for WHM.  There might also be some info regarding custom nameservers and ClientExec or WHMCS, but I’ll get to that in another post.

Log into WHM

Once your account is active, go to http://yoursite.com/whm (or whatever is detailed in your activation email).  You will be prompted for a login and password. You’ll be greeted by a screen similar to the one below.  Don’t worry, it looks daunting, but many of these features you don’t need to bother with.  We’ll start simple, and work our way up from there.

Create a package in WHM

The first step is to create a package.  A hosting package specifies a disk quota, bandwidth quota and a few other specifics that will be set for your clients.  For small websites such as blogs and personal sites, a gigabyte or two of diskspace is usually more than enough.  This will store thousands of photos, hundreds of music files and a handful of video (although I highly suggest using a video hosting site such as YouTube or Vimeo rather than just uploading video files to a website, if possible). Setting bandwidth can be tricky, as you need to predict how much web traffic a site might be getting.  A small website with a few pages, or a personal blog with a few dozen visitors will use a very minimal amount of bandwidth.  Sites with more complex features, such as flash, music/video downloads, file downloads and other large items will use up bandwidth quickly.  Since this article is geared towards hosting sites for friends and family, we don’t need to worry about exceeding bandwidth very often.  Just in case though, try to encourage people to use sites like and to host images, and and to host video, and embed them rather than upload them to their sites.  Always find out what happens if your bandwidth is exceeded.  Some disreputable companies will cancel your account if you exceed the allotted bandwith, while most companies have simple overage charges (like the cell phone companies) if you go over. The rest of the settings, such as Max (FTP, Email, etc…) Accounts, and Max Domains can be set at unlimited (unless restricted by your hosting company).  If you have a friend that needs dozens of FTP accounts or sub-domains, he or she should probably get their own reseller account.  Turn on FrontPage extensions and CGI just in case they are needed, and set the cPanel theme to x3 (the latest greatest, in my opinion). Click the Add button, and you should get a nice message saying the package was added successfully.

Create accounts for friends/family

Now comes the fun part – setting up the individual hosting accounts.  Each of your friends/clients needs their own account.  Start by clicking the Create a New Account link under Account Functions.  Type in the domain name for the website.  The domain name does not need to be purchased, but must be registered elsewhere for the site to become fully active (there is way to access the site before the domain name is registered, and I’ll go over it soon).  Domains can be registered at GoDaddy or name.com for about $10. The username must be 8 letters, and also must be unique to the server that you are on.  If you get an error message, it means someone else on your server already has that username.  WHM will suggest a username based on your domain name. It’s best to stick with that one unless you need something else.  Then pick a nice, safe password (lots of letters, numbers, and valid symbols). Type the email address of your friend/client in the Email field.  This address will receive notifications generated by WHM and cPanel. In the Package section, choose the package that you just created.  This will specify how much space and bandwidth can be used, as well as how many ftp, mysql, domain, etc… accounts they can have.  If you need to tweak anything, click the Select Options Manually box. The Settings section should be changed automatically based on the package you created.  Under DNS Settings check the box that says Use the nameservers specified at the Domain’s Registrar.  This will ensure that GoDaddy or name.com.  Make note of the nameservers, such as ns1.hostingco.com, as this information will be needed by your friend later. Click the Create button, and you’ll be greeted with a big screen full of text…

Send the Details

After creating the account, you’ll be brought to a page full of text.  There will be a section enclosed in a box with the title, New Account Info.  Copy the information in this box and paste it into an email to send to your friend/client.   The rest of the stuff isn’t really that important. You’ll also want to note the cpanel login location, and FTP information.  cPanel can be reached at http://clientdomain.com/cpanel  where clientdomain.com is the domain name of your friend/client.  The FTP address is simply clientdomain.com at port 21.  For cPanel and FTP, the username and password are the specified in the account information.

Set the Nameservers

In order for the site to be online, you’ll need to change the nameserver entries where the domain was registered.  If you registered at GoDaddy you can view the tutorial here. At name.com the information is here.  Usually it just takes a few minutes for these settings to go into affect, but it can take up to 48 hours for the domain to propogate throughout the entire internet.

You’re All Set!

Once the domain has propogated, that’s it!  You friend, grandma, second cousin, office buddy, or whomever now has their own shared hosting account thanks to you!  You can arrange to bill them whenever you like, or just share the space out of the goodness of your heart.  Additional help for WHM is usually provided by your hosting company.  ResellerZoom provides a number of instructional videos, or you can try the official WHM manuals. In a future post, I’ll show you how to use ClientExec to automate account setup and billing, so your friends can sign up themselves and automatically recieve their account information and first invoice via email, without you touching a thing! Neat!

A Self Hosted Career Blog in 10 Easy Steps

October 2, 2008 / / 0 Comments

It’s been said that blogging is an essential step for boosting your career prospects these days.  It can be a supplement to your resume, a good way to keep in touch with folks in your industry, a way to tout your knowledge, or gain deeper insight into topics you (think you) know about.  Business minded people say blogging is a way to ‘brand’ yourself, or market yourself to employers, clients, partners, friends, or whomever.  Whatever the reason, I decided that I needed a career blog.  If you make the same decision, here’s an easy way to get started…

  1. Make a list of your favorite blogs (at least 5) related to your career. Read these often to get inspiration, and to see how blogging is done.  You can see a few of my fav’s in my Blogroll.
  2. Learn about career blogging. Penelope Trunk offers some great advice and reasoning for starting a blog.  Dan Schwabel is a proven ‘self-promoter’ and recommends blogging as an essential career tool.  I saw Dan speak in person in Boston, and although I think his technical ability is a bit lacking, he definitely knows his stuff when it comes to self promotion and personal branding. His entire website has plenty of useful tidbits to think about when promoting yourself online.  Also, there is a free eBook from Rockable Press called, Rockstar Personal Branding that is worth checking out.
  3. Pick a name. Buy that domain. You’ll need an address for your blog.  Forget about free blogs like eric.blogspot.com or ect203093.wordpress.com – they are as unprofessional as you can get.  At the very least, you’ll want firstnamelastname.com, and perhaps .net, .us, and .org as well.  There’s much to think about when buying a domain name (or names), so check here, here and here for some useful advice.  Once you decide on a name, go to a registrar and buy it!  I’ve used name.com and GoDaddy to register domains.  They are both about the same price, and have similar features.  GoDaddy has pretty good telephone support, and you can click here to save 10% at GoDaddy.com.
  4. Get a web hosting account. Websites live on web servers.  For a small website, you generally want to rent a small portion of a server for your website.  This is called ‘shared hosting’.  You pay a small amount per month for a certain amount of space, bandwitdth, and software on a professionally configured web server.  I recommend HostingZoom (I’ve used them for years).  I’ve also had good experience with Dreamhost, and heard good things about Lunarpages, Bluehost, and HostGator.  Go to one of these sites and sign up for their basic linux plan.  They all have Fantastico, which easily allows you to install WordPress (among many other great webapps).
  5. Learn about WordPress and install it. After you sign up for hosting, log in to your web host account’s Control Panel (cPanel). Find the Fantastico Icon, click it, then follow the onscreen prompts to install the latest version of WordPress.  Here’s a easy video that shows you how, and here’s a more comprehensive video.  If you’re wondering why you need to buy all this stuff just to use wordpress instead of using wordpress.com, the answer is freedom and flexibility.  With wordpress.com and other free blogging sites, you are limited in what you can post, the plugins you want to install, and features you can use.  You often have to pay extra for ‘upgrades’ such as a custom domain name, and widgets for your blog.  With your own hosted installation of WordPress, the sky’s the limit!
  6. Get a new theme.
    1. Find a theme and download it. Tons of free themes are listed on wordpress.org. Find one to your liking, and click the download button.
    2. Learn to use FTP. An FTP program will transfer files from your computer to your web server (which is where your website lives).  Download FileZilla if you don’t have it already – it’s a free and open source FTP program for Windows, Mac, and Linux.  Type your site name in the “Host:” box, then your username and password in their respective boxes, and use Port: 21, then click the Quickconnect button.  You should connect to your web server and be able to see all the folders and files.
    3. Install your new theme. You must copy the new theme’s folder to /wp-content/themes/ on your web server, then activate the theme from your WordPress administration menu (click “Design” then “Themes”).
    4. Watch this video if you need help.
  7. Write an About page, 2-5 posts to publish immediately, and another 2-3 posts for the coming week (or two). Start by brainstorming a few blog posts about related to you and your work.  A mindmapping tool can be a big help, or just use good ol’ pen and paper.  Come up with a few posts before you publish any.  A blog with only one or two posts will not garner any readers or impress anyone, so make sure you start with at least five.  Type out the posts in WordPress, save them, put leave them as ‘unpublished’ until you are ready to unveil your blog.
  8. Be confident in your ability to proofread, or have a friend to edit your first few posts. A blog that is impossible to read won’t be read.  Use spellcheck, common sense, proper grammar, and spellcheck again.  If all else fails and you are convinced your articles are terrible, hire a copywriter on elance to proofread your work (more on this later).
  9. Post your content! Set the “Publish Status” of all your posts to ‘published’ and you are on your way! Tell all your friends and family about your blog and spread the word.  Don’t forget to write 1-2 posts per week until you become way to busy with all the new work you’ll be getting, or become a professional blogger and start posting every day.
  10. Share your content! The blog isn’t going to do much good if nobody sees it.  Let friends, family and co-workers know about your new site.  You can try the Wordbook plugin to automatically update your Facebook mini-feed with your blog posts.  The Sociable plugin is good as well. It allows you to put all those nifty little Web2.0 icons on your blog so your readers can share your posts on Digg, Twitter, Technorati, del.icio.us, and many others.  Be sure to take some advice from the pros on how to promote your blog around the internet. Remember those favorite blogs from step 1?  Engage with the authors, comment on their posts, link to their interesting posts, and maybe someday they’ll mention you on their blog. It takes time, but almost certainly gets people viewing your posts.

© 2018 Eric Terpstra

Theme by Anders Norén — Up ↑