tag: Static Sites

How can you get automatic sidebars to be generated in Vuepress depending on the page? The Situation Vuepress is simple. Being simple is rather difficult. In the case of Vuepress, the difficulty can show up in unexpected places. Starting with Vuepress is simple enough. Equally simple is enabling navigation on your site at multiple levels through a “sidebar” and/or a “navbar”. Specifically for the sidebar - you can enable in by adding a couple of lines in /docs/.vuepress/config.js. ...

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 - A cool, easy-to-customise home page Themes/starter projects that make life easy Plugins that can extend functionality of core software Although I had played around Vuepress quite a bit, I always ended up choosing non-Vue technologies like Hugo, or Vue-based static site generators like Gridsome or Saber.land. ...

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. Create a new file rss.xml in layouts\_default\ folder in your site root directory. Include following content (as of v0.58) - ...

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. PWAs are supported by all web browsers. Using PWAs on single page applications have shown remarkable improvement in site speed and have provided us the ability to continuing to serve static content even when the connectivity is down. ...

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. This works out beautifully - I can save markdown files and prettier kicks in to format everything - the markdown within those files and the code within markdown. ...

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. Use Vue to design your site on top of Gridsome framework, and write your content in markdown, and generate complete HTML pages for your content that is complete in all respects. ...

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. Contact form is not quite a native feature of static sites. However, there are more than few solutions to this problem. ...

Does the term ‘CMS’ mean anything anymore? And, why a hybrid static site solution is the only way out. Where we stand today? Wordpress really brought web sites to the masses. Instead of writing obscure code using HTML / Javascript, using Blogspot, or using third party site builders, Wordpress and its ecosystem allowed all humans with basic computer skills to whip up a site within no time. Wordpress is a content management system (“CMS”), and a good CMS at that. ...

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..). ...