I have been making websites since 1996, back in the days of dial up modems and Netscape, but it has been about 2 years since I last built one and over 8 years since I built one from scratch not using WordPress.
I have been doing most of my posting/sharing on youtube, instagram and facebook as I have seen that is where most of my audience is and that Facebook really has become everyone’s personal site. However I am starting to get an itch to brush up my coding chops so here I am.
I woke up Saturday morning and decided to finally build out something on lkilpatick.com. I have had this domain for years but have never really done much with it.
So I cracked open some editors and started to figure out how to build a modern web page.
I started with a few requirements:
- look good on web and mobile
- have a purpose
- use Contentful
Contentful might be a bit of over kill for a fast personal site, but I have been using CMSes for over 16 years and have even written a few of my own so it felt wrong to just have a static site. Also the folks on the Atlassian Marketplace team have been signing its praises so I wanted to learn it.
First up I got a personal Contentful account and started looking through their getting started documentation. I downloaded Microsoft Visual Code, Sourcetree, and setup a git repo in Bitbucket so I would have a place to work then I added basic linux hosting to my lkilpatrick.com domain on Go Daddy.
Seeing that Contentful was a headless CMS I needed to come up with some content. Contentful seems to work best when you have an existing front end and want to move the content off into an area where it can be edited outside of the app. This is fantastic as it lets you build something cool, but can give the actual words off to a copy writer or non-developer person and they can use nice interface to make the changes, and even better you don’t have to write the cms backend from scratch.
I haven’t had my resume up on the web beyond linkedin in over 4 years as I have been really happy at Atlassian so I haven’t needed it, but as I was looking around for something to build, I found a really nice looking resume template using bootstrap. I haven’t used bootstrap before, but I had heard good things about it. I cloned it and made it my own.
With some find and replace I adjusted some colors, removed a few sections and added my own. I also added a simple php contact form as having your phone number or email on a site is just asking for spam.
Took me about an hour build this out and then bring in my content from Linkedin. I only brought 4 jobs over as they are the most relevant to my current role and added a quick link over to linkedin for folks to view the rest. I now had a single page web site that looked good on mobile and on the web, so requirement 1 satisfied. Since it was also my resume, requirement 2 was satisfied. Requirement 3 would be a bit more work.
Here is where it gets interesting, I wanted to add Contentful into this. I read up on the documentation and figured out what content I needed to model. The experience section was the obvious first choice.
I created my experience model with Company, Start Date, End Date, Title and Description fields in the Contentful web app. I then populated them with the content from my resume. This was pretty darn simple.
Next up was to figure figure out how to get this in to my resume site.
I created an index.php file so I could start seeing what I was reading out of Contentful, then I went through the php documentation to see how to get started. I knew I needed the Content Delivery API so I started there, I also hit the php tutorials page.
I had to figure out composer, I have been out of the php world for a long time, so this was my first exposure to it. Fortunately this was pretty easy to setup and I used it to get the Contentful SDK installed and setup in my site in just a few minutes.
Pulling out a few code samples, and setting up my space and API keys I was able to start getting the content out of Contentful and on to my page. This was pretty neat, and was surprisingly quick. After I was able to get all my fields displaying on my page in raw html, I needed to pretty it up a bit.
Moving the html from my index.html over and started replacing the static html with php code looping over my data coming from Contentful was simple and didn’t take much work. The only problem was it was displaying my experience in the wrong order! I dug through the documentation trying to figure out how to get it to sort by the end date field but after digging I ended up finding the sys.type variable in my query was getting me the order I wanted. I still want to go back and fix this so it actually uses the date, but I think I am going to need a hand to be able to get the exact syntax to pull it. A bit better code sample here might be helpful.
Once I had my order correct I realized my description text was all squished together. Contentful stores long form text in markdown and I was just dumping it directly to the page. This was ugly, so off to google to figure out how to parse the markdown into something nice.
I found a post on Stack overflow which directed me to the recommended parsers for each language on Contentful’s site. For php they recommended Commonmark. Another google got me the string and a quick add of it into Composer and an upload to my server later and I had my parser in place. This turned out to be one of the easiest tasks. I wrapped my description field with the parser’s function and I now had pretty html on my page.
Now I can add more jobs and edit them, what about other sections on the site?
The easiest one next was the About section, this is just a simple paragraph, but I wanted to learn how to read different fields from Contentful then display them.
With the addition of another query and a wrap with the parser, I now had my about content editable in Contentful’s web app.
This was about 4 hours of work from start to finish, it was good getting back into the code and trying out a new tool chain. The flexibility of Contentful is pretty nice and I think I will use it in bigger projects going forward. WordPress is great but Contentful gives you a lot more control and I am sure there are much easier and faster systems that I used to build this out, but it works and I am happy with the result.
To see it check out http://www.lkilpatrick.com
Recent Comments