Building something yourself, it’s a great way of learning 🙌. As a designer I wanted to refresh my HTML CSS and JS knowledge. Learn React. Become able to deliver both design and code. But the foremost, to capture knowledge, ideas and struggles in a form of journal-like blogposts. And they hopefully will help you and maybe even inspire you to do/learn/start new things.
You can find links do learning resources I used while building this blog as well as Sketch file and GitHub repository – at the end of this blogpost.
LAMP vs JAM stack. If you don’t know already:
- Most often refers to Linux + Apache + MySQL + PHP. It’s around for years, very common, free and open-source tech stack with huge community. It’s a monolith – everything from backend to frontend is on one server. WordPress uses LAMP
Previously working with LAMP and WordPress, I’m excited to explore JAM stack!
And now come static site generators (SSG): Gatsby, Nuxt, Jekyll, Hugo etc. They do exactly what it says. They take content (data) and a template and generate static page. When, someone opens your website, the server provides already created, static HTML file, instead of generating them from scratch on every request, over and over again. It’s a perfect scenario for blogs and it’s blazing fast!
I’ve chosen Gatsby.js as it looked most flexible and easy to start with. It has starter projects, lots of plugins, tutorials, great community, and the documentation is awesome too!
Now what about CMS?
There is a quite long list of which Gatsby can integrate with: Contentful, Prismic, CraftCMS etc. (see full list on Gatsby website). And there are many really good, modern approaches. But as this blog is not made for-profit, I wanted to avoid, or at least minimise, monthly fees. Having previous experience with WordPress and its plugins ecosystem, the choice was easy.
What about hosting?
I’ve found DigitalOcean to be the easiest choice for hosting LAMP/WordPress sites, it costs $5/mo for smallest droplet and has 1-click setup. You can have many sites, domains and WordPress installations on a single droplet.
Does Gatsby need hosting? Yes! Netlify free plan has worked perfectly for me!
Solution: part 1 – design
The ultimate goal – best possible reading experience. I wen’t through well know Blogs that I consider a good benchmarks e.g. Intercom, Dropbox, Offscreen mag. Then created a list of requirements & features that should help in achieving that goal:
- As simple as possible design
- Support for Safari Reader mode, Instapaper, Pocket etc.
- Themed posts – customizable color palette for blogpost header
- Decent support for all screen sizes, from mobile to ultra-wide-screen
I’ve made a rough prototype in Sketch – you can find it at the end of this blogpost. Disclaimer: because I did both design and development, Sketch may look unfinished, but that was just enough for me to start development.
Solution: part 2 – development
Having designs ready, in Sketch – the next step was to create static HTML + CSS pages. They will act as a starting point and a reference later on, when porting to Gatsby and WordPress environment.
Very important aspect of any blog is SEO. So, there is a couple more requirements & features:
- proper meta data extraction when sharing blogpost to Instapaper, Pocket, Facebook and Twitter
- using Schema, Open Graph, Twitter Cards markup and semantic HTML
Talking about Gatsby and WordPress environment, the whole tech stack looks like this:
To make WordPress extremely flexible and have a lot of freedom for content creation, a must-have plugin is Advanced Custom Fields. To be specific I use ACF Pro – because of Repeater fields and ACF to REST to expose all the data to WordPress REST API, so Gatsby can read it.
Having the avoid, or at least minimise, monthly fees in mind – I use Newsletter + Newsletter API + SendGrid plugins combo for the newsletter, instead of using paid service.
Default WordPress installation is not very secure by definition – because it’s default. There are lots of bots that can identify if your website runs on WordPress and try to hack it, either by brute-force login attempts or injecting code to database or filesystem. There is a couple of things I did:
- Add 2-step authentication with Wordfence Login Security plugin
- Hide /wp-admin and /wp-content folder from public access with Hide My WP Ghost Lite
- Custom /wp-content/uploads folder
- Disable frontend output by creating a theme thats renders empty html
- Change default ‘wp_’ table prefix in a database
For sourcing data from WordPress I use
gatsby-source-wordpress. All icons on the website are in SVG format, so
gatsby-plugin-react-svg comes in very handy. For SEO
gatsby-plugin-sitemap works like a charm, and for analytics
gatsby-plugin-google-analytics gets the job done.
Setting up Netlify was the easiest part of whole process. Connecting with GitHub repo and simple domain setup is pretty much all that’s needed.
Despite spending 2,5 months instead of 1 month, that I estimated initially – I was excited to bring another thing to life and be able to share a success story 🚀. Along the way there are many small, one time tasks e.g. creating database user, updating DNS records etc. So, to not forget how to do it in the future, I’ve created a series of mini-tutorials in Notion, for myself. Funny that most time consuming tasks, by surprise, were: setting up communication with Newsletter plugin via REST API and making my avatar look good in themed blogposts
If your are curious to learn something more about this process, feel free to contact me and check out the links below
Books and courses that I’ve found helpful:
- HTML and CSS: Design and Build Websites
- Modern HTML & CSS From The Beginning (Including Sass)
- React JS Crash Course – 2019
- Gatsby JS: Build static sites with React WordPress & GraphQL