loading...

How to skip responsive design with Cloudflare + Developer Blog

denislav__ profile image Denislav Gavrilov 👨‍🚀🤖🤷‍♂️ ・2 min read

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!

Posted on by:

denislav__ profile

Denislav Gavrilov 👨‍🚀🤖🤷‍♂️

@denislav__

I am a "Software Consultant" by job title, considering myself a futurist, who is interested in learning anything!

Discussion

pic
Editor guide
 

Great post! I also use Cloudflare and the DevDojo Dev blog feature!