Git Product home page Git Product logo

eleventy-base-blog's Introduction

eleventy-base-blog

A starter repository showing how to build a blog with the Eleventy static site generator.

Build Status

Demos

Deploy this to your own site

These builders are amazing—try them out to get your own Eleventy site in a few clicks!

Getting Started

1. Clone this Repository

git clone https://github.com/11ty/eleventy-base-blog.git my-blog-name

2. Navigate to the directory

cd my-blog-name

Specifically have a look at .eleventy.js to see if you want to configure any Eleventy options differently.

3. Install dependencies

npm install

4. Edit _data/metadata.json

5. Run Eleventy

npx eleventy

Or build and host locally for local development

npx eleventy --serve

Or build automatically when a template changes:

npx eleventy --watch

Or in debug mode:

DEBUG=* npx eleventy

Implementation Notes

  • about/index.md shows how to add a content page.
  • posts/ has the blog posts but really they can live in any directory. They need only the post tag to be added to this collection.
  • Add the nav tag to add a template to the top level site navigation. For example, this is in use on index.njk and about/index.md.
  • Content can be any template format (blog posts needn’t be markdown, for example). Configure your supported templates in .eleventy.js -> templateFormats.
    • Because css and png are listed in templateFormats 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).
  • The blog post feed template is in feed/feed.njk. This is also a good example of using a global data files in that it uses _data/metadata.json.
  • This example uses three layouts:
    • _includes/layouts/base.njk: the top level HTML structure
    • _includes/layouts/home.njk: the home page template (wrapped into base.njk)
    • _includes/layouts/post.njk: the blog post template (wrapped into base.njk)
  • _includes/postlist.njk is a Nunjucks include and is a reusable component used to display a list of all the posts. index.njk has an example of how to use it.

eleventy-base-blog's People

Contributors

zachleat avatar greywidget avatar mathiasbynens avatar benjifs avatar verlok avatar clottman avatar krzychukula avatar styfle avatar rogfrich avatar nhoizey avatar martinbreynolds avatar fschoenfeldt avatar dhoman avatar lonekorean avatar nilsmielke avatar nick-novak avatar onezerodigits avatar kitt avatar denmch avatar davidakennedy avatar thedamon avatar benedfit avatar plug-n-play avatar

Watchers

 avatar

eleventy-base-blog's Issues

Add an entirely new CMS Page to the site

Netlify CMS was previously added to the site, but was set up to work with the existing blog.
Add configuration to the CMS for another page type, ideally something with images.

Create a first javascript page to calculate tip percentage

The pre-tip total and tip percentage should be variables.

  • Calculate the new total
  • Output the information to the page e.g Your total bill, with tip, is 35.45
  • Use toFixed() to round the output to 2 decimal places
  • Display the tip amount as well.

List the code on the JsTip page

The JsTip page uses javascript to perform a calculation and output the results.

Add a code block to the page to show the javascript that was used.

Fifth Post has a typo

On the post titled This is my fifth post there is a typo with the word imperitive which should be spelled imperative.

Menu breakpoint needs to be changed

Now that the menu has a new recipes item, it is causing a horizontal scrollbar to appear at a certain resolution just before the menu gets minimised. This should be solvable by changing the menu breakpoint.

N.B If the Javascript page is moved onto a separate project, this menu change will not be necessary.

Tag missing from post-list views

A guest post had 3 tags - test, posts, jamstack which are correctly added to the blog post.
However the post list views are not showing the tag posts. See Craig's Cat below:

image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.