Added building with hugo post

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  `{{</* $name_of_shortcode $arg0 $arg1 $arg2 */>}}`. For example, I have a shortcode to format an image correctly in a post under */layouts/shortcodes/image_sc.html*.
+
+``` html
+    <img class="resize" src="{{ .Get 0 }}" alt="{{ .Get 1 }}" />
+    <figcaption>{{ .Get 2 }}</figcaption>
+```
+
+I can utilize this in a post with `{{</* image_sc "path_to_image" "alt_text" "caption" */>}}`. *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" }}
+
+    <div class="tots_post">
+    	<h3 class="entry_heading">{{ .Title }}</h3>
+    	<h5 class="tots_date_category"> {{ .Lastmod.Format "2006-01-02" }} - {{ .Description }}</h5>
+    
+    	
+    	<p>{{ .Content }}</p>
+    	
+    </div>
+{{ 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
+// <!-- Ranges through content/posts/*.md -->
+    {{ range .Pages }}
+        <li>
+            <a href="{{.Permalink}}">{{.Date.Format "2006-01-02"}} | {{.Title}}</a>
+        </li>
+    {{ end }} 
+```
+
+It uses `range` to loop through all content `.Pages`, and create a list item, `<li>`, with a reference, `<a href=`, to the single content page, `{{.Permalink}}`, as the title, `{{.Title}}`.
+
+*Partials* are templates that can be called by other templates such as *single* and *list* and are saved under */layouts/partials*. They can be called with the `partial` keyword. For example, I use partials to handle my footer and can call it from both my *single.html* and *list.html* with `{{- partial "footer.html" . -}}`.
+
+The main website *landing page*, *404 page*, and other *special content* can also be defined under the layouts directory which will supersede any previously defined templates.
+
+With all that defined and out of the way, if you are ready to take a look at you page locally, `hugo server` can be run which will start an instance of your website on [localhost:1313.](http://localhost:1313)
+
+That's pretty much everything that's utilized to build this site. Hope it wasn't too much of an info overload!

xavishobbies/themes/xavis/layouts/_default/list.html

@@ -3,7 +3,7 @@
 
 	{{ .Content }}
 
-	{{ range where .Site.Pages "Params.categories" "intersect" (slice "Guides") }}
+	{{ range where .Pages "Params.categories" "intersect" (slice "Guides") }}
 
 	{{ .Content }}