Howto: Make a genealogy website with Gramps

From Gramps
Jump to: navigation, search
How to make a genealogy website

Using Gramps (4.x. or newer) and its Narrated Web Site report, from conception to uploading your genealogical website to an internet service provider (ISP).

You can make a website with the narrative website report, of which the interface is described at the: User manual for the Narrated Web Site report.

Before you start

You can easily generate an inviting website from within Gramps.

Before you start, you should have an idea about the data you want to present on the website.

Due to the liabilities related to accidentally revealing private information, consider exporting your Tree without living persons and without data marked as 'private'. Then import that into a new Tree BEFORE using this report. Be certain to check the Researcher tab in Preferences and to use the Edit Database Owner Information tool to protect your own identity.

Also, if your complete family tree is large, the number of generated files can be huge, and possibly take up a lot of file storage space.

How to limit the amount of data

If you have a large database, it is wise to start with a filter to limit the number of people: In the People view of Gramps, go to the View menu, and activate the Filter sidebar. Next, go to Edit --> Person Filter Editor menu, and make a suitable filter. Read the help manual if necessary. Once a filter is defined, you can test it in the People view, by selecting the filter in the Filter Sidebar, and clicking find. You can combine filters (yes, it helps if you have experience with some basic and/or logic) until you have a selection of all the people you want on your website.

Make a Home Page, Introduction Page, and more

What special content needs to be created?

Before you use the Narrated Web Site report, you should make some custom pages with the information not yet in Gramps:

  • a Home page: the starting page of the website
  • Introduction Page: page where you can give an introduction of your research, ...
  • Custom footnote: the footnote to appear on the site
  • Custom header: a custom header to appear on the top of every page
  • Publisher info: extra information about you, the publisher of the web site, to appear on every page

Gramps works with style sheets, so the exact ordering, and look of the website is all contained in one file, the style sheet, e.g., narrative.css. Do NOT distract yourself with customizing style. Focus on content, and some basic markup (paragraphs, italic/bold text, div sections, ...).

How to customize

Narrated Web Site - Web Pages - Page Generation - tab default options

Go to the Media View in Gramps, and click on the add icon. In the Select a media object dialog, you need to click on the option Internal Note, and give a title, e.g., Home Page, Footer, ...

Next, select the new media object, and edit it (double-click or Edit button). Everything you add in the Note tab of the media object, will appear on your webpage if you select this media object during the website generation.

If you know HTML, you can just type the text wrapped with the appropriate html code tags. If you do not know HTML, consider making a page with a "What You See Is What You Get" web editor like Bluefish, Quanta Plus, ... . These tools contain icons to dynamically create webpages. The HTML text created in such tools can be copied in the note section of your Home Page Gramps media object.


If you have experience with cascading style sheets, you can use specific <div> tags in your pages, and edit the style sheet to contain your custom tags.

Choosing the layout

Gramps provides a selection of seven built-in style sheets to determine the general appearance or your web pages. You can choose between Basic (Ash, Blue, Cypress, Lilac, Peach or Spruce color schemes), Mainz, or Nebraska styles. There is also the option of not including a stylesheet (No style sheet).

Whatever the style you choose, after generation, it will default to the narrative-screen.css file which can be found in the css directory.

If you have some experience with websites, you can easily customize this one file. Without changing the content files, your web pages will be completely changed to the form, colours, etc. that you specified. Do backup these changes, as you might easily regenerate your website and accidentally overwrite this file.

If you make a custom style sheet you would like to share with other Gramps users. You can do this by adding to your custom CSS file and ensuring that its copyright is creative commons alike, and attaching to an feature request or you can send it to the developers on: gramps-devel <at> to be added to future releases.

Generate the pages

In the menu, choose Reports > Web Pages > Narrated Web Site....

Choose a suitable directory where you want to generate your website locally. It is best to do this locally, and upload your website only afterwards.

In the Report Options tab, select the Filter you created previously if any. Change the Web site title: to something more meaningful to than "My Family Tree". Choose the StyleSheet you want (See examples).

In the Page Generation tab, choose the internal notes you created above. It is recommended you "Suppress Gramps ID"'s, as visitors are not interested in this. Be careful with the option Include images and media objects. Only choose this option if:

  1. Your Hosting site has enough file storage space.
  2. You extensively use the private marker on sensitive data.
Be careful to respect sensitive and private data

Many people have unintentionally published private email conversations (stored for research and reference reasons) on the net without realizing.

The Privacy tab is one of the most important settings. Make it a habit to never include private data, and restrict the information on living people. It is recommended you leave the Years from death to consider living: as the default of a minimum of 30 years! This will lessen the issue of revealing sensitive data on the internet of living people. Such revelations may have legal ramifications for you. A number of genealogists have found themselves in disputes due to publication of information on living people. You have been warned. Please also take into account your local legislation (e.g., there are very strict privacy law in Italy, France, Finland...).

To create the report you select OK and Gramps starts generating your Narrated Web Site pages : this will take some time depending on the size of your family tree, as a lot of files and directories will be made. When completed you will be the owner of a complete structure ready to publish on the internet.

Regeneration of your site

Every time you make changes to your family tree you need to regenerate your Narrated Web Site report to see those changes.

Although Gramps will regenerate the entire site, only the pages with changed Gramps data will be different from the previously generated site. You therefore need not republish all the website to the internet again. Instead, limit yourself to only uploading the changed pages. This would be labor-intensive to do manually but specific tools to do this exist... like sitecopy. See further alternatives for transferring files.


Now you can publish your work on the web.

Size and provider

First, check the size of your web page. Go to the directory where you stored the web site, and in a modern file browser, right-click and select properties. This normally allows to calculate the directory size. Write down this info, and check your webhosting contract. Above a certain size, you will need to pay extra. Investigate before you burn yourself! If your site is too large, you can make a filter which produces a smaller website, or disable images, or split your site in pieces, and host it with different providers.

There are some free providers around: e.g. Lycos, but there may be better alternatives.

Transfer your files

  • sitecopy: This is generally the most accessible and user-friendly option. Only changed pages are uploaded to the server hosting your website. You can install sitecopy with every distribution via the package manager. Read the manual, it is self-explanatory: type in a console man sitecopy (or in konqueror type address man:sitecopy). Windows or Mac OS users could try the FileZilla client.
  • rsync : This is for advanced linux users. It is a better solution than sitecopy but requires full access to the webhost. That is an access level that normal users typically will not have. Rsync is much more efficient. It only uploads the changes to chunks of a file, whereas sitecopy uploads the entire file.
  • ftp/ssh: You can also use a wide range of ftp clients to upload your site. This the 'brute force' approach that just blindly overwrites all the previously uploaded files. The easiest for new users is in GNOME/KDE, go to Remote Places, and click to add a new remote place. Choose the settings for your provider (ftp/ssh, login, password), and now you can drag and drop files in Nautilius/Konqueror, like on your own PC. You can also use one of the many specific ftp applications, like gFTP (it should be in the repositories of your distribution). Basically you transfer all the files to the server and that's it. However : as you have probably noticed, you created an huge collection of directories and files with "NarrativeWeb". Transferring so vast a file collection will take some time! If you update your site often, consider learning sitecopy!

Examples of Narrated Web Sites

Feel free to add your with Gramps generated Narrated Web Site here. Style is one of the Gramps styles, or custom.

Site Style Language Comment
De Richter Custom made Dutch version 2.2.6
Cross Family Tree Basic (Ash) English version 3.2.5-1
Van den Bos - Van der Harst Basic (Spruce) Dutch version 5.0.0

Comparison with other programs

There are two types of genealogy websites: static and dynamic. Static pages are ideal if you are limited with webspace, or want full control over your data. You have a genealogical database on your PC, and you select the data you want on a website, you upload this, and you are finished. Gramps website generation belongs in this category.

Dynamic websites have all the genealogical data on a server, and dynamically offer webpages, typically with javascript. This normally requires more disk space, however due to compression of the data, this might not be too bad. Dynamic websites are a great tool to collaborate on genealogical research with other people, as you normally have the option to change the data from within the website. For example, webtrees is an open source project offering exactly this. A possible disadvantage is that for this too work, your service provider must offer you sufficient bandwith, or otherwise serving pages can be slow.

The beauty of open source is that you can choose the environment to work with, and the environment to generate your website with. The benefits of collaborating should also not be exaggerated, however, it might be a good idea to offer in the footer of your Gramps generated website the option to send you feedback, like the example on this page.

Changes you can do - For more advanced Users

Changing your Home Page

If you made your own "HomePage", which I recommend strongly, you can easily edit this HTML file. Use a standard text editor (gedit will do quite nicely), and you can change the content. The same applies off course to the "Footer" and "IntroPage". If you know your way around with HTML you can add divs and extra markup. Remember to also put the newly defined div and classes in your edited css file.

Changing the narrative.css

As mentioned, with a standard text editor (gedit) you can adapt your css file. Not happy with the colours or fonts? Change them! The beauty of the cascading style sheet is that if you make a change here, all your pages will change. Dada! Now one thing to watch out for is that if you make changes and you finally obtained a good style sheet, that you save a backup in another directory than the one Gramps made. Why? The next time you let Gramps generate some webpages, the program will re-install the default narrative.css and bye bye changes. You can on regeneration of your website select the option in Gramps to NOT use a css, but this is easily overseen, especially if you generate different websites with different requirements

Go for the real thing

If everything went according to plan, you can repeat all the steps with a larger number of people. However, be cautious But hold your horses for just a sec First check out the amount of MB this first attempt generated. This is important as your host limits the amount of data you can put on his server. Lycos for example (the free as in beer version) allows you a nifty 50 MB. But as your database can hold an unlimited amount of persons and pictures this is easily obtained. A very important parameter is the amount of images (media objects) you put on your site. If you have, say 50 images of 500 KB then half of your diskspace is gone already.

Splitting the database for hosting

What if your database is really really huge? I did not try this yet, but you could split your data, say the descendants of Jacobus Roelants on one Lycos site and the other part of the family the descendants of Sebadiah Johansson on another Lycos site and so on. It should be fairly easy to install links to switch between sites, eg in the home page, as the directory structure Gramps generates does not change.

Integrate with WordPress


This article's content is incomplete or a placeholder stub.
Please update or expand this section.

Integrating GRAMPS and WordPress is a very straightforward activity. Not a lot of special skills or tools are required in order to make this integration work smoothly.

A couple of points worth remembering (knowing?) first:

  • Don’t expect to update your GRAMPS data through WordPress. GRAMPS works best from a data collection and manipulation perspective as a stand alone PC application.
  • Neither database is ever truly linked in this integration;this is good for a number of reasons:
    • Your GRAMPS database can be secured (remain private)
    • Breaking one system doesn’t break everything; a good feature for those of us prone to checking our systems recovery processes regularly.
  • Websites are better for sharing information than they are for updating it. This is especially true if you have constrained network bandwidth, lots of different media and files of varying sizes including many that are BIG! These conditions probably encompass most people doing genealogy.

So on to the integration… there are basically 5 major steps:

  1. Get an iframe plug for use in WordPress- I use and like Iframe Embedder from
  2. Modify one of the pre-existing GRAMPS css templates used by GRAMPS NAVWEB to generate websites to blend with your site look & feel (I use Geany as my css editor)
    1. rename and save the new CSS template in /usr/share/gramps/data/ (Linux path to the templates– maybe one of our readers can tell us what the Windows path might be)
    2. you also need to add the new css option to in /usr/share/gramps/ReportBase (Linux path to the templates)
    3. if you are running on Linux- like me- you will need root privs to perform the above 2 steps
  3. Go to Reports-Web Pages–Narrated Web Site and generate a web site via this GRAMPS function.
  4. Copy the GRAMPS NAVWEB website that is generated on to your WordPress site somewhere where you will find it.
  5. Generate a Page in WordPress for your GRAMPS Website to be located. Add the following if you are using Iframe Embedder  : [ iframe NAVWEB-url 100% 200]

See Also

Integrate with Joomla CMS


This article's content is incomplete or a placeholder stub.
Please update or expand this section.

JoomlaGen! is a free and open-source content management system (CMS) for publishing web content.

Integrating Gramps via the JoomlaGen component is detailed in another article. The component was designed for use with the 1.5 Joomla! version. By late 2020, version of Joomla! was at the 3.9.22 release. The most recent JoomlaGen version is the 0.3 pre-release version and was posted in July 2012. The author tested for compatibilty with the Gramps 3.3.0 version. (As of Sunday, 14 July 2024, Gramps is at 5.2.3 version.)

Integrate with Drupal CMS


This article's content is incomplete or a placeholder stub.
Please update or expand this section.

In 2016, Drupal consultant Killed ceated an experimental sandbox project which allows importing of a back up file from the Gramps genealogy package into Drupal.

Quoted from the documentation:

It consists of two parts:

  1) granny: a features based module that defines entities, views, and such
  2) migrate_gramps: a migration module that includes the XML parser, defines how the XML is to be parsed and the results being put into Drupal

The goal is to present the data entered into gramps within the context of a Drupal website.

This is currently very rough, the import mostly works (some parts such as media are still missing), but there are few views defined to actually show the data.

Integration of NarrativeWeb in a CMS or MVS


This section is a work in progress.

The feature request was #0005530 : The NarrativeWeb generate flat html files. If you use a MVC or a CMS like itseasy, PmWiki, ... you can't return to the home page. You lose all the look and feel of your website. If we create some .php files which include those .html files ( mode_rewrite ), it doesn't work because we have headers and </html> in them.

CMS=[Content Management System] and MVC=[ Model View Controller]

Patch for release 3.4 and 4.2

The patchs are available and attached to the feature request : #0005530

For release 5.0 and above

The patch is integrated in 5.0.

How it works ?

The following show how to proceed with Joomla (3.1.1):

I suppose NAVWEB is the directory under your root web site in which you put all the Gramps tree.

I suppose I only have html pages for Gramps. No other html application.

The .htaccess in the root web directory has now only the following lines :

RewriteEngine on
# rules for narrativeweb
RewriteRule ^(.*)\.html$ http://%{HTTP_HOST}/index.php/tree?page=$1.html [QSA,R,L]
RewriteRule ^(css/.*)\.css$ http://%{HTTP_HOST}/NAVWEB/$1.css [QSA,R,L]
RewriteRule ^(thumb/.*)$ http://%{HTTP_HOST}/NAVWEB/$1 [QSA,R,L]
RewriteRule ^((images|img|thumb)\/.*\.(jpeg|jpg|gif|png)$) http://%{HTTP_HOST}/NAVWEB/$1 [QSA,R,L]

For Joomla, I installed the plugin : DirectPHP

And I create an article named tree in which I put :

   $rep = "/var/www/NAVWEB/";
   // You can place PHP like this
   $page = JRequest::getVar('page');
   // for security reason, don't allow .. in path
   $pageok = str_replace("..", "", $page);
   if ($pageok == "") $pageok = "index.html";

What is necessary when creating the Narrative Web ?

save as a tar file.

In the Narrative web Report options menu, choose the "CMS inclusion" tab and select the only option of this tab : "Do we include these pages in a cms web ?"

Changing a word present on multiple pages

#! /bin/sh
# filename : replaceall
# usage: ./replaceall X Y
# -------------------------------------------------------
find . -type f -name '*.html' -print | while read i
sed -i.BAK "s|$1|$2|g" $i

This will find all programs here and below, and changes all X to Y. This uses the -i (in-place edits) available on most sed editor programs. It also creates backup copies (ending in .BAK) of the files that change. You may need to use special escaping characters if you use with more than just simple letters.

Save this as a file named replaceall, give it executive rights (chmod +x). Then start the script at the root of web site generated by Gramps :

$ ./replaceall Souche Arbre

Which will change all instances of "Souche" with "Arbre" in all files ending in .html. To replace more than one word, use double quotes, like:

$ ./replaceall "Souche Family" "Arbre Family Tree"

Source :

Code modifications

Alternate Code

See ThomsWeb.

Multilingual Web Site

Some people generated multilingual web site.

The Chailloux - Żelaska Family Web Site is an attempt to create a French / Polish / English website.

"Online maps" urls

Patch on issue:2313 was shared on mailing list.

Animal pedigree

You can use Gramps for generating an Animal Pedigree !

See Also