Our great sponsors
-
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
-
Use Heroku to host my Ghost server, which is essentially a Node.js app. I found this GitHub repo that can be used to deploy a Ghost server into Heroku with just a click of a button. However, this app is preconfigured to use JawsDB as the MySQL database where all data for our posts are stored. JawsDB does have a free plan , but it only comes with 5MB of storage. The next price tier is $10/month for which you'll get 1GB of data. I needed to come up with a lower-cost option for my data storage.
Static site generator All websites, doesn't matter what they are, fundamentally consists of HTML, CSS, and JavaScript. It doesn't matter what tools or frameworks you use to create your website, the final result needs to be compiled into these file formats in order for the browser to understand and display on the screen. Our blog is no exception. There are two sources of HTML for our blog: _the static _ HTML contents (site header, logo, layout, footer, etc.) and the dynamic HTML contents from the actual blog posts. We need to somehow combine both of these _ static _ and _ dynamic _ HTML sources into a single HTML file at every single build of our app. Static site generator to the rescue!🦸♂️ A _ static site generator _ is a software application that creates HTML pages from templates or components and a given content source during a _ build _ process. There are many static site generators available out there. We will be using Gatsby for our blog. During a build, Gatsby loads JSON data from GraphQL and merges it with components to create HTML pages. These generated pages are then deployed to a web server. When the server receives a request from a browser, it responds with rendered HTML. So the question that needs to be answered now is _ where does the GraphQL data come from? _ 🤔. I'm glad you asked because that's exactly what we're going to explore in the next section.😉
Added block code syntax highlight using highlight.js
Content Management System (CMS) Dynamic contents for JAMStack sites (in our case, these are our blog posts) can be controlled via a CMS, typically known as _ headless CMS. _ Once a change is made in CMS (a post is published/added/edited/deleted), a new build of our site will be triggered and deployed as static assets. Similar to static site generators, there are many options for CMS available out there, but we will be using Ghost CMS for our blog. As mentioned above, after a change is made to either our _ static HTML _ from Gatsby or to our _ dynamic HTML _ from Ghost CMS , we will need to somehow trigger the deployment to the web server to rebuild and regenerate the HTML files. How are we going to do that?🤔 Again, glad you asked! Join me in the next section!😎