11ty Static Site Generator: Trial Run

Sunrise: Mars

Quiet, cold day on Mars. I watched a nice, blue sunrise.

Time to get started re-build my blog. The old one loads too slow on Earth. There is no point posting if readers cannot load the page.

I am dumping the CMS for a static site. What steps do I need to build it?

Install 11ty and create project folder

With node.js installed, use npm to install 11ty static site generator.

npm install -g @11ty/eleventy

Make a new project folder with a suitable name.

mkdir martian-news

Open the new project folder...

cd martian-news

The First Page

And use Visual Studio Code to create a new home page.

code index.md

Type some words for the new home page and save. CTRL+S

Hello Earth.

Click CTRL+SHIFT+` to open the VS Code terminal.

Use 11ty to generate and serve a demo of the new page:

eleventy --serve

Then load http://localhost:8080/ to view the new page.

<p class="default-theme">Hello Earth.</p>

Adding some initial styles

Open the template add a style tag with some basic CSS styling. I am opting for a dark theme.

body {
  font-family: helvetica, sans-serif;
  background-color: #202124;
  color: #e8eaed;
}
a {
  color: #4d9eff;
}
h1 {
  margin-bottom: 4px;
  color: #4d9eff;
}
h2 {
  color: #ffcb59;
}
pre {
  padding: 8px 10px;
  border-radius: 4px;
  background-color: #293336;
  color: #66ff66;
}
article {
  padding: 8px 0;
}
footer {
  margin: 6px 0 0 0;
  padding: 10px 0 20px 0;
  font-size: 86%;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}