Background

We had a project at work that required a web front end and one of the teams responsible wanted to leverage a reactive framework to limit the amount of on device rendering (the product was an embedded device) and provide live metrics. For awhile the choice in the US would have been react, but within the past few years the Vue JS framework has grown greatly in popularity. Vue, especially with the more recent advent of Vue 3 and the composition api and <script setup> syntactic sugar made a lot more sense to my brain. The component system and the way reactivity works within it was a lot easier for me to wrap my head around (I am not a web dev by trade) and I ended up helping out on a few features for the project.

I have used Vue on a few other projects that are detailed on this website, so when it came time to build a website I knew I wanted to use the framework.

Despite the fact that this is a static blog, I wanted to continue my development in Vue, even if it did not come up professionally for me. Vue offers many benefits for static sites like blogs outside of the obvious benefits it offers for dynamic sites like a web store or social media site:

• Lazy Loading: if configured correctly, Vue should be extremely performant with the main page loading very quickly and other resources only loading when required. This is very helpful for this site where I have many pictures and 3D Models
• Routing: The Vue Router is very powerful and allows for the scanning of directories to serve up subroutes instead of having to manually bind pages to routes. The route loading can also work with Single Page Applications so a new route does not necessarily mean a new request
• Bundling: The phenomenal bundler Vite was the easiest way I have been able to get going with local development of web apps. The support for live updating locally run content during development is a joy to work with and such an evolution from the early days when I was a teen viewing individual HTML files in a browser and spooling up an Apache server on my eMac.

Building This Website

Choosing a Blog Framework

Knowing I wanted to use Vue, the question was: do I use an existing blog framework or do I create from scratch? I tend to turn everything in my personal project world into a bigger project than it needs to be. This has kept me from building this website for years. So I decided the wheel had been sufficiently invented by this point and I could always migrate to a custom frontend in the future if I really felt like it.

I knew I wanted to use some sort of Markdown based so the source could be easily version controlled and portable to any framework I decide to jump ship to. Additionally all of the source is human readable without any renderer since it is plain text so even if the entire internet is non functional I still have my precious little thoughts bundled up in a single git repo.

This meant I had the following options:

• WordPress: A great project that has allowed hundreds of thousands if not millions of websites to be created with minimal effort from those not inclined to build their own website from scratch. Before SquareSpace or Wix there was wordpress and the internet is a better place for it. It is very easy to get up and going and very flexible (many fortune 500 companies have built their website with it). That being said, the shaky nature of its Open Source-ness and some recent... tumult in the project did not align with what I was looking for and I wanted more hands on anyways.
• Jekyll: The most obvious solution is to forgo vue all together and use the Jekyll roject that most open source projects these days seem to use. It is lightweight, flexible, and easy to get going. This was under heavy consideration but ultimately I wanted to improve my reactivity skills while also building
• VitePress: The newer option for creating extremely lightweight and easy to build websites on the Vue framework, this project is really aimed at documentation for singular projects. It is not quite as flexible as I was looking for but seems like a great option for smaller projects or for those who just want to get something online ASAP
• VuePress: This is ultimately what I chose. VuePress, like VitePress, is maintained by the core Vue JS team and offers a great balance between flexibility and "it just works". Rather than list the benefits myself I will leave that to the VuePress team themselves. I have had a great time working with it and would recommend it to anyone looking to build a blog themselves.

Since I knew I wanted to use VuePress, the next question was what theme to use? I am not a CSS guy and have no desire to spend my time tuning the visuals of my website. There are many talented people that have solved this problem for me already and so I decided to leverage VuePress' great theme system and picked one of the most popular out there, VuePress Plume.

Plume has been great, but the core team is based in China so the english documentation is not as complete as I would like. The Chinese documentation is great though and the Fire Fox built in translation does a pretty good job. Hopefully the Plume team adds more english documentation in the future, I would love to help but Mandarin is not in my wheelhouse. Generally I would start with the english documentation (this is original documentation written in native english not auto translated Mandarin) and move to the chinese documentation if I cant find it on the English site (especially for the custom components).

Building and Hosting

Great, now you have a wonderful looking website running on a local Vite Dev Server but now you need to get it online somehow. There are dozens of free options for Static Sites, but I narrowed it down to two:

• GitHub Pages: A great option that I use for some other projects that I did not feel like purchasing a domain for. I would have used this since the repo itself it hosted with GitHub but there is a very very slightly better option (to me at least)
• Cloudflare Pages: Cloudflare pages slightly edges out GitHub Pages for me due to the insanely high availability of it. Not that I expect more than 2 people to ever be viewing this site at once, but if its available, why not? Cloudflare has a great suite of free services to entice users to either purchase their premium offerings themselves or remember them next time their work is looking for an enterprise partner. So far it has been great, the workers build system is well documented and there are great recipes already built for most frameworks. Eventually when I am more confident in it I will post my worker files here.

Conclusion

Overall this has been a very fun project. I have been wanting to document my projects for quite some time and finally got the chance to do it. I am very happy with the result and would love any feedback. If you have been waiting to build a site for "the right time" it will never come, do it now!

Copyright

Copyright Ownership:prairielandelec

License under:Attribution-NonCommercial-NoDerivatives 4.0 International (CC-BY-NC-ND-4.0)