Managing a website as a project

BBEdit allows you to manage collections of files as projects. It doesn’t care what those files are, but for the purposes of this exposition we are going to have a project that contains HTML documents, along with other files that are typically used to build websites. When you save a collection of files as a project, BBEdit creates a separate file with a filename extension of .bbprojectd. Whenever you want to work on those files as a project, all you need to do to open them is double-click on project-name.bbprojectd.

bbproject icon

When you manage files in a BBEdit project, it does not convert the files into something else, or hide them from you, or move them, etc. You get to decide where to store all files: BBEdit just facilitates management of the text files (files ending in .htm, .html, .shtml .php, .txt, .md, etc.) in your project.

Best of all, BBEdit has special features for working with sets of HTML documents that will make your life a lot better.

Creating a project

There are two ways of creating a project: Starting with an empty project that you fill with files and folders, and starting with a folder of files and turning it into a project.

The first way is to select FileNewProject … from the menu. View

This will create a new, unnamed project window. To add files and folders, simply drag them from the Desktop to the Project pane of the window (in the upper left corner). Once you have your files and folders in your project, you can drag to rearrange them. Save your project somewhere convenient, and you will never be more than a couple clicks away from your project files.

Project settings

But wait; there’s more.

BBEdit allows you to define settings for your HTML project, and to check and/or update your site files easily.

This is done through the Site ( ) popup menu, which appears in the extreme lower left corner of the BBEdit window, along the bottom margin. View

The four tabs in the Site Settings … popup menu allow you to establish general settings, default settings for new HTML documents, settings for updating site images, and to enter FTP credentials so that BBEdit can upload your site to your web hosting provider, if that’s the way you transfer your files to your web hosting provider. View

(Here are some other options for uploading files via FTP that might suit your workflow better.)

Set up project settings, including FTP. Use FTP to upload your website project to your server (you must have a server, otherwise there’s limited use for a web site.) Create links. Check links. View

Include files

You can also create your pages as SHTML, which is almost identical to HTML except it allows the use of Server Side Includes (SSI) to assemble your pages on the server before they are sent to your visitors. BBEdit handles SHTML files just fine, but it seems to be getting more and more difficult to find modern web hosting that supports SHTML. This could limit your choices in selecting a web host, and it would definitely be a pain in the neck should you have to move your site to a different server. My recommendation is to avoid SHTML in favor of BBEdit includes or PHP.

Placeholders

Images

You can select them from within BBEdit or drag them in from the desktop. Either way, BBEdit wraps each image in its own image tag, and populates the height, width, and alt attributes automatically (it uses the file name for the alt attribute, so you might want to change those).

There is an important different between dragging images in from the project window sidebar, and dragging them in from the Finder. If you drag them in from the project window sidebar, the images will appear on the page in reverse alphabetical order. If you drag them in from the Finder, the images will be in alphabetical order.

Project organization

Naming conventions

Quickly finding files in a project

Current document searches

Multiple file searches

GREP searches

Textfactories

Scratchpad

Unix Worksheet

.htaccess files

BBEdit will warn you when you create it because of the leading dot. That dot normally hides the file from viewing, but in BBEdit you will be able to see it by selection Show Everything from the magnifying glass menu at the bottom of the project column.

Sitemap files

There are two types of sitemap files: An XML version and an HTML version. Each points to all the HTML files on your site, but in slightly different ways. BBEdit used to generate sitemap.html files, but now if you want one you’ll have to generate it yourself. Here’s the code I use, which is the brainchild of Christopher Stone, an active and knowledgeable participant of the BBEdit Talk group on Google Groups.

#!/bin/bash
# generate a TOC of the site files
# thank you, Christopher Stone
cd /Users/Shared/www/bbedit-guide

grep --include="*.html" -Eir "<title>.+</title>" . \
| sed -E '
  s!^\.!<li><a href="!
  s!:[[:space:]]*<title>[[:space:]]?!">!
  s!</title>!</a></li>!
' \
| bbedit

I save this code into the Scripts menu in the BBEdit Preferences folder, which is located at Application support ⇒ BBEdit ⇒ Scripts.

If you want a sitemap.xml file, you’ll have to use one of a helper program such as Scrutiny or sitemap_gen.py.