Personal portable website development

notepad++ IDE buttonI guess firstly. Whats this about? well I like to take my current projects everywhere I can with me. I like to work where ever I can, if an idea comes to me, I want to be able to implement it right away. so I have modified the HTML5 boilerplate to suit these needs.

My USB drive has portable photoshop on it so UI design and changes are available to do at the drop of a hat. Then there’s the boilerplate. Download a copy from the link at the top right to get started.

The file structure here is fairly strait forward… lets start a new project.
go into the “Webserver” folder and start “usbwebserver.exe” – this is a portable small lightweight web server preconfigured to use the correct directory (../) as the document root.
now load your browser and navigate to

Would you look at that! a blank website… you can refresh this as you are making the website… if you look at the usbwebserver you will see there is also a MySQL database set up and ready to use. You can click PHPMyAdmin to start setting that up for your project.

Now that everything is set up go in to the “build” directory… this is where the main parts of the development reside. Fire up “Notepad++Portable.exe” and you will see I have already added the NPPexec plugin.

We need the project panel up. So click “view” then under “project” click “project panel 1” you should see the panel on the left (as seen in the image at the begining of this post) but wait… theres no directory tree! To load that click “workspace” then “open workspace” I try to always keep these in “/build/npp_project.txt” but feel free to use wherever you like… keeping it uniform makes it easier to remember and less prone to error.

Finally the console. In Notepad++ click “Plugins” and under “NppExec” toggle “Show Console Dialogue” this will display the space at the bottom for output of run commands.

To set this up so it automatically compresses and uploads your project in the current notepad++ open “build/FTPupload_win.bat”. Fill in the correct details, modify as needed and save. Set up the HTML boilerplate configs as usual for ant to work.
With notepad++ in focus press F6, this will bring up the execute dialogue. in that you want to put the commands:

cd C:\full\path\to\build

From now on if you want to build and upload the website instantly you can just press CTRL+F6. The output will be in the console pane at the bottom.

Save this all on your USB stick and you will be ready to go wherever you are!

NotesĀ – Windows will need NcFTP to run the uploader, so each computer this will need to be installed on. There is a copy of the installer at “/build/tools/Setup NcFTP 3.2.5.msi”

The current version of notepad++ has only recently implemented the project pane. Removing items here will not delete them from the project folder.. you will have to remove pages from both the folder and the workspace. The same goes for adding files.

I have tried a LOT of different IDE’s for my purposes, eclipse, net-beans and everything in between, none of them have really suited my purposes, either not being portable, having too many functions and too complicated, to just not doing what I want. I have found this to be the most portable way that has every function I personally need.

I would love to hear what you use and how you use tools for web development. As always likes, shares & comments are much appreciated.

Sharing is caring!

Leave a Reply