The following project is my personal 📖 Blog page build with Eleventy static site generator using JavaScript templates (
*.11ty.js).
It was hugelely inspired by the following project of Reuben L. Lillie who also took inspiration from @zachleat, the creator of Eleventy, as well as from @hankchizljaw.
The moment I found out about that project I fell in 💘 with it. The minimalistic beautiful style and aesthetics that it provided, as well as the ease of ✏️ writing blog posts by just adding a file (by simply writing your contents with Markdown || HTML || CSS || JavaScript or both of the 4 combined) on a directory and git pushing it made me eager to directly fork it to contribute to it and make my own version out of it as it was MIT licensed. It was the reason that I also made a GitLab account so I could contribute to it!
So I immediately forked it and started experimenting and playing with it. By doing so I found out that there are lot's of important bugs in the project that had to be fixed in order to use this project as a personal Blog website. An example is that the pagination in the archives Blog page was not working and was throwing you on a 404 page. Another one quite important was on the rendering of the Markdown posts / files, that if you wanted to add an image or a gif in your post it would crash the responsiveness of the rendered HTML page and quite some other ones as well that I found out as I kept playing with it. So I opened an issue on the very first one that I've found out, but quite a bit later on I sadly figured out that the project is not maintained anymore by the owner and that it's abandoned thus I was not going to get any help on it.
But, because I really liked that particular project extremely much, I decided to get it ported onto my GitHub and start spending my free time onto fixing it's issues, adding new features and my 🖌️🎨 on it and eventually make it my own personal Blog page BUT❗ also keep the wonderful idea of Reuben to maintain it as a template / reference project for others to use it as their own Blog || portfolio pages, as the project is hugelyyy documented and it is very easy for anyone to modify it to his liking.
This README file will serve for that very purpose of detailing all the information && instructions that someone will need to make && modify this blog to make it his own, as well as instructions on how one can deploy and publish the site with GitHub pages, netlify. I'll also showcase a way to change the default domain of GitHub pages and netlify and add your own custom one.
❗❗ A Blog post on this page can be found for the exact same reason. 👉 here
/// NOTE: All the information mentioned above that will be provided are through my own self learning and experience and you have to keep in mind that there are probably lot's of other ways as well (better or not) to achieve the same thing, BUT these are the ones that I personally implemented on this particular project to successfully achieve the desired results. Any issues, suggestions, contributions are much more than welcome and you know where to head to apply them!
- Probably 👉 here? 🙂
How does this Blog work in a setence 👇
The layouts are written entirely in vanilla 🍦 JavaScript (files with the *.11ty.js extension). Eleventy processes those templates and creates prerendered copies of the site HTML. Similar behaviour can be found for the Blog posts.
- 💯 Lighthouse scores for
- 💨 Performance
- ♿ Accessibility
- ☑️ Best practices
- 🔍 Search Engine Optimization
- 🏸 Lightweight front end
- 🕸 Semantic HTML
- 🎨 Progressively-enhanced, modular CSS
- 🍦 Vanilla JavaScript templates
- 🎛️ Customizable design and data options
- 🍬 Choose between emoji favicons and the Real Favicon Generator
- 💡 Dark/light mode based on user’s system & browser preferences
- 🔣 Multilingual support (instructions in
./content/README.mdand./_data/README.md) - 🔖 Single archive page of all Blog posts
- 🗒️ Extensive inline documentation
- ✏️ Blog comments powerd by utterances comment widget
- 📢 Social Media Share button per blog post
- 💸 Auto generated outro / donation message per blog post
- ... And many more features to be explored by digging into the project! 😀
Here’s a list of new features being considered. Submit a feature request to add to this list!
- 🎚️ Dark/light mode toggle
- 🏷️ Tag archives for blog (coming with Computed Data in Eleventy v0.11.0)
- 🗓 Date archives for blog
- 💌 Contact form (using Netlify Forms)
- 📡 RSS feed for blog posts
- 🗺️ Sitemap
- 🔍 Search
- 📄 Documentation site
- 📣 Webmentions
- 📝 Integrate with Netlify CMS
- ⚙️ Service worker to cache content for offline access
- 🖌️ Apply logo/branding assets
- 🖍️ Syntax highlighting for code blocks in posts.
🚀 Fast way to run a local copy of this project on your computer.
Install Node.js on your machine (see 11ty documentation for version requirements).
Then enter the following commands into your terminal:
# via HTTPS
$ git clone https://github.com/andrewpap22/andreaspappas.git # via SSH
$ git clone [email protected]:andrewpap22/andreaspappas.git$ cd ./andreaspappas/Specifically take a look at the file named .eleventy.js to see if you want to configure any Eleventy options differently.
3. ⬇️ Install the project dependencies with NPM
prerequisite is that you have installed Node.js (npm comes with node) A pretty good way / guide to get Node.js and npm on your machine is the following 👉 nvm
$ npm install4. ✍️ Edit the .js files in the _data directory with your site information
Build the project.
$ npm run buildRun and host locally for local development.
$ npm run devOr run in debug mode
$ npm run debugThe command npm run build will generate a copy of the site files in a _site directory, which you can deploy with any free hosting service like GitHub pages or netlify
You can follow the guides for GitHub pages or netlify by clicking the respective links above 👆 or simply click the button below 👇 to deploy directly and automatically a copy of this project to your own netlify account!
Give a ⭐️ if you like this project!
© 2021 by <Andreas> <\A. Pappas>