In a previous post I told the story of why I decided to switch from Wordpress to Ghost and build a new website for myself.
Following up, here's the story of exactly how I built this website, yes the one you're looking at right now :)
Setting up a local dev environment
As mentioned in the previous post, Ghost is very development-friendly, so setting up the local dev environment was a piece of cake (compared to Wordpress, where I had to run a LAMP server). Also the fact that I'm now using Ubuntu on my personal computer helped a lot :)
In short, I just followed the instructions on the Ghost Github repo, as well as their docs, and had everything set up super fast.
I decided to build my theme off Casper, the default Ghost theme - because I didn't want to build from scratch, also because it was my first time developing a Ghost theme and I needed to start with something very stable.
Design is usually the part where I get stuck the most - not because I don't like it, on the contrary, I used to be a designer and thus I'm never satisfied with my own work, always changing and re-working things, especially when starting from scratch...
So I decided to reuse as much design as possible here. I took a lot of it from my existing website, and for the blog part I mostly kept Casper's beautiful design
It took me about a week to design the site and code it in HTML and CSS. Once this was done, it was time to move on to the fun part: development!
I really liked the idea of having my travel plans easily accessible on my website (inspired by whereisfelix.today). After playing around with various solutions, I settled for a simple box that shows my current city, my next city, and how long I'm staying.
So once this was designed, the next question was - where would the information come from?
Obviously I didn't want to change it manually every time. Instead, I wanted to have a place where I can add my travel plans, as soon as I book the plane ticket. Then I a script can read this list and find my current city, my next city, and the amount of days until I'm leaving.
I also didn't want to over-engineer this - so after considering a few solutions, I picked Google sheets. Did you know that you can easily get JSON from a public Google sheet? All you need is the following:
$.getJSON with this URL gives you the entire sheet (it has to be public and published to the web first).
I created a sheet with 3 columns: City, To(date) and From(date). So when I book a new trip, I'll just add a row on the top, and it will push all the other trips down.
I've also started writing the code to output my entire travel plans as a table, which I plan to add to the Travel page.
Map with pins
So I'm kinda obsessed with maps. I have a Google MyMaps map (how many times can I use that word in one sentence?) with color-coded pins of all the places I've ever visited / want to visit / have tickets to / etc. That's hundred of pins.
I've always wanted something like this on my travel blog / personal website, so I decided to finally make it :)
So I added a Google Map to my site using their API. Then I loaded the pins from a JSON file, where I was manually adding coordinates for each pin.
I looked at a "visited countries" plugin for Wordpress, and saw that they were using a vector map. I decided to try that approach. A quick Google search brought me to Mapael.js - a plugin that lets you add stuff to a map using coordinates. Perfect!
I added Mapael to my site and used the world map that comes with it. I took the JSON with coordinates that I had previously used for the Google Map, and modified it a bit so it worked with Mapael. Voila - I had a nice vector map with labeled pins on it :)
However there was a problem (again)... I wanted to show a tooltip for each pin with text, links, and maybe an image. The Mapael pin labels were kinda useless, since they couldn't be clicked, and would not render the HTML. I could've tried to modify Mapael to fix this... But instead, I decided to go with an easier and faster solution Tippy.js (yes, another plugin).
Tippy is a beautiful, lightweight tooltip library. It makes adding tooltips to any element super easy - as easy as adding
data-tippy="some text here" to that element. It can also be done with JS of course.
So I wrote a short script that goes through the pins on the map and adds
data-tippy to each one (taking the content for each tooltip from a separate JS object).
Whew, finished! See the final result on my homepage :)
Finally, I wanted to add my two instagram feeds on the bottom of the page. I just wanted to show five images from each, nothing more.
I used Instafeed for this, yet another JS plugin.
I found that the Instagram API is pretty restricted and hard to work with. I got a key which only allows me to show my own posts. I couldn't figure out how to hide this either - same problem as with Google Maps previously. Oh well, since that key can't be used for anything other than showing my own Instagram posts, I'm not too concerned about it, so I just left it as it is.
Deploying to Digital Ocean
When the development site was finished, it was time to deploy it!
I spun up a droplet in Digital Ocean and used the one-click Ghost install. All I had to do now was ssh into my droplet, and my new Ghost site was ready!
I uploaded my theme and imported all the content. Everything was live now :)
Setting up an alias for easy deployment
My site was not done yet - I may have deployed the first version, but there's lots of tweaks and improvements I'd like to do, and new features to develop.
Since I was going to keep on developing the site locally, and pushing changes to the server, I needed a way to do this easily. So I created the following alias:
alias deploy-me='rsync -avz --exclude "node_modules" -e "ssh -o StrictHostKeyChecking=no -i ~/.ssh/id_rsa" --progress ~/Desktop/ghost/content/themes/polina root@(my.site.ip):/var/www/ghost/content/themes/'
Now I all I need to do is type deploy-me in the terminal to push all changes.