Create and Edit Web Pages on the Linux Desktop with BlueGriffon

One of the applications that’s missing from the Linux desktop is a good WYSIWYG HTML editor. There have been a few, like NVU and KompoZer, but they haven’t been actively developed for a while.

Enter BlueGriffon. Built on top of Gecko (the rendering engine used by Firefox), BlueGriffon enables you to create web pages using HTML5, CSS3, and other widely-used web standards.

Let’s take a look at how to build web pages with BlueGriffon.

Head on over to the BlueGriffon download page. You can either grab an installer or an archive containing the program’s files.

If you downloaded the installer, pop open a terminal window and navigate to the directory in which you downloaded the archive. Then, run the following commands:

chmod +x BlueGriffon-x.x.x-Linux-[arch]-Install sudo ./BlueGriffon-x.x.x-Linux-[arch]-Install

Where x.x.x is the version of BlueGriffon (the current version is 1.1.1) and [arch] is the architecture of your distribution (x86 for 32-bit systems or x86_64 for 64-bit systems). Follow the prompts. The installer copies the program’s files into the folder /usr/local/BlueGriffon.

If you downloaded the archive, just extract it to a directory in your path. Then, either manually add a launcher for the application to your system menu or add the path to the directory /usr/local/BlueGriffon to your system path.

When you’re ready to go, either double click the icon that the installer places on your desktop or run the command bluegriffon.

BlueGriffon main window

Select File -> New to create a new web page. You’re literally presented with a blank canvas, sort of like a new word processor document.

As with a word processor, you can literally start typing to create your document. Using the buttons and menus on the toolbar, you can also apply formatting to your page. Like what? Here’s a sampling:

  • Heading and paragraph styles
  • Font attributes like bold and italics
  • Alignment of the text
  • Indents
  • Lists

You can also insert links, tables, images, video, audio, and forms with a click of a button or by selecting an option from the Insert menu.

That’s all pretty much standard for any good HTML editor. What sets BlueGriffon apart is its support for HTML5. HTML5 includes a number of new elements that, among other things, make it easier to add audio, video, menus, and distinct sections to a web page.

You can insert HTML5 elements by selecting Insert -> HTML 5 Element and then selecting the element from the list.

Select HTML5 elements

You have two options for adding formatting using Cascading Style Sheets. If you have a style sheet file, you can link it to your web page by selecting Insert -> Stylesheets. Click the + button.

Add a style sheet

Click Linked to the document and then click the icon beside the Href field. Navigate to the directory containing the stylesheet file that you want to add to your web page. Once you’ve added the stylesheet file, it appears in the Insert or edit stylesheets window.

List of CSS files

When you’re done, you can wind up with a very nicely-formatted web page.

A finished web page

Any time you want to view or edit the HTML code of the page, click source at the bottom of the BlueGriffon window.

Viewing the HTML source

Obviously, the easiest way to do that is to create the diagram in another program, save it as a web-friendly graphic file, and then insert a link to the image in BlueGriffon.

But if you just need a simple diagram, you can use BlueGriffon’s built-in SVG editor. On your web page, click where you want to place the diagram. Then, launch the editor by clicking the SVG Edit button on the toolbar.

The built-in SVG editor

The diagrams you can create are fairly basic, but you can build some decent flowcharts and the like. When you close the editor, BlueGriffon places the diagram on your web page.

BlueGriffon does a very good job of helping you build single web pages. There’s no site management feature, but its support for HTML5 is second to none. And you can expand on BlueGriffon’s capabilities with add-ons. You have to buy the add-ons, but if that supports the development of the application then they’re worth it.

Photo credit: svilen001

Do you like what you read here?

Receive the latest update in your inbox.

Or connect with us: