A couple of weekends ago, Sunday April 15 2018 to be precise, I decided it was time to look at creating a professional website for myself.
I am by no means well known but when discussing my new role on the team with Geoffrey Huntley, a fellow co-curator on Weekly Xamarin he mentioned that being part of this project would build up my personal brand. Now I had not even thought about that or what my brand is exactly but it seemed a good 'kick up the backside' to move from Medium to something associated with my domain for my blogging.
I posted this tweet
In need of advice. Now I am getting more involved in things I ought to actually move from Medium to my own blog solution. I already own my own domain I just don't use it because I am a bad web designer/developer. Best solution for blog and customisation of UI?— Luce Carter (@LuceCarter1) April 15, 2018
and I got back a few suggestions including Wordpress and Jekyll.
My pal and personal hero James Montemagno is well known for blogging on similar subjects to myself, and his website looks great. I actually edit his blog posts for him so can log in to his website so know he uses Ghost (which was another option), and what a great platform it is to edit. It has Markdown support so you can really easily just write posts in a a nice editor and unlike some of the others you can completely customise the look and feel.
The first step was to set up a Ghost profile, sign up to the free trial and deploy my first website. So easy! I had my first website available straight away with some dummy posts within a few minutes. I was already super impressed.
Ghost uses something called 'themes' which allow you to apply a look and feel to your page. Now themes can be done in a variety of ways. You can write your own following this guide or download either a free or paid-for theme from the Ghost Marketplace. I chose to purchase one called Horace as I liked the minimalist feel and use of a circle profile image.
Once I had purchased the theme, I was emailed a link by the seller with a zip I could download containing the theme. I then uploaded this zip to my Ghost page from the Design tab in Settings and tada, custom theme! Now my favourite colour combination is black and orange (I am in fact wearing a black and orange hoodie as I write this) so I wanted to customise this theme to my liking. Now it turns out white and orange looks better on a page but try hovering over the social media buttons on the homepage and there it is hehe.
Once I unzipped the theme zip I was met with the following contents:
Yes my Finder window has a Xamarin shade blue background!
Themes use the templating engine handlebars.js so you can open them with any text editor. A more advanced one like VS Code or Sublime Text is probably easier for language support but totally your choice. The partials folder contains the mini templates for certain features such as the footer, the sidebar and the homepage. This is where I could change the content to my own text (such as my name and a bio) and also start to change the colour scheme. The files in the horace theme were really well commented and the classes were named well which made it super readable and easy to navigate when I wanted to find specific elements from the page to customise.
In order to find what I wanted, I used a mixture of the file names and also using a browser to inspect elements to find their names to guide me to where the correct handlebar file might be.
The main things I found myself changing were a mixture of handlebars files and SCSS. SCSS is basically CSS with variables. It allowed me to change the hex code value for the colours from the default to my preferred, and also add new ones that I might want to use in some of the templates. It really didn't take long at all to do!
The only semi-complicated bit I had to do (probably not hard at all to professional web developers, I am not just in that club!) was work out how to play with the animations applied to the header image on my homepage (that really is my office at home). This is because after using my own image, I decided it would look better less opaque and the opacity settings on both the image and the animations seem to play a part. Thankfully I had help in the form of my professional friend who did an ace job in making it look better so thanks Simon!
I then decided to totally steal an idea James uses on his website, which is his Twitter profile feed in the sidebar. The sidebar scrolls out from the side when you click the button with ... on in the top right. (Photo at the end). This is a widget so I created a new widget handlebars file in the partials folder and also generated a widget for my profile in Twitter settings. Don't forget to look at the customisation options it offers as this can be helpful. One thing I decided to do was use the dark theme as my sidebar already has a dark background and I wanted to have a flow to it. The only issue was that the colours weren't the same so I used a Chrome extension for colour picking and found the hex value for the dark theme so I could use that in my sidebar, the results are gorgeous!
Next I wanted to bring all my posts from Medium into my Ghost blog so there wasn't fragmentation. There may be a way to do this automatically but I just did it manually because I only had 15 posts. It was probably the longest part of it all but it was nice to look back at some of my older posts with fond memories. There was no secret to this, I simply copied and pasted text, fixed formatting such as bullet points and download/uploaded the images.
Two things I learned doing this though; publish date and tags. The gear icon in the top right of the post editing screen is your friend. It allows you to pick the publish date so this mean you can select a date in the past. This is perfect when you are doing like I did and still want to keep the date the originals were posted. The other thing you can do with this gear icon menu is assign tags to the post. When you start there will be no tags but you can just type them out and in future they will appear. The tags will show up underneath each post and also in your sidebar if it is written to do so in the theme. Readers can click these tags and find any posts in that category, awesome!
Last but not least, URL! Now as standard when you use Ghost to host, you will get .ghost.io URL but it is possible to configure it to use your own. Now I already owned a domain but I decided I wanted a new one so I used a company called GoDaddy (there are plenty out there if you Google, sorry Bing ;)). I was able to buy lucecarter.co.uk for 2 years for £13 (about $18). The only issue with GoDaddy is that the root domain CNAME has to be an IP address. This is fine with Github Pages as Github provide you with one but Ghost don't. But not to fear, you can set up Cloudflare to do the DNS side of things which DOES provide a root CNAME entry. I did this following this guide Now why does this matter you ask? Well it means you don't always have to prefix the URL with www which let's face it, we hardly ever do! All I had to do was provide some details and change GoDaddy to use a custom nameserver and boom, within about 5 minutes lucecarter.co.uk was up and ready to go!
All this took a total of about 8hrs (if you include Simon's time) which I think is pretty dam good to go from zero to live with a professional looking website, historical blog posts with correct publication date and my own domain!
This a selection of images from my website showing you different features:
The homepage complete with blurb, tags, circle image and my chosen colour combination
The sidebar where I have chosen to show a detailed bio, recent posts, tags and twitter feed
The twitter feed on the sidebar flowing nicely
The editor homescreen with a list of any existing posts you have published
What the new post editing screen looks like complete with helpful toolbar for all the usual things you might want to achieve