Introducing v3.0

TL;DR

I just released v3.0 of this website with the following new features:

• Monorepo for both backend and frontend.
• Fully dockerized setup. Fork the project, customize it, and run a single command to build your website.
• New ways to toggle features and configure the client.
• Upgraded backend to Django v3.
• Improved SEO including dynamic sitemap and HTML meta tags.
• Re-written client in Typescript.
• LaTeX and HTML in Markdown support.

Check out the repo on Github. Please give it a star if you like it!

Why I keep a blog?

I guess you noticed, I don't have many posts in my blog, I have been struggling to write a post every month since the last 48 months now 😄.

You might ask -my dear reader- then why do I keep working on this website? or why don't I use WordPress or another CMS to save time?

Well, I keep this website as a free canvas where I can learn and test new technologies quickly Not long ago, I added the snippets page, where I add my learnings for my future self and other developers.

Because of this website I sharped my skills in Python and Javascript, and learned new frameworks including Docker, NextJS.

New features in this release

This is the biggest release since I started working on the website almost 4 years ago, keep reading to see what is new.

Monorepo

Instead of maintaining two separate repositories for backend and frontend, the project's source code is now hosted in one repository, fully docerkrized with development and production environments setup instructions. which makes it easy to develop new features in the backend and test them in the client at the same time before releasing them.

Fully Dockerized

The project is now fully Dockerized, including the backend, database, API, and frontend.

The development environment supports hot module replacement, uses SQLite, and Django debug toolbar for better development and debugging experience.

While the production environment uses NGINX and PostgreSQL.

Whether you want to edit the source code or run the project in your production server, you only have to have Docker installed in your machine to run the entire project, setting up this website now literally takes a few minutes!

New customization options

• New .env.dev and .env.prod files are used to set keys and secrets securely.
• New config.json file to allow easy setting and toggling for frontend features like disabling a certain page, setting Google Analytics, Disqus, and more.

config.json Example

{
  "enableFooter": true,
  "enableCopyright": true,
  "enableCodeBlockCopy": true,
  "enablePageLoadingBar": true,
  "enableGoogleAnalytics": true,
  "header": {
    "sticky": true
  },
  "home": {
    "redirectToPage": null,
    "latestPosts": {
      "enabled": true,
      "highlightLatest": true,
      "count": 3
    },
    "latestSnippets": {
      "enabled": true,
      "count": 3
    },
    "latestProjects": {
      "enabled": true,
      "count": 3
    }
  },
  "blog": {
    "highlightLatest": true,
    "enableSocialSharing": true,
    "enableSearch": true,
    "enableTags": true,
    "enableRelatedPosts": true,
    "enableDisqus": true
  },
  "snippets": {
    "enableSearch": true,
    "enableSocialSharing": true
  },
  "projects": {
    "enableSearch": true
  },
  "about": {
    "enableContact": true
  }
}

Improved SEO

Now you can create meta contents including title, summary, keywords, and even a cover image for each page from the admin panel.

This does not only help search engines to crawl the website easily but enables rich previews when sharing a link via social platforms as well.

Client-side Markdown rendering

I love Markdown, it is simple, precise, and very readable, writing content in Markdown has been there in the admin panel since v1, However; Markdown to HTML rendering was moved from backend to frontend in this release.

Not only does this make it more secure by removing the need for dangerouslySetInnerHTML in React, but I can now provide custom components for any HTML selector after covering it in the client!

This allowed me to introduce some new interesting features that were not possible before, features like:

LaTeX in Markdown

Adding LaTeX code like this for example:

$$
\begin{gather*}
a_0=\frac{1}{\pi}\int\limits_{-\pi}^{\pi}f(x)\,\mathrm{d}x\\[6pt]
\end{gather*}
$$

Will render this:

Copy button in code blocks

Example code block with a copy button

Markdown tables

Adding Markdown code like this for example:

| Title | Description    |
|-------|----------------|
| Hello | I'm a table :) |

Will render this:

HTML in Markdown

It is possible now to embed HTML in Markdown

Adding HTML code like this for example:

<style>
  .embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
  }

  .embed-container iframe,
  .embed-container object,
  .embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>
<div class='embed-container'>
    <iframe src='https://www.youtube.com/embed/Zi_XLOBDo_Y' frameborder='0' allowfullscreen></iframe>
</div>

Will render this:

Page Aliasing

One issue I ran into is that I used underscores for slugs in the older version, which I learned later is not good for SEO, and it is preferred to use dashes instead, I needed to fix this without removing old URLs I shared for the website.

Well, Django middlewares to the rescue!. Just create a URL alias in the admin panel.

Examples:

By creating an alias from the admin panel, you can have as many URLs as you want that point to the same resource, isn't that cool!

Dynamic pages

Instead of hard-coding static pages like /api, these pages can be now added from the admin panel in Markdown and the client will load them based on their slug.

Media files support

No more Image URL fields in the admin panel, instead upload media files.

Typescript and simplified frontend code

Migrating the client to Typescript was a delightful experience! it makes the code safer more predictable, something I always missed from Swift.

I also removed Redux, Moment.js, and more unnecessary dependencies, and simplified the code for styling components.

Improved Error pages

I have new 404 and 500 error pages - featuring John Travolta, and another guy I don't know 😄 - for a better user experience

Learnings

One reason I keep this website is to use it as a canvas to try new ideas and learn new technologies, I usually work on it in the weekends, and write my findings in blog posts and quick code snippets for my future self and other developers.

Here is a list of some things I learned while building this version:

• How to dockerize a NextJS app (I will write a blog post with full details soon).
• Use Docker networks to share the same localhost.
• Enable hot module reloading in NextJS when deployed in Docker (I will write a blog post with full details soon).
• Render LaTeX in Markdown in React applications using MathJax.
• Django middlewares to change the request/response
• Define and use global Sass variables in Styled components
• Multiple pip requirements files
• Create dynamic pages in NextJS
• Allow comments on posts using Disqus
• Cleaning Docker cache
• Disable Nginx version in headers
• Remove trailing slash in Nginx
• Autocomplete fields in Django Admin.
• Forward admin and API to subdomains in Django
• Pre-populate fields in Django admin.
• Join URL with a path in Python
• Serve service-worker.js in NextJS using Nginx (I will write a blog post with full details soon).
• Serve robots.txt in Nginx
• Clear out the history of a Git repository
• Set a self-hosted CI using Github Actions

Summary

This version includes more features and many bug fixes. It looks like I had another elephent in the room I needed to address!

The website is open-sourced and released under the MIT license, grab your copy from Github, and check the instructions in the readme page on how to customize it.

Thanks for reading!

What do you think about the new website?

Please star the repo on Github, share your thoughts in the comments below, or let me know on Twitter.

You can always check my calendar and schedule a 15 min meeting using the following link.