Launching the new kyrcha.info using Gatsby, Bulma, Contentful and Surge

by Kyriakos Chatzidimitriou | May 22, 2019 18:49 | development

gatsbyjsgatsbybulmacontentfulsurgesurge.shdevelopment

Finally! Since the first commit in GitHub on the 26th of April 2018, that is after almost a year, I am in the position to say that I can announce the official launch of kyrcha.info.

As I state in the header my home page, I want kyrcha.info to be the main point of entry to my digital self. To serve as a medium to communicate with the world, to serve as an archive, to serve as a long-term memory, to server as a marketing tool.

I have used many technologies before to build it: Wordpress (numerous attempts), dokuwiki, docpad, plain old html and more, but eventually I believe I found the combination that satisfies my requirements:

  • A static site generator, with whatever that means in terms of performance and security vs. dynamic website platforms.
  • Be able to own my content.
  • Be able to extend the functionality myself programmatically.
  • Use technologies I also use in other projects.
  • Have pride in that I've stiched it up myself.

So I am writing this post to present to you kyrcha.info, my personal website that uses GatsbyJS as the static site generator, Bulma as the CSS framework, Contentful for managing content and surge for publishing.

Features I wanted and have implemented in this website are:

  • Google analytics through the google-analytics Gatsby plugin
  • RSS feed with email subscription. This required the feed Gatsby plugin and feedburner with emai support and some code.
  • Math equations in blog posts. For this I used the Gatsby plugin remark-mathjax and some code I found over GitHub. So now I write equations like this: $\frac{a}{b}$ in Contentful and they are transform into math: ab\frac{a}{b}.
  • Be able to write my own code if I want to for anything.
  • Be able to draft something in Contentful and preview it without commiting it to GitHub or do other hacks.
  • Be able to write my posts in (simple) markdown and not in html or in some rich format editors that are a pain many times.

I have also added:

  • Commenting using Disqus through a React plugin. Unfortunattely, I still cannot make the old comments to show up to the new website, despite the migrations I have made in the Disqus platform.

If you like the technologies, the features and the layouting...the code is on GitHub.

Some remaining tasks are:

  • I am missing pagination in the blog page
  • I am missing tag pages to contain collections of posts with the same tag
  • Optimizations for speed
  • More content :)

Previous