11ty / eleventy-base-blog Goto Github PK

I got tripped up by the directory structure.

This happened because I was npm installing a package that had a README.md into a scripts/ folder I was passing through. I figure this is a fairly common use case.

If I submitted a PR that put the source into a subdirectory, would you accept?

I got the following build error:

The page build failed for the `master` branch with the following error:

The tag `set` on line 3 in `archive.njk` is not a recognized Liquid tag. For more information, see https://docs.github.com/github/working-with-github-pages/troubleshooting-jekyll-build-errors-for-github-pages-sites#unknown-tag-error.

For information on troubleshooting Jekyll see:

  https://docs.github.com/articles/troubleshooting-jekyll-builds

If you have any questions you can submit a request on the Contact GitHub page at https://support.github.com/contact?repo_id=327490455&page_build_id=225549798

Any help is appreciated. I got the build to work by deleting the 'archive.njk' file. I saw that both Liquid and another template language are used. Perhaps this is the problem? I'm new to this and this is my first 11ty site.

I'm messing around with setting this, but I'm wondering, what is the setting to show the latest post on the home page?

I'm not sure if I'm missing something or if there's another resource to do that?

Let's say I've some front matter like this:

tags:

• "tag with spaces"
• Capital

Now what I'm hoping for is http://example.com/tags/tag-with-spaces and http://example.com/tags/capital. In other words the spaces get converted to hyphens and the capital letters get converted to lowercase.

But instead I get http://example.com/tags/tag%20with%20spaces and http://example.com/Capital

The result is as desired however with the title being set to title: Tagged “{{ tag }}” in the frontmatter. I want to keep the spaces and and capital letters in the title but NOT in the permalink. Is there any way to do this?

I used template button to fork this repo and enabled github pages in settings.
But it is still failing.

In light of the shift away from the unsavoury connotations of 'master', would you consider renaming the branch to 'main'?

Can add a action for automatic deployment to gh pages.

When Markdown is transformed into HTML,
tags are inserted wherever line breaks exist in the .md file, instead of only where two space characters exist at the end of the line.

It's easy enough for someone to remove the breaks: true, part of the Markdown overrides in eleventy.js but perhaps it could be more explicitly documented or false by default?

• False by default would be consistent with what would be expected from a Github Preview / the Markdown-it demo.
• False by default makes version control for content easier, using semantic linebreaks.

/* Markdown Overrides */
let markdownLibrary = markdownIt({
    html: true,
    breaks: true,
    linkify: true
  }).use(markdownItAnchor, {
    permalink: true,
    permalinkClass: "direct-link",
    permalinkSymbol: "#"
  });

<!-- No trailing spaces after first line -->

Lorem ipsum dolor
sit amet.

<!-- Two trailing spaces after first line -->

Consectetur  
adipiscing elit.

<p>
  Lorem ipsum dolor
  <br>
  sit amet.
</p>
<p>
  Consectetur
  <br>
  adipiscing elit.
</p>

<p>Lorem ipsum dolor sit amet</p>
<p>
  Consectetur
  <br>
  adipiscing elit.
</p>

I recently built my first site with Eleventy and Eleventy Base Blog on a site with 500-plus posts (Thanks for the great tools/projects!). I kept the same feed URL as my old site. When I published a new post, the RSS feed in my feed reader, Feedbin, didn't update. Turns out that Feedbin has a parsing limit of around 300 posts...

The current feed for Eleventy Base Blog goes in chronological order, so newer posts may not get picked up by feed readers if a parsing limit exists.

Reversing the order of posts in the feed would prevent this, and might be a good thing to do by default. Just a suggestion!

I typed npx eleventy into my terminal and checked the _site folder and opened index.html.

Unfortunately I get the following error: index.css err_file_not_found

Not sure if I'm doing something wrong?

When I serve eleventy I keep getting the error message: Error: filter not found: head.

Problem
I think this is what's preventing _site from updating. I don't know though I'm very new to SSGs and am migrating from Tumblr so am not really sure what any of this means or how to begin to fix it.

Full Message

Problem writing Eleventy templates: (more in DEBUG output)
> Having trouble rendering njk template ./index.njk

`TemplateContentRenderError` was thrown
> (./index.njk)
  Error: filter not found: head

`Template render error` was thrown:
    Template render error: (./index.njk)
      Error: filter not found: head
        at Object._prettifyError (C:\Users\Me!\AppData\Roaming\npm\node_modules\@11ty\eleventy\node_modules\nunjucks\src\lib.js:36:11)
        at C:\Users\Me!\AppData\Roaming\npm\node_modules\@11ty\eleventy\node_modules\nunjucks\src\environment.js:561:19
        at Template.root [as rootRenderFunc] (eval at _compile (C:\Users\Me!\AppData\Roaming\npm\node_modules\@11ty\eleventy\node_modules\nunjucks\src\environment.js:631:18), <anonymous>:54:3)
        at Template.render (C:\Users\Me!\AppData\Roaming\npm\node_modules\@11ty\eleventy\node_modules\nunjucks\src\environment.js:550:10)
        at C:\Users\Me!\AppData\Roaming\npm\node_modules\@11ty\eleventy\src\Engines\Nunjucks.js:213:14
        at new Promise (<anonymous>)
        at C:\Users\Me!\AppData\Roaming\npm\node_modules\@11ty\eleventy\src\Engines\Nunjucks.js:212:14
        at Template.render (C:\Users\Me!\AppData\Roaming\npm\node_modules\@11ty\eleventy\src\TemplateContent.js:182:28)
        at processTicksAndRejections (internal/process/task_queues.js:97:5)
        at async Template._getContent (C:\Users\Me!\AppData\Roaming\npm\node_modules\@11ty\eleventy\src\Template.js:481:12)
Copied 1 item / Wrote 0 files in 0.33 seconds (v0.10.0)
Watching…
[Browsersync] Access URLs:
 -------------------------------------
       Local: http://localhost:8080
    External: http://192.168.56.1:8080
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 -------------------------------------
[Browsersync] Serving files from: _site

Attempt
I tried searching for a solution on the web. In .eleventy.js I added n=1 to the collection module. I updated npm and yargs

Tools
Browser:Chrome
OS: Windows 10
Eleventy v0.10.0

Output conflict: multiple input files are writing to _site/tags/javascript/index. Use distinct permalink values to resolve this conflict.

I was able to identify what the error was, and recreate it by doing the following:
(two separate posts. Note the Javascript and javascript)

title: TIL about flattening a JS array
date: 2020-08-15
published: true
tags: ['Javascript', 'array']

title: TIL All the Javascript Sandboxes
date: 2020-08-07
published: true
tags: ['javascript', 'sandbox']

Not sure if the solution is to make them all lowercase, or create two separate tags like Javascript and javascript.

Thank you so much!

Seems like an ideal thing for starter packages and themes, etc.

Template Repositories

It looks like

Why is the h1 heading containing "latest 3 posts" not updating even after having only one post?
Instead of hardcoding the value "3",shouldn't we use a variable which gives the number of posts?

It is not possible to use {{, {#, or {% in code blocks or inline code in markdown files without Eleventy trying to parse it. For example you can't say in ./posts/my-post.md

In zsh, `${#var}` is the length of `var` in words (arrays) or bytes

or

To set a variable in Twig, use `set`:
```twig
{% set var = 2 %}
```

(My use case: shell script examples and Twig examples in blog posts.)

Disabling pre-processing of Markdown files enables {#

// .eleventy.js

// Pre-process *.md files with: (default: `liquid`)
// markdownTemplateEngine: "njk", <-- commented out

Not a great solution if it worked, but it doesn't. Now

`{#`

will be treated literally, and compile as <code>{#</code>

but

`{{`

and

`{%`

will try to compile as Liquid.

The fundamental limitation here may be something about markdown-it, or something about Eleventy's data flow. I ran into it in this demo, lmk if I should move the issue to a different repo.

In index.njk front matter there is a call for layout: layouts/home.njk however there isn't a layouts directory. Did I miss something in the docs?

Hi @zachleat,

just something I noticed while I was implemented it in my website:

I suggest to rename the paramter to „tag” :-)

Can’t find the source for this issue. Three random posts are linked in nav with ‘home’ as text. Nav tags and or navtitle are NOT set in their YAML front matter.

Hi, so sorry I had to post here. I'm not too good with JS. I just need help setting up contentful on this. I've already connected contentful but how do I have my contentful posts populate the posts collection?

https://twitter.com/zachleat/status/1142099561558753285

Related https://github.com/11ty/eleventy-plugin-rss

The demo depends on feed/.htaccess being applied, which is not true on gh-pages. The dependency on Apache should be documented. It would be even better if there was a way to avoid this dependency on any specific server.

This would make the output available on https://11ty.github.io/eleventy-base-blog/.

Travis CI could be used to automate the deployment.

I have just started using eleventy and am using this base-blog theme. Now trying to customise it. I am trying to do something that I thought would be very simple to do with the Nunjucks templates and Markdown files, but I am not getting it to work, yet.

What I want to do

Use a markdown snippet as the source file for some footer text, and get this converted to HTML and drawn into the page layout as it's rendered.

What I've tried

I have edited base.njk so that I have:

<main class="note {% if templateClass %} {{ templateClass }} {% endif %}">
  {{ content | safe }}
</main>

<footer>
  <div class="footer-content">
    {% include 'footer.md' %}
  </div>
</footer>

and then I have a file footer.md that is basically just markdown. I have tried adding front matter to the .md file to get it recognised, but it seems to make no difference.

Here's my current footer.md:

---
layout: layouts/base.njk
templateEngineOverride: md
---

made with [eleventy](11ty.io)

Originally I tried making the footer text a template in markdown, and calling this in using {{ content | safe }} as in the <main> section, but all this did was reproduce the main content in the footer, not the content of my footer template.

From the 11ty docs, it seems to me that there is no reason why this include should not be converted from markdown to HTML

• "Markdown files run through this template engine before transforming to HTML"
• "you can put markdown in the include and it should work fine"

What I get:

When the footer is rendered, it does not convert the Markdown to HTML - I just get raw markdown (the link is not created).

I can't work out what I doing wrong, and would be grateful for any help.

I deployed the starter blog for my organization page with Travis CI. But as organization pages are formatted like: organization.github.io, it automatically thinks this is a Jekyll build. I get the following error:

Your site is having problems building: The tag set on line 14 in feed/feed.njk is not a recognized Liquid tag. For more information, see https://help.github.com/articles/page-build-failed-unknown-tag-error/.

Travis publishes the deployment to gh-pages branch, whereas organization pages use master branch.
Any thoughts?

I was looking at the changes in getTagList.js. Sets are new to me, so I went off to see how they work. As I understand it, Set.prototype.add() takes a single argument, so I don't think that tagSet.add(...tags) adds all the elements in tags to tagSet if that's what it's meant to do.

Replace maybe with:

tags.forEach(t => tagSet.add(t))

Is it possible to show the numbering for all of your posts instead of just the number is shown on the home page?
So if you have 57 posts, but are only showing the 3 most recent, the numbering would be

3 Latest Posts
57 blah blah
56 blah blah
55 blah blah

More posts in the archive.

In the Implementation Notes section of the README, it states:

Because css and png are listed in templateFormats but are not supported template types, any files with these extensions will be copied without modification to the output (while keeping the same directory structure).

However, taking a look at .eleventy.js, the templateFormats are (css and png are not listed):

"md",
"njk",
"html",
"liquid"

Personally, this led to some confusion and I think some rewording would be helpful here. I think the point we'd like to get across is this:

If you list file extensions within templateFormats that are unsupported template types (such as css and png), any file with these extensions will be copied without modification to the output (while keeping the same directory structure).

If the above is true, and you're okay with that change, I'd love to submit a PR to make that modification. Thanks!!

The source of https://11ty.github.io/eleventy-base-blog/ contains:

<link rel="alternate" href="/eleventy-base-blog/feed" type="application/atom+xml" title="">
 ```

The trailing slash is missing. https://github.com/11ty/eleventy-base-blog/blob/6c2983e013b70efeed7277b7c2382958cb0cdbcb/_includes/layouts/base.njk#L9 Does `| url` remove it?

I noticed a minor issue with the post.njk layout. Leading and trailing whitespace is stripped from the .post-tag anchor elements. As a result, when styles are disabled, these elements run against each other.

This doesn't happen to tags in other layouts where some whitespace is preserved.

Could the solution be to allow some whitespace and wrap these <time> and <a>-s in post.njk in a flex container? Maybe this way, when styles are enabled, we avoid getting " " + element's margin.

P.S. Eleventy is awesome! 😄 This template is a great starting point.

As noted was necessary in #50.

Nice work in progress!

Note /tags/ URI produces no output.

How would you deal with multiple authors on the same blog?

Some options:

1. Add it to the post metadata:

   ---
   title: This is my nth post.
   author: ella-fitzgerald
   ---
   

   …which would then include e.g. ella-fitzgerald.inc into the template somehow. For blog posts authored by multiple people:

   ---
   authors:
     - ella-fitzgerald
     - nina-simone
   ---
   

2. Use includes in the post itself. In made-up syntax:

   { include 'authors/ella-fitzgerald.ext' }

   This way you could just add another include in the case of multiple authors.

I’m asking you because you’ve probably thought of better solutions already :)

I'm migrating a blog with images in same directory as my content files (eg, .md and .png in same directory) and permalinks in YYYY/MM/DD/slug format... but the images are not getting copied into site output.

Eg, add png to the defaults in this repo:

templateFormats: [
  "png",
  "md",
  ...
]

With an input structure in posts directory of:

posts/mypost/index.md
posts/mypost/header.png

And update posts/posts.json with this line:

"permalink": "/{{page.date | date: '%Y/%m/%d'}}/{{page.fileSlug}}/index.html"

The output in _site in the permalink dir 2018/09/21/mypost/ has the html output but not the images.

Is there a way to do permalinks this way, such that all directory contents are copied?

I've used pagination to generate separate tag pages (collection). Now I want to make posts paginate if there are too many per page.

Is there a way to have two paginations in one template? Or an alternative solution...

The demo on Netlify has a working example, but the version as of this posting doesn't work when downloaded and run locally.

On specific inspection, the line-highlight class is what broke the code up into lines and it's no longer included.

Hi from Japan!
Thank you for making a good static site generator.

Sorry, I can't speak English, so I use Google Translate.

system info

• Windows 10
• node.js v12.10.0
• npm v6.10.3

steps to reproduce

1. download eleventy-base-blog-master.zip
2. open to PATH "C:\eleventy-base-blog-master"
3. run to PowerShell from C:\eleventy-base-blog-master
4. run "npm install"
5. edit to .eleventy.js, add to "eleventyConfig.setDynamicPermalinks(false);"
6. run "npx eleventy"

Actual results

Problem writing Eleventy templates: (more in DEBUG output)
> Output conflict: multiple input files are writing to `_site/tags/{{ tag }}/index.html`. Use distinct `permalink` values to resolve this conflict.
  1. ./tags.njk
  2. ./tags.njk
  3. ./tags.njk

`DuplicatePermalinkOutputError` was thrown:
    (Repeated output has been truncated…)
        at TemplateMap.checkForDuplicatePermalinks (C:\eleventy-base-blog-master\node_modules\@11ty\eleventy\src\TemplateMap.js:533:13)
        at TemplateMap.cache (C:\eleventy-base-blog-master\node_modules\@11ty\eleventy\src\TemplateMap.js:306:10)
        at processTicksAndRejections (internal/process/task_queues.js:93:5)
        at async TemplateWriter._createTemplateMap (C:\eleventy-base-blog-master\node_modules\@11ty\eleventy\src\TemplateWriter.js:124:3)
        at async TemplateWriter.write (C:\eleventy-base-blog-master\node_modules\@11ty\eleventy\src\TemplateWriter.js:155:3)
        at async Eleventy.write (C:\eleventy-base-blog-master\node_modules\@11ty\eleventy\src\Eleventy.js:428:13)
Copied 2 items and Processed 0 files in 0.55 seconds (v0.9.0)

Expected results

build to "_sites" directory.

Thanks.

The layout in the mobile view breaks a bit for posts with medium length titles. The post number and the heading doesn't wrap. Would you accept a small PR which fixes the layout as shown in the picture.

the line number breaks into a sep line for the last two posts

proper wrapping of the heading

Let me know I can send a PR mimicking the second screenshot if you like :)

Thanks for this template, I've never been more happy with my blog!

This includes img src, picture, video, srcset, source, etc etc

e.g. https://11ty.github.io/eleventy-base-blog/tags/second-tag/ doesn't mention the current tag in the title.

After fresh install following instructions on Readme.

D:\StaticSites\my-blog-name>npx eleventy

Problem writing eleventy templates (more info in DEBUG output):
TypeError: Cannot read property 'inputPath' of undefined
at TemplateMap.getUserConfigCollectionsData (D:\StaticSites\my-blog-name\node_modules@11ty\eleventy\src\TemplateMap.js:176:16)
at TemplateMap.cache (D:\StaticSites\my-blog-name\node_modules@11ty\eleventy\src\TemplateMap.js:40:49)
at process._tickCallback (internal/process/next_tick.js:68:7)

Currently, the tags in the base blog are case sensitive. I suspect that that's not what most users would expect or want. Would be great to add a config option to control this. Perhaps defaulting to case insensitivity?

Every time a a change made to a page and saved, the items on the navigation bar are duplicated.
Not sure if this is an error or I'm doing something wrong?

I tried to work out how to update my eleventy blog, forked from here, with any fixes and new features. I'm not sure I did it the right way, and I would like some guidance on how best to get updates without having merge conflict hell.

It's not clear to me where best to ask for this kind of advice and support with eleventy, so I wrote it all up as a StackOverflow question here.

Happy to close this issue if not appropriate, or if I get some good advice from SO then maybe that could be included in the eleventy-base-blog docs.

Having the pages in the root directory vs a subdirectory feels messy to me, so I'd like to move into _pages.

However, once I do that for all .njk and other content files, and update the input path in .eleventy.js to input: "_pages", I get this error:

Problem writing Eleventy templates:
TemplateLayoutPathResolver directory does not exist for layouts/home.njk: _pages/_includes

Any tips on what path I need to update where to get this config working?

Is there a good reason that both liquid and nunjucks are used? I can see confusion as they are so similar but also different.

The comments here don't quite make sense.

It seems a line of code has been removed.

On a fresh clone and build, we get a tags/index.html with the following:

<h1>Tags</h1>
<a href="/tags/another-tag/" class="tag">another-tag</a>
<a href="/tags/second-tag/" class="tag">second-tag</a>
<a href="/tags/number-2/" class="tag">number-2</a>

However, none of those tag pages are generated.