11ty / eleventy-base-blog Goto Github PK
View Code? Open in Web Editor NEWA starter repository for a blog web site using the Eleventy static site generator.
Home Page: https://eleventy-base-blog.netlify.app/
License: MIT License
A starter repository for a blog web site using the Eleventy static site generator.
Home Page: https://eleventy-base-blog.netlify.app/
License: MIT License
e.g. https://11ty.github.io/eleventy-base-blog/tags/second-tag/ doesn't mention the current tag in the title.
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.
It looks like
runs into the “dates off by one day” pitfall. Anyone willing to contribute a fix?Seems like an ideal thing for starter packages and themes, etc.
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.
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.
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.
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
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.
The comments here don't quite make sense.
It seems a line of code has been removed.
This would make the output available on https://11ty.github.io/eleventy-base-blog/.
Travis CI could be used to automate the deployment.
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.
eleventy-base-blog/_11ty/getTagList.js
Line 23 in 002f4e2
Replace maybe with:
tags.forEach(t => tagSet.add(t))
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!
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?
How would you deal with multiple authors on the same blog?
Some options:
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
---
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 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?
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...
In the Implementation Notes section of the README
, it states:
Because
css
andpng
are listed intemplateFormats
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 ascss
andpng
), 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!!
I got tripped up by the directory structure.
This happened because I was npm install
ing 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?
As noted was necessary in #50.
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
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?
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.
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 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?
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?
Nice work in progress!
Note /tags/ URI produces no output.
I used template button to fork this repo and enabled github pages in settings.
But it is still failing.
Hi @zachleat,
just something I noticed while I was implemented it in my website:
is shadowingI suggest to rename the paramter to „tag” :-)
Let's say I've some front matter like this:
tags:
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?
Output conflict: multiple input files are writing to
_site/tags/javascript/index
. Use distinctpermalink
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
)
Not sure if the solution is to make them all lowercase, or create two separate tags like Javascript
and javascript
.
Thank you so much!
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?
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?
In light of the shift away from the unsavoury connotations of 'master', would you consider renaming the branch to 'main'?
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.
Can add a action for automatic deployment to gh pages.
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?
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 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.
Hi from Japan!
Thank you for making a good static site generator.
Sorry, I can't speak English, so I use Google Translate.
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)
build to "_sites" directory.
Thanks.
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.
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.
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?
This includes img src, picture, video, srcset, source, etc etc
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?
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?
/* Markdown Overrides */
let markdownLibrary = markdownIt({
html: true,
breaks: true,
linkify: true
}).use(markdownItAnchor, {
permalink: true,
permalinkClass: "direct-link",
permalinkSymbol: "#"
});
breaks: true,
turns:
<!-- No trailing spaces after first line -->
Lorem ipsum dolor
sit amet.
<!-- Two trailing spaces after first line -->
Consectetur
adipiscing elit.
into:
<p>
Lorem ipsum dolor
<br>
sit amet.
</p>
<p>
Consectetur
<br>
adipiscing elit.
</p>
Removing breaks: true,
outputs:
<p>Lorem ipsum dolor sit amet</p>
<p>
Consectetur
<br>
adipiscing elit.
</p>
Live example:
https://github.com/tylensthilaire/eleventy-base-blog/blob/master/posts/firstpost.md
https://nostalgic-kepler-b836c1.netlify.app/posts/firstpost/
Only the second paragraph would have any <br>
tags in a GitHub/Markdown-it preview by default.
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)
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.