How to add vCards to Hugo

One of the great things about Hugo is that it can output just about any type of file. I ran into the need to add a vCard to profiles on a client’s site and finally got to use it.

First let’s setup Hugo to output a .vcf file. Open your site’s config file and edit and add vcf to your outputFormats. If your config file doesn’t have outputFormats in it, add all the code below.

  outputFormats:
    vcf:
      name: vcf
      baseName: contact-info
      mediaType: text/vcard
      isPlainText: true

Next you need to do is setup Hugo to output a .vcf. In my case profiles are pages, so I added them to the page output.

  outputs:
    home:
     - HTML
     - RSS
    page:
     - HTML
     - vcf
    section:
     - HTML

One caveat to my setup is that a .vcf file will be generated for each page. I don’t think this is going to be a huge issue.

UPDATED: You can avoid this by adding outputs to the front matter in your content.

outputs:  
  - html  
  - vcf

The next step is to add a template for the vCard. Add a file /layouts/_default/single.vcf. Add the following code to single.vcf. Note that you will have to replace the variables to match your data.

  BEGIN:VCARD
  VERSION:4.0
  N:{{ .last_name }};{{ .first_name }};{{ .middle_name }};;
  FN:{{ .first_name }}{{ with .middle_name }} {{.}}{{ end }} {{ .last_name }}
  EMAIL:{{ .email_address }}
  TEL;type={{ .label }}:{{ .phone }}
  ORG:{{ .Site.Data.organization.organization_name }}
  URL;type=pref:{{ .Permalink }}
  ADR:;{{ .address_1 }};{{ .address_2 }};{{ .city }};{{ .state }};{{ .zip_code }};usa
  {{ range .social_media }}
    {{ if gt ( len . ) 0 }}
      URL:{{ . }}
    {{ end }}
  {{ end }}
  END:VCARD

For more information see the Hugo documentation

Custom Output Formats