An Overview of ben.perlmutter.io
July 4th, 2020
NOTE: This blog post written back in July 2020 about this website, when it was built with Jekyll. It's since been moved to a Gatsby/Contentful build...a subject for a future blog post.
None of the information in the post is currently accurate, besides some of the CSS styling, which was directly ported over from the Jekyll site.
My personal website - Built April 2020 — August 2020
This website, ben.perlmutter.io, is a Jekyll site deployed onto Github Pages. It features information about me, the projects I'm working on, and my blog.
The primary goal for this website, like any personal page, is to show off myself and my programming abilities. The website is a constant work in progress, and serves as something of a mad laboratory for technologies and design ideas that I'm trying out.
Table of Contents
Ben.perlmutter.io at a Glance
It was an intentional design decision to use a minimalistic Jekyll website and these core frontend technologies to build out the website, rather than using a more feature-heavy static site generator like Gatsby or Hugo with their robust theme libraries. I wanted to use a cleaner canvas—while also taking advantages of certain Jekyll features like persistent navigation and an integrated blog—to create a vision that was really my own.
ben.perlmutter.io is based off the Jekyll minima template. As its name implies, the template is quite minimalistic. It served as a nice relatively blank canvas for me to add stuff to and build off of while also providing some nice core features to speed up the development process. Basically nothing had to be removed, only added, with the occasional overriding for stuff like font styles and colors.
Jekyll gives some nice quick ways to build on the template through the
_config.yml file. And most invaluable to the site was the
jekyll-feed blog plugin. The plugin lets you write out blog posts in Markdown and deploy them with a simple
git push. It's a fairly painless blogging system, and really (the original intent of Jekyll)[#link-to-the-bloggin-like-a-hacker-post-here
Speaking of pushing git, Jekyll is also very well integrated with Github and Github pages, which made it quite easy to deploy a prototype version and continuously update the project. The site is currently hosted on Github Pages.
Markup: HTML, Markdown & Liquid Templating
Jekyll takes both HTML and Markdown as default file types. And given that you can actually write HTML in Markdown, all markdown pages can actually have a bunch of HTML in them (though the HTML can be reformatted in these pages with some funny extra divs and such thrown in).
The main content is a mix between the 2 formats. The more text-heavy pages such were kept in Markdown for convenience with the others in HTML.
As previously noted, all blog posts are written in Markdown. The process of making and maintaining the website has gotten me quite proficient in it. I would go so far as to say that now Markdown is my favorite way to write documents (unless there is collaboration involved, then Google Docs all the way). Markdown makes it especially easy for anything involving a code block, which I suppose is most of my writing these days.
Below is a bit of the Markdown/HTML hybrid code on the About page. It's also worth noting that me putting the code block here is a perfect example of how easy it is to make a code block in Markdown!
<!-- /about.markdown --> Learn more about my experience in <a href="/assets/ben-perlmutter-resume.pdf" target="_blank" title="Ben Perlmutter resume">my resume</a>. #### Connect with Me [Email](mailto:email@example.com) / [Github](https://github.com/bpmutter) / [LinkedIn](https://www.linkedin.com/in/ben-perlmutter-a410228a/) / [Twitter](https://twitter.com/bpmutter) <div class="bitmoji-divider"> <img src="/assets/img/01-bitmoji-neutral.png" class="bitmoji-divider__bitmoji"> <img src="/assets/img/01-bitmoji-neutral.png" class="bitmoji-divider__bitmoji"> <img src="/assets/img/01-bitmoji-neutral.png" class="bitmoji-divider__bitmoji"> </div>
Beyond the Coding
When I'm not hunched in front of my computer coding (though that is most of my life these days), I like to read, practice yoga...
A quick google search for 'ben perlmutter' will reveal I don't have the best SEO on my name. (Although it should be noted that I'm probably like 3rd place, which isn't too bad considering that the 2 higher ranking ones have quite a few years on me and there are like 15 people in the US with the name, but I digress...) For professional purposes, and a bit of ego, I wanted my site to rank more highly on the name.
To do this, I did a bit of a deep dive into technical SEO. I added various resources to help Google's spiders crawl my site, like the
sitemap.xml files. I also added the website to the Google search console and added a bunch of metadata to the site's head to be in line with best practices.
Achieving good domain authority and the associated SEO rankings is not an overnight process, and one of the most ongoing aspects of the development of ben.perlmutter.io.
I have a couple of things that I want to do to improve the website SEO:
- I want to start cross-listing blog posts on Medium and add canonical links to reference back to the original to increase article exposure and therefore site ranking on Google.
- I think it'd be interesting to explore how to add SEO-relevant HTML tags to the individual blog posts on the site using Jekyll's built-in front matter (basically in-document configuration) to optimize the posts' metadata.
- Certain other more server-side fixes, like serving certain optimized images for different devices would be a nice addition, but hard to the point of impossibility given the limits of the Jekyll platform. The only feasible path to cross-device image optimization (that I'm aware of) would be to use a remote hosting service for the images like an AWS S3 container, and use other AWS services for optimization. This is something that I would like to look into in the not-too-distant future, as I have recently been diving into the power and capabilities of serverless technologies like AWS.
Conclusion & Next Steps
As of writing, I'm pretty happy with the overall ascetic, content, and functionally of ben.perlmutter.io. I believe it has achieved it's primary raison d'etre—presenting me as a competent and creative software developer. Hopefully potential employers agree with this assessment 😉.
But like with every software project, there is more that could be done. A couple of items that I'd like to continue improving for the site are:
- Improving site-wide SEO (discussed more above)
Improving the UX for the project demo GIFs on the projects page. I'd like to explore:
- Adding a loading indicator (ideally involving Bitmoji)
- Pre-cache the GIFs so that they are already loaded when user clicks on them for quick open.
- Lengthen cache time for GIFs so repeat visitors can view them quickly.
- Create a section on the homepage about my soft skills with a Bitmoji for each of them.
Thanks for reading! ✌🏼