Managing a website as a project

Typically you will be working on one file at a time, but as your website grows you will have more than one page. In addition to your main page (index.html, index.php, etc.), you may have other pages, such as an about page, a contact page, and several content pages. If you have common elements such as headers, footers, and navigation that appear on each page, BBEdit makes it much easier to manage your website by collecting all the files — including image, CSS, JavaScript and other ancillary files — into a BBEdit project.

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 text 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 File ⇒ New ⇒ Project … from the menu.

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.

Whatever you name your project, BBEdit appends the .bbprojectd suffix to it.

Project settings

BBEdit allows you to define settings for your website 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.

Site settings general

The four tabs along the top of the Site Settings … popup window 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.

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

At this point, you have your website set up only minimally as a BBEdit project. With a few more steps, you gain a lot more power and flexibility in creating and managing your project.

Next up: The project sidebar.