Introduction

Why use BBEdit? Why not Dreamweaver or Rapidweaver? Why not WordPress or Movable Type or Ghost? Why not CodeKit or Hammer or Prepros? Why not Jekyll or Hugo or some other static site generator? Why not Atom or Brackets or Sublime 2 or TextMate or Komodo IDE? Why not gedit or vim?

The answer is simple: More control over your workspace and your end product, with easy access to a wide range of functions.

Dreamweaver wants to take over your whole screen. Rapidweaver makes it difficult to get to your code. WordPress, Movable Type, and Ghost require installing a lot of files, setting up a MySQL database, and constrain you in a million different ways in exchange for what it gives you. And, unless you have a great host, WordPress pages will load a lot more slowly than static site pages. Static site generators serve pages quickly, but offer you the developer no good way to check syntax or links, and you have two versions of your site on your disk. Atom and Bracket and Sublime 2 and TextMate are like shiny objects for the easily distracted. In addition, each makes you add a bunch of plug-ins (which can be a really pain in the neck) to get a fraction of the features of BBEdit. Komodo IDE is more than most persons need. gedit and vim have steep learning curves, and while flexible and extensible don’t bring as much to the table as BBEdit.

The down side is that there are some features in Dreamweaver that are nice (see the section on Dreamweaver), and some of the functions offered by WordPress and static site generators (TOCs, etc) you will have to handle manually in BBEdit.

It’s no secret that anything man-made is a compromise, but with BBEdit, you give up the least for what you get, and you’ll be working in an environment that needs no external helpers for you to accomplish your tasks, unless you have external files such as images, PDFs, audio/video files, etc., and those almost always require an external program of some sort no matter what. If an external program or utility would make your life easier, you are not locked into any specific one … you can choose whichever one you want. You will even have the ability to create your own utilities, both through setting up work flows and through programming using a number of different languages. If you don’t own a copy of BBEdit, you can download a free trial version, or get your feet wet with Bare Bone’s stripped down version, Textwrangler, which is free.

The online and PDF documentation that come with BBEdit do a great job of giving you an idea of what BBEdit can do, and how to use the individual features.

This document is not a replacement for RTFM; it is one man’s opinion on how BBEdit can be used to create HTML pages and manage websites using BBEdit.

About me

About BBEdit

If my name seems familiar, it’s probably because About BBEdit lists me among the unindicted co-conspirators. I’ve been using BBEdit for roughly a quarter of a century. I started out with the free version and then transitioned to BBEdit Lite, before being seduced by the dark side — WYSIWYG editors such as PageMill/SiteMill (RIP), GoLive (RIP), and Dreamweaver — for HTML development. I still used BBEdit for the Really Big Tasks, though, such as winnowing down massive Apache log files before feeding them to Analog (RIP) or Summary (RIP), and general data munging. I’d converted each of my websites so that most of the creation and editing happened in Dreamweaver, even though doing so required that I grit my teeth for the annual Adobe Creative Cloud usage fee and put up with Dreamweaver’s maddening interface and behavior, but I was more or less happy, even after Adobe removed BBEdit as an external editor for Dreamweaver.

Then one day around the anniversary of my Creative Cloud charge, I received an e-mail from Adobe that my payment had been declined because I was fraudulently trying to use someone else’s credit card. A few minutes later, I received another e-mail from a guy at the company whose credit card Adobe was trying to use to renew my subscription. We had a nice chat about why Adobe was trying to charge my Creative Cloud payment to his credit card, and why Adobe had sent him my credit card information and contact information.

After cancelling that credit card, I spent hours on the phone with various Adobe representatives in India over the next few weeks, but to no avail. During my penultimate call, the tech support person assured me everything had been straightened out, although there was still no word on how some third party had received all my personal information. A couple days later, access to my Creative Cloud access was denied for non-payment. After another hour on the phone with India, I cancelled my Creative Cloud account and switched to BBEdit as my default HTML editor. I’m much calmer now, and I really like not having to remember the shortcuts for two different HTML editors.

The examples shown are from BBEdit 12 on macOS High Sierra (A.K.A. 10.13).

Conventions

Although this manual refers to HTML files, this is a catch-all reference for files ending in .html, .htm, and .php (where BBEdit says the file you are working on is PHP in HTML).

Code looks like this:

<!-- #bbpragma doctype="html5" root_element="body" encoding="utf-8" -->

Menu selections look like this:

MarkupUtilitiesOptimize

Keys to press on your keyboard look like this:

RETURN

Keys to press simultaneously on your keyboard look like this:

Command a

Screenshots that illustrate particular points in the narrative have a button like this: View

Finally, you would probably figure this out on your own, but …

Informational points look like this.

Warnings look like this.

Danger points look like this.