Moving away from Wordpress..

September 13, 2021
Website Programming Python Hugo CSS



It’s been a while since my last post. I have a feeling that I start every single blog post like this. Recently a lot of things have changed. Moving to the USA, starting a new job in a new place and working on new things. Some stuff stayed the same; from time to time, I had to visit my website to make some security updates. I also realized that some of my WordPress plugins stopped working due to updates. I paid for the Kalium theme I liked a lot, but I also had to repurchase some other plugins to work with new WordPress. It was almost 1.5 years ago. Now, again, nothing works, and I would have to pay again for updates.


I started looking for some open-source website generators that would allow me to present my photography nicely but, in addition, would be easy to edit, free and adjustable. My first choice was Jekyll; I saw a lot of big biochemistry labs (e.g. Frazer lab ) building on this framework. However, I could not find a nice photo gallery plugin that would work well. Thus, I kept looking and found Hugo, another static website generator with features I've been looking for: it's free, has a lot of customizable themes, and has a community big enough to provide sufficient feedback. I started with YouTube Hugo tutorials from https://www.mikedane.com/ . They are maybe not too detailed but show the general concept behind Hugo and they allowed me to build the first versions of this website. For now, I decided to use only two open-source libraries: Minimal theme and Hugo shortcode gallery .

For the website construction and deployment, I used WSL2 with Ubuntu 20.04 on top of Windows 11 and Atom text editor. I have to say that the beginnings were not easy; the last time I touched HTML was maybe 15 years ago, and I never even thought about CSS and JavaScript. It is incredible how many online resources are available, just waiting to be used. Getting a feeling about CSS and JavaScript was quite ok; still, I need way more experience to do something more complex with it. Hugo itself is quite well documented, and scripts are available on Github (so-called shortcodes). I started by moving content from my old website to Hugo; having a template and idea helped me a lot during the learning process. Website generation is Hugo is blazing fast and also supports a simple image processing toolbox. After having the first draft, it was time to see whether I could deploy the website online.

A few online services are offering Hugo website deployment. I hoped that my previous hosting would allow Hugo as well, but apparently, it is more complicated than expected. Thus, to confirm that the website can even be viewed online, I had to connect it to Github. I worked with Github before, but never in the proper way. Pull, push commit? I never heard about you guys. All my Python scripts were placed on Github without any version control whatsoever. This time the website needed to be continuously deploy without reconnecting the repository to the service. Git is great but super confusing. After "figuring out" git, I went to AWS Amplify to host the website. The process is relatively simple. Relatively. A few hours later, I had the website online! In addition, I decided to change the website address from dzyla-photo.com to just dzyla.com because I would also like to start writing more about my work, not only photography. Local website development in Hugo is amazing but also forgives sloppy CSS references and double definitions. Amplify does not, and it took me few days to fix the CSS issues. The results of my struggles are now available online.

I am happy with the initial result and like the idea of the fully adjustable website, only limited by my skills and imagination. If you have any suggestions or would like to get the source code, let me know!

comments powered by Disqus