From 582428fee221afdebf93f97b1dde5680fa3d4de0 Mon Sep 17 00:00:00 2001 From: Xavi Date: Mon, 6 Mar 2023 00:15:06 -0800 Subject: [PATCH] Added building with hugo post --- .../web_development/building_with_hugo.md | 65 +++++++++++++++++++ .../themes/xavis/layouts/_default/list.html | 2 +- 2 files changed, 66 insertions(+), 1 deletion(-) create mode 100644 xavishobbies/content/web_development/building_with_hugo.md diff --git a/xavishobbies/content/web_development/building_with_hugo.md b/xavishobbies/content/web_development/building_with_hugo.md new file mode 100644 index 0000000..cb32644 --- /dev/null +++ b/xavishobbies/content/web_development/building_with_hugo.md @@ -0,0 +1,65 @@ +--- +title: "Building_with_Hugo" +date: 2023-03-06T00:00:00-08:00 +description: Web Development - Hugo +categories: ["Top_of_the_Stack"] +tags: ["Web Development","Hugo"] +--- + +As much as I started to enjoy playing around and styling with *html/css*, it did, at times, become slightly annoying to quickly document progress on projects **[which is hard enough to do as it is]**. This was especially true when trying to structure the site to reference identical posts on multiple pages **[ie. on the [tots](https://xavishobbies.org/categories/top_of_the_stack/) page as well on the associated hobby page]**. A solution that I have been mulling from the beginning is a *static site generator*. + +What I was looking for was an environment that was *extensible* enough to eliminate redundant code while also *malleable* enough to execute the initial vision I had for the website **[i know, surprising this website had any vision given the look]**. Static site generators enable this by, essentially, copying identical html across multiple pages through *templates*. This maintains the benefits of a static site while addressing one of it's biggest drawbacks. After some research **[googling "best static site generator"]**, [Hugo](https://gohugo.io/) seemed to check the boxes I had in mind while also seeming relatively simple to implement **[which is something a lazy person like me really values]**. + +*Hugo* is structured hierarchically and has a couple main directories where content is pulled to generate pages. *Content*, where the actual content of a *post* is stored, *layouts*, where *templates* and other *code snippets* are defined, and *static*, where things like *images* referenced in posts and *style sheets* are contained. + +New content posts can be created with `hugo new section_name/post.md` which creates a new file under *content/section_name/post.md*. For example this post was created with `hugo new web_development /building_with_hugo.md`. Section landing pages can be created by adding a *_index.md* file under the section directory with `hugo new section_name/_index.md` **[these will call the *list* template, if you don't know what that means, *read on!*]**. + +Hugo posts are written in [Markdown](https://www.markdownguide.org/basic-syntax/) which, basically, is a way to define the format of text through some pretty straightforward syntax **[trust me, it's really easy to pick up]**. If Markdown's default behavior is not cutting it for you, it can also be redefined under */layouts/_defaults/_markup*. + +However, sometimes *Markdown* doesn't have all the functionality that *html* would allow. In these cases *shortcodes* can be used to *inject html* into a content page by calling the shortcode with `{{}}`. For example, I have a shortcode to format an image correctly in a post under */layouts/shortcodes/image_sc.html*. + +``` html + {{ .Get 1 }} +
{{ .Get 2 }}
+``` + +I can utilize this in a post with `{{}}`. *path_to_image* will be passed into `{{ .Get 0 }}` given its the first argument, *alt_text* to `{{ .Get 1 }}`, and *caption* to `{{ .Get 2}}`. + +The two main templates that I've used are *single.html* and *list.html* **[here it is!]** under the *_default* folder. *Single* is used for *individual posts* while *lists* are used to, well, list the individual posts **[shocker]**. Single pages can be navigated to at [website.com/section/post.md](/web_development/building_with_hugo) while, as referenced earlier, the list template will be used for section landing pages which can be navigated to at [website.com/section.](/web_development) These templates are written in normal html but can do fancy things with specified [functions](https://gohugo.io/functions/) and [variables.](https://gohugo.io/variables) Here is my very *simple single template*. + +``` GO +{{ define "main" }} + +
+

{{ .Title }}

+
{{ .Lastmod.Format "2006-01-02" }} - {{ .Description }}
+ + +

{{ .Content }}

+ +
+{{ end }} +``` + +Which just inputs the post title at `{{ .Title }}` and content at the `{{ .Content }}` **[pretty straightforward huh?]**. + +And here is a quick example of a *list template* that is referenced in the *Hugo* documentation that loops through all the posts in a section and displays the title of each post as a link to the full post. + +``` GO +// + {{ range .Pages }} +
  • + {{.Date.Format "2006-01-02"}} | {{.Title}} +
    • + {{ end }} +``` + +It uses `range` to loop through all content `.Pages`, and create a list item, `
  • `, with a reference, `