As a CEO, I am a realist.
I acknowledge that I can’t compete with other high-powered, high-profile companies in the web world such as Amazon, Facebook and others that have teams of advisers, webmasters, chief marketing experts, etc. What I can do, however, is move faster when tasked with website design and relaunch.
My approach is highly strategic, involved and flexible. Strategic, in the sense that I am continuously looking for an edge over my competitors. Involved, meaning I have read, subscribed to and watched hundreds of videos over the years pertaining to Search Engine Optimization (SEO); I go to great lengths to increase my edge in SEO for my business. And flexible: All of our clients are unique. We have no template; we approach each job with the clients’ needs in mind.
In the old days, web pages seemed to suffice. Users could find many web pages with similar content under various URLs. Then search engines got smarter, and addresses with “.com/LosAngeles” or “.com/santamonica” couldn’t gain traction. The leading search engines in the world got smarter as users got savvier. People started to search “smarter.” (The tricks for SEO would work for a while, but then stop working. Search-engine algorithms would change the rules like a ball bouncing around a roulette wheel, but now it seems that the best way to create a great SEO strategy is to use common sense and provide content that people need.)
The everyday world is shifting to a mobile-first mentality, and a responsive website is absolutely necessary for success. (I really can’t believe how many nonresponsive sites still exist.) I’m sure all of you have heard this repeatedly: Network bandwidth is being squeezed due to streaming; high-speed bandwidth is at a premium price; and people’s patience is limited. Worse yet, too many websites don’t conform to mobility standards. The bottom line is: Can my site look good and be effective on a phone? I get a lot of leads from people browsing on their phone. My WordPress/PHP site was slow on phones and I’m disheartened by how many potential clients I lost because my site took too long to load on their phones.
With people’s patience so valuable, and I speak from experience, there is tremendous value in speed —the speed gained by migrating customers to the cloud. Cloud-based platforms provide instant user satisfaction for enterprise-level applications. But most important is the goal of mobile-primacy when designing a website. What do I want it to feel like? What do I want it to look like? Whose sites have I used recently to buy, research, review information? Did I jump to another site for a prolonged time? Did I wait for it to load? Did it provide that instant satisfaction? I wanted to change content quickly. I wanted my content to “be pushed to all pages” where it was placed. I didn’t want to go to each page and change content for hundreds of pages. One push and go!
These were the primary concerns I had, but where did I start?
The first phase was my designer. Phil Howley is a staff member who custom builds landing pages for my Single Sign-On (SSO) clients. He is my go-to staff member and webmaster at Iron Cove Solutions. Phil is a teacher by trade (one of my six brothers told me that a person should always go to a teaching hospital when they must go to a hospital because those hospital staffs are aggressive in learning and reading), which means patience and capabilities. If you’re interested in our services after reading this post, then get in touch and we can discuss your goals and how we can work together. If nothing else, pick our brain — and our ideas may lead you in another direction.
Phil recommended React as a base to build. Significant sites used ReactJS (Facebook, Netflix), and if some of the top five web locations in the world used it, then why couldn’t I? Mine isn’t a streaming site. (One potential drawback to using React is SEO. Google says its browsers scrape JavaScript but from what I’ve read, this isn’t totally accurate and I don’t want to take a chance with my business website. I need to make sure search engines can see my site, and that is why I needed to use a Static Site Generator (SSG) like GatsbyJS. In addition, mine is a content site, which needs to load fast — real fast. In this new world, I needed a GatsbyJS that was built for speed and also built for using React.)
A static site would get me to the world where I wanted to be. However, who could get me to a new flexible platform? Phil knows React, Phil teaches React, Phil knows web development, so I knew from his advice that we needed to dive in this direction. It is a major decision to go from making web pages via WordPress and its themes and plugins to something highly technical and modern like GatsbyJS. WordPress has been around for a long time. Its code is tried and true, and I know it will be around for 10 years. Gatsby is the new kid on the block, so how can I know if it will be around in 10 years? Well, at the end of the day, it is just HTML pages with Cascading Style Sheets (CSS) and JavaScript, so I know this will be around for as long as there are web pages.
React is growing in popularity and recently has even surpassed Angular as the No. 1 front-end framework. I am so thankful I don’t have to worry about updating WordPress core or plugins or my theme — or crossing my fingers that my site didn’t crash overnight because I forgot to update something. I also was afraid of my site being hacked because WordPress sites are constant targets. I seemingly needed a doctorate in WordPress to keep my WordPress site from being hijacked by bad people with bad intentions.
What is React and why choose it?
Technically, React is a JavaScript library for building user interfaces that enables you to build small pieces of code called “components.” In short, it’s modeled for a mobile environment. Instead of loading page after page of code, it loads only the changes in the code needed to make that web page. HTML-built websites must load code after code to ensure the page works. A ReactJS library pulls only code that is needed to build current and future web pages within your website. What you need, when you need it most!
If ReactJS is my library of code, what would push out my information?
The next step was GatsbyJS. We are also on the Gatsby Showcase site.
What is GatsbyJS and why choose it?
Gatsby is a static site generator. It’s a new website generator built for ReactJS. Load times are amazing. At its core, it is “spitting out” flat HTML files and then storing them in the browser for you. There is no database (DB) to manage. Website content is now stored in Contentful. We pull data from an Appliance Programming Interface (API) from Contentful, which means that our connection is super fast. The pulling and pushing of data are off the charts.
What is Contentful?
Contentful is now my content engine. It’s my web-based “word document” system. By connecting Contentful to my site, I now have a full content system where I can invite users to make a web post, parse data on web pages, pull data to different web pages, but most importantly, it’s my “compartment library” for my JS. I can reuse data, change one thing or change many things. Contentful can future-proof my content regardless of the future web pages. (Contentful is my headless content management system or CMS.) I don’t have to worry about backing up my WordPress site or my database getting corrupted. The skilled people at Contentful take care of this for me. They have the budgets to hire top-notch DB admins and I can just piggyback off their skills. I can easily export my entire content whenever I want.
One of the best aspects of Contentful is that you don’t need to know code to use it. Anyone can use it. You might need to brush up on Markdown (a simple markup language with plain text-formatting syntax), but that’s something you can learn in an hour. Once you start to use Markdown, you’ll wonder why you haven’t used it before. I love how I can create a user for my social content creators, and they can log in and quickly update my site with very little instruction for me. Any of my employees can update content. New web content will keep my site fresh and alluring to all search engines.
Why Netlify?
We used GoDaddy hosting for years but it’s not a platform for serious web development. Conversely, Netlify provides a web platform for development and delivery. It’s a tremendous Content Delivery Network (CDN) provider. What does that mean? If you’re in Atlanta, your web server will be closer to your home. You’ll never have to return to HQ, per se, to pull a web page. Everything is local to you as much as possible. It’s also an ideal “static site” hosting provider.
We formerly used GoDaddy but that platform didn’t suit my goals. GoDaddy is excellent — I mean great for the market it’s tailored to — but not for my purposes mentioned above.
Github and Git
This is the part that scares away many people. Git is a technology that is used for version control. Your developers make changes to your site, and all of those changes (and I mean all changes) are stored with Git. You then push those changes to a remote repository stored on Github. I have a private Github account to keep my code private; for that there is a nominal fee. I love Github because if I ever need my site to revert to a previous state, it can easily be done with one line of code at my terminal. Oh yes, you also need to be comfortable writing some code in the terminal. You don’t need to dive deep, but a little knowledge of the terminal will go a long way. If you have questions, let us know. We have lots of tips and great resources for working with the terminal.
We connect Github to Netlify (this is easier than you think) and we also connect Contentful to Github and Netlify. The great thing is, if we make changes to Contentful, the website will be updated in 3 to 5 minutes. This is one of the small cons of working with a headless CMS like Contentful combined with GatsbyJS. These are static site generators, so with each content change, you need to rebuild the site. The major pro is that this step is entirely automated — and with the most modern web optimization tools like Webpack. This will minify and concatenate all of your HTML, CSS and JavaScript. Also, all of your images can be optimized and served with their proper sizes on different devices. This is why your site will load so quickly!
Plus, Netlify makes adding SSL simple and as easy as one click. It also auto renews, which is so much easier than the way GoDaddy goes about it.
If you need to set up web forms, Netlify enables you to add as many forms as desired, and you can choose to be notified by text, slack or email (or almost any third-party notification app you can think of). You can easily configure Domain Name System (DNS) settings, redirects and add CAPTCHA to prevent spam. Netlify thought of everything.
Making the transition to Gatsby will take courage, but if you invest the time and energy, you and your clients will reap the rewards. If you need help along the way, give us a call. We work great with teams as advisers or as worker-bees!
We can propel your business to a higher level by implementing the aforementioned tools. Making a change doesn’t have to be scary. The web reflects who you are as a professional. Your website is the face of your firm. If your site isn’t fast and flexible — or has become stale — then you will be left behind.
If you are interested in learning more about how we can help your business’ web presence, Phil and my team are readily available. We are 100% U.S. based. Call (888) 959-2825 today or contact us.
Top comments (5)
I was looking for an overview of using React, GatsbyJS, Contentful, Github, and Netlify.
I got was I was looking for.
I'm excited to give this stack a go!
I'm curious though, why did you choose Contentful instead of say Netlify CMS or another alternative?
I actually wrote a similar blog post about switching to this stack (haodong.io/migrated-blog-to-gatsby...). I've changed my stack quite a few times in the past few years (Ghost blog, Hexo, Hugo, Github Pages and now Gatsby), then I settled on this stack.
The biggest reason for not picking Netlify CMS (which is still an awesome tool) imo is the lack of features. It offered very few customisations e.g. didn't even have a "draft" and "published" status for the blog post so anything you write you have to publish. Of course, this was when I tried it out a few months back maybe it is different now. With Contentful, there are tones of customisations: extensions, dynamic forms fields and etc. I also love the fact you can query Contentful through graphql.
but in contentful every time you make some change you should build your site manually and that is why i choose netlify cms instead contentful
Why do you need to build manually? With web-hooks each time you publish on Contentful, it will trigger a build automatically on Netlify.
Awesome article, I didn't know that contentful is that useful to push content to Gatsby. I will play around with it when I had gotten the understanding to use Gatsby.