Using Bluefish as Your Web Editor
Introduction
Bluefish is a powerful editor targeted towards programmers and web developers, with many options to write websites, scripts and programming code. Bluefish supports many programming and markup languages. Bluefish is not a WYSIWYG editor but, it is a good programming editor that you can quickly create.
Bluefish is a multi-platform application that runs on most desktop operating systems including Linux, FreeBSD, Mac OSX, Windows, OpenBSD and Solaris.
For this post we will be covering the basics of using Bluefish to create web pages. Part of the reason for the post is my quest to find a good web editor that runs across multiple OS’s and Bluefish fits the bill. Another reason is projects in converting sites to be mobile aware using HTML5 and CSS3 which are supported by Bluefish.
Bluefish Features
According to the Bluefish homepage, here is what you get.
- Lightweight – Bluefish tries to be lean and clean, as far as possible given it is a GUI editor.
- Fast – Bluefish starts really quick (even on a netbook) and loads hundreds of files within seconds.
- Multiple document interface, easily opens 500+ documents (tested >10000 documents simultaneously)
- Project support, enables you to work efficiently on multiple projects, and automatically restores settings for each project.
- Multi-threaded support for remote files using gvfs, supporting FTP, SFTP, HTTP, HTTPS, WebDAV, CIFS and more1
- Very powerful search and replace, with support for Perl Compatible regular expressions, sub-pattern replacing, and search and replace in files on disk.
- Open files recursively based on filename patterns and/or content patterns
- Snippets sidebar – specify custom dialogs, search and replace patterns or insert patterns and bind them to a shortkut key combination of your liking to speed up your development process
- Integrate external programs such as make, lint, weblint, xmllint, tidy, javac, or your own program or script to handle advanced text processing or error detection
- Integrate external filters of your liking, pipe your document (or just the current selected text) through sort, sed, awk or any custom script\Unlimited undo/redo functionality
- In-line spell checker which is programming language aware (spell check comments and strings, but not code), requires libenchant during compilation2
- Auto-recovery of changes in modified documents after a crash, kill or shutdown
- Character map of all unicode characters (requires libgucharmap during compilation)3
- Site upload / download1
- Full screen editing
- Many tools such as tabs to spaces, join lines, lines to columns, strip whitespace, etc. etc.
- Customizable programming language support:
- In-line reference information (move your mouse over a function name or tag name) for various programming languages
- Code block folding
- Highlighting matching block start and end markers (both brackets and tags)
- Auto-completion and auto-tag-closing for many programming languages, with reference information, and even for nested languages (e.g. css and javascript inside html code that is inside a php document)with included language definition files for:
Ada
ASP .NET and VBS
C/C++
CSS
CFML
Clojure
D
gettext PO
Google Go
HTML, XHTML and HTML5
Java and JSP
JavaScript and jQuery
Lua
Octave/MATLAB
MediaWiki
NSIS
Pascal
Perl
PHP
Python
R
Ruby
SASS
Shell
Scheme
SQL
SVG
Vala
Wordpress
XML
- Multiple encodings support. Bluefish works internally with UTF8, but can save your documents in any desired encoding.
- Bookmarks functionality
- HTML toolbar and tearable menu’s
- Dialogs and wizards for many HTML tags, with all their attributes
- Fully featured image insert dialog
- Thumbnail creation and automatically linking of the thumbnail with the original image, and multi-thumbnail creation
- User-customizable toolbar for quick access to often used functions
- ZenCoding support
- Compliance with the Gnome and KDE user interface guidelines where possible
- Translations into 17 languages – and more are coming for the next releases .
Installation
Installation is simple for this application and instructions can be found here. For the posts sake we will cover Windows, Mac OSX and Linux process.
Windows XP or newer
You have two choices, with or without Internet connection. Personally I go with Internet connection to make sure that dependencies needed are installed. Also, I ran into issues installing version 2.2.9 on Windows so went with 2.2.8.
Installing with internet connection
- Download the latest Bluefish installer from the main download server: http://www.bennewitz.com/bluefish/stable/binaries/win32/
- The installer will require internet access to download GTK+ and any spell check dictionaries. Please note that the internet-enabled setup may fail if the installer is run from a network share. See below for instructions for internet-less installation.
Installing without Internet Access
- Download the latest Bluefish installer from the main download server: http://www.bennewitz.com/bluefish/stable/binaries/win32/
- Download the GTK+ 2.24.8 installer (from the gtk-win project): http://downloads.sourceforge.net/gtk-win/gtk2-runtime-2.24.8-2011-12-03-ash.exe?download
- Download any language dictionaries you wish to be able to install: http://www.muleslow.net/files/aspell/lang/
- Place the files in a new directory named ‘redist’ in the same directory as the Bluefish installer. e.x.
Linux
With Linux distributions installing Bluefish is pretty easy. Nothing to download, because most distributions have the package and dependencies in thier repositories.
Fedora
For Fedora versions less than 21 use.
$ sudo yum install bluefish
For Fedora versions 22 and higher use.
$ sudo dnf install bluefish
Debian based (Ubuntu)
$ sudo apt-get install bluefish
Mac OSX
- Download the latest version installer from http://www.bennewitz.com/bluefish/stable/binaries/macosx/, open it and drag the bluefish icon onto Applications.
In Mavericks there is a system setting called Gatekeeper that only allows you to install packages from Apple-identified developers. Bluefish is not distributed through the Apple app store, so you will have to workaround that setting. - Use the contextual menu (e.g. secondary-click button), and you’ll see a menu with “Open” in it. This will present you with a dialogue box, asking you for permission to run the software. You will only be asked this the first time.
- Alternatively, the Gatekeeper setting can be disabled. For information, see: https://kb.wisc.edu/helpdesk/page.php?id=25443 or http://support.apple.com/kb/ht5290
Using Bluefish
Now that we have the installation piece completed we can start Bluefish and start getting used to the interface and start coding.
First let’s get familiar with the Bluefish interface. The Bluefish interface is a simple layout and easy to navigate. There are just a few components to it.
Menu Bar
The menu bar is pretty straight forward with the standard selections you normally see, plus a few additions.
- New
- Open
- Save
- Save As
- Delete
- Cut
- Copy
- Paste
- Show Find Bar
- Advanced Find and Replace
- Undo
- Redo
- Unindent
- Indent
- Preview in Browser
- Edit Preferences
- Fullscreen
HTML Toolbar / Snippets Toolbar
The HTML Toolbar & Snippets Toolbar gives quick access in adding common code for each of the various tabs. By using them you can reduce the amount of possible syntax errors. The Snippets Toolbar has more coding detail and specify custom dialog’s, search and replace patterns or insert patterns and bind them to a shortcut key combination of your liking to speed up your development process.
Using Projects
The project feature of Bluefish is good when you are starting coding and need to be able to access your files in the sidebar in one place. Enables you to work efficiently on multiple projects, and automatically restores settings for each project.
Create A Project
Creating a project in Bluefish is simple and there are a few ways to accomplish this task.
Click Project > Create New Project and a dialog box will appear asking for a name and what options / settings you would like.
Under Project Defaults you can set what new pages will be based on, this can be Templates (discussed below) and mime type. This very handy when creating a big project that all pages will be similar in the content. If it is mixed just leave it as default. Under Options you have many editor features on by default that you can change to your preference. When you have set it the way you like it click Create Project.
A new dialog box will appear asking where to put the new project. If you have a folder where files already reside then navigate to it and click Save. if this is new then you can create a new folder using the available options and click Save.
Now you will be back in Bluefish in the newly created project. At this point you can use the navigator on the left to open the directory where your site files will reside.
Using Projects
So we have created a few projects and need to switch gears to a different piece or there was a piece of code from another you wanted to use. To open a previous project click Project > Open Project and look for the .bfproject file and click Open.
Working with Templates
You can have system-wide installed templates or user specific templates. Any file available in that directory will be scanned at bluefish startup, and will become available in the templates menu. Templates are a basic framework when you are starting to create webpages.
Directories for templates on Linux
System-wide: /usr/share/bluefish/templates
User specific: ~/.bluefish/templates/
Directories for templates on Windows
System-wide: DIRECTORY_TO_BLUEFISH/share/bluefish/templates/
User specific: ~/.bluefish/templates/
Predefined templates
Bluefish is installed with 5 predefined templates:
- C header
- C header GPL
- HTML 5
- PHP
- XHTML 1.0
If you want more advanced it is simple to create them and copy them to above directories. For instance custom meta data or forms, layouts can be created for common tasks. To access templates use the menu and click File > New From Template.
The templates will give you the basic framework to start your coding. In this example we have HTML 5.
So how to we add custom templates for our common coding or for a particular projects. Say for instance we have a project for a client that we have specific met data and settings and instead of having to copy and paste it we make a template?
Creating and Editing
Now we are ready to start creating. Bluefish starts with a blank page ready to go, so you can start using the HTML Toolbar or snippets or templates to start, or just start coding.
Mobile Design Notes
One of the items mentioned in the introduction was about mobile device support. One big piece is the ability to see a preview of what this looks like for the devices. There i no way in Bluefish to do this but, Google Chrome and the Developer Tools has a builtin feature to allow this to be done. First we need to make sure that Bluefish knows about Google Chrome as an option for previewing.
SO let’s add Chrome to our list. In Bluefish click Edit > Preferences and select External commands.
Click Add Entry and a blank line with a checkbox will appear. Click in the section under the label and give it a name (ie Google Chrome). Next click in the command and enter in the command to run Chrome. (“C:\Program Files (x86)\Google\Chrome\Application\chrome.exe” ‘%p’) is the path for Windows OS. Then click the box to enable it as a selection. Click OK to save the changes.
Now we are ready to use Chrome as another browser to preview our work and also to utilize the developers tools for checking responsive design. So, how do we access Chrome once we have enabled it. Click Tools > Commands and click on Google Chrome.
So now we see our page but, where is the preview for our mobile devices. there are a few ways, the quickest is to press Ctrl+Shift+I and another is through the options menu selecting More Tools > Developer Tools. Once in you will now be able to select different presets to see what your creation looks like.
Conclusion
As we can see Bluefish is a powerful web editor that runs on many platforms and is well suited for development to meet many needs. Although it does not have WYSIWYG capabilities it is easy to use other programs to fill in the gaps. Bluefish also adds the power of templates to allow for speedier development to common tasks used by the coder.
Thanks! I have a question:
How do you upload and download using Bluefish? Do you have to use a separate ftp program? If so, which one would you recommend?
Bluefish does not have an upload feature. Personally I use FileZilla https://filezilla-project.org/ to upload and download updates.
I thank you very much. I looked on several other sites, but only yours teaches you correctly how to associate Chrome with Bluefish on Windows.