Ronnie Atuhaire
Ronnie Atuhaire's Blog 🤓

Ronnie Atuhaire's Blog 🤓

How To Deploy A Docz Site On Render

How To Deploy A Docz Site On Render

Ronnie Atuhaire's photo
Ronnie Atuhaire
·May 3, 2022·

3 min read

Subscribe to my newsletter and never miss my upcoming articles

Play this article

Table of contents

In this tutorial, we will auto build our Docz site, auto-render and allow automatic deploys every time we push changes to the connected Github repository.

🔸 Docz Quick Intro

If you are new to Docz, it is simply a documenting tool that simplifies time spent on building and maintaining custom documentation sites.

Docz enables you to quickly create live-reloading, SEO-friendly, production-ready documentation sites with MDX and customize the look, feel and behavior when required by leveraging GatsbyJS and Gatsby theme shadowing.

You can get started here and for more information.

I have already created a sample site which is basically a Hello-World programme on this repo and we shall see how we can deploy it automatically using Render which is currently live here.

Render is a unified cloud to build and run all your apps and websites. Render is the best way to deploy websites. It's free, way faster than Github Pages, and can be set up without any big hassle.

Render makes deploying your application as easy as pushing your code to source control. Once you connect your GitHub or GitLab account to your Render account, Render will automatically build and deploy your services with every push.

🔸 Let's get started;

As I said, we shall deploy this sample Hello World Docz site, you can clone and npm install the required packages to follow along.

You can test it locally by running;

yarn docz:dev

It may take some time building, but this should be the output;

image.png

Now that we have tested, let's first head over to Renderand create an account, I would highly recommend signing up with GitHub and confirming your email.

Once the email is confirmed, you might be redirected to your dashboard or go straight to the dashboard to create a new static website.

🔸🚀 Create a new static website

1.PNG

🔸🚀 Connect to your repo slug

22.PNG You have to basically copy the repo-url that contains your site.

🔸🚀 Set up the project

2.PNG From the above picture, you can create your unique name for your project, set the branch name and my code is currently on main.

Then direct Render on how to get the auto-build and specify the yarn docz build command which builds a static site in the .docz/dist/ folder which I specified down.

Go ahead to deploy right now by pressing on Create Static Site button.

🔸🚀 In-progress installations

3.PNG You can skip the advanced settings for now and you are good to deploy. And if everything is right, Render will install all the necessary packages and run the build from the command we specified.

🔸 🚀 Deploy

4.PNG If all is well, you should get the above output.

You can visit my own deployment here.

I have also hosted this entire article on the route --> / article -->( doc-z.onrender.com/article )

That's it! So every time you have new commits, you can choose to manually deploy to get the latest changes affected.

Congratulations 🌟✨ you deployed a docz site in just under 10 minutes.

🔸 Conclusion

Once again, hope you learned something today from my little closet.

Please consider subscribing or following me for related content, especially about Tech, Python & General Programming.

You can show extra love by buying me a coffee to support this free content and I am also open to partnerships, technical writing roles, collaborations and Python-related training or roles.

Buy Ronnie A Coffee 📢 You can also follow me on Twitter : ♥ ♥ Waiting for you! 🙂
 
Share this