Search code examples
javascriptgulpnetlifynunjuckseleventy

Generating full URLs on Eleventy and Netlify


I am working on an Eleventy based blog and website. Social media sharing features, like Facebook OpenGraph and Twitter cards, need to have a full absolute URLs to resources like images. Twitter especially rejects any relative URLs to images.

Does Eleventy offer a native way to produce full URLs? As Eleventy is a static site generated, as opposite to a hosted web server, it cannot this information from HTTP headers like other systems out there. The site is hosted on Netlify if Netlify provides any tools to generate URLs from JS. I already have some tasks to generate resized images with Gulp.

Currently I am just using my own in-site configuration like this to generate the URLs in Nunjucks templates:

{# page_twitter_image is a site root relative path to the image #}
{% if page_twitter_image %}
<meta name="twitter:image" content="{{ site_base_url }}{{ page_twitter_image }}" />
{% endif %}

More information about my URL generation here.


Solution

  • As far as I know (based on the docs: https://www.11ty.dev/docs/data/#page-variable-contents) the answer is no. I think your solution makes sense though.

    I'm filing an ER to make it possible to get access to this. I think it should be available in page data and maybe via shortcodes/filters.