Creating A Website With Cloudflare Pages — My Journey Into Web Development
If you own a business and/or you want to create a website by yourself and you are starting out in web development, chances are you have had a lot of ideas on how your website will look like, what kind of animations it will have, font sizes on each page and so on, it’s a lot to consider.
Finding out the right combination of services so you can launch your site given the vast options available might lead to decision fatigue.
Assuming you already own a domain from any available provider such as Cloudflare, GoDaddy, Namecheap , the next step is to select how you are going to build your site.
You may choose to go with website builders such as the good old WordPress, with a vast marketplace to integrate required functionality, or with Squarespace, which offers tons of ready to use templates so you can tweak them to fit your needs.
While it is awesome to have plenty of ready made products to select from, as your website grows and you learn from your audience, your needs will no doubt evolve too.
Such was the case of a site I manage Tamborazo El Ranchito, a Mexican music band based in Los Angeles, California, it started off being hosted at Wix, undoubtedly fitted our needs, a couple of pages, pictures of the band members, and a contact us page.
As we gained recognition and potential customers wanted to know more about us, they would have loved to see a photo gallery of the places we had been, videos of the band playing, among other things; I tried to play around with the solutions provided by Wix, but I felt that could have left us locked in to their services.
I decided to recreate the site using the good old WordPress coupled with plugins such as Elementor, hosted it using Namecheap EasyWP services, something a bit time consuming, but once again we were back on track!
While the switch gave us leverage of adding functionality we needed, we received feedback from clients and prospects about the usability and speed of the site; I ran out of tweaks that could make it load any faster or give us the look and feel we were aiming for, so there I was once again scratching my head trying to figure out a solution.
While I was nowhere near well versed in web development at the time as I am right now, I thought was time to level up my game, I searched around the web for a good web dev course to fit my needs, I decided to go with Colt Steele’s course as there were really positive reviews around it.
After going through most of the course, I decided to pause it to put my skills to the test so, and oh boy, what I big difference that was, moving away from step by step video tutorials is where the fun is at!
No doubt it took us some time to decide how the site should look on its new form, after doing so, since I was no longer using WordPress but a JAMstack architecture I needed to find the site a new home.
For code management, I used Gitlab in the past so it was a natural choice for me to continue using it. Now all it was left was to find a suitable service to ease my development efforts.
After Googling around and looking at the available options, I decided to use Cloudflare Pages, a service that connects to your Git repository, builds your website and deploys it in a breeze, sweet, I decided to use their solution so I could leverage it’s CDN services which the company is known for in contrast to the other ones out there.
Setting everything up (account, pages project, etc.) was straightforward, on the left hand side you have the Pages tab which will guide you to create a project for so it can be connected to your Git provider of choice.
It walks you through so you can instruct their build system what commands it should perform to generate your site, in my case I left everything as default since I used plain Javascript, CSS and HTML.
Once it finishes, it will automatically provide you with a pages.dev domain so you can check out your site live!
A few goodies that are included in their service are:
- Branch Preview: If you create a branch to test out a feature or improvement and would like to see how it plays out without affecting your production site, it creates a subdomain for your branch so you can play with it.
- Unlimited bandwidth: Meaning not worrying about if you have reached a daily or monthly cap in your site traffic if it takes off.
- Unlimited sites: You can host as many projects as you want with them, and will not be surprised with a bill for each additional site you add.
- Serverless functions: Meaning you can execute your code server side functions on their platform while on their free tier.
While there may be other products out there so you achieve the same functionality, I found Cloudflare pages service simple to use, while the documentation could use some work into detailing their features available, it is clear enough if you know the basics to get up and running in no time.
Next steps
Now with basics covered, you are now ready to start leveraging the features Cloudflare provides with their service and deploy your website for the world to see it!
While the traditional managed server architecture works well for some cases, if you do not wish to invest the time or feel like managing a server is not a thing for you, I am sure you will appreciate their Functions product too so you can focus on building your business rather than worrying about server maintenance.
I wish you have enjoyed this brief intro to Cloudflare pages!
Liked this post? Stay tuned, I got a detailed step by step instruction guide on how to use Pages + Functions on the way!
