There are many awesome static site generators and CSS frameworks. But none impresses me more than Eleventy and PaperCSS. They are both simple and elegant, and together seem like a perfect combination.
In just a few hours, even I could get this site up and running. This is my primary goal as I don't want to spend too much time on making a "blog website".
To build one like this, just follow the following steps.
From your Terminal or Console, install Eleventy:
$ npm install -g @11ty/eleventy
For my site, I want to have 3 areas:
about this site and
about me. So I'll make 3 folders:
$ mkdir blog $ mkdir about-site $ mkdir about-me
For this site, I decide to have 2 layouts. So let's create a folder and the layout files.
$ mkdir _includes $ touch _includes/layout.njk $ touch _includes/article-layout.njk
The main page which lists all the articles and the 2 "about" pages should follow 1 layout. The article pages should follow the other. These 2 layouts are similar as I could have get by with just one. You might not need both. Anyway, here's a link to the full content of layout.njk.
Now comes the fun part which is we get to write with
markdown syntax. Let's create the
about me page.
$ touch about-me/index.md
and copy the following content
--- layout: layout.njk pageTitle: About me --- <article class="article"> <h1 class="article-title">About me</h1> <p class="text-lead">Hi, put your intro here</p> <p>Lorem...</p> </article>
Next let's create the main page which is the page that lists all articles:
and copy the following content to it.
The first line above allows my articles to be listed in reverse chronological order.
Finally, to organize my blog articles in the file system, I keep them in sub-folders under the
blog folder that was created earlier.
$ cd blog $ mkdir 2020-04-09 $ cd .. $ touch blog/2020-04-09/index.md
and start writing
--- layout: article-layout.njk title: Building an Eleventy site with PaperCSS date: 2020-04-09 tags: post --- ##### Published on 2020-04-08 #### Building an Eleventy site with PaperCSS ###### `Eleventy`, `PaperCSS` Lorem...
If you need to have buttons to perform some actions we can use the following snippets:
<div class="row"> <button class="article-meta"><a href="#">Do something</a></button> <button class="article-meta">Do something else</button> </div>
which results in