How to Create A Beautiful Family History Website

Almost every major genealogy website has an ever-growing collection of online family trees, and many other sites exist primarily for hosting, searching and linking pedigree files. Adding your own trees is a great way to connect with cousins and fellow researchers, make data accessible on the go and contribute to the world’s genealogical knowledge. Whether you’re building a tree from scratch on sites like Ancestry.com or MyHeritage or uploading data from your desktop genealogy software, sharing your research online is easy and inexpensive.

But building or uploading a tree on someone else’s genealogy website is like renting an apartment instead of owning a house. If you’re like me, ultimately you want more control over your tree’s home environment. (Not for nothing does my wife call me “Captain Control.”) You want to be able to pick your own colors, layout and fonts. You’re not entirely satisfied with another site’s wiring, so to speak: how its uploaded trees handle sources and notes or how well it works with your genealogy software. Maybe you want more room to entertain relatives with family stories and pictures, beyond the bare bones of pedigree charts. You might just want your family history to have its own address, like www.jonesfamilytree.com.

Taking control and building your own online family history site isn’t as complicated as you might think. Here we’ll walk through the construction process, step by step, and outline your options.

Note: Features and pricing information may have changed since this article’s publishing. Please consult individual websites for updated pricing.

1. Output Your Tree

An old saying (well, as old as the web) goes, “Online, content is king.” So the first step in building your own family history site is to decide what content you want to put online and to get it ready for publishing.

For starters, that probably includes your family tree. If you’re using a genealogy software program on your computer or tablet, you have lots of easy options for getting that content ready to go online. Programs such as RootsMagic and Legacy Family Tree for PCs or Reunion and MacFamilyTree for Macs will output an entire website containing a clickable family tree. You can also generate text reports (such as family group sheets) in PDF form, as well as chart graphics. It’s hard to beat the convenience of these ready-made tree sites, which quickly churn out scads of pages that would take days to code by hand even if you knew how. (My initial Fryxell family tree, output from Reunion, produced a whopping 3,305 individual files.)

If you’ve previously uploaded a tree to any of the popular genealogy sites, you already know how to export data in the GEDCOM universal file format. The process of exporting a tree to put directly on the web is similar (and the command to do so is probably near that for GEDCOM export on your software’s menu). But here you’ll be generating HTML files—the universal language of the World Wide Web. Unless you have a high degree of expertise with HTML coding, you’ll want to be careful not to tinker with these intricate and interconnected files except as absolutely necessary. Because HTML files are essentially just plain-text documents, you can edit them with any word processor or even the most bare-bones text editor. Tackling 3,000 or so complex files, however, is more than you’ll want to take on—and not necessary, since your genealogy software can do all the heavy lifting.

When generating a site from your tree program, you need to consider the same issues as when exporting a GEDCOM file. Check the privacy options and decide how much you want to post about living relatives. Popular genealogy websites generally won’t show others the birthdate you entered for your living cousin Sarah, but you’ll have to be proactive about protecting that data when you publish your website. You’ll also have to—or get to, if you’re an aspiring Captain Control—make decisions about fonts, colors and backgrounds, to the extent your software enables you to customize its web output. If in doubt, keep your design clean and simple and minimize background distractions.

If a tree is all you want to put online, you can simply take the resulting (large) folder of files and upload them to your chosen domain and host—decisions we’ll cover in the next steps. My initial Fryxell and Dickinson (my mother’s side) family sites were just that, using software called FTP (short for File Transfer Protocol) to put the files online. Even if you opt for a fancier home for your family tree, FTP will still be essential for uploading the HTML files generated by your genealogy software. An FTP program lets you copy files from your computer to an online server, typically as simply as dragging and dropping.

Many FTP options are available, most either free or inexpensive. Popular choices include:

• CyberDuck (Windows and Mac)
• Forklift (Mac)
• FileZilla (Windows and Mac)
• Xlight (Windows)
• CompleteFTP (Windows)
• Fetch (Mac)

2. Add Extra Content

Once you’ve followed the steps below to host your files, you could stop there (I did—at first). But as long as you’re building your own, customized family history site, you might want to go deeper with content. Family photos are ideal for sharing online, as are scanned or screen-captured source materials. In the early days of the internet, before broadband access, sites strove to keep image file sizes as small as possible to speed download times. The standard resolution of a computer screen, at 72 dots per inch (dpi), was the rule. Now, however, you can safely use bigger image files at 150 or 200 dpi, which may be the same resolution you use for the files on your computer.

If you’ve scanned family photos at 300 dpi, you can use imaging software such as Photoshop Elements or Affinity Photo to adjust that resolution, as well as the overall picture size. That framed wedding photo of Grandma and Grandpa might be 8×10 inches, but 4×5 inches is probably plenty for posting online. Don’t worry too much about sizes at this stage, though, as you can usually scale images further in a web page creation program. Save your images as JPG files (.jpg) for maximum compatibility. Use imaging software to adjust the size and resolution of old photos before uploading.

Scanned or downloaded source materials can be treated much like old photos. You might want to use photo-editing software to crop and zoom in on your family’s part of a census page or other document (or zoom and crop when taking a screen shot in the first place). You could even add arrows or circles to point out important facts. Consider sharing your research notes, too. Keep in mind that you can easily incorporate links to online documents and search results on other websites. (Most web-building tools make it easy to add links, but the HTML code for doing so is super simple: <a href=”url”>link text</a> The url is of course the link address, while the link text is what gets highlighted and made clickable.) For links to paid sites such as Ancestry or MyHeritage to work, your visitors will need a subscription.

Now also is the time to gather family stories and transcriptions of oral-history interviews. Any text program is fine for these, as you’ll be copying and pasting them into whatever you use to create web pages. Be aware, however, that Microsoft Word is notorious for adding unwanted code when pasting from it. Look for option such as “paste as plain text” or “paste from Word” to clean this up.

If you have recorded interviews or digitized family movies, you can even share these online as well. Simply upload in a widely used format (MP3, AAC or WAV for audio, MP4 or MOV for videos) and then add a link to the sound or video file. Keep in mind that audio and especially video files can be quite large, so choose judiciously and take advantage of compression options.

3. Claim Your Domain

Next, you’ll want to register a domain name, like familytreemagazine.com, that tells the internet where to go. I’ve been snapping up domain names since the wild and wooly early days of the web. That’s why, much to my cousins’ consternation, I own fryxell.com. By now, however, much of this internet real estate has already been grabbed, and you may find your preferred family domain taken. It might not even be in use, just snagged by some speculator hoping to someday sell bueller.com to the highest bidder. You might have to consider more genealogy-specific possibilities like buellerfamily.com, buellergenealogy.com, buellerfamilytree.com or buellerfamilyhistory.com. Or you can branch out from the most popular .com domains and try .org or .net (.edu is supposed to be reserved for educational institutions) or newer choices such as .us, .co, .info, .me, .site, .life, .online or .website.

How can you tell if a domain you want is taken? Simply typing it into your web browser and finding no such site is no guarantee; a domain could be owned but unused or “parked.” Instead, you need to visit one of the Internet’s “registrars,” most of which also offer hosting services. Popular options include:

• 1&1 Internet
• Bluehost
• Domain.com
• Dreamhost
• Fat Cow
• Gandi
• GoDaddy
• Google Domains (hosting with affiliated Google Sites)
• Hover (no hosting)
• MyDomain
• Name.com
• Namecheap
• Network Solutions (the original domain registrar)

Searching for a domain at any of these sites will quickly find all available dot-whatever permutations, as well as suggestions you might not have thought of. When you find your preferred domain, a few clicks and a credit card are all it takes to officially join the internet. You may be able to get a deal for your initial registration; renewals run about $12 to $20 a year per domain. Fees for hosting vary widely, but basic hosting for a single site starts at about $4 a month.

If you’re not ready to dive into building a complete site, you can temporarily “point” your newly acquired domain to any address on the internet. For example, you could redirect your domain to your uploaded tree on Ancestry or MyHeritage; just go to your tree and copy the whole (very long) URL from your browser’s address bar, then paste that into the form at your domain registrar. You could do the same with a genealogy blog you create at sites such as Tumblr or Blogger. Users who type in bueller.com would then be invisibly redirected to your Bueller tree or the Great Bueller Blog.

4. Build Your Site

When you’re ready to build a complete website, you’ll need to sign up for hosting, either at your domain registrar or another service. Increasingly, hosting services also provide some sort of tool with which to build your site. Other companies, such as Wix, Squarespace, WebFlow and Weebly, emphasize their simple, powerful site-building tools—no coding required—and usually include hosting as part of the package. Prices for such a combo start at about $14-$16 a month. (You can also find services at a lower price that pop ads into your site.)

Keep in mind that the primary point of building your own family tree website is to share your family tree. Not all website-building services are going to be geared to this sort of (rather unusual) application; many target web commerce instead, for example. You may find yourself using the tools just to build a home page and a few other pages about your ancestors and sources, then linking to the files output by your software. In that case, there’s no point in paying big bucks for site-building services—your core need is hosting to have a place to FTP those thousands of little files.

You can also probably skip site-building software on your PC or Mac, rather than in the “cloud.” Many such programs (such as Adobe’s defunct Dreamweaver) have fallen by the wayside, anyway, in the face of competition from cloud-based services and free or inexpensive offerings from hosting companies.

However you start building web pages, you can take advantage of templates and drag-and-drop tools that make creation simple. It might come in handy to understand a few basic HTML coding commands, but these days you can certainly crank out a basic site with zero coding.

5. Get Creative with WordPress

I tried a bunch of different tools in my first attempts at my Fryxell family site. Frankly, they were cumbersome and lacked the all-important control I was looking for. Too many relied on templates that lacked customization options; others just felt too complicated. Frustrated, I did what any smart father would do when confronted with a technological problem: I asked my daughter, Courtney Graziano. Fortunately, she builds websites and runs social media campaigns for a living as a director of digital strategy for a global consulting firm.

Courtney recommended WordPress, which I learned is the most widely used web-publishing platform, the choice of everyone from People magazine to the New York Times to PlayStation. Best of all, it’s free. It lets you set up a blog (much as with Blogger or Tumblr) or a website. Such a site could be hosted at WordPress and have a wordpress.com URL (though you can of course point to it from your own domain). Or you can download the WordPress tools to use at your own domain.

It’s likely, though, that your hosting firm already has the WordPress package and you just need a few clicks to install it, at no extra charge. Once I located the “WP” icon at my host, it walked me through the process and I was done in minutes. (Note that to take full advantage of WordPress features, you’ll also want to create a free account at the WordPress website. This is separate from your “admin” account for your own site.)

Once you’ve installed WordPress and logged in with the user name and password you chose during setup, you’ll find the bare bones of a ready-made site. Initially you’ll be taken to your Dashboard, a kind of “home base” where you can add pages and control the look of your site. You’ll want to make some basic design decisions before you start adding content—but don’t worry, you can always change your mind later. (Almost magically, WordPress can reformat your entire site to reflect these changes.)

First you’ll want to choose a “theme.” This controls the basic layout of your pages, the fonts and the overall appearance, much like the templates offered at other website builders. An important difference, however, is that the open nature of WordPress means that thousands of ready-made themes are available. Many themes are free, with still more available for just a few bucks. To start exploring themes, just click on Appearance, then Themes. Among free themes, Courtney recommended “Twenty Eleven,” one of the special themes WordPress issues annually (that one was from 2011—hence the name). You can find tens of thousands more themes at the WordPress website and sites like ThemeForest.com (about $10 and up).

Installing your chosen theme is as simple as clicking “Activate”; you can also click to see a “Live Preview” before you commit. Don’t like your selected theme after all? Just click to activate a different one. 

Next, you’ll want to customize your page header. WordPress thoughtfully provided me with a lovely image of a pinecone, but I thought something more relevant to my family might be better. Since the image needs to be horizontal—1,000 pixels wide by 288 tall in this case—I rejected the thought of old family photos. (Grandma and Grandpa would have to be cropped to eyes and noses, or horribly squished.) I went instead with an old map of my ancestors’ original stomping grounds in Sweden. Choosing Appearance, then Header, then “Add New Image,” I uploaded my file, cropped it slightly and applied to my pages. Make sure to click “Save & Publish” to keep your changes.

Also under Appearance, you can choose your site’s colors and fonts, add a background image (think twice—this can make your text hard to read) and control whether your home page will be static or display your latest blog posts. I went with a static page, since for now I’m not posting blog entries or inviting comments. Click “Site Identity” under “Customize” to change the name of your site as it appears on the page and add a tagline. The Layout option lets you choose where to put your main content relative to a sidebar of links, or omit the sidebar.

If you do opt for posts and/or comments, you can control them via the Posts and Comments  options on your Dashboard. (Be prepared for a blizzard of spam comments.)

To start adding articles and pictures to your site, click “Pages” from the Dashboard and choose an existing page to edit or add a new one. Here you can view and edit the entire page, or select a “block” to edit just part of the page. Commands that pop up when editing a block let you style text as bold or italic, add links (within your site or to external sites), adjust text alignment and much more—all without having to know HTML coding. It’s as easy as editing in your word processor. You can change the formatting buttons and where they appear by clicking “WP Edit” near the bottom of the Dashboard’s left-hand menu. An even more powerful editor, which you can purchase right from the WP Edit screen, is WP Edit Pro ($35 or $10 a year). Courtney recommended another editor, Elementor, which comes in either free or “pro” versions (starting at $59 a year).

To include an image, click Add Media when editing a page, then upload your picture. The same tool lets you insert video or audio files. To find and manage your uploaded images and other files, click the Media button on your Dashboard.

If you want to see the results of your work, click Preview in the editor. Click the blue Update button to save your changes.

6. Add Your Tree

Combining the web-publishing power of WordPress (or other web-building tools) and the output of your genealogy software can turn out to be trickier than you might imagine. One option is to turn to WikiTree, a free tree-sharing site. WikiTree offers embeddable family-tree “widgets” that can be placed in any website, from a simple blog to your WordPress project. This trick uses a variant on an HTML tag called “iframe” that puts one site in a frame inside another. You can visit the Family Tree Widget page to get started, or visit refer to the WikiTree Help Wiki for step-by-step instructions on embedding widgets in a blog or a WordPress site. For a WordPress site, the process is pretty simple: You copy the HTML code from WikiTree, then paste it into a post or page. (You may need to first click the white-on-blue plus button in the upper left and select “< > Code.” Then click the three stacked dots at the top of the editing tools and choose “Edit as HTML.”)

You can also add plugins—little programs that add functionality—specifically for a family tree to your WordPress site. If you have a large tree, you won’t want to bother with anything that requires re-entering data, so consider a plugin that can import GEDCOM files exported from genealogy software. These include:

• RootsPersona     
• TreePress (limited to 200 ancestors)
• GenealogicalTree
• WPGenealogy

When I first set up my Fryxell family site, though, I decided simple is best and just uploaded my HTML files created by Reunion, via FTP. I added a link to the Reunion-generated home page from the menu of my WordPress site, so users could jump from my family history text and old photos to the actual tree. WordPress automatically generates menu links for top-level pages on your WordPress site, but I had to add this external link to my Reunion pages manually. In my case, this looked like this: www.fryxellfamilytree.com/reunion/wc_toc.htm. That told the web to look in a folder called Reunion for a file named wc_toc.htm (“toc” as in table of contents). Note that all the other pages in your software-generated HTML files probably have a link back to this page, so don’t change the file name. (These “local” links don’t need to be changed after being uploaded by FTP as long as the files all stay in the same folder.)

Once I’d uploaded the fat folder of files, in WordPress’ Dashboard I went to Appearance, then Menus, and pasted my external URL under Custom Links, along with the link text “View Tree.” I opted to have the link open in a new tab, so visitors could easily navigate back to the main site. The result was that a new clickable option, View Tree, appeared next to my Home page link.

7. Share With the World

Depending on your hosting provider, your WordPress site may be “live” as soon as you start working on it. Some providers post a “Coming Soon” page and let you choose when you’re ready to launch. To make sure your site can’t be seen while “under construction,” use a plug-in such as Coming Soon and Maintenance Mode or use Elementor’s built-in Maintenance Mode. Once you’re “live,” click the Publish button in WordPress to make subsequent updates and additions to your site viewable.

Finally, it’s time to let your family members and fellow researchers know about your site. Spread the word via email, Twitter and on your Instagram and Facebook pages. Ask other family who have pages, genealogy or otherwise, to link to your site. If your surname is the subject of message boards like those at Ancestry, post a link to your site there. If you also have a blog, link to your tree site early and often.

Before you know it, too, your site will start showing up in search engines like Google or Bing. To speed up how rapidly Google’s bots scan your site, add the Google XML Sitemaps plug-in. Registering for Google Analytics lets you keep track of visitors to your site.

But don’t stop there. As you make new family-history finds, announce them to the world with new posts or pages on your site. Remember to periodically update the tree portion of your site to reflect changes in your desktop version: The simplest, surest way is to output an entire new batch of HTML files and use FTP to completely replace the old online folder. (Trying to identify what’s changed or to edit online files by hand is a recipe for disaster.)

That’s all there is to it. Your family history is now online at its custom-built “home sweet home” online.

Home Maintenance: WordPress Tools, Plugins and Widgets

Add or improve functionality on your WordPress site, improve security, backup your site and make site management easier. Try these plugins, widgets and helper sites, most of which offer at least some features for free:

• Jetpack: Security, site optimization and more.
• ManageWP: Ideal if you have multiple sites, ManageWP lets you backup, update and scan for malware, all from one dashboard.
• WordFence Security: Keep an eye on your site and block would-be intruders.
• AkisMet Anti-Spam: Filter out spam comments.
• Disqus: Improve the built-in comment system.
• WP Google Fonts: Expand your theme’s font repertoire.

Last updated: March 2023

Related Reads