How to skip responsive design with Cloudflare + Developer Blog

kubeden

Kuberdenis

Posted on September 13, 2020

How to skip responsive design with Cloudflare + Developer Blog

Prerequisites:

  • Active Domain
  • Cloudflare Registration
  • DevDojo registration

Story & Implementation

This is going to be a quick post in which I want to share with you an awesome combo I discovered and am using on my website. So a little back story, I created and launched my website - asciinaut.sh. After 2 days of hardcore documentation, I finally managed to create something from scratch and not use a ready template. As a new developer, I think you can imagine what is happening with my head when it comes to full-stack... trying to learn HTML + CSS + JS + PHP (Laravel) in one take is... well, a little hard.

Why I'm telling you this, is because I now absolutely hate transforming desktop-ready websites into responsive, mobile-friendly versions of themselves. Anyway, so I am creating a blog and am struggling (more like 'sick of' adjusting stuff) with the mobile version even though I am using bootstrap. What I thought of is that before I created my own blog, I was already 50% done - I was using DevDojo's Developer Blog feature & I make use of Cloudflare's free plan.

What did I do? I used Cloudflare's mobile redirect with a CNAME of my DevBlog's URL - dennis.devdojo.com. And that's it - I now have a mobile version of my blog. More importantly - a mobile version that I don't have to maintain. Thanks, DevDojo!

Implementation

Assuming you already use Developer Blog and have a domain with DNS managed by Cloudflare, you should do the following:

Cloudflare setup

  1. Log into your Cloudflare dashboard
  2. Navigate to DNS
  3. Create a CNAME record of your domain (e.g. mobile.example.com)
  4. Navigate to Speed -> Optimization
  5. Scroll to the bottom section (Mobile)
  6. Select the CNAME from the dropdown menu on the right of the section
  7. Select 'Keep Path'
  8. Select the button to turn green - On.

Developer Blog setup

  1. Open your Developer Blog in DevDojo.
  2. Input the mobile version URL of your website (e.g. mobile.example.com)

And that's it! In a couple of minutes, you are all set up. Navigate to your website from your phone and enjoy the magic!

Conclusion

What is the conclusion? We as a developer community seem to have a great arsenal of tools to work with while creating online content... and I love it!

πŸ’– πŸ’ͺ πŸ™… 🚩
kubeden
Kuberdenis

Posted on September 13, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related