SMALL MEDIUM LARGE

Admin Help

Running Eleventy Locally

Good info here: https://www.11ty.dev/docs/usage/

Basic rundown, can build and serve in VS Code Terminal with:

npx @11ty/eleventy --serve

If want to add environment variable to override what is set in the processEnv.js file, can use this for VS Code:

$env:ELEVENTY_ENV="production"; npx @11ty/eleventy --serve

Note: Seems like you might need to run using the environment variable the first time as it is not initally set in the local environment.

More info about this here: https://www.11ty.dev/docs/environment-vars/

Note that when you run the above code, the next time you run the site even if use just 'npx @11ty/eleventy --serve' the ELEVENTY_ENV variable will be set to whatever value you used - in the case 'production'. To see the current set value of the variable:

${env:ELEVENTY_ENV}

Install Eleventy

Taken from: https://cloudcannon.com/tutorials/eleventy-beginner-tutorial/

Also good info here: https://www.tatianamac.com/posts/beginner-eleventy-tutorial-partii

Installing Eleventy

As a JavaScript framework, we can install Eleventy using npm. First we’ll check if node and npm are installed. Open your terminal and run the following:

node -v npm -v

If both return a version and node is at least version 8.0.0, you’re good to go. If not, head over to the Node.js/npm installation instructions.

Set up your Eleventy site

In your terminal, create a directory for where your Eleventy site will live:

mkdir my-first-11ty-site cd my-first-11ty-site

Next we need to add a package.json to contain the dependencies for our site. Fortunately, npm can do this for us:

npm init -y

Now we can install Eleventy and add it as a development dependency to our package.json:

npm install --save-dev @11ty/eleventy

Let’s check that all went to plan:

npx @11ty/eleventy --version

Running this command should output the version number of Eleventy installed. If this command errored, refer to the Eleventy documentation or get help from the community on the 11ty Discord.

The directory structure of an Eleventy site is entirely configurable. As you gain confidence in the framework you may want to tweak the structure for your own preferences.

For this tutorial, we’ll be using the default directory structure which I’ll explain below. We’ll be creating these directories and files over the course of this series, so you don’t need to understand them at this stage.

  • .eleventy.js — The eleventy configuration for you site lives here.
  • _includes — Contains page layout elements.
  • _data — A place to put .json or .js files (which can fetch data at build time) that can be accessed across the site.
  • _site — The output directory for the built website.

Below from here: https://www.tatianamac.com/posts/beginner-eleventy-tutorial-partii

NOTE: Whenever you see a -g flag appended to an npm command, that means that it’s going to be installed globally. The upside is you’re only going to install it once, but you might run into issues down the line. Most folks work locally, as it prevents what are called “interoperability” issues. For example, you might encounter a project that is running on an older version of Eleventy than the global one you have installed, which will cause infuriating errors. Therefore, it’s best to treat each project independently. You might notice that most devs prefer to install things locally for this reason.

Fixing Problems...

When running locally and want to make sure all the SASS is compiled, etc. can use the command:

npm run start

This runs all the 'start' script from package.json.

HOWEVER, on a Windows machine can get the error showing up:

'ELEVENTY_ENV' is not recognized as an internal or external command, operable program or batch file.'

(...or whatever envoironment variables is being set).

However, you can install a package called 'cross-env' that takes care of this:

npm install -D cross-env

Then in the package.json file just prepend the environment variable with 'cross-env'. E.g.

...
"eleventy:build": "cross-env ELEVENTY_ENV=production eleventy",
    "eleventy:watch": "cross-env ELEVENTY_ENV=development eleventy --serve",
...

Now you can use 'npm run start' and it should work to serve the site.

Windows development: Fixing the "NODE_ENV is not recognized..." error