diff --git a/.gitignore b/.gitignore index 2a8645f..978255e 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ .hugo_build.lock +.DS_Store diff --git a/README.md b/README.md deleted file mode 100644 index e12239b..0000000 --- a/README.md +++ /dev/null @@ -1,57 +0,0 @@ -# blog-hugo - -This is probably the hundredth rendition of this site xD Previously to -using HUGO my blog was built using GHOST CMS which is a great platform -and is feature rich. However my problem came with the base design -philosophy of a CMS, relying on a Database. - -HUGO is a static site generator meaning it takes a readable file format -like markdown and then compiles all that down into HTML (Static Files) -This removes the need for a database and in turn improves performance of -the site ten fold. - -## Pros of static sites - -* Security -* Reliability -* Speed -* Scalability -* Low Resource requirement - -## Cons of a static site - -* Less user friendly - -## Why - -The reasons above all fit within my goal of trying to containerise -services running in my home lab. - -The plan is to move the services I use to a cluster of Raspberry Pis. As -long as the services have an ARM image or I can build an ARM image then -this is a viable solution - -## How - -The deployment method of this site relies on the Gitlab CI/CD pipeline. -* Clone the repository -* Push changes to Gitlab -* Gitlab runners create the docker image -* Image is pushed to my private docker repository -* Pi cluster uses that image to host the site locally - -## When Pulling / Cloning - -Be sure to add `--recurse-submodules` as the theme used is a submodule - -``` bash -git clone --recurse-submodules git@gitlab.com:AHMZA/blog.git -``` - -## Update the theme - -As the theme is a submodule it will need to be update with the following - -``` bash -git submodule update --remote --merge -``` diff --git a/content/posts/hugo-site-generator.md b/content/posts/hugo-site-generator.md new file mode 100644 index 0000000..6042fca --- /dev/null +++ b/content/posts/hugo-site-generator.md @@ -0,0 +1,116 @@ +--- +title: HUGO Static Site Generator +date: 2021-12-26T00:23:22Z +author: "ahmza" +draft: false +weight: + +tags: ["blog","website","web development","HUGO"] +description: "HUGO is a static site generator. No idea what that is ? Check out this post to learn more !" +canonicalURL: "https://blog.ahmza.com/Page%28/posts/hugo-site-generator.md%29" + +cover: + image: "/img/hugo/feature.webp" # image path/url + alt: "HUGO logo" # alt text + caption: "The HUGO logo" # display caption under cover + relative: false # when using page bundles set this to true + +--- + +## **Introduction** + +Hugo is a static site generator, which basically means it's a tool that +allows us to pre-compile all of our website into static HTML, CSS and +JS. The main benefit of using such methods to crate a site is speed. A +Static site takes a lot less time to load than a site that uses +databases for example. + +## **Disadvantages** + +Some of the disadvantages I have come across are as follows: + +* A lot more backend work +* Harder to manage content +* Editing and creating content can be a pain + +**This is to no fault of hugo itself but to the unnecessary complexity +in my infrastructure!!** Deploying the site in my environment was a +challenge as I had to get the site files from gitlab and build a docker +image that would compile the site as well as create an image to be +deployed in my [docker swarm.](https://blog.ahmza.com/Page%28/posts/building-a-docker-swarm-with-pis.md%29) +I do feel I made this more complicated than it needed to be, however now +that I have it working the workflow is great. + +The content is manually managed meaning you have to create edit and +delete posts yourself. HUGO does a great job at making this as pleasant +of an experience as possible but coming from a CMS (Content Management +System) it is a lot more involved. + +Because there is no integrated webui or CMS for Hugo, the experience +you get when creating content will vary person to person depending on +the environment you use to create the content. When using a CMS I took +dragging and dropping images for granted where now I have to explicitly +define full paths to images which can get me out of the flow of writing +content, however it's finding solutions for these challenges that makes +this interesting. + +## **Then Why?** + +The main reason for switching to a static site generator is speed and +how lightweight the final product is, at the time of writing this the +total size of the content on this site including images is ~5mb which +is considerably smaller than a full CMS and database alone with no +content. + +Some advantages of static sites in general: + +* Security +* Reliability +* Scalability +* Low Resource Requirement + +Although the pursuit of speed brought me to HUGO, here are a few things +that kept me: + +* Git +* Markdown +* Simplicity +* Live Preview + +As mentioned before my initial reason for switching to a static site +generator was speed and how lightweight the final product is, at the +time of writing this the total size of the content on this site +including images is ~5mb which is considerably smaller than a full CMS +and database alone with no content. + +I have recently started to use git a lot more and I'm able to +implement a content versioning system that can follow me everywhere and +on any device very easily. It also means there is always a backup of my +site on gitlab and I don't need to worry about backing up databases. + +Markdown makes life a lot easier, Its quick, easy and doesn't require +me to right click or use buttons. Markdown is also very transferable, +scroll up to the top of this page and hit the "Suggest Changes" button +and you will see how a markdown file can be interpreted by not only +HUGO but gitlab too and so many other tools. + +{{< video label="i love it" webm="/webm/i-love-it.webm" >}} + +Regarding themes, HUGO allows you to easily create your own, or just as +easily implement other peoples themes. + +Although at the start HUGO seemed difficult to me I managed to learn it +pretty quickly and appreciate the simplicity it brings to the table. I +wouldn't say my workflow is perfect by any means but I feel HUGO makes +it easy to develop a smooth workflow. + +Live Preview allows you to start up a light weight web server locally +and has an auto refresh feature so whenever a change is made the web +page refreshes so you can see changes without manually refreshing. + +## **Conclusion** + +This post is a quick intro to HUGO and why I choose to use it, However +there is another post on setting up a HUGO site from start to finish. + +[Setting Up a HUGO Site](https://blog.ahmza.com/Page%28/posts/setting-up-a-hugo-site.md%29) diff --git a/layouts/shortcodes/image.html b/layouts/shortcodes/image.html new file mode 100644 index 0000000..907b299 --- /dev/null +++ b/layouts/shortcodes/image.html @@ -0,0 +1 @@ +{{ .Get diff --git a/layouts/shortcodes/video.html b/layouts/shortcodes/video.html index 63f82c8..cf063fe 100644 --- a/layouts/shortcodes/video.html +++ b/layouts/shortcodes/video.html @@ -1,14 +1,4 @@ - - - - diff --git a/static/img/hugo/feature.aseprite b/static/img/hugo/feature.aseprite new file mode 100644 index 0000000..29f9676 Binary files /dev/null and b/static/img/hugo/feature.aseprite differ diff --git a/static/img/hugo/feature.webp b/static/img/hugo/feature.webp new file mode 100644 index 0000000..4a5cb86 Binary files /dev/null and b/static/img/hugo/feature.webp differ diff --git a/static/webm/i-love-it.webm b/static/webm/i-love-it.webm new file mode 100644 index 0000000..dd5a865 Binary files /dev/null and b/static/webm/i-love-it.webm differ diff --git a/static/webp/posts/reverse-proxy/feature-anim.aseprite b/static/webp/posts/reverse-proxy/feature-anim.aseprite index 5143607..d9a1559 100755 Binary files a/static/webp/posts/reverse-proxy/feature-anim.aseprite and b/static/webp/posts/reverse-proxy/feature-anim.aseprite differ diff --git a/static/webp/posts/reverse-proxy/feature-anim.webp b/static/webp/posts/reverse-proxy/feature-anim.webp index 5958a62..487c235 100644 Binary files a/static/webp/posts/reverse-proxy/feature-anim.webp and b/static/webp/posts/reverse-proxy/feature-anim.webp differ