JavaScript 201 — VueJS- Create your personnalized front-end blog — No backend to manage!

I was looking at how I could make a positive impact by sharing knowledge. I think I found the first step to it: creating open online course. In order to accomplish this project, I need my own platform to be able to distribute them for free. In this blog series we will see the development of a static blog step by step.

In this article, I’ll describe what I am aiming to as an end product.

We want a static blog, which means that no backend is required, everything is stored and rendered in the browser. We will use a javascript framework called VueJS. It is a very light framework with loads of different components added to it. It is very modular and light at the same time. I enjoy a lot programming with this framework.

In terms of user experience, we will keep it very simple. We will generate our blog dynamically. What does it mean? Let me explain you with an example.

Let’s say, I want to create a blog to publish content about one of my favourite programming language which is JavaScript. The idea being that I would like to have a json object to describe my data; for example

In order to be the clearest guy on earth in my explanation, here is the structure of the blog that should be created by this config file. Here are the different wireframes:

The first wireframe is the one that describes the landing page of the blog as well as any landing page of a category. In fact, the landing page will have it’s presentation video of the whole blog. Each category will have the video presentation of the tutorial series that we are going to work on. If a category have nested categories, the small boxes written heading inside represents the different categories, or the video series otherwize.

The second wireframe reprensents the UI of a tutorial series. It will be a very nice playlist type of thing in a UI like Udacity:

Wireframes are a good way to communicate an interface design as well as set it on paper clearly which will avoid us changing the design 10 times along the way and end up with a meaningless patchwork of different designs.

See you in the next post where we might begin playing around with VueJS 2 ;).