Building personal website with Gatsby, Yandex Object Storage and Github Actions

2021-01-07, Anton Bakuteev

Why Gatsby

As I mentioned in the previous post I wanted to learn JS more. That is why I decided not to use website constructors like Wordpress.


My first JS project was on React. I had chosen React over Vue and Angular because I like React syntax more.


For this blog I've chosen Gatsby as static website generator because it is based on React and has good integration with Material UI (which I like from visual perspective), MDX (for quick notes) and a lot of plugins.


Static websites are very fast, since all content is pre-rendered and stored on a file server. They are very scalable to the amount of users and very cheap since they require only hosting to store files (and domain, optionally).


Gatsby has relatively good documentation, so it is enough to start a project from scratch. Just open its tutorial section https://www.gatsbyjs.com/docs/tutorial/. You can also use this website code as a template https://github.com/bakuteyev/personal-site.


Problems which I've had

I will mention here just a few problems which I've had.

  • I didn't find an easy way to avoid code duplication of gatsby static graphql queries.

  • It is better to design your website as a multi page app. It will allow better SEO optimization. Gatsby unfortunately doesn't have an easy method to have static paths for dynamic content. For example in the first version I had dynamic tabs https://material-ui.com/ru/components/tabs/. Then I've tried to have for each tab its own url, but I found it too complicated, even with query-string plugin. So I've just made the navigation bar static at least for now.

  • Don't forget to add favicon, website owner confirmation meta tag (for webmaster), metrica or analytics tracking (to monitor site visits), Sitemap.xml and robot.txt files. It is really important to make your site visible for search engines. For these things I've used gatsby plugins. You can find them in package.json. At this time I mostly concentrated on Yandex search engine. I will continue to improve SEO optimization for google.


Hosting

I've used Yandex Object Storage since it provides really cheap and fast S3 compatible file storage. It has good docs and is easy to use.


At the first time I used s3fs for manual deployment, but I found it too slow. Then I decided to switch to Cyberduck and stuck with it.


Deployment

Of course for convenience deployment should be automated. My requirement was to be able to add and modify posts with my smartphone. I've googled for different methods and decided to use GitHub as CMS and Github Actions as CI/CD tool. With Github I'm sure that I don't lose any information (because of version control) and Github Actions is a free and fast deployment tool. For public projects it has 2000 free deploy minutes, which is pretty enough for me.


Github Actions

I've used this action in my deploy workflow. Just don't forget that gatsby stores its build files in a public folder.


Results and future plans

I'm pretty happy with the result I've got. Site is fast. Maybe it has some problems with css, but for me it's ok. In the future I'm planning to add integration with telegram bot with help of Yandex Cloud Functions to be able to make small posts with Telegram (for example to save links for interesting web pages).


I already made the first prototype and it promises to be very cost efficient and easy to create.

Copyright © SomeTech™ 2023