feat: example post

Dockerfile

@@ -5,4 +5,6 @@ RUN hugo new site /hugo
 RUN git clone https://github.com/yihui/hugo-xmin.git themes/hugo-xmin
 ADD hugo.toml /hugo/hugo.toml
 ADD content /hugo/content
+ADD static /hugo/static
+ADD shortcodes /hugo/layouts/shortcodes
 CMD ["hugo", "serve", "--bind", "0.0.0.0"]

content/posts/example.md

@@ -0,0 +1,8 @@
++++
+date = '2024-11-27'
+draft = true
+title = 'Example'
+tags = ['tutorial']
+categories = ['technical']
++++
+content goes here.

content/posts/how-to-blog.md

@@ -1,6 +1,5 @@
 +++
 date = '2024-11-27'
-draft = false
 title = 'How to Host a Simple Blog'
 tags = ['howto', 'tutorial', 'web']
 categories = ['technical']
@@ -24,11 +23,13 @@ Ideally, the directory structure should look like this:
 blog
 ├── Dockerfile      // dockerfile to build and host the site
 ├── README.md       // info about the repository, not a blogpost
-├── config.toml     // blog-framework configuration file
+├── hugo.toml       // blog-framework configuration file
-└── content
+├── content
-    ├── about.md    // the "about" page
+│   ├── about.md    // the "about" page
-    └── posts       // actual blog posts go here
+│   └── posts       // actual blog posts go here
-        └── example.md
+│       └── example.md
+└── static          // non-markdown files
+    └── example.png
 ```
 
 And then to build the site, simply build the container:
@@ -52,9 +53,78 @@ RUN hugo new site /hugo
 RUN git clone https://github.com/yihui/hugo-xmin.git themes/hugo-xmin
 ADD hugo.toml /hugo/hugo.toml
 ADD content /hugo/content
+ADD static /hugo/static
 CMD ["hugo", "serve", "--bind", "0.0.0.0"]
 ```
 
 For now, I am just using the built-in server in `hugo`, but it should be possible to serve using `nginx`.
 
 I mentioned `hugo` before, but I was mostly mad that I had to add the autogenerated stuff in git - with this approach... I don't have to 🎊!
+
+## Images
+Just put images in the `static` directory, and reference to them in your blogposts like you would normally in a `hugo` project:
+
+```markdown
+![example](/example.png)
+```
+
+![example](/example.png#center)
+
+This is not centered, and there's no built-in [shortcode](https://gohugo.io/content-management/shortcodes/) for centering images (why not, hugo? You have a shortcode for figures, but no css class for centering - you cant even add a `style` tag? Such an oversight)...
+So we have to add one dirty thing to this setup. We have to add a `shortcodes` directory, that is then also added to the docker container in `/hugo/layouts/shortcodes`:
+
+```
+blog
+├── Dockerfile
+├── README.md
+├── hugo.toml
+├── content
+│   ├── about.md
+│   └── posts
+│       ├── example.md
+│       └── how-to-blog.md
+├── shortcodes
+│   └── centered.html        // <-- Added
+└── static
+    └── example.png
+```
+
+```html
+<!-- centered.html -->
+<p align="center">
+    <img alt="example" src="{{.Get `image`}}" style="max-width: 100%;">
+</p>
+```
+
+Then we can use this new shortcode like so:
+
+```markdown
+{{</* centered image="/example.png" */>}}
+```
+
+{{< centered image="/example.png" >}}
+
+Yes! Now we're cooking with gas! ... or atleast cooking with something.
+
+If you want to just manually build and run docker image on your website server, feel free to stop reading here.
+The next section really elevates the publishing flow to a whole another level though.
+
+# Hosting and Deployment
+Being able to build and launch the docker image is nice and can suffice for smaller projects.
+Yes, this blog is a small project and the manual method should be more than enough, but I also play [factorio](https://store.steampowered.com/app/427520/Factorio/) (highly recommend it!), so I _hvae_ to automate everything that is tedious.
+
+## Continuous Integration
+This section 
+I am using my [personal gitea instance](git.gtz.dk/agj/blog) to host the source code for this blog - which means that I will be using the integrated CI system there, but you can use whichever CI service you'd like.
+The general concepts of the workflow should be fairly easy to translate to any kind of CI
+
+<!-- TODO: Implement the fucking thing -->
+
+This setup also gives us the possibility of performing traditional code-review before releasing by using [pull requests]().
+This should empower us to identify and correct issues (e.g. spelling mistakes or whatever) before they are pushed to the official website.
+
+## Continuous Delivery
+With a docker image readily available 
+
+### Orchestration
+I personally am a big fan of the simplicity of [portainer](), as it scales really well when doing perosnal server stuff

shortcodes/centered.html

@@ -0,0 +1,3 @@
+<p align="center">
+    <img alt="example" src="{{.Get `image`}}" style="max-width: 100%;">
+</p>