Hurray! 🥳 The last exam is finally done, and the well-deserved holidays have come. Whereas most of my colleagues traveled to Italy or Portugal, I decided to stay in Switzerland and build my blog.
Update: A couple of days ago I redesigned my website to what it looks like now. For that, I created my theme template for the Ghost platform, where I host my website now.
Start with MVP (Minimum Viable Product)!
So, where did I start? I started my coding journey by first designing my website with Figma.
It’s an incredible tool when it comes to designing UI/UX for apps or websites. Here you only focus on the design aspects and forget about how you actually should code it. That’s extremely useful later on since you don’t need to think about the look of your site anymore. So be sure you do that first.
Do you know Gatsby? Not the rich guy from "The Great Gatsby"!
After I got my design for my website, I started to learn about Gatsby and how to use it for my project. They’ve got an incredible tutorial on their website. This site helped me a lot when getting started with their framework.
With my Gatsby site set up, I began to implement the design I had created with Figma using Bootstrap and some additional CSS files to override the default theme of Bootstrap. Maybe you want to check out this Stackoverflow answer if you come up with some problems integrating Bootstrap in Gatsby.
While coding the front-end of my website, I asked myself how can I add a CMS from which my website can source my posts. For that, Gatsby provides you with a great collection of plugins that you can easily incorporate into your website, including one for handling posts written on Ghost. With this, you can filter your posts using Graphql queries.
The last thing I wanted to add to my site were some forms.
Design Your Forms!
I created one for collecting email addresses and the other for getting in touch with me. Since I did not want to build a whole mail server from scratch, I searched for third-party solutions like getform.io and Mailchimp. Both offer a free plan, which is for my purpose enough.
Sitemap.xml and Robots.txt???
The last steps before deploying my site to Netlify were to add a sitemap.xml and a robots.txt file. Additionally, I created an SEO component with React to optimize my website for Google searches. For that, I recommend checking out this article on Medium.
Hosting the Front-End on Netlify
As I mentioned before, I deployed the front-end of my website on Netlify. But for the Ghost CMS, I used Digital Ocean. It is not necessary to make your CMS publicly available too. You can have it also locally on your computer. But by deploying your Ghost CMS too, you can publish from everywhere and from any device, which is not possible with a local Ghost CMS.
Here you have a small mind map that shows you how each of the services works together.
And this is how my journey of programming my blog with Gatsby and Ghost ended. Hoped you enjoyed it and became motivated to claim your place in the internet world with your beautiful website too!
If you have any questions, feel free to contact me. You will find my social media links in the footer, or you can use my contact form. What do you prefer 😉
Little Surprise 🎁!
With this link below you get $100 in credit over 60 days on DigitalOcean. In my case, this would be equivalent to a subscription period of 16.5 months. The link below is an affiliate link, so that means when you've spent your first $25 of your $100 free credits on DigitalOcean, I'll get a little commission on that. If you want to support my blog, don't hesitate and use the link below. Otherwise, feel free to use Google and search for DigitalOcean. You've got the full choice!
