{"id":9366,"date":"2023-06-01T13:03:35","date_gmt":"2023-06-01T11:03:35","guid":{"rendered":"https:\/\/www.main-vision.com\/richard\/blog\/?p=9366"},"modified":"2023-06-01T13:05:18","modified_gmt":"2023-06-01T11:05:18","slug":"playing-with-the-hugo-with-an-old-site","status":"publish","type":"post","link":"https:\/\/www.main-vision.com\/richard\/blog\/playing-with-the-hugo-with-an-old-site\/","title":{"rendered":"Playing with the Hugo With An Old Site"},"content":{"rendered":"Reading Time: <\/span> 3<\/span> minutes<\/span><\/span>\n

For a few days I have been playing with Hugo<\/a> with Markdown and HTML pages. It says that it is \u201cthe world\u2019s fastest framework for building websites\u201d and so far I do notice that it has a key strength that I like.\u00a0<\/p>\n\n\n\n

Front Matter<\/strong><\/p>\n\n\n\n

That strength is that with small modifications you can take an existing static website and make it dynamic.  Hugo requires that each page has Front Matter.  <\/p>\n\n\n\n

Front matter is:<\/p>\n\n\n\n

\u2022 title<\/p>\n\n\n\n

\u2022 date<\/p>\n\n\n\n

\u2022 tags<\/p>\n\n\n\n

\u2022 description<\/p>\n\n\n\n

\u2022 author<\/p>\n\n\n\n

\u2022 slug<\/p>\n\n\n\n

\u2022 draft<\/p>\n\n\n\n

\u2022 and more. It\u2019s a quick and easy way of organising a website, one page at a time. <\/p>\n\n\n\n

Front Matter according to chatGPT is \u201ca metadata configuration section that is commonly used in static site generators like Hugo, Jekyll, and others.\u201d It is placed at the top of a document to provide useful information like post title, publish date, tags and more. The beauty of tags, author and other tags is that they are used to organise data without the need for a CMS back end. <\/p>\n\n\n\n

The Niche it Fills<\/strong><\/p>\n\n\n\n

The advantage of Hugo, over a CMS like WordPress, is that it doesn\u2019t lock you into itself. It allows you to create pages, and to organise those pages by tags, category or other. It allows you, via the layout metadata to specify which css layout a page should use. You can have one website section with one theme, and another section with another theme. <\/p>\n\n\n\n

If your website has a section that is about geography, and another about environmental systems. You use the relevant tags for each page. If you click on the geography tag you get a page with a list of all the pages tagged with geography. If you click on \u201cEnvironmental Studies\u201d you get the content on that topic. <\/p>\n\n\n\n

Aside from creating tags you can create a hierarchy. If you write \u201cfilm\/french\u201d it will recognise that you have the tag \u201cfilm\u201d and within that tag you have the sub tag of french. If you write about french films you can add the tag \u201cfrench\/film\u201d rather than \u201cfrench, film\u201d and it will create sub-tags. This is an effective means of organising tags. <\/p>\n\n\n\n

The Weaknesses<\/strong><\/p>\n\n\n\n

When you create pages their default is draft, which means that you need to change draft to false if you want it to generate pages with the hugo command. When a page is generated it does not switch the draft status from true to false, so you need to tell it to export drafts each time. <\/p>\n\n\n\n

When you generate the static website it creates a directory for each page, with an index.html page in each. <\/p>\n\n\n\n

The same is true of the tags page generation. If you have 20 pages you will have 20 directories with index.html pages. If you have\u00a0 100 tags you will have one hundred folders with an index.html file and an index.xml page.\u00a0 If you want to fix this Hugo calls them ugly URLs<\/a>.\u00a0<\/p>\n\n\n\n

Switching from Pelican to Hugo<\/strong><\/p>\n\n\n\n

Initially I thought Pelican looked like a powerful tool until I encountered the issue with categories being \u201cone per page\u201d by default. The plugin to allow for more was simple to implement but I like to experiment with tools and I found that Hugo is an interesting alternative. <\/p>\n\n\n\n

The Strength<\/strong><\/p>\n\n\n\n

I want the flexibility of a CMS driven website without being stuck within WordPress or another CMS. This tool gives me the features of a CMS without the limitations. As i add Front Matter information to each page, so it becomes easy to index every page and update navigation one final time, rather than every single time small changes are made. <\/p>\n\n\n\n

Partial Templates<\/strong><\/p>\n\n\n\n

With Hugo you can create partial templates<\/a>, as you can with Laravel and other framework tools, except that with this framework html and markdown are used. The learning curve is more gradual.\u00a0<\/p>\n\n\n\n

The Sitemap<\/strong><\/p>\n\n\n\n

A nice feature of Hugo is that it generates a sitemap with information about the location of each file, when it was last changed, the change frequency and priority. In this way Google and other search engines may quickly see what has changed and when. <\/p>\n\n\n\n

And Finally<\/strong><\/p>\n\n\n\n

If your website is already written in HTML it makes sense to find a tool that will connect all the pages together, for navigation. The CSS, JS, and html stay the same. It\u2019s just the framework behind the scenes, connecting everything efficiently. <\/p>\n","protected":false},"excerpt":{"rendered":"

Reading Time: <\/span> 3<\/span> minutes<\/span><\/span>For a few days I have been playing with Hugo with Markdown and HTML pages. It says that it is \u201cthe world\u2019s fastest framework for building websites\u201d and so far I do notice that it has a key strength that I like.\u00a0 Front Matter That strength is that with small modifications you can take an […]<\/p>\n","protected":false},"author":1,"featured_media":9349,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":3,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[255],"tags":[5197,1094,5198,2341],"class_list":["post-9366","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-swiss-walks","tag-hugo","tag-learning","tag-static-website","tag-website"],"jetpack_publicize_connections":[],"_links":{"self":[{"href":"https:\/\/www.main-vision.com\/richard\/blog\/wp-json\/wp\/v2\/posts\/9366","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.main-vision.com\/richard\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.main-vision.com\/richard\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.main-vision.com\/richard\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.main-vision.com\/richard\/blog\/wp-json\/wp\/v2\/comments?post=9366"}],"version-history":[{"count":1,"href":"https:\/\/www.main-vision.com\/richard\/blog\/wp-json\/wp\/v2\/posts\/9366\/revisions"}],"predecessor-version":[{"id":9367,"href":"https:\/\/www.main-vision.com\/richard\/blog\/wp-json\/wp\/v2\/posts\/9366\/revisions\/9367"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.main-vision.com\/richard\/blog\/wp-json\/wp\/v2\/media\/9349"}],"wp:attachment":[{"href":"https:\/\/www.main-vision.com\/richard\/blog\/wp-json\/wp\/v2\/media?parent=9366"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.main-vision.com\/richard\/blog\/wp-json\/wp\/v2\/categories?post=9366"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.main-vision.com\/richard\/blog\/wp-json\/wp\/v2\/tags?post=9366"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}