How we have launched our new blog in just two days with GatsbyJS, Netlify & Contentful

How we have launched our new blog in just two days with GatsbyJS, Netlify & Contentful

  • Feb 5th
  • 11 min read
  • #  Tips & tricks

Let's talk about how to go from having an initial idea to developing a brand new blog in 2 days. Development using Gatsby, Contentful and Netlify have never made the process easier!

Having a blog has become a common part of marketing activities for many businesses. At Smartmockups, we had an idea to start sharing useful content with you, our audience, to help you to get the most out of creating product mockups online. And that's how the idea of creating our own blog started. It took us only 2 days and it can take you the same amount of time with our guide below.

What will you get to know?

  1. Our initial idea to start a blog
  2. What platforms we used to develop
  3. Development procedure
  4. How to give your blog a style
  5. Final thoughts

1. Our initial idea to start a blog

As our user base keep growing, we are receiving more and more inquiries about our product and how to use it. As much as we put effort into providing our customers with the best care possible, it became more difficult to answer hundreds of e-mails daily. Therefore we wanted to launch our blog to publish tutorials, use cases and case studies which our audience could find useful to read to get started using our product and its features.

Once our general idea of what the blog would look like was settled, we started looking for the best blogging solution we could find. We were in a need of the solution that we could ship as soon as possible with minimum engineering overhead but also something that would enable our marketing team publish content very easily and smoothly.

2. Wordpress vs Medium vs Static site generators

To look for a perfect platform that would meet all the requirements needed, we started off by doing a research. Our research was conducted with a goal to see what blogging solutions similar companies like us use. Thanks to that we were able to come down to couple of blogging solution options to choose from:

  • Selfhosted Wordpress: Wordpress is probably the first platform everyone starts thinking of when it comes to creating a blog. And it's no wonders. Wordpress has a massive community, large number of plugins and fixes all the issues of selfhosted wordpress. However, making sure that our webiste is up and running, secure and won't break after every single update, requires engineering resources. Another important point which hold us back from getting Wordpress was that last year we moved our entire backend infrastructure to Serverless which works extremely well for us therefore managing our own server felt like a big step back.

  • Building our own solution from scratch: This option might have been the easiest for us to pull off as we could simply add the possibility to publish articles from our Smartmockups admin's dashboard (it requires just a couple of new database tables, simple API, admin interface with something like draft.js editor) but we quickly didn't feel like that was the right option for us. The reason why is that our customers pay us for a mockup software and not for reinventing the wheel by crafting a custom blogging solution.

  • Medium: Medium looks like a great platform to use at first because you can start publishing content within a few hours, it has a great typography, admin interface and everything is super easy to use. However, we have found three things that were not in place according to our liking. The first thing is that with Medium, you have a very limited branding possibilites. The second one, and probably the most inconvenient for us, is that their custom domain service is no longer available. It means that we are not able to run our blog with a domain name like Lastly, there is a lot of changes happening on Medium (e.g. basecamp just moved their famouse blog) therefore we wanted to stick with something more secure.

  • Gatsby: We knew that JAMStack is becoming very popular and so we looked for options in this area and that's how we found Gatsby. Gatsby is a static site generator that is using React. What it means is that you simply connect some data source and when you publish an article, it automatically generates static HTML pages that are served to visitors. There is no database to connect to, no security vulnerabilities and it’s ridiculously fast. As a publishing interface connected to Gatsby, you can use Contentful with a free plan and choose from tons of ready to use boilerplates.

The main reason why we decided to try Gatsby first is that is build with React so we could use React components from main app for our blog. We have for example Containers, Navbars, Headers, Breadcrumb or Footer as separate components so we can use them easily on our blog. It is super convenient because when we update a footer on our main app, we don't need to do any extra work as it will update itself on our blog as well.

3. Getting started

We started off with the idea to use Gatsby together with Contentful. For that, we needed to register on to create an account. After registering, you are offered an official contentful-gatsby boilerplate. Instead of that, we tried to use a different one that is already using Gatsby 2.x.

Then we cloned the Github repo, installed dependencies (be ready that you will be asked to enter Contentful API keys) and after couple of seconds we were looking at a newly working blog. By adding couple of React layouts components (containers, navigation etc.) from our main app, things started to look even more visually pleasing. It may sound super easy and trust us, it was! It was a piece of cake at this point.

We love that Gatsby has a wide plugin library. For adding any regular blog functionality, we were always able to find a suitable plugin for that. To give you an example, we wanted to place youtube embeds into our blog posts so that there is “gatsby-remark-embed-youtube” and in case you want to embed your own videos, we found "gatsby-remark-video-custom". At some point we thought any external link should be opened in a new tab so you can easily fix that with “gatsby-remark-external-links” and so on. Splendid, right?😉

Along the process of development there were just two minor complications where we needed to look for a specific solution:

  1. You need to restart your dev server to make Gatsby get changed data from Contentful
  2. When you are changing the Contentful fields, you might have to delete your local .cache folder

Apart from these two findigs, we must say that the overall experience of ours and Gatsby docs were just awesome. Moreover the major plus point was, even if you don't possess any knowledge of GraphicQL (which Gatsby uses), you should still be able to achieve the basic blog functionality without any issues.

Two days went by and our marketing team was ready to start working on valuable content to publish on our brand new blog. Yes, you heard it right! Just two days and you can be looking at a brand new website of any sort.

4. How to give your blog a style

Building the blogging functionality was a matter of hours. Design, however, took us definitely more time than the the development process itself. At the end of the day, the main reason why, was because we wanted to ensure that our audience will get our blog posts in a certain consistent format and overall to make sure the blog looks visually appealing and is easily readable ☺️.

To make our blog look stunning, we focused on two main aspects:

1) Typography

When you are starting out and you don't have a ton of articles posted on your blog, the blog post list might appear straightforward and you might have issues to figure out a way to make your blog readable. After couple of hours of thinking, we were finally able to come up with decent typography plan and styles. Once we replaced the original "lorem ipsum" text with our first piece of content, we quickly realised that we had to start from scratch to make it look visually appealing.

From our own experience, it is better to start designing the blog typography once you have at least some content ready, rather than trying to set up a general styling format beforehand because typography will need a few adjustments once you know the approximate length of paragraphs or images to text ratios.

If you are stuggling with the same challenge, check our own styling on 👉 Github

2) Visual consistency within our blog posts

Our team is very lean and we don't have a dedicated designer in the marketing team. Therefore we were thinking a lot about how to enable non-designers to create images for the blog post that would stay consistent with the rest of the design. Since we are developing a design tool, it is natural that we think our content should look great on our website 😊

We were considering to achieve the visual consistency with:

  • Photoshop templates
  • Templates made in Keynote
  • Smartmockups Custom mockup editor

The first and most obvious way that came to our mind was using Adobe Creative Cloud software to create the consistency within our blog posts. Considering that nobody in the marketing team is a professional designer, we quickly had to come up with a new idea. Creating templates in Keynote was our second thought but if you happen to need to move the template or change the style then the whole template can easily break apart which would be very inconvenient in the long-run. Our last and best option popped into our heads and we figured out we could eat our own dogfood and use our Custom mockup editor for this purpose 😁.

By using our Custom Mockup editor, we were able to make an easy template in Sketch, upload it as an image into the mockup editor, add placeholder onto the scenes where we wanted our blog post images to go and save the mockup. Even non-designers from our team were then able to come back to our custom mockup editor library, choose the template needed, simply upload the images from the computer and create a stunning image that ensured the visual consistency we were so desperately looking for. 💥

5. Final thoughts

If there was a way how to show the pure joy of ours once the blog was up and running, then you would totally get it! Not only that the user experience and overall development procedure was super fast and smooth but the final result was beyond our imagination! Our blog is looking great, loading super fast and has all the aspects we needed! Thanks to Gatsby, Netlify and Contentful, we were able to develop a blog in legit 2 days without having any issues. I mean it won't get easier than that, right?😉

If you ever think about having your own website of any sort, now you know where to go. Gatsby, Netlify and Contentful are all Smartmockups approved and will have you sorted!💥

🤓 Ready to start developing?

Head over to Gatsby, Netlify, and Contentful to get started with creating your own website. You won't regret what results you can get in such a short amount of time and how amazingly well the development process can be.

Show us your mockups and follow us on our social media channels!

We are actively reposting your creations on Instagram, Twitter and Facebook. Tag us in using #madewithsmartmockups for your chance to get featured! Also don't forget to follow us to stay up to date with new mockups and features.

Get Started

Join thousands of professionals and
start your 7-day free trial

*No credit card required, and you can cancel at any time. You can use it free forever or upgrade to our subscription.