Project Twenty Three: Blog

As a developer I had always been trying to do my best: make the most good looking website, optimised for the majority of browsers, light and performant. But to my surprise, all of that turned out to be secondary - a successful website had lots of engaging and interesting content. After all reaching relevant content is what web is about.

Having great and varying content is essential for users and for getting new users onboard through search engines like Google. Search engine optimisation takes a lot more than great content, but it is as effective if possible at all without one.

So how about building a blog today and use it in the future for e-commerce sites, libraries, blogs and nearly any other type of a website?

Blog: requirements and recipe

As a user I want to be able to filter posts by tags so that I can find relevant content easier

The simplest blog I could think of has two pages. One is a list of articles:

And the other with the article itself:

And given that you are currently reading a blog post as well - I am sure you have plenty of sources to draw inspiration from. By all means - get creative and follow your vision as long as some generic requirements are met.

Requirements

1. Blog post should have rich content: ability to add at least images and basic rich text or markdown content
2. Blog should have sufficient contrast and be accessible
3. Each post should have tags that lead to a list of articles with that tag
4. Each post should have appropriate micro data
5. Each post should have title tag and meta description for search engines

Recipe

1. Start with static markup for one post in a list
2. Turn into a function and create a bunch of posts
3. Use the same layout for main page and tags page
4. Adjust styles if necessary, add titles to each page, etc.
5. Create static layout for one blog post
6. Ensure accessibility
7. Add micro data
8. Create a rendering function for a generic blog post
9. Connect it all together
10. Enjoy

Hints

You can create a server or generate a bunch of html files to create blog using layout. There are several static sites generators you could use for the latter case. Or even write it yourself ;-)

You can use lorem ipsum markdown or HTML generator to create lots and lots of random posts. And lorem picsum for images.

Keep markup semantic and add appropriate aria labels when needed to ensure accessibility.

You could use Schema.Article for appropriate micro data markup.

Make sure that tags are "safe" to be used in a URL.

Hard Mode: Sitemap Generator

Blogs grow fast and yours surely won't be an exception. You know what could help search engine find your website? A sitemap!

In a nutshell a sitemap is an xml file that contains all the links to all the relevant pages. There are plenty of tools that can be incorporated into the code that would generate a sitemap or you could implement a script that would crawl your blog, follow the links and generate a static sitemap based on the content it finds. Which one makes more sense to you?

Share your creations and feedback and see you tomorrow!

Liked the idea a lot and would love to have it all year long?