In this post, we are going to use a Gatsby sample to showcase how to deploy and manage Jamstack sites with Cloud 66. We'll also list the statics site frameworks that are available on Cloud 66.
Cloud 66 for Static Sites Overview:
What is Cloud 66 for static sites? This No Ops platform builds static websites (Jamstack) and deploys them to your own cloud account on AWS, GoogleCloud, DigitalOcean, Azure or Linode. Cloud 66 automatically generates SSL certificates for all sites and gives you access to real-time user access logs. Its powerful traffic rule engine allows you to route traffic dynamically based on factors like device type and user location.
How does it work? In nutshell, Cloud 66 allows developers to build and deploy sites directly from your repo to your own cloud.
What is the cost? Cloud 66 for static sites offers a pay-as-you-go model, $1.99 per site per month and $0.095 per GB for outbound traffic. Each application includes 120 free build minutes per month. Above that, there is an over quota charge of $0.03 per minute. Teams, real-time logs, traffic rules, and SSL certificates are all included.
Static Site Sample Overview
Our Gatsby sample includes a default boilerplate with TailwindCSS. This starter ships with the main Gatsby configuration files to get you up and running.
Sample: https://github.com/cloud66-samples/gatsby
Deploy Gatsby App with Cloud 66 to DigitalOcean
What do you need?
- A Cloud 66 Account - sign up for a Cloud 66 account with a four-week free trial. You can sign up using your GitHub or Google accounts, or use your email and create a password.
- Access to your code repository. Once you have your Cloud 66 account we will ask you for (read-only) access to your code repository so that we can build and deploy your application for you. For the purposes of this post, you can use one of our static site samples: https://github.com/cloud66-samples/gatsby
- Access to a DigitalOcean account, or any other of the following clouds: AWS, GoogleCloud, Azure, and Linode.
Now let's see Cloud 66 Prepress in action.
Connect your Code Repository with your Cloud 66 Account
If you signed up with GitHub, you can select your application repo from the drop-down or you can use our sample application by clicking on the 'Enter the repo URL' link and pasting the link to our sample repo: https://github.com/cloud66-samples/gatsby.
Next, choose the master branch, production environment, give your app a name like 'My-Gatsby-App' and click the ANALYZE button.
Analyze, Add DigitalOcean Spaces and Deploy
We'll pull the code from the repo to analyze your app and suggest the best configuration. If needed you can commit changes to your repo and then reanalyze your code before deployment.
Next, we will ask you to choose a deployment destination. We are going to deploy the 'My-Gatsby-App' on DigitalOcean Spaces. To connect Cloud 66 with DigitalOcean, we'll ask you to enter your DigitalOcean Spaces Access Key. Once the cloud is connected, you can specify the region and the server size for the deployment. All done! Click the START DEPLOYMENT button.
Manage Your My-Gatsby-App
Once your application is deployed, you can open it from your Dashboard. On the right-hand side of the dashboard, you will find your application menu.
- Environment Variables - contain a name and value, and provide a simple way to share configuration settings between multiple applications and processes in Linux.
- Traffic Rules - you can not only redirect and rewrite traffic based on paths or domains but also based on their country of origin, type of OS or browser, or even the internet service provider that your visitors use!
- LiveLogs - Requests to your Prepress sites can be monitored in real-time. LiveLogs include not just host and path, but also the visitor's IP address, ISP, country, city, browser, OS, and other user agent information with high accuracy.
- Setting & Information - allows you to edit your application settings. You can also set up your notifications, and choose what you would like to be informed about, and via which channel, as well as our Preview deployments feature.
Static Site Generators Supported by Cloud 66
The following static site frameworks are currently available on Cloud 66:
Hugo
A fast and flexible static site generator written in Go. Hugo was created to work well with any kind of website e.g. blogs, tumblers, and docs. Hugo is used by companies like Let's Encrypt, Over, SlackImpact, and more.
On GitHub: ⭐️ 57767, Fork: 6201, gohugoio/hugo
Gatsby
Gatsby.js is a static Progressive Web App (PWA) generator written in JavaScript. It builds fast and modern applications and websites with React.js components and with a rich data plugin ecosystem. Gatsby is used by companies like IBM Carbon Design, Little Caesars, Diem, Cloud 66, and more.
On GitHub: ⭐️ 52589, Fork: 9872, gatsbyjs/gatsby
Jekyll
Jekyll is a simple, blog-aware, static site generator written in Ruby. It's perfect for personal, project, or organization sites. Jekyll is used by companies like Ruby on Rails, Sketch, Spotify for Developers, Cloud 66, and more.
On GitHub: ⭐️ 44305, Fork: 9141, jekyll/jekyll
Next.js
A minimalistic framework that is written in JavaScript for server-rendered React applications as well as statically exported React applications. Next.js is used by companies like Hulu, Deliveroo, GitHub, Twitch, Lego for Kids, and more.
On GitHub: ⭐️ 83441, Fork: 17017, vercel/next.js
Nuxt.js
A minimalistic framework that is written in JavaScript for serverless Vue.js applications. Nuxt.js is used by companies like Upwork, TikTok, Trivago, Unilever, and more.
On GitHub: ⭐️ 39630, Fork: 3094, nuxt/nuxt.js
Vue. js
Vue.js is an open-source model–view–viewmodel front-end JavaScript framework for building user interfaces and single-page applications. Vue.js is used by companies like Facebook, Netflix, Apple, BMW, and more.
On GitHub: https://github.com/vuejs/
Svelte
Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app. Svelte is used by companies like 1Password, Square, GoDaddy, Alaska Airlines, and more.
On GitHub: ⭐️ 56.8K, Fork: 2.8K, sveltejs/svelte
Middleman
Middleman is a static site generator written in Ruby, that uses all the shortcuts and tools in modern web development. Middleman is used by companies like MailChimp, Thoughtbot, DigitalOcean, Ruby Belgium, London Ruby User Group, Ruby Conferences, and more.
On GitHub: ⭐️ 6837, Fork: 714, middleman/middleman
Docusaurus
Docusarus is a static site generator written in JavaScript. It saves time and focuses on your project's documentation. Simply write docs and blog posts with Markdown and Docusaurus will publish a set of static HTML files ready to serve. Docusaurus is used by companies like Redis Lab Developer Site, Draft.js, Home Assistant, NextAuth.js, and more.
On GitHub: ⭐️ 31590, Fork: 4288, facebook/docusaurus