When it comes to blogging there are tons of platforms available for people to use. A blog could be using a static site generator like Jekyll, or a powerful content management system (CMS) like Wordpress or Drupal. Each of these tools has their own specific process for development.
There are pros and cons to each all of these services, but today I'm going to talk about my new favorite combination to create a static blog: Contentful and Netlify.
Contentful is a powerful platform that provides developers and small businesses a CMS as a service.
I like to think of it as a "cloud" database for different types of content.
In Contentful, you can create models to represent different types of data that you could use. I like to think of these models as entities that have different attributes that describe them as a whole.
If you're not familiar with the idea of entities and attributes within database design, I highly recommend you check out this video that covers how you can make visual models to describe a database.
Let's dive into an example of a model.
A simple blog post can be broken down into several attributes. If you think about it, the main attributes are:
- A blog title
- Slug (unique path to a blog post)
- Author of the post
- Category
- Post body (our content)
- A featured image (a photo we show in our preview when people scroll through our posts)
- Post published date
When you put all of these together, someone could have a super basic skeleton of a blog post already done, without worrying about styling or formatting.
Here is an example of a model on Contentful. I used this model to represent a post on my blog:
Look familiar? ;)
When I first got started with Contentful, there were two features when describing a model that I found useful:
- Validating entries based on criteria you can set
- Manipulating different attributes based on a previous value
For example, you can't really have a blog post without a body or title. You can set those to be required fields so that Contentful won't publish a post unless those fields are filled out.
A good example of a dynamic field is the slug (the path to the specific post). For SEO purposes, it's a best practice to put dashes in between the words in your slug, because when you use spaces, it is encoded as "%20".
This would end up looking like this in an URL:
https://malikbrowne.com/blog/contentful%20and%20netlify%20the%20dynamic%20static%20site%20duo
Yuck.
With dashes, it's much more human readable:
https://malikbrowne.com/blog/contentful-and-netlify-the-dynamic-static-site-duo
Beautiful.
Contentful will automatically convert your title into a properly formatted slug if you choose the option "slug" in your options.
Using these models, Contentful allows you to create new instances of each model you define, which they conveniently call "content."
Out of all the validation features they have, the one I use the most is image requirements. When working with multiple people, this can be one of the features that can go wrong, and if not careful throw off the layout and functionality in your site.
For example, to optimize loading times you might want to limit the file size of an image that someone sets as the featured image of a blog post, since Contentful doesn't compress your images for you.
Contentful allows you to set multiple different image parameters like:
- Image file size
- Image proportions (width and height)
- Type of file (jpg, png, gif)
This is a really awesome feature that allows you to have a lot of granular control when working with a group of editors.
If you're worried about creating these complex models, don't fret. Contentful has basic templates for models like blog posts and other things after you sign up for a free account.
Also, let's not forget that Contentful allows you to create up to 10,000 new content records in their system for free.
Talk about a free trial.
After you or an editor has filled out the content for a post and hits that green publish button, Contentful will abstract your content data into a convenient REST API.
This will allow developers to query and work with all of the available models, assets, and content data that you have provided.
Contentful even stores metadata for all of your models, provides parameters for filtering your blog via pagination, and provides users with a basic markdown editor to write your blog posts if you don't have a setup already.
(I personally use this application called Typora, it's increased my productivity when writing Markdown files by a ton.)
Markdown can be easily parsed down into HTML using a whole bunch of tools on the internet.
After writing your posts, you can pull the information either through the REST API mentioned before, or the software development kit that they provide.
The next issue you would need to think about is deployment.
That's where Netlify comes in.
Netlify is an automation platform that builds code for production to create easily manageable websites and applications.
They focus on providing the easiest flow for managing deployments, covering everything from continuous integration to CDN distribution and caching.
Some of my favorite features that Netlify offers are:
- A global CDN that distributes your content across the globe
- A ridiculously fast native DNS service
- Atomic deployments, bundled with one click rollbacks
- Build automation
You can check out a list of all the awesome features that Netlify provides here.
Netlify makes the process ridiculously simple - you only have to push your code to Github.
When executed, Netlify will check your package.json file in your Github repo for build scripts, and you can choose the command it runs every time you push your code to Github.
One awesome thing to note is that Netlify scales with your website, no matter how big it gets.
Also, just like AWS you only pay for what you use. Doesn't get any better than that!
After seeing all of those features, you can definitely see how each service is awesome in their own respective right.
But there is one really awesome feature that when used together makes the blogging experience that much easier: continuous integration via webhooks.
When I first created my blog, I was deploying my website manually, using react-snapshot to create the newly rendered HTML files for SEO purposes, and dragging these production-ready files onto my FTP server.
Also when I wanted to make a couple of CSS changes after testing on other devices, I had to rebuild my create-react-app project and then re-run react-snapshot every single time.
Let me tell you something, that got old. FAST.
This is where web hooks come in.
If you're not familiar with webhooks, a webhook is simply a network request that only occurs when something happens.
Contentful allows you to set a webhook that gets called based on different actions a user can do in their application.
Thes actions include:
- Creating a new asset, entry, or content type
- Saving a new asset, entry, or content type
- Publishing and unpublishing an asset, entry, or content type
- Deleting an asset, entry, or content type
...you get the idea.
When any of these actions happen, Contentful will send out a request to a URL that I specify, telling all listeners that data has been changed.
Netlify can listen to this webhook, and trigger a build command when it received a network request for this URL.
These are my personal webhook settings in Contentful:
With the help of Netlify and these webhooks in Contentful, everything that I had to do manually before is now done with a "git push" command, and the push of a button on Contentful.
I have also switched over to GatsbyJS, which does several things for me that I had to do manually before. This includes:
- Providing a nice templating system for my blog posts
- Creating a sitemap for search engines
- Providing new HTML pages for ones that didn't exist previously
- Optimizing images on my website.
Ridiculously helpful, and super simple!
There are tons of static site generators out there. But a real pain point that I faced when working with other development environments was that adding functionality was an extremely daunting process.
Most of the times, the solutions were either unidiomatic or unintuitive.
After doing some more research into the JAMstack, I came across these two projects that stood out to me as great environments for optimal server-side rendering.
Both of these tools can use React out of the box, which gives your static site the potential to have the same functionality as a complex web application.
If you're a developer and you're looking to create a new blog, I highly recommend using these tools together with one of the static site generators I mentioned.
If you have any questions about the static site generators or either service, I'm more than happy to answer questions in the comments, or continue the conversation on Twitter.
See you in the next post.