8 ms·

Building a blog from scratch in 2022 using Hugo, Docker and a bit of Python

69 points by shoobs 5y ago

mkl95 5y ago
> Content was created in the browser using terrible WYSIWYG editors, and elegant layout was hard to achieve. You'd be surprised how powerful and elegant some WYSIWYG editors are. Last time I built a blog it was just Nginx, Django with some WYSIWYG editor, and Postgres.
- raihansaputra 5y ago
  What's your solution for WYSIWYG Image uploading? Does the editor handle the image upload + processing? and where do you store the images? I have tried a project with similar requirements but stuck on the WYSIWYG editor choice.
  - mkl95 5y ago
    I used django-summernote to handle those https://github.com/summernote/django-summernote https://github.com/summernote/django-summernote
    - raihansaputra 5y ago
      That's nice. Thanks!
  - physicsguy 5y ago
    I used django_ckeditor and ckeditor_uploader for a very simple site I built for an academic where they needed WYSYWIG forms, it worked a treat and easy to integrate. It's used by Django CMS too.
lawwantsin17 5y ago
Scratch using all that stuff. What does scratch even mean anymore?
- arjvik 5y ago
  "Baking a cake from scratch using Betty Crocker Instant Cake Mix and Ready-to-squeeze Icing!"
  - rgoulter 5y ago
    I was amused to see a "3-ingredient brownie" recipe where the 3 ingredients were: cookie dough, oreos, brownie dough.
- lawwantsin17 5y ago
bdlowery 5y ago
Or… Wordpress and 2 plugins: Advanced Custom Fields Pro + Custom Post Type UI.
- franga2000 5y ago
  ...add a database, php runtime and the constant threat of security breaches and you'll be a bit more accurate
  - bdlowery 5y ago
    PHP runtime? PHP is incredibly fast. I don't install sketchy plugins on my WordPress sites so security breaches are a non issue. I'd be more worried about one of those 10,000 dependencies in your React project doing something malicious :)
- cweagans 5y ago
  Have you played with https://pods.io/ https://pods.io/ ? It does most of what ACF does and also lets you create custom post types through the UI. Curious about your thoughts on that vs ACF Pro and Custom Post Type UI.
bdlowery 5y ago
> There is no clunky CMS to configure and manage, no big web framework to deal with and update Idk, the setup feels pretty clunky to me!
rsolva 5y ago
That SVG bundle trick was neat, going to test it out on my next Hugo adventure.
simlan 5y ago
Thanks for the write-up. Nice to read how the pieces fall into place and good inspiration !
rurban 5y ago
just hugo on github pages would have been easier. the feedback form could be JavaScript, hugo even has options for GH issues or discuss for comments.
colesantiago 5y ago
What is wrong with using Wordpress? I believe now one can get Wordpress to have 'static site' capabilities these days [0] [0] https://wp2static.com/ https://wp2static.com/
- sdoering 5y ago
  Basically there is nothing wrong with WP. It is maybe too bloated for some. Too riddled with insecurities. Too far used (and therefore an interesting target). A bit like using windows. Some prefer Mac, some *nix. Some are put off by php. Some don't need/want a SQL DB in the background. Personally I like Kirby CMS (I actually don't mind the licensing fee). I am more productive and more flexible in it than in any other system I ever used. For personal and client projects. But in the end it is often a choice of preference and that is fine.
- franga2000 5y ago
  There's a huge maintenance burden with WP sites and many things break if you dump them to static files. Also, the WP plugin ecosystem is almost as "dirty" as mobile apps are - few things are really open source, there's "please give us 5 stars" popups everywhere, fishy data collection, constant uspelling to premium offerings... It's just not a good experience to work with, unless you code most things yourself (in which case you will be absolutely disgusted by most of the API).
  - cersa8 5y ago
    "There's a huge maintenance burden with WP sites" I can't subscribe to this notion. WordPress can run almost unsupervised on auto update. Perhaps when you install 40 poor quality plugins things will break between updates, but with a few base plugins such as Advanced Custom Fields Pro + Custom Post Type UI you have no such problems.
hdjjhhvvhga 5y ago
I'm somewhat disappointed the author didn't include Kubernetes in the setup.
sandreas 5y ago
While this is a good tutorial, I don't think that docker or python is even required. The main benefit of hugo is, that it comes as a single binary for every OS that can be downloaded and executed without any dependencies. The contact form is cool, but for a simple blog I think that it is enough to just provide an email address, which is obfuscated as SVG paths and therefore not extractable. Although it is nice to have a real contact form to hide your email address from visitors. You should also consider using a partial for the render-image.html to be more flexible in templates. See https://pilabor.com/blog/2021/05/building-a-blog-with-hugo/#images https://pilabor.com/blog/2021/05/building-a-blog-with-hugo/#... for details.
- lkuty 5y ago
  Yes, I guess nginx and a little bit of rsync is enough. This is the big selling point of static site generators like Hugo.
  - sandreas 5y ago
    I tend to use rclone, but I also try to keep it as easy as possible.
- fuzzy2 5y ago
  > The contact form is cool, but for a simple blog I think that it is enough to just provide an email address, which is obfuscated as SVG paths and therefore not extractable. Although it is nice to have a real contact form to hide your email address from visitors. Or just add the address. I have a mailto link (no obfuscation or anything) on my page (that nobody visits anyway, but I believe Google has it). I think I have never received a single mail to this alias, spam or otherwise. (YMMV of course.)
  - franga2000 5y ago
    At the very least, I really suggest you use an email alias that you can filter or burn by if necessary. If you ever post a link to your site to something like HN or Reddit, you absolutely will get tons of spam and once you're on a list somewhere, you'll never ever get off of it. And no, Google's tag+name@gmail.com system isn't good enough - any spammer worth their salt will strip those.
alainchabat 5y ago
just hugo is enough
pacifika 5y ago
Great to read an article around adding some dynamic sauce on top of Hugo. The curly braces everywhere when using logic in the templating sure makes things less elegant, for me.
nicbou 5y ago
I don’t understand the hatred for classic content management systems. Every time I see those static blog posts, they’re for barebones blogs with a dozen posts. These things fall flat when you need to regularly update the content. Then a proper editor feels nice. Formatting text and uploading images doesn’t break your workflow. It also lets you have more metadata without resorting to a weird data format. The guides on my website have sources, glossary entries, categories, images and widgets. Describing that as text would be awkward. Besides, you can just log in and change something. There’s no need to fire up a terminal, type commands or deploy changes. Just click save, from any computer with a web browser.
- stavros 5y ago
  Because the complete lack of maintenance alone more than makes up for the lack of a login to change content for me. Not to mention I still have an editor and can log in to it to change content, it just commits to git instead of using a complicated backend.
- 3np 5y ago
  It depends on your workflow and preferences, I guess. From the other side: You can just update it straight from you terminal in your preferred text editor and push the changes. There's no need to open up a web browser, log in, and navigate through a web UI or clunky WYSIWYG interface. But yeah, whatever floats your boat.
- enriquto 5y ago
  > Then a proper editor feels nice. A proper editor for whom? What "proper" means is different to everybody. I already have and use a perfectly proper editor, and don't want to be forced to use another one just to write a few posts somewhere. > Besides, you can just log in and change something. There’s no need to fire up a terminal, Alright, but please recognize that this is a subjective point of view. My subjective point of view is the opposite: I'm already on the terminal, and I can just edit some files in there to update a post. There's no need to fire up a web browser, log-in using an ad-hoc login interface, and then use and ad-hoc editor.
  - 5y ago
tbran 5y ago
Almost spit out my coffee when I saw Docker and Hugo together! Still, I like the self-contained nature of this with the Python form handling. For anyone that wants a simpler setup: Netlify forms [0] can handle form submissions, 100 per month (per site) on the free tier, just add "netlify" to the form html. I have some sites that use this and I get very little spam. Netlify also gives you a CDN. Caddy [1] is a great webserver and can reverse proxy, serve content, and does automatic SSL. Configuration is pretty easy, although V1 was a little easier. I have it running a Django site right now and probably wouldn't even bother with nginx again. Traefik AND nginx for a static site seems pretty heavy to me. [0]: https://www.netlify.com/products/forms/ https://www.netlify.com/products/forms/ [1]: https://caddyserver.com/ https://caddyserver.com/
- indigodaddy 5y ago
  Yep caddy is easy and painless
lambic 5y ago
I set up a hugo blog a while ago and took a much simpler route. I have a shell script called "blog" which just opens an empty template in my editor and then publishes it when I save it in non-draft mode. Publishing is just another script that runs hugo and rsyncs the public folder to a vm. I don't even use git, I don't care about versioning my blog posts. The only thing I miss is comments, but nobody comments on blog posts any more anyway.
ssijak 5y ago
There is nothing that comes even close to DX of using something like Gatsby + MDX + <any_cms> for blogs. Simplicity and options it gives you is amazing. Deploy that to any CDN and you are golden. Or if you want to try something new and skip SSG you can try remix.run. But you loose Gatsby graphql data model, which is ok depending on the usecase.
derekzhouzhen 5y ago
So the only dynamic part of this blog is the contact form, and that pull in docker and python? There are better ways. (Shameless plug alert) https://roastidio.us https://roastidio.us is a free commenting platform specifically designed to go with a SSG based blog.
dglass 5y ago
The whole docker setup just to accept contact form submissions seems like overkill. On my blog I’ve got a form that posts the data to a lambda which sends me an email. The blog is built using Hugo and served from s3 so my setup is completely serverless.
MaxMoney 5y ago
calltrak 5y ago

69 points by shoobs 5y ago

> Content was created in the browser using terrible WYSIWYG editors, and elegant layout was hard to achieve. You'd be surprised how powerful and elegant some WYSIWYG editors are. Last time I built a blog it was just Nginx, Django with some WYSIWYG editor, and Postgres.

raihansaputra 5y ago
What's your solution for WYSIWYG Image uploading? Does the editor handle the image upload + processing? and where do you store the images? I have tried a project with similar requirements but stuck on the WYSIWYG editor choice.
- mkl95 5y ago
  I used django-summernote to handle those https://github.com/summernote/django-summernote https://github.com/summernote/django-summernote
  - raihansaputra 5y ago
    That's nice. Thanks!
- physicsguy 5y ago
  I used django_ckeditor and ckeditor_uploader for a very simple site I built for an academic where they needed WYSYWIG forms, it worked a treat and easy to integrate. It's used by Django CMS too.

lawwantsin17 5y ago

Scratch using all that stuff. What does scratch even mean anymore?

arjvik 5y ago
"Baking a cake from scratch using Betty Crocker Instant Cake Mix and Ready-to-squeeze Icing!"
- rgoulter 5y ago
  I was amused to see a "3-ingredient brownie" recipe where the 3 ingredients were: cookie dough, oreos, brownie dough.
lawwantsin17 5y ago

bdlowery 5y ago

Or… Wordpress and 2 plugins: Advanced Custom Fields Pro + Custom Post Type UI.

franga2000 5y ago
...add a database, php runtime and the constant threat of security breaches and you'll be a bit more accurate
- bdlowery 5y ago
  PHP runtime? PHP is incredibly fast. I don't install sketchy plugins on my WordPress sites so security breaches are a non issue. I'd be more worried about one of those 10,000 dependencies in your React project doing something malicious :)
cweagans 5y ago
Have you played with https://pods.io/ https://pods.io/ ? It does most of what ACF does and also lets you create custom post types through the UI. Curious about your thoughts on that vs ACF Pro and Custom Post Type UI.

bdlowery 5y ago

> There is no clunky CMS to configure and manage, no big web framework to deal with and update Idk, the setup feels pretty clunky to me!

rsolva 5y ago

That SVG bundle trick was neat, going to test it out on my next Hugo adventure.

simlan 5y ago

Thanks for the write-up. Nice to read how the pieces fall into place and good inspiration !

rurban 5y ago

just hugo on github pages would have been easier. the feedback form could be JavaScript, hugo even has options for GH issues or discuss for comments.

colesantiago 5y ago

What is wrong with using Wordpress? I believe now one can get Wordpress to have 'static site' capabilities these days [0] [0] https://wp2static.com/ https://wp2static.com/

sdoering 5y ago
Basically there is nothing wrong with WP. It is maybe too bloated for some. Too riddled with insecurities. Too far used (and therefore an interesting target). A bit like using windows. Some prefer Mac, some *nix. Some are put off by php. Some don't need/want a SQL DB in the background. Personally I like Kirby CMS (I actually don't mind the licensing fee). I am more productive and more flexible in it than in any other system I ever used. For personal and client projects. But in the end it is often a choice of preference and that is fine.
franga2000 5y ago
There's a huge maintenance burden with WP sites and many things break if you dump them to static files. Also, the WP plugin ecosystem is almost as "dirty" as mobile apps are - few things are really open source, there's "please give us 5 stars" popups everywhere, fishy data collection, constant uspelling to premium offerings... It's just not a good experience to work with, unless you code most things yourself (in which case you will be absolutely disgusted by most of the API).
- cersa8 5y ago
  "There's a huge maintenance burden with WP sites" I can't subscribe to this notion. WordPress can run almost unsupervised on auto update. Perhaps when you install 40 poor quality plugins things will break between updates, but with a few base plugins such as Advanced Custom Fields Pro + Custom Post Type UI you have no such problems.

hdjjhhvvhga 5y ago

I'm somewhat disappointed the author didn't include Kubernetes in the setup.

sandreas 5y ago

While this is a good tutorial, I don't think that docker or python is even required. The main benefit of hugo is, that it comes as a single binary for every OS that can be downloaded and executed without any dependencies. The contact form is cool, but for a simple blog I think that it is enough to just provide an email address, which is obfuscated as SVG paths and therefore not extractable. Although it is nice to have a real contact form to hide your email address from visitors. You should also consider using a partial for the render-image.html to be more flexible in templates. See https://pilabor.com/blog/2021/05/building-a-blog-with-hugo/#images https://pilabor.com/blog/2021/05/building-a-blog-with-hugo/#... for details.

lkuty 5y ago
Yes, I guess nginx and a little bit of rsync is enough. This is the big selling point of static site generators like Hugo.
- sandreas 5y ago
  I tend to use rclone, but I also try to keep it as easy as possible.
fuzzy2 5y ago
> The contact form is cool, but for a simple blog I think that it is enough to just provide an email address, which is obfuscated as SVG paths and therefore not extractable. Although it is nice to have a real contact form to hide your email address from visitors. Or just add the address. I have a mailto link (no obfuscation or anything) on my page (that nobody visits anyway, but I believe Google has it). I think I have never received a single mail to this alias, spam or otherwise. (YMMV of course.)
- franga2000 5y ago
  At the very least, I really suggest you use an email alias that you can filter or burn by if necessary. If you ever post a link to your site to something like HN or Reddit, you absolutely will get tons of spam and once you're on a list somewhere, you'll never ever get off of it. And no, Google's tag+name@gmail.com system isn't good enough - any spammer worth their salt will strip those.

alainchabat 5y ago

just hugo is enough

pacifika 5y ago

Great to read an article around adding some dynamic sauce on top of Hugo. The curly braces everywhere when using logic in the templating sure makes things less elegant, for me.

nicbou 5y ago

I don’t understand the hatred for classic content management systems. Every time I see those static blog posts, they’re for barebones blogs with a dozen posts. These things fall flat when you need to regularly update the content. Then a proper editor feels nice. Formatting text and uploading images doesn’t break your workflow. It also lets you have more metadata without resorting to a weird data format. The guides on my website have sources, glossary entries, categories, images and widgets. Describing that as text would be awkward. Besides, you can just log in and change something. There’s no need to fire up a terminal, type commands or deploy changes. Just click save, from any computer with a web browser.

stavros 5y ago
Because the complete lack of maintenance alone more than makes up for the lack of a login to change content for me. Not to mention I still have an editor and can log in to it to change content, it just commits to git instead of using a complicated backend.
3np 5y ago
It depends on your workflow and preferences, I guess. From the other side: You can just update it straight from you terminal in your preferred text editor and push the changes. There's no need to open up a web browser, log in, and navigate through a web UI or clunky WYSIWYG interface. But yeah, whatever floats your boat.
enriquto 5y ago
> Then a proper editor feels nice. A proper editor for whom? What "proper" means is different to everybody. I already have and use a perfectly proper editor, and don't want to be forced to use another one just to write a few posts somewhere. > Besides, you can just log in and change something. There’s no need to fire up a terminal, Alright, but please recognize that this is a subjective point of view. My subjective point of view is the opposite: I'm already on the terminal, and I can just edit some files in there to update a post. There's no need to fire up a web browser, log-in using an ad-hoc login interface, and then use and ad-hoc editor.
- 5y ago

tbran 5y ago

Almost spit out my coffee when I saw Docker and Hugo together! Still, I like the self-contained nature of this with the Python form handling. For anyone that wants a simpler setup: Netlify forms [0] can handle form submissions, 100 per month (per site) on the free tier, just add "netlify" to the form html. I have some sites that use this and I get very little spam. Netlify also gives you a CDN. Caddy [1] is a great webserver and can reverse proxy, serve content, and does automatic SSL. Configuration is pretty easy, although V1 was a little easier. I have it running a Django site right now and probably wouldn't even bother with nginx again. Traefik AND nginx for a static site seems pretty heavy to me. [0]: https://www.netlify.com/products/forms/ https://www.netlify.com/products/forms/ [1]: https://caddyserver.com/ https://caddyserver.com/

indigodaddy 5y ago
Yep caddy is easy and painless

lambic 5y ago

I set up a hugo blog a while ago and took a much simpler route. I have a shell script called "blog" which just opens an empty template in my editor and then publishes it when I save it in non-draft mode. Publishing is just another script that runs hugo and rsyncs the public folder to a vm. I don't even use git, I don't care about versioning my blog posts. The only thing I miss is comments, but nobody comments on blog posts any more anyway.

ssijak 5y ago

There is nothing that comes even close to DX of using something like Gatsby + MDX + <any_cms> for blogs. Simplicity and options it gives you is amazing. Deploy that to any CDN and you are golden. Or if you want to try something new and skip SSG you can try remix.run. But you loose Gatsby graphql data model, which is ok depending on the usecase.

derekzhouzhen 5y ago

So the only dynamic part of this blog is the contact form, and that pull in docker and python? There are better ways. (Shameless plug alert) https://roastidio.us https://roastidio.us is a free commenting platform specifically designed to go with a SSG based blog.

dglass 5y ago

The whole docker setup just to accept contact form submissions seems like overkill. On my blog I’ve got a form that posts the data to a lambda which sends me an email. The blog is built using Hugo and served from s3 so my setup is completely serverless.

MaxMoney 5y ago

calltrak 5y ago