From cda2e5b41de86e088f44a392ecd07f10394ae638 Mon Sep 17 00:00:00 2001 From: Asger Gitz-Johansen Date: Thu, 28 Nov 2024 17:54:37 +0100 Subject: [PATCH] feat: example post --- Dockerfile | 2 + content/posts/example.md | 8 ++++ content/posts/how-to-blog.md | 82 ++++++++++++++++++++++++++++++++--- shortcodes/centered.html | 3 ++ static/example.png | Bin 0 -> 2957 bytes 5 files changed, 89 insertions(+), 6 deletions(-) create mode 100644 content/posts/example.md create mode 100644 shortcodes/centered.html create mode 100644 static/example.png diff --git a/Dockerfile b/Dockerfile index 548ac12..01691f1 100644 --- a/Dockerfile +++ b/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"] diff --git a/content/posts/example.md b/content/posts/example.md new file mode 100644 index 0000000..84dd989 --- /dev/null +++ b/content/posts/example.md @@ -0,0 +1,8 @@ ++++ +date = '2024-11-27' +draft = true +title = 'Example' +tags = ['tutorial'] +categories = ['technical'] ++++ +content goes here. diff --git a/content/posts/how-to-blog.md b/content/posts/how-to-blog.md index 6430df2..b0433c3 100644 --- a/content/posts/how-to-blog.md +++ b/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 -└── content - ├── about.md // the "about" page - └── posts // actual blog posts go here - └── example.md +├── hugo.toml // blog-framework configuration file +├── content +│   ├── about.md // the "about" page +│   └── posts // actual blog posts go here +│   └── 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 + +

+ example +

+``` + +Then we can use this new shortcode like so: + +```markdown +{{}} +``` + +{{< 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 + + + +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 diff --git a/shortcodes/centered.html b/shortcodes/centered.html new file mode 100644 index 0000000..56b6ad8 --- /dev/null +++ b/shortcodes/centered.html @@ -0,0 +1,3 @@ +

+ example +

diff --git a/static/example.png b/static/example.png new file mode 100644 index 0000000000000000000000000000000000000000..4c08bc03fc3ae3f3b3c2db88bb47a7f14e875c36 GIT binary patch literal 2957 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 DKR>=R literal 0 HcmV?d00001