search

11ty / eleventy

A simpler site generator. Transforms a directory of templates (of varying types) into HTML.
https://www.11ty.dev/
MIT License
17.15k stars 493 forks source link

Moving custom files into Eleventy #501

Closed colabottles closed 5 years ago

colabottles commented 5 years ago

I have the custom HTML/CSS/JS for a site I would like to move to Netlify and use Eleventy. The templating is a little confusing to me. I did a test run locally on my machine with the base 11ty blog and the tutorials online but there was something I did wrong and messed it up.

I just wanted to know how to add my templates to Eleventy, I have 3 different template designs for 3 different pages and custom CSS/JS files as well. Do I put these in .liquid files? .njk files? I'm unsure as to how to move everything into Eleventy.

Apologies if this is ignorant, but I really would love to use Eleventy for my new site.

Thanks.

Ryuno-Ki commented 5 years ago

TL;DR: In _includes/

Read the docs to learn more.

colabottles commented 5 years ago

I've read every doc there is to read. On the Filament Group site, on the 11ty.io site, in the README.md, and searched for and followed every online tutorial and walkthrough. If this is too much to ask from someone, I'll take my search elsewhere.

kleinfreund commented 5 years ago

Are you still working with the base 11ty blog or have you moved to using your own templates?

Both the .njk and .liquid file extensions are for templates. Eleventy uses Liquid as the default templating engine so you might want to start with that.

Since I’m not quite sure what exactly you need help with (your questions are very broad), let me give you this:

A basic crashcourse of setting up a site with Eleventy looks like this:

First, a directory structure to organize all relevant files. I’ll add directories for CSS, JS, and images. The _includes directory is where templates go.

We also need an Eleventy configuration file to tell Eleventy to just copy over the contents of the following directories.

.eleventy.js:

module.exports = function(eleventyConfig) {
  eleventyConfig.addPassthroughCopy("css");
  eleventyConfig.addPassthroughCopy("js");
  eleventyConfig.addPassthroughCopy("img");
};

Now, let’s have Eleventy create an index.html file for us. There is many ways to do this. Here is one:

I a base.liquid templates that will contain the common markup for all the HTML documents in this project.

base.liquid:

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>
</head>
<body>

  <main>
    {{ layoutContent }}
  </main>

</body>
</html>

And now the index.liquid file that contains the first content of the page. Eleventy will eventually turn this into a index.html file by using the base.liquid template.

index.liquid:

---
layout: base.liquid
---
<h1>Hello and welcome!</h1>

Note that the index.liquid file doesn’t have to a liquid file. It could be a Markdown file for example. On my site, I use Liquid in this file so I need it like that.

Now, assuming you have Eleventy installed globally, you can run the eleventy command which should build your site and create _site directory with an index.html file.

eleventy
Ryuno-Ki commented 5 years ago

If this is too much to ask from someone, I'll take my search elsewhere.

@colabottles I'm sorry if I appeared to be rough. I was on a jump (easter) and just wanted to give you some starters.

colabottles commented 5 years ago

@kleinfreund I have moved to my own templates. I'm trying to take what I have in my vanilla HTML/CSS/JS files and move them into 11ty. I was asking how to put what I have into the .njk or .liquid format because when I did a test run with the base blog, I messed it up somehow using Liquid, but a second test using Nunjucks came out better. I got that to work.

Do I just move all my code into Liquid or Nunjucks files, make sure the headers are correct as in your Liquid example?

@Ryuno-Ki Not a problem. I have been frustrated with trying to get an understanding of this and haven't been able to fully grasp it. I know it should be very straight-forward, I was able to get a Jekyll site running, no issues, quickly. I was able to do the same with Middleman, Hugo, and Gatsby also. I'm just frustrated I am not getting 11ty.

I apologize for being so terse and grating. It has been a frustrating process for me.

Thank to you both for responding.

kleinfreund commented 5 years ago

Assuming for a moment that you just have a bunch of static HTML files and CSS and JavaScript.

Then, all your content is inside the HTML files. The main use case for using a static site generator like Eleventy (or any other really) is to separate the content (changes for each document) from the layout of the page (is often shared between many documents). A template contains all parts of your HTML that do not change for each document. A small example:

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <nav>
    <a href="#">link 1</a>
    <a href="#">link 2</a>
  </nav>

  <!-- content here -->

</body>
</html>

This would be a template for a very basic HTML document where the navigation elements are the same for every document. A static site generator’s job (among other things) is to take your content (could be just a text file) and put it into your templates.

In the template above, the HTML comment would be replaced with the content of one of my documents.

If you already used Jekyll and the other tools you listed, you should be kind of familiar with this concept. So I wonder if you could specify with a bit more detail what you fail to achieve with Eleventy. If you used Jekyll before, should not find it all too difficult because Eleventy’s default templating engine is Liquid — the same as Jekyll’s. Although there are some differences. Let me know how we can help you.

Ryuno-Ki commented 5 years ago

Hm, do we talk about https://github.com/colabottles/Sixtyten here?

Maybe you could create a branch which shows what you tried so far and we could continue there?

Have you tried the snippets provided by @kleinfreund ? If so, did they worked out? If not, could you share what you tried + an error message?

colabottles commented 5 years ago

So I wonder if you could specify with a bit more detail what you fail to achieve with Eleventy.

One problem I did encounter was the setting navigation items in a certain order. For example, I want to change A B C D E to A C E D B in the order of menu items in the navigation. I'll give the templating another try at some point. Those were the only issues going into this project before I got pulled away from it.

Hm, do we talk about https://github.com/colabottles/Sixtyten here?

That is actually my first attempt at Jekyll and I was part of the way through when I got pulled away from this project.

I didn't get to the point where I put the 11ty project on my repo.

Unfortunately, I do not have my Mac which has everything on it, it's being repaired, but I will try another shot at 11ty on my Linux box and put it on my repo if I can get to it. Thank you for your assistance, both of you.

danchristian commented 5 years ago

One problem I did encounter was the setting navigation items in a certain order. For example, I want to change A B C D E to A C E D B in the order of menu items in the navigation.

I only started working with Eleventy yesterday and ran into the navigation problem too. There is probably a better way to do this, but so far I have them sorted by date order: 

<nav>
  <ul>
  {%- for nav in collections.nav | sort(attribute="date") -%}
    <li>
      <a href="{{ nav.url | url }}"{% if nav.url == page.url %} data-current="current item"{% endif %}>{{ nav.data.navtitle }}</a>
    </li>
  {%- endfor -%}
  </ul>
</nav>

And then for each page I have just set ascending dates:

---
layout: layouts/home.njk
title: Home
date: 2016-01-01
---
---
layout: layouts/blog.njk
title: Blog
date: 2016-01-02
---

I was using the Eleventy + Netlify CMS Boilerplate, so just adapted what was there.

zachleat commented 5 years ago

Yeah @danchristian is right—here are the rules around Eleventy’s default collection sorting: https://www.11ty.io/docs/collections/#sorting

If you want a quick peek at how we configure menu sort order on 11ty.io:

zachleat commented 5 years ago

This is an automated message to let you know that a helpful response was posted to your issue and for the health of the repository issue tracker the issue will be closed. This is to help alleviate issues hanging open waiting for a response from the original poster.

If the response works to solve your problem—great! But if you’re still having problems, do not let the issue’s closing deter you if you have additional questions! Post another comment and I will reopen the issue. Thanks!

colabottles commented 5 years ago

I have my example up at https://github.com/colabottles/sixtyten and I am trying to (without success) deploy to Netlify. I don't know what the settings are I guess to deploy.

I also get this error when I serve up Eleventy locally;

Error with passthrough copy: (more in DEBUG output)
> Having trouble copying './css' (TemplatePassthroughManagerCopyError)
> ENOENT: no such file or directory, lstat './css' (Error):
    Error: ENOENT: no such file or directory, lstat './css'
Writing _site/index.html from ./index.html.
Processed 1 file in 1.39 seconds

Right now I'm just looking for a little direction on where to go so I can eventually get the CSS/JS working and deploy to Netlify. Thank you.

d2s commented 5 years ago

@colabottles Not 100% sure of what you are trying to do, but the config file was a bit broken. Try something similar to this:

// Eleventy configuration
//
// Documentation about configuration syntax:
// https://www.11ty.io/docs/config/

module.exports = function(eleventyConfig) {
  // Copy specific files directly without modifying their contents

  eleventyConfig.addPassthroughCopy("css");
  eleventyConfig.addPassthroughCopy("js");
  eleventyConfig.addPassthroughCopy("images");
  eleventyConfig.addPassthroughCopy("fonts");

  return {
    templateFormats: ['md', 'njk', 'html', 'liquid'],

    // If your site lives in a different subdirectory, change this.
    // Leading or trailing slashes are all normalized away, so don’t worry about it.
    // If you don’t have a subdirectory, use "" or "/" (they do the same thing)
    // This is only used for URLs (it does not affect your file structure)
    pathPrefix: '/',

    markdownTemplateEngine: 'liquid',
    htmlTemplateEngine: 'njk',
    dataTemplateEngine: 'njk',
    passthroughFileCopy: true,
    dir: {
      input: '.',
      includes: '_includes',
      data: '_data',
      output: 'docs',
    },
  };
};

(Did not try the config example with your example files, but at least it is a bit closer to a working state.)

Your terminal output had errors mentioning that you don't have any directory named css. If you want to have the _site directory as the input data, set input directory to: input: '_site', (or similar, depending on your directory structure).

You might also have to adjust the following lines so that they have the source directory set up:

  eleventyConfig.addPassthroughCopy('_site/css');
  eleventyConfig.addPassthroughCopy('_site/js');
  eleventyConfig.addPassthroughCopy('_site/images');
  eleventyConfig.addPassthroughCopy('_site/fonts');

To set where you build (and copy) the generated files, adjust the output: 'docs', section of the config file.

As for the Netlify -related details, their documentation https://www.netlify.com/docs/continuous-deployment/ and example projects gives some tips on how to set the site structure.

As for making your life easier, read the source code of the starter projects https://www.11ty.io/docs/starter/ on the Eleventy documentation website. Following "starter kits" are rather well built (even while they could be made even better with a bit more time).

Hopefully these will make it easier to understand how the tool can be made to work for your needs.

colabottles commented 5 years ago

@d2s I don't really know what I'm doing right now with this either, but thank you. I appreciate the reply. If anyone would be willing to correspond via email or other means, or knows of any other ways for help, I'd appreciate it. My email is on my profile and open to help. I'll go through this and see if I can get this working. Thank you everyone.