Full Stack Engineer
Earlier this year I had a goal to step up my blogging game.
Both of these approaches have their own strengths and weaknesses, and whatever solution a blogger chooses will come with its own set of constraints.
I was partial towards Jekyll, mostly because I didn’t really enjoy writing in PHP if I could help it.
I also considered writing all of my blog posts on Medium, and then porting it to my blog via Medium’s REST API. However, I wanted to be able to separate my technical writing from my future plans of writing about motivation and productivity.
Contentful is a powerful SaaS platform that provides developers and small businesses with a highly configurable CMS that lives independently from the user’s publishing platform.
I like to think of it as a easily-accessed cloud database for different types of content.
Using Contentful, a blogger can create models to represent different types of content they may want to include in their blog. I like to think of these models as entities which then have attributes that describe them.
As an aside, if you’re not familiar with the idea of entities and attributes in database design, I highly recommend you check out this video that covers how you can make visual models to describe a database. Modeling is an awesome tool for orienting your thoughts about a project before you’re first getting started.
Let’s dive into an example of a Contentful model.
In my opinion, a simple blog post can be broken down into several attributes. If you think about it, the main attributes are:
When you put all of these together, you have a basic skeleton of a blog post already done, without worrying about styling or formatting.
Here is an example of a model on Contentful. I use this as my standard scaffold for posts on my blog:
When I first got started with Contentful, there were two features when describing a model that I found particularly useful:
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 hyphens in between the words in your slug, because when you use spaces, it is encoded as “%20”.
This is because Google and other search engines only treat hyphens as word separators, and ignores alternatives like underscores and spaces.
If you’re interested in a little bit of history into why this became a standard, check out this video by Google’s Matt Cutt on the topic.
For an example, let’s use spaces inside of our slug. When the browser encodes the URL, the result will look like this:
The whole idea behind SEO is to make your content readable. Let’s take a look at another example with dashes:
This is much easier to read. It’s a minor difference in ranking, but there definitely is a difference.
As a convenience, Contentful will automatically convert your title into a properly formatted slug if you set the option “slug”.
Contentful also allows you to create new instances of each model you define. These individual units of a model are then considered the “content” itself by the CMS.
In a blog, you can’t really have a post without a body or title. Those can be set as required fields so that Contentful won’t publish a post unless they are filled.
Out of all the validation features they have, the one I use the most is image requirements. When working with multiple people on a piece of content, requirements can easily get lost in the mix, and if you’re not careful, bad images could break the layout and functionality of your site.
For example, to optimize loading times you may 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:
This is a really useful feature that allows you to have a lot of granular control when working with a group of editors.
If creating these complex models seems daunting, don’t fret. Contentful has plenty of basic content model templates available to users once they sign up.
On top of that, Contentful allows you to create up to 10,000 new content records in their system for free.
After you or a collaborator has filled out the content of a post and hits that green publish button, Contentful will make your content accessible via a convenient REST API.
This allows developers to query and manipulate all of the available models, assets, and content data that you provide.
Contentful also stores metadata about of your models, provides parameters for filtering your blog to allow pagination, and provides you 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 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 you need either through the previously mentioned REST API, or Contentful’s SDK.
The next issue you would need to think about is deployment.
That’s where Netlify comes in.
Netlify is an automation platform that focuses 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:
Netlify makes the process extremely simple — you only have to push your code to Github.
When Netlify detects a change in your linked git repository, it will start the deployment by checking your package.json file in your Github repo for any build scripts. You can also specify which build script Netlify runs.
Another 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.
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.
Whenever I wanted to make 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 came in.
If you’re not familiar with webhooks, a webhook is a way for an application to provide other applications with real-time information. A webhook delivers data to other applications as it happens, which means you get data immediately.
In a normal API, you need to make a network request frequently to simulate real-time data. This is very inefficient, and is the reason why webhooks are growing in popularity.
Contentful allows you to set a webhook that gets called based on different actions a user can do in their application.
These actions include:
When any of these actions occur, Contentful will send out a request to a specific URL, telling all listeners that data has been changed.
Netlify can listen to this webhook, and trigger a build command when it receives 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:
Powerful, helpful, and super intuitive.
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 time, 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 tools for optimal server-side rendering:
Both of these tools are compatible 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.
Thanks for reading :) If you liked this post, please give me some claps! It will make it so other people will see this here on Medium.
This post was originally published on malikbrowne.com. You can find more articles like this on my website!
I’m always interested in hearing from people in the dev community, so feel free to say hello to me on Twitter. Tell me your opinion on the JAMstack!