I played around with Saber.land a bit in the past week and it’s been amazing to work with. Mix Vue with static content in .md files Templates that I understand and love Use .md or .html files for content Easily bring some “dynamism” to the static pages - conditional rendering, use variables and so forth I mashed together a few design elements and created a new theme called “Beautiful Saber”.
How can you get automatic sidebars to be generated in Vuepress depending on the page? The Situation Vuepress is simple. That’s both a great and not-so-great positive at the same time in the same line. Using Vuepress is simple enough. Introducing navigation through a sidebar and a navbar is simple too.
I am a big fan of Vue and cannot breathe without static sites. So, it is only natural that I play around and implement Vue-based static sites for fun and profit. Here’s a distilled-down version of my experience with Vuepress. The Situation I create static sites that are “real” websites. Typically the following factors in a static site generator help -
Here’s a simple way to organize your taxonomies and have a bird’s eye view of the number of posts per category/tag in Hugo. The Problem As techformist.com grew, I became more and more disorganised in maintaining taxonomies. I had some interesting situations - a “static-site” category coexist with “static sites” category confusion b/w why I chose a few terms to be tags rather than categories in their own right the recurring need to “rethink taxonomy structure” depending on the flavour of the month and time of the day This often required me to go back and change a few taxonomy terms, or to reorganize site structure in order to provide better visibility to chosen topics.
Include all content of your posts in your site feed when using Hugo static site generator. By default Hugo will include only summary in your website feed (e.g. in /index.xml). Your theme may already provide a way to provide full content instead of just the summary. If it doesn’t, you can make those simple changes yourself.
Adding PWA to your Hugo static site is quite easy. What is PWA and why should I add it? Progressive web applications (PWA) are a nice way to give your websites an “app makeover”. Using PWAs your sites are perceived to load faster, are available offline, and in general improve user experience.
Format your markdown using prettier and you are off to the races. Hugo static site generator keeps everything simple. I just love the power of typing in something in markdown, and seeing the finished HTML pages and blog formatted to specs (in no time, I might add). I use VSCode for writing markdown text.
I love the simplicity, speed and awesomeness of static sites. I also happen to love Vue for its power, simplicity and its feature set that makes development that much easier. So, what will happen when Vue is combined with static sites? Awesome Gridsome - that’s what. Gridsome describes itself as a Vue-powered site generator.
I don’t quite see value in ‘contact us’ forms anymore. No one uses it It is prone to spam No one uses it (yes, this is repeated) However, my personal opinions do not always align with client expectations. So it follows that I create these forms on a static site with resigned indignation.
Chrome and Firefox web inspectors are my new best friends in my quest to develop static sites. I never took the time to appreciate the complete power of web inspection - until I actually started changing the design of this very site. I have been redesigning techformist.com website on Hugo. The plan is to migrate from Jekyll and design a simpler site that can easily showcase what I have to offer (ahem.
It is interesting how the minor things eat away a lot of your time. Especially if you happen to be like me, one of the greater idiots on a planet full of idiots. One of the days, I had to create website really fast to demonstrate to a potential customer. I abandoned my dear old friend Jekyll since - well, I had to create something in Hugo.