When building the website from a ghost base, all images are copied, hashed, and referenced using the Ghost URL.
However, the src is still using the Ghost URL.
The result is that images are unavailable when deploying because the src attribute points to a localhost url.

A basic config such as a domain name seems missing from eleventy (https://www.11ty.dev/docs/config/),
so I have no idea how to configure the domain name.

How to configure this theme so that images can be displayed on a real website?

Current outcome:
<img src="http://localhost:2368/lvnjnaregnrae.jpeg"/>
expected outcome:
<img src="/lvnjnaregnrae.jpeg"/>

There seems to be some work done for URLs in the config:

// Strip Ghost domain from urls
const stripDomain = url => {
  return url.replace(process.env.GHOST_API_URL, "");
};

However that doesn't apply to images.

Some config info:

Version 1 of this package (eleventy starter ghost) with node 16.17.1

"dependencies": {
    "@11ty/eleventy": "^0.11.0",
    "@11ty/eleventy-plugin-rss": "^1.1.1",
    "@tryghost/content-api": "^1.4.4",
    "@tryghost/helpers": "^1.1.6",
    "clean-css": "^4.2.1",
    "cross-env": "^7.0.0",
    "dotenv": "^8.0.0",
    "eleventy-plugin-lazyimages": "liamfiddler/eleventy-plugin-lazyimages",
    "eleventy-plugin-local-images": "^0.4.0",
    "eslint-utils": "3.0.0",
    "html-minifier": "^4.0.0",
    "yarn": "^1.22.19"
  },
  "devDependencies": {
    "eslint": "7.32.0",
    "eslint-plugin-ghost": "2.11.0"
  }

Hi, while #1 was an easy fix, I'm not sure how to go about this one, so I'd appreciate your guidance.

In ghost's default Casper theme, the header inside a post is a black navbar, like so: https://i.imgur.com/lL5Gl4E.png

However, this template has headers that show the site's publication image instead of the black navbar. Especially when the publication image has light colours, it leads to an unreadable header, like so: https://i.imgur.com/hN1qLvt.png

If I want a header just like Casper, what can I do? Thanks!

Hello, sorry for bothering again. I made some style changes and published just a test post, with title and small text, but it didn't render in the static page. I tried a yarn build and that was the result:

Error writing templates: (more in DEBUG output)

Having trouble writing template: dist/index.html

TemplateWriterWriteError was thrown

Cannot read property 'toLowerCase' of undefined

TypeError was thrown:
TypeError: Cannot read property 'toLowerCase' of undefined
at processImage (...\eleventy-starter-ghost\node_modules\eleventy-plugin-lazyimages.eleventy.js:150:45)
at ...\eleventy-starter-ghost\node_modules\eleventy-plugin-lazyimages.eleventy.js:198:47
at Array.map ()
at Template.transformMarkup (...\eleventy-starter-ghost\node_modules\eleventy-plugin-lazyimages.eleventy.js:198:32)
at Template.runTransforms (...\eleventy-starter-ghost\node_modules@11ty\eleventy\src\Template.js:369:29)
at processTicksAndRejections (internal/process/task_queues.js:97:5)
at async Template.renderPageEntry (...\eleventy-starter-ghost\node_modules@11ty\eleventy\src\Template.js:609:15)
at async Template.writeMapEntry (...\eleventy-starter-ghost\node_modules@11ty\eleventy\src\Template.js:616:21)
at async Promise.all (index 5)

I also made a new fresh clone of this repo without editing and got the same error.
in the plugin eleventy.js thats the step where the toLowerCase() is called:
if (!supportedExtensions.includes(fileExt.toLowerCase())) { logMessage(${fileExt} placeholder not supported: ${imgPath}); return;

Thanks again

Errors on the source site that result in 404s all attempt to write to dist/404.html which itself causes the build to fail and nothing to get written.

I tracked this down to using internal tags. Since I only had 4 and wasn't really using them, I deleted them. I guess check for internal tags and skip them?

Issue Summary

Your demo uses .njk files.

When we add a Ghost theme to the src folder and edit .eleventy.js the config to include hbs files and run it, a lot of errors come up about being unable to find standard ghost helpers such as "get" and "foreach".

For example:

$ yarn start

yarn run v1.17.3
$ yarn run dev
$ cross-env ELEVENTY_ENV=dev eleventy --serve
Problem writing Eleventy templates: (more in DEBUG output)
> Having trouble rendering hbs template ./src/error.hbs (TemplateContentRenderError)
> Missing helper: "get" (Error):

Does this not support Ghost's .hbs files? How do we get it working with Ghost hbs files? We have no use for netfly nor njk files. Just want to build a static ghost blog, as promised.

By the documentaion says, I added my content api from my ghost running servic, in .env file

GHOST_API_URL=http://localhost:2368
GHOST_CONTENT_API_KEY=8603098d3b7307e36d6d21148c
SITE_URL=http://localhost:8080

Then after try to run scripts, example

  "scripts": {
    "start": "npm run dev",
    "dev": "cross-env ELEVENTY_ENV=dev eleventy --serve",
    "build": "cross-env ELEVENTY_ENV=prod eleventy",
    "test": "node run build",
    "lint": "eslint . --ext .js --cache"
  }

It produce thease kind of errors

LazyImages - found 1 images in dist/404.html
LazyImages - svg placeholder not supported: https://static.ghost.org/v1.0.0/images/ghost-logo.svg
LazyImages - found 3 images in dist/index.html
LazyImages - svg placeholder not supported: https://static.ghost.org/v1.0.0/images/ghost-logo.svg
LazyImages - started processing http://localhost:2368/content/images/2020/05/Screenshot-from-2020-03-15-20-35-25.png
LazyImages - processed 1 images in dist/404.html
Writing dist/feed.xml from ./src/feed.njk.
Writing dist/_headers from ./src/headers.njk.
Writing dist/.htaccess from ./src/htaccess.njk.
Writing dist/_redirects from ./src/redirects.njk.
Writing dist/robots.txt from ./src/robots.njk.
Writing dist/sitemap.xml from ./src/sitemap.njk.
Error writing templates: (more in DEBUG output)
> Having trouble writing template: dist/index.html

`TemplateWriterWriteError` was thrown
> The "path" argument must be of type string. Received null

`TypeError` was thrown:
    TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received null
        at validateString (internal/validators.js:117:11)
        at Object.extname (path.js:1229:5)
        at processImage (/home/zero/playground/11tyblog/node_modules/eleventy-plugin-lazyimages/.eleventy.js:122:22)
        at Array.map (<anonymous>)
        at Template.transformMarkup (/home/zero/playground/11tyblog/node_modules/eleventy-plugin-lazyimages/.eleventy.js:198:32)
        at Template.runTransforms (/home/zero/playground/11tyblog/node_modules/@11ty/eleventy/src/Template.js:387:29)
        at processTicksAndRejections (internal/process/task_queues.js:97:5)
        at async Template.renderPageEntry (/home/zero/playground/11tyblog/node_modules/@11ty/eleventy/src/Template.js:548:17)
        at async Template.writeMapEntry (/home/zero/playground/11tyblog/node_modules/@11ty/eleventy/src/Template.js:556:21)
        at async Promise.all (index 5)

I thought I was getting the same as #31, but it's merged.

I tracked it down to lazy images, which is similar to this: liamfiddler/eleventy-plugin-lazyimages#31

Basically, if an image doesn't have a file extension, it's not a supported extension and it fails further on.

 if (!fileExt) {
    // Twitter and similar pass the file format in the querystring, e.g. "?format=jpg"
    fileExt = querystring.parse(parsedUrl.query).format;
  }

So, really a bug with the other plugin. Hardcoding a fileExt "works", but depends on what your images are. Other rules and checks should be run inside of this.

I'm running the Unsplash plugin, and it uses query strings to include Unsplash images of different sizes from their CDN, which looks to be the issue.

Full log of output:

> Having trouble writing template: dist/index.html

`TemplateWriterWriteError` was thrown
> Cannot read property 'toLowerCase' of undefined

`TypeError` was thrown:
    TypeError: Cannot read property 'toLowerCase' of undefined
        at processImage (/Users/bmann/repos/eleventy-starter-ghost/node_modules/eleventy-plugin-lazyimages/.eleventy.js:143:45)
        at Array.map (<anonymous>)
        at Template.transformMarkup (/Users/bmann/repos/eleventy-starter-ghost/node_modules/eleventy-plugin-lazyimages/.eleventy.js:215:32)
        at Template.runTransforms (/Users/bmann/repos/eleventy-starter-ghost/node_modules/@11ty/eleventy/src/Template.js:369:29)
        at processTicksAndRejections (internal/process/task_queues.js:97:5)
        at async Template.renderPageEntry (/Users/bmann/repos/eleventy-starter-ghost/node_modules/@11ty/eleventy/src/Template.js:609:15)
        at async Template.writeMapEntry (/Users/bmann/repos/eleventy-starter-ghost/node_modules/@11ty/eleventy/src/Template.js:616:21)
        at async Promise.all (index 2)

How can a site visitor get to the older posts and see them on the home screen?

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Repository problems

These problems occurred while renovating this repository. View logs.

• WARN: Using npm packages for Renovate presets is now deprecated. Please migrate to repository-based presets instead.

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

• Update dependency @11ty/eleventy to ^0.12.0
• Update dependency clean-css to v5
• Update dependency dotenv to v16

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• Update dependency @tryghost/content-api to v1.11.21
• Update dependency @11ty/eleventy-plugin-rss to v1.2.0
• Update dependency eslint-plugin-ghost to v2.18.1
• Update Test & linting packages (major) (eslint, eslint-plugin-ghost)
• Update actions/checkout action to v4
• Update actions/setup-node action to v4
• Update dependency @11ty/eleventy to v2
• Lock file maintenance
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

Issue Summary

All builds fail when processing remote images, as they contain ? or #.

To Reproduce

1. Migrate a Ghost blog that uses Unsplash stock photos as part of content.
2. Setup integration with Netlify and eleventy-starter-ghost.
3. Attempt deploy using out of the box toml.

9:31:08 PM: Failed during stage 'deploying site': Invalid filename 'assets/images/Z1CXdU8-photo-1485617359743-4dc5d2e53c89?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjExNzczfQ'. Deployed filenames cannot contain # or ? characters

Technical details:

• Ghost Version: 3.15.1
• Eleventy Version:
• Node Version: Netlify Latest

Issue Summary

If you attempt to build an 11ty site using data from ghost that doesn't include a photo for the author image, eleventy will provide the error:

Having trouble writing template: dist/index.html

`TemplateWriterWriteError` was thrown
 The "path" argument must be of type string. Received type object

to circumvent this, wrap the author image html markup in the src/_includes/partials/card.njk file with {% if post.primary_author.profile_image %}{% endif %}.

在使用了 Internal tags 的情况下会出现 /404/ 键值重复的情况。
所以获取所有Tags时需要过滤掉Internal tags。
When using Internal tags, there may be duplicate values for /404/ key. Therefore, it is necessary to filter out Internal tags when retrieving all Tags.

  // Get all tags
  config.addCollection("tags", async function(collection) {
    collection = await api.tags
      .browse({
        include: "count.posts",
        limit: "all",
       filter: "visibility:public" // 
      })
      .catch(err => {
        console.error(err);
      });

Issue Summary

error "cross-env: command not found" during install of this repo

To Reproduce

Following the instructions line by line:

git clone https://github.com/TryGhost/eleventy-starter-ghost.git
cd eleventy-starter-ghost
yarn
yarn start

leads to this error:

$ yarn start

yarn run v1.9.4
$ yarn run dev
$ cross-env ELEVENTY_ENV=dev eleventy --serve
/bin/sh: cross-env: command not found

It's a fresh install and won't run following the instructions, so reporting it as a bug.

Installing cross-env and then running yarn start again leads to this other error:

$ npm install cross-env

+ [email protected]
added 9 packages in 2.735s

$ yarn start

yarn run v1.9.4
$ yarn run dev
$ cross-env ELEVENTY_ENV=dev eleventy --serve
Eleventy fatal error: (more in DEBUG output)
> Error in your Eleventy config file '/Users/larry/Documents/stemloungecms/eleventy-starter-ghost/.eleventy.js'. You may need to run `npm install`.

`EleventyConfigError` was thrown
> Cannot find module 'dotenv'

`Error` was thrown:
    Error: Cannot find module 'dotenv'
        at Function.Module._resolveFilename (module.js:538:15)
        at Function.Module._load (module.js:468:25)
        at Module.require (module.js:587:17)
        at require (internal/module.js:11:18)
        at Object.<anonymous> (/Users/larry/Documents/stemloungecms/eleventy-starter-ghost/.eleventy.js:1:63)
        at Module._compile (module.js:643:30)
        at Object.Module._extensions..js (module.js:654:10)
        at Module.load (module.js:556:32)
        at tryModuleLoad (module.js:499:12)
        at Function.Module._load (module.js:491:3)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

doing yarn add dotenv or npm install dotenv (even with the -g flag) doesn't change the above error.

Technical details:

• Ghost Version: Whichever one was included in this starter repo
• Eleventy Version: Whichever one was included in this starter repo
• Node Version: v8.9.4
• OS: OSX 10.13.6 (17G65)

I was testing it with shell dark mode, a very cool free theme, but it seems to be that it doesn't work (i tested it local and deploying on Netlify). Is that something else I need to do for it works? I would like to have at least a dark theme for it.
Thanks

I have an old version of Ghost that I want to convert to use Eleventy. The README claims this will work with my older version of ghost (2.15.0)

The minimum required version for Ghost is 2.10.0 in order to use this starter without issues.

However, I'm not able to get the content api to work. Is there something I need to do to get around this?

The old public api is there, but I don't see any UI for enabling or setting up the content api.

Issue Summary

After a fresh install, it's not possible to access the admin panel on http://localhost:8080/ghost, returning:
Error 404
Page not found,
[return home]
to start over

To Reproduce

1. clone the repo
2. yarn / yarn start
3. try to access http://localhost:8080/ghost

Technical details:

• Ghost Version: 2.11.0
• Eleventy Version: 0.11.0
• Node Version: v12.22.9
• OS: Pop_OS

Welcome to the Eleventy Starter Ghost GitHub repo! 👋🎉

We use GitHub only for bug reports 🐛

Anything else should be posted to https://forum.ghost.org 👫

For questions related to the usage of Eleventy, please check out the docs at https://www.11ty.io/docs/

🚨For support, help & questions use https://forum.ghost.org/c/help
💡For feature requests & ideas you can post and vote on https://forum.ghost.org/c/Ideas

If your issue is with Eleventy itself, please report it at the Eleventy repo ➡️ https://github.com/11ty/eleventy/issues/new/choose.

Issue Summary

A summary of the issue and the browser/OS environment in which it occurs.

To Reproduce

1. This is the first step
2. This is the second step, etc.

Any other info e.g. Why do you consider this to be a bug? What did you expect to happen instead?

Technical details:

• Ghost Version:
• Eleventy Version:
• Node Version:
• OS:

Content renders as in feed.xml:

<entry>
<title>Writing posts with Ghost ✍️</title>
<link href="https://eleventy.ghost.org/the-editor/"/>
<updated/>
<id/>
<content type="html"/>
</entry>

Content should be:

<entry>
<title>Writing posts with Ghost ✍️</title>
<link href="https://eleventy.ghost.org/the-editor/"/>
<updated/>
<id/>
<content type="html"> Post Full content should be rendered here </content>
</entry>

Issue Summary

On new local Ghost installation, in for example "Writing posts with Ghost ✍️" article, bookmark card is broken in 11ty, while Ghost front-end theme and back-end editor are displaying it correctly.

As you can see, the elements are there but it seems that some CSS and/or JS is missing.

To Reproduce

Just install Ghost and clone this repo

Technical details:

• Ghost Version: 3.24.0
• Eleventy Version: 0.11.0
• Node Version: 12.16.1
• OS: elementaryOS 5.1.6 Hera

Thank you for your time putting this together.

Cheers.

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: undefined. Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.

Welcome to the Eleventy Starter Ghost GitHub repo! 👋🎉

We use GitHub only for bug reports 🐛

Anything else should be posted to https://forum.ghost.org 👫

For questions related to the usage of Eleventy, please check out the docs at https://www.11ty.io/docs/

🚨For support, help & questions use https://forum.ghost.org/c/help
💡For feature requests & ideas you can post and vote on https://forum.ghost.org/c/Ideas

If your issue is with Eleventy itself, please report it at the Eleventy repo ➡️ https://github.com/11ty/eleventy/issues/new/choose.

Issue Summary, To reproduce

Inappropriately sized targets: On smaller screens with the right navigation bar. Lighthouse recommends "Interactive elements like buttons and links should be large enough (48x48px), and have enough space around them, to be easy enough to tap without overlapping onto other elements".

Contrast: All screens. On a page with links the contrast with the links is not ideal, so they should be darker. This is another issue that Lighthouse points out, as "Low-contrast text is difficult or impossible for many users to read". It also recommends caching the cover image for at least a year, but 30 days seems fine enough.

Navigation Bar: All screens. Ideally, I'd want the right navigation bar to grab the items on the secondary menu of my blog instead of grabbing independently of the original layout. (In a somewhat unpredictable way.)

Explanation

With the first 2 issues resolved, the starter should have 400 Lighthouse score, as you can see from my report here (or the home here, but that's not very representative). Ideally I'd like it to cache cover images like it does for inline images (honestly, that's a feature which makes me prefer this starter over any other, and it seems the image plugin now has processing built-in).

About the secondary navbar, I'd prefer it to be predictable and under control from the upstream navigation settings.

Technical details:

• Ghost Version: 4.8.4
• Eleventy Version: 0.11.0
• Node Version: 16.X dev, 14.X prod
• OS: Linux

Issue Summary

On the new local Ghost installation, in for example "Writing posts with Ghost ✍️" article, the image gallery is broken in 11ty, while Ghost's front-end theme and back-end editor are displaying it correctly.

As you can see, all the images are there but it seems that some CSS and/or JS are missing.

To Reproduce

Just install Ghost and clone this repo

Technical details:

• Ghost Version: 3.24.0
• Eleventy Version: 0.11.0
• Node Version: 12.16.1
• OS: elementaryOS 5.1.6 Hera

Cheers.