Rocket11ty: A very simple 11ty template using Halfmoon

The Gallery
, , ,
1

rocket11ty

Welcome to Rocket11ty, a very simple yet elegant 11ty template.

Features:

  • Automatic caching (Credit: @khalby786)
  • PWAs so your blog can be installed like an app (Credit: @khalby786)
  • Mobile Friendly design
  • Light and Dark theme. (Provided by Halfmoon.)
  • A contact form that works (Only on Netlify, however can be make to work with Pageclip)
  • An automatic SEO (a sitemap, RSS feed, etc)
  • NetlifyCMS to easily publish your blog (only on Netlify)
  • Made with the JAMstack idea so your blog can easily be published to a CDN (e.g. Netlify) unlike WordPress.

Some parts of this blog (e.g. the blog system, the sitemap, and the RSS feed) came from 11ty’s base template because why remake something that is already good?

Tips & Tricks:

  • 11ty on Glitch tends to not work well (Error: EISDIR: illegal operation on a directory, open (FILE) (because of the auto-saving editor) so you may have to delete the _site folder (rm -r _site) then refresh the project (refresh).

Project URL: https://🚀11ty.glitch.me/
NetlifyURL (contains working contact form): https://rocket11ty.netlify.app/
GitHub URL: https://github.com/aboutDavid/rocket11ty
DEV article: https://dev.to/aboutdavid/rocket11ty-a-simple-11ty-template-with-halfmoon-css-469k

3 Likes
2

Congratulations! You have successfully completed “Introduction to PWAs by Khaleel Gibran”! :sweat_smile::joy:

Make sure to run a Lighthouse report, and check the PWA section of the report on stuff you can improve to make your PWA even more progressive.

3 Likes
3

The results came back alright:
Desktop:

Mobile:

Also, I ran it in a normal browser tab so that might have affected it.

but they would probably be better on Netlify (CDN) or Apache (added a .htaccess for compression) because browsersync can slow things down a lot.

4

Wow, that’s a really good score! Especially the PWA part! :tada::partying_face:

2 Likes
5

What’s PWA?

6

Progressive web apps.

7

It’s an install-able app, basically

install prompt:

image

when installed:

image

You don’t actually have to prompt them. Just put the code for the PWA and it should prompt them on chrome, if it worked

1 Like
8

Good job, I like how you integrated lots of best practices into it. I might use it to study 11ty a bit more as learning it from scratch hasn’t been as smooth as I thought

9

I got the contact form working and you can try it here!

10

Unfortunately I’m not quite sure how to work with the templating engine you are using, so I might create a fork of this in handlebars or mustache

11

11ty works only with Nunjucks, if I am correct. It’s just like EJS but they use {% instead of <%.

12


13

Whoops, don’t mean to bump a old post but:

  • The first release is here and more features were added. See the full blog post here.
  • Embeds can easily be made by using a link (e.g. a YouTube link will show the YouTube player). Note: this only works on some websites.
  • Minified HTML. It saved about 20% bandwidth on a test.
  • Google and Facebook analytics. Unless you add a id in the metadata.json, it will not be compiled in (because your privacy matters)

Upcoming:

  • The ability to publish your site to Cloudflare workers.
  • Custom themes (just change a setting in a file)
  • More CMSes (maybe GhostCMS?). Here are a list of headless CMSes.
  • Add the ability to add a portfolio because I originally intended this to be my portfolio website.
  • Instantclick or Defresh (as suggested by @javaarchive)
  • Medium-style lazy image loading (as suggested by @javaarchive)
  • Back to top button (as suggested by @javaarchive)
14

Functionality I would like added:

  • Instantclick/Defresh but with a delay(and possibly disable base on bandwidth)
  • Medium-style lazy image loading
  • Back to top button(probaly add this myself at one point)
2 Likes
15

I would add that but not every theme would implement that.

1 Like
16

By the way, the way you escape characters seems to be an issue for the PWA prompt
image

2 Likes
17

It should be fixed now.

1 Like
18

Also an issue I noticed is that markdown image sizing does not exist in markdown-it however there does exist a plugin for it


It’s not maintained so it could break with future markdown-it releases
2 Likes
19

I added that feature! It actually wasn’t hard to implement.

2 Likes
21

I made a DEV post

2 Likes
22

Now rocket11ty uses webpack! New versions have to use webpack to generate a bundle.

23

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.