Building my New Website

Behind the scenes of bdn.sh.

Brendan Hersh

Estimated reading time: 8 minutes


If you’re reading this, that means my new website and blog are finally out. For the past few weeks, I’ve been working on completely revamping my website (from brendanhersh.combdn.sh) and building a custom blog. What’s a better way to start it off than writing about the process?

I’ll start by showing my new tech stack and break down the different components.


The New Tech stack

🌐 bdn.sh domain

🔧 Website built using Webflow

💻 Platform and content delivery by Zeit Now

📝 Blog powered by Jekyll

📊 Analytics by Simple Analytics

📑 Version control and open source at GitHub

Domain

In the past, I’ve used the domain brendanhersh.com for my site and online projects. While it’s awesome to have your firstlast.com, I really don’t have the easiest name to spell. It was time to move to something new. I’ve been a big fan of .sh domains after seeing them used on sites like now.sh and ppy.sh, so I decided to go with the shortening of my name, bdn.sh.

Website Framework

I used Webflow to lay the basic infrastructure and style of all the pages, then exported the HTML to fine-tune manually. Webflow is an awesome tool for designing sites visually, but doesn’t always have the most granular control on the technical side. I use Webflow for prototyping pretty much all of my complex sites, where I make simpler ones on Carrd.

Zeit Now

Zeit is a cloud platform that offers serverless file deployment. In their words:

ZEIT Now is a cloud platform for static sites and serverless functions. It enables developers to host websites and web services that deploy instantly, scale automatically, and requires no supervision, all with no configuration.

You code everything locally, build your project from the command line, and can track and push updates using Git. It’s free as long as you stay beneath 100gb bandwidth/month.

It’s my platform of choice for publishing websites and as a content delivery network (CDN).


Jekyll

Now that I had the skeleton of the new site, I needed to lay the framework for blogging. While Webflow has awesome CMS tools which work great for blogs, they aren’t cheap, and I wanted to use Now’s CDN, which Webflow does not offer. Hosting the site on Now doesn’t have native CMS support, so I decided to use Jekyll, which dynamically generates site content like blog posts. Jekyll definitely has a learning curve, but after lots of adjustments, I found a system that works.

The way Jekyll works is by writing HTML page templates with placeholder tags. The tags are systematically filled with information in configuration files or other content. Site-wide variables, such as \{\{ site.title \}\}, are controlled through a _config.yml file in the site’s root directory. These pages aren’t served on the production site, but I’ve open sourced all the code on my GitHub here so others can learn from this model. Here’s the simplified file structure:

root/
- _config.yml
- now.json
- _layouts/
    - 404.html
    - blog.html
    - design.html
    - home.html
    - post.html
- 404.md
- design.md
- index.md
- blog.md
- _posts/
    - example.md
- .htaccess

Here’s a bit more about how this structure comes together. Push through it, no TL;DRs!

That wasn’t too bad, was it? (^_-)

Analytics

I’m using Simple Analytics for measuring interaction with the site. It only tracks very basic and non-identifying information, like page hits, screen size, and browser. It doesn’t even collect enough to require GDPR cookie consent banners.

As the saying goes, “If you aren’t paying for a service, you’re the product.” This is why I opted to go with an option other than Google Analytics or other free tools. It’s unethical to have Google track everything about users on my site for their own profit. Simple Analytics isn’t free, but they have very reasonable plans based on your page views per month. I would really recommend them if you’re looking for a privacy-conscious way to measure user engagement.

If you’d rather not have your non-identifying information tracked, I completely understand. You can add the following domains to your ad blocker list to disable tracking:

api.simpleanalytics.io
cdn.simpleanalytics.io
api.bdn.sh

Open Source

Being transparent online is incredibly important to me. Aside from building trust from users by showing exactly what you do, I just believe it’s the right thing. All the code for this site is available here on GitHub, and the user analytics I collect are completely public here.


Conclusion

This is all in the past now. I have big plans for the future, building out my blog to have tutorials and information to ultimately help others out with issues I’ve faced myself. That’s all you can really do, isn’t it?