I've been wanting to redo my personal site since I tried to add my presentations to my hugo based site and struggled. Something that looked cool. Something that was interesting.
At first I started looking at static site generators and found a great site, staticgen, that lists all the possible static site generators. I thought I wanted one written in a cool language, like a lisp or Haskell, so I went down all the lisps first, and I realized my first real requirement was simple CI deployment. I like GitLab CI for it's control, zeit now as a close second for it's ease, and then maybe Netlify. The lisp family didn't have anything quick to deploy and their installation stories were equally poor.
Fast forward a couple of weeks, to ETHDenver and I met Jeremy, a friend of a friend and one of the creators of loft.radio, a lofi hip hop radio that you can tip the artists in ETH. We we're chatting tech, as one does at a hackathon, and he was raving about Vuejs, which he used to build loft. I had heard about it from another friend and decided to checkout after I finished my weekend with react. I had the perfect excuse to dip my toes in when I needed to build some documentation for work, and settled on VuePress. I think all documentation should be written in markdown, and then the site generated to prevent vendor lock-in. It's been a great experience so far and has a ton of features out of the box. But like Vue, it let's you walk into the water, rather than jump into the deep end like React. Just my personal experience.
That small brush inspired me to dust off an old side project, Multiverse. It's my buzzword labor of love, Nextjs, Tailwindcss, Typescript, Ava, Graphql, and Stripe. I had patched into together like Frankenstein from several examples, but I got hung up between Typescript and Ava and getting it to build and test those. In a perfect storm the Vuejs documentary came out at the same time so I rewrote my tiny progress in Nuxtjs. I think this quote from the Vuejs docs section comparing it to other frameworks is my experience exactly
For many developers who have been working with HTML, templates feel more natural to read and write. The preference itself can be somewhat subjective, but if it makes the developer more productive then the benefit is objective.
I'll just cover my experience really quick. Vue definitely takes the developer
experience as a priority and that reflects on the frameworks created on top of
it. Just give
vue create hello-world or
npx create-nuxt-app <project-name> a
shot and you'll see the difference from the blank canvas that
gives you. From
create-nuxt-app I just had to add the
apollo-module and I had most
of my wish list taken care. In the past I had used
prisma for a quick DB with Graphql on top, but I found
they had updated their docs to offer more, but I wanted something simpler.
Enter, Hasura, one click deploy to Heroku. A docker image
for when you want to move somewhere else. Makes thinking about the back end an
after thought. I made more progress in the past two weeks than in the past 9
months. I'm just missing Typescript and Stripe so far, and I'm assuming Stripe
will be a breeze.
I also wanted to take this chance to explore tailwindcss. I had exactly 0 experience with CSS before this and fought with any React material design component I tried even get to agree with flexbox. I had seen tailwind from Zamansky's ClojureScript tutorial, and Aria's Twitter clone Catter. So I took rewriting the default Gridsome as the perfect way to get accustomed to using it, without getting caught up in the design aspects because I haven't gotten to read Refactoring UI yet. As of 3e57e24661 I completed the rewrite.
To speak on my experience with tailwind, it really made it easy to focus on what I wanted to do, rather than how to do it. I had a friend show me webflow recently, and I think tailwind is even simpler once you get familiar with the utility-classes it provides. The original was a beautiful intricate work of CSS, that I honestly had no interest in figuring out.
The one issue I did run into was the way Gridsome just returned a
v-html="$page.post.content" so I found the way Gridsome Portfolio
Starter handled it's
markdown and then threw some tailwind in to deal with the theme-switcher
specific stuff and ended up with