Deploying a Static Website

Your journey of content publishing will not stop at creating a content at Nimvio. Now that you have provided your content, it is time to publish your idea in the form of website. In order to transfer your content from Nimvio to a website, you will need a website deployment system to deploy our content to the website. Follow this guide to get the ropes on how we can deploy the content to the website.

What are the option?

Along with other common Headless CMS product, Nimvio requires website deployment platform to deploy readily-provided content to a target website. So, what are the option for website deployment platform? There are several product that people usually use for this matter, we will highlight it for you below.

1. Netlify

Netlify is one of web development platform that helps developers to build, test, and deploy websites. It works by unifying the modern decoupled web elements from local development processes to advanced logics. It is offering web automation technology as well as web hosting infrastructure. Netlify will work by connecting your GitHub repository to pull your website’s source code. After that it will run a build process to pre-render your website’s pages into static HTML. The resulting pages will then be distributed and deployed across a wider range of content delivery networks. However, whenever, a user will request to access your website, it will choose a nearest data center automatically to serve users effectively.

2. Vercel

Vercel (formerly known as ZEIT) is a cloud platform that enables developers to host websites and web services that deploy instantly, scale automatically, and require no supervision. Vercel offers an intuitive user interface with minimal configuration for hosting static site generators such as Gatsby or Hugo and various CMSes like Contentful, Prismic, or WordPress. Vercel is also a parent company of the Next.js framework — and it comes with several interesting features. By connecting the GitHub repository to Vercel, you can deploy the main branch to Vercel domains.

3. Heroku

Heroku is a widely relied-upon Platform as a Service offering that enables developers to carry out hassle-free application deployment, scaling, and management. This platform offers support for a wide range of programming languages such as Java, Ruby, PHP, Node.js, Python, Scala, and Clojure. Heroku runs applications through virtual containers known as Dynos. Heroku charges its users based on computing resources like RAM and virtual machines allocated. The Heroku platform and user-created applications use Amazon Web Services as the underlying infrastructure. Developers can achieve swift application development using it as it is pretty convenient. A PaaS service like Heroku provides a fully managed service, takes care of the infrastructure, and can automatically scale up / down servers. Compared to a pure IaaS provider, it will add additional layers of value on top of virtual machine resources.

How to use it?

We will now explain on how to use the website deployment platform to publish the content. For this guide, we will use Netlify for the chosen platform. You can use other website deployment platform to publish your content of course. Keep in mind that other system might have similar or different step in setting it up, so make sure you get the correct "how-to's" for each platform you've decide to use. Here are the steps of deploying a content to a website using Netlify:

1. Sign up to create Netlify account

Access Netlify website and create the account by signing up to Netlify. Netlify has several subscription packages ranging from free to paid plan. You can choose which plan suit you most. You can check on their plan details for detailed information for each offered plan.

2. Add your new site

Once signing up process is completed, you will be directed to Netlify overview page. If this is your first time accessing Netlify, you can proceed by clicking "Add a New Project" button to start setting up the website deployment.

3. Link to the supported version-control tool

There are currently four supported Git provider in Netlify: GitHub, GitLab, Bitbucket, and Azure DevOps. For this instance, we can use GitHub as it is the most common Git provider. To set up GitHub you can follow this link (github link) to help you understand and onboard to GitHub. Keep in mind that you need to set up your GitHub until the creation of repository in GitHub.

Once you've created and set up your repository in GitHub, you can proceed back to Netlify by clicking the GitHub button to start integrating Netlify with Github.

4. Authorize Netlify

You will be directed to GitHub authorization page with Github. Click on the Authorize Application button to confirm the authorization.

5. Connect with available repository

Once authorized, you will be redirected back to Netlify to select available repository from GitHub account you have connected. Available repository at the GitHub will be shown for you to choose. Be sure to choose the repository of the content you with to deploy to your website.

6. Configure deployment settings

Here you can configure your options. Make sure your publish directory is where your public site files are placed after building the site (e.g. dist) and your build command is whatever you run to build the site (e.g. npm run build). Then click the Deploy site button to continue.

7. Site Deployment

Netlify will now in progress in deploying your website. It will take several minute to finish the deployment process.

8. Website Deployed

Once the process is completed, your website will be ready and live. Direct yourself to Netlify overview page to check on your website and its URL. At the first time, the URL is generated with an automatically generated name. You can customize the URL by going to the Settings tab and clicking "Change site name" button.

For detailed information on Netlify feature and setting, head over to Netlify documentation for further information.

Tips

Did you know that you can automate website deployment at Netlify based on published content at Nimvio? This feature is possible by leveraging Webhook at Nimvio. To see on how it works and how you can implement it on your own, head over to our blog post here to learn more of Webhook utilization in Nimvio.