Set up a Sublime Text project for related HTML files

You change the notice in index.html, then discover that the browser was opening an older copy in another folder. In Sublime Text, open the site's folder and save a project definition with relative paths. Keeping the intended HTML, CSS, and images under one visible root makes it easier to identify which copy you are editing.

A Sublime project has two files: .sublime-project defines the folders and shared settings, while .sublime-workspace records personal working state such as open files and their modifications. Keep that distinction when sharing the setup. Sublime project documentation

Start from the folder that holds the page

For this fictional workshop notice, keep the files together:

workshop-site/
  index.html
  site.css
  images/
    entrance.jpg
  archive/
    index.html

Open workshop-site as a folder in Sublime Text. Select the current index.html from its folder tree, rather than choosing a similarly named file from a recent-files list. If the page uses href="site.css", the stylesheet belongs beside that HTML file for this layout.

Save the project as workshop.sublime-project inside workshop-site. Its folder paths can then be relative to the directory containing the project definition.

Give the project a narrow definition

The following is an illustrative project file:

{
  "folders": [
    {
      "path": ".",
      "name": "Workshop site",
      "folder_exclude_patterns": ["archive"]
    }
  ],
  "settings": {
    "tab_size": 2,
    "translate_tabs_to_spaces": true
  }
}

The folders array can include several roots. Each entry needs a path; the optional name changes its sidebar label. Here, . means the project file's directory. The exclusion keeps the archive out of this project's visible working tree; it does not delete the archive or restrict operating-system access to it.

Use exclusions to reduce accidental edits to generated or archived copies. They are organizational settings, so keep backups and version-control rules separately. The official documentation also describes file include/exclude patterns if a large folder needs finer filtering.

Confirm the file and the browser refer to the same copy

Change one temporary marker in the current notice, save it, and open that exact file in your browser. For example, add “Preview check: courtyard entrance” to a local practice copy. Reload the browser and confirm the marker appears.

If it does not, compare the browser's complete address with the file's folder. A local file: address and a development server can point at different copies. A running build can also serve generated output instead of the source you edited. Local file behavior explains why opening a file directly can differ from serving it.

Remove the temporary marker after the paths agree. Then check the actual entrance text, the stylesheet, and the image.

Share the definition with the source

Sublime recommends putting the .sublime-project file in version control and generally leaving .sublime-workspace out. The workspace carries a person's session state, including modifications, and should not become the team's shared project definition.

Relative paths help a colleague reopen the folder after cloning or copying it to a different location. An absolute path to your own Downloads folder will still point there on your machine and fail elsewhere.

If you also maintain Markdown notes, the Sublime Markdown preview instructions describe a separate package and conversion step. This project definition does not add a renderer or publish a site. Finish by reopening the saved project, choosing the intended HTML file, and checking the page from the address readers or testers will actually use.

Keep reading