Case Study blog.mouatezbenariba.me under construction

1. Introduction

Image showcasing some information about the website owner: Elmouatez Billah Benariba, blog.mouatezbenariba.me, Blog

As part of my personal blogging efforts, I embarked on a journey to share my knowledge, thoughts, and ideas with a wider audience. I created a blog to engage with like-minded individuals and build a community around topics that matter to me.

Through this case study, I aim to showcase the challenges, solutions, and results of my efforts in building a successful personal blog, and to offer insights and recommendations for others looking to do the same.

Image showcasing some information about the website owner in Arabic: المعتز بالله بن عريبة, blog.mouatezbenariba.me/ar/, مدونة

2. Concept & Inspiration

When creating my personal blog, I was inspired by the work of several frontend developers and bloggers, including Lynn Fisher, Addy Osmani, David Dias, and Smashing Magazine. I aimed for a simple yet visually appealing design that would be both lightweight and performant, without sacrificing functionality or user experience.

3. Design and User Interface

In designing my personal blog, my main focus was on creating a simple, intuitive user interface that would put the emphasis on the content. I opted for a minimalist design with a clean layout, using a muted color scheme and typography that would allow the articles to stand out.

The header of the site contains links to my Arabic blog, all of the posts, and a link to my personal portfolio website. The main page features a welcome message, along with a photo and details about my current job position. The featured articles are prominently displayed on the homepage, with a focus on visual imagery to draw the reader in. In the footer, I included links to my social media accounts to encourage readers to connect with me and stay updated on my latest content.

Overall, my goal was to create a design that was easy to navigate and mobile-friendly, with a focus on the user experience and optimization for search engines.

blog.mouatezbenariba.me Home Page
blog.mouatezbenariba.me Home Page

a. Color scheme

For the color scheme of my personal blog, I opted for a simple yet visually pleasing palette that would complement the minimalist design. The main colors used were purple, red, and bluish cyan.

The body background color is a light shade of purple #f5ebff, which creates a soft, calming effect and puts the focus on the content. The header and footer background color is a deeper shade of purple #dcc4ff, which provides a subtle contrast while still maintaining a cohesive look. I used a bright #e52424 red for tags in article snippets, which stands out against the muted colors and draws attention to the topic of the post. For tags in the tag list, I used a darker shade of red #7a1f1f, which provides a visual distinction between the different categories. Finally, I used a bluish cyan #2cccfb for the next and previous article links, as well as for hover effects on the footer links and the article descriptions.

This color adds a touch of playfulness and helps to guide the reader's attention to important elements on the page.

Blog Color scheme
Color scheme

b. Typography

For the typography of my personal blog, I chose the font-family 'CabinetGrotesk-Regular', which is a modern sans-serif font with clean lines and a legible design.

4.Development

a. Choice of Technology

For the development of my personal blog, I chose to use Eleventy with Nunjucks as the templating engine. This allowed me to take advantage of Eleventy's powerful templating system, which made it easy to create reusable components and layouts. By using Nunjucks, I was able to write less code, resulting in a more efficient and performant website.

Additionally, I used and configured Netlify CMS to add blog posts, which provided an intuitive and user-friendly content management system. With Netlify CMS, I was able to quickly and easily add new blog posts, edit existing content, and manage my site's structure. This streamlined my content creation process, allowing me to focus on creating high-quality content without getting bogged down in technical details.

b. Website Structure

For the website structure of my personal blog, I designed a simple and intuitive layout that focused on the content. The base structure consists of a header that includes a logo and links to the main page and the navigation list, which includes links to the Arabic blog (/ar/), all posts, and my portfolio. The footer includes links to my social media accounts.

The main page is where visitors can find an introduction about me and featured articles. The introduction provides a brief overview of who I am and what I do, while the featured articles section highlights some of my best and most popular blog posts.

The posts page contains all of the posts that I have written, listed in chronological order (newest first). Visitors can browse the posts by tags, making it easy to find articles on specific topics. This simple and straightforward structure ensures that visitors can easily find the content they're looking for and navigate the website with ease.

As part of my website structure, I also created a simple and user-friendly 404 error page. This page displays a message letting visitors know that the page they were looking for is not available and provides them with options to return to the homepage or search for the content they were looking for. The design of the page matches the overall aesthetic of the website, ensuring a consistent and seamless user experience.

c. Coding Standard

Using a code standard is important for maintainability, readability, and scalability of a project. In my project, I followed a few best practices to ensure code consistency and maintainability:

  • - I used Prettier to format my code, which helped to maintain a consistent code style throughout the project.
  • - I used CSS variables for colors, which allowed me to easily change the color scheme of my website without having to search and replace specific color values throughout my code.
  • - I followed the BEM (Block Element Modifier) naming convention for my CSS classes, which helped to keep my CSS organized and modular. This naming convention also makes it easier to understand the relationship between different elements on the page and to avoid naming conflicts.
  • - I made sure to comment my code when necessary, which helped me and any other developers working on the project to understand the purpose and functionality of different code sections.
  • - I tested my code thoroughly to make sure it was functioning as intended and to catch any potential bugs or errors before deployment.

d. Social Media

I made sure that my personal website is optimized for sharing on social media platforms by adding Open Graph metadata and Twitter cards. This ensures that when my website is shared on social media, it is presented in an attractive and professional manner, with the appropriate image, title, and description.

5. Page quality (Core Web Vitals)

My website achieved a perfect score of 100% on Google PageSpeed Insights for performance, SEO, and best practices on both mobile and desktop.

blog.mouatezbenariba.me PageSpeed Quality report
blog.mouatezbenariba.me PageSpeed Quality report

This was due in part to my decision to build the website using Eleventy, which helped increase performance and keep the site minimalistic. Additionally, I optimized the website's page quality by deferring render-blocking JavaScript, specifically the Netlify CMS script and the Prism library used to style code blocks.

By taking these steps, I was able to create a fast and high-performing website that provided an optimal user experience.

6. Features and Functionality

I implemented a key feature of my website, an Arabic version of my blog, to cater to a wider audience. To ensure consistency and ease of use, I made sure that the posts page only displays Arabic posts and the tags page only displays Arabic tags. This allowed my website to have a wider reach and provided a seamless experience for Arabic-speaking visitors.

blog.mouatezbenariba.me/ar/ Arabic Home Page
blog.mouatezbenariba.me/ar/ Arabic Home Page

7. Deployment

For deployment, I chose to use Netlify, which made the process incredibly easy and efficient. After configuring my website and linking it to my Netlify account, I was able to deploy it to the subdomain blog.mouatezbenariba.me with just a few clicks. Netlify's continuous deployment feature ensured that my website was always up-to-date and automatically deployed any changes made to the repository. This allowed me to focus on creating content and making updates to the website without worrying about the deployment process. Overall, I found Netlify to be a reliable and user-friendly platform for deploying my Eleventy website.

9. Conclusion

In conclusion, developing my personal blog using Eleventy proved to be a great choice for me. Its flexibility, simplicity, and performance allowed me to create a clean, efficient, and easily customizable website. I learned a lot throughout the development process, from working with Nunjucks templates and CSS variables to implementing Netlify CMS and Open Graph tags. By adhering to best practices, following a consistent code style, and keeping core web vitals in mind, I was able to create a high-quality website that loads quickly and performs well. Overall, I am happy with the results and excited to continue expanding and improving my blog in the future.