New Website

Yay, I've got a brand new website!

And not just some new website. This one I wrote myself, (almost) from scratch, backend and frontend, using Python, Flask and Flask-SocketIO for Backend and Bootstrap and Method theme for Frontend. Thanks to Neuethemes, authors of the original Method theme for a great base for this website. But I did adapt and change it a lot.

Have to admit, I'm still fine-tuning it, and debugging, but it's working! It's ALIVE!

Are you crazy? Why?

Well, that's a valid question, one I've been asking myself a few times as well.

I was using Wordpress as framework of my website for years now, and during this time I was liking Wordpress less and less. It is bulky, it's filled with so many things I don't need, yet finding something I DO need is not so easy. To build the site you want with Wordpress you'd have to install so many plugins, that you just get buried in them.

And I could not change or fine-tune the theme without digging too much into php and wordpress-specific code. Which I actually did for latest version of WordPress Nixes.ru. But hey, I don't wanna learn PHP. I don't need it, I don't like it. But I know Python, and I happened to work with flask a lot while working on my home automation system and voice assistant, and my DIY NAS frontend.

So here we are. After spending about 2 weeks, a few hours after work each day, this site is up and running.

How does it work? What tools did you use?

Hardware:

It's running on VPS, which is actually CHEAPER than the web-site hosting I was using before, while it provides me with more CPU power and ram and storage space, compared to what I had on regular hosting plan.

Software:

• Flask
• Flask SocketIO
• SQLite
• MoviePy
• PIL
• Markdown (For blog posts)
• Bootstrap (design framework)

Tools:

• PyCharm for all code (Python, Html, CSS, JS)
• Chrome DevTools

Features

Admin panel

Just like WordPress it has admin panel. That's where I can add new posts, upload media, view media gallery and edit config files. With time I will add more functions, but only if I need it.

Media and blog entries are stored in SQLite database.

Access log analyzis is done using nginx's logs processed by GoAccess. I went for non-realtime reports with it, instead my python flask server generates report when I click the button, and redirects me to report page.

Media processing

Uploaded media is automatically processed , to produce all the required additional files for it: thumbnails, headers. Images and videos are cropped to required sizes and rendered into separate files. These can be animated (gif or webm), or static. And it's easy to just rewrite these files if I need to manually change something in some of those headers, they are all located in media gallery folder, with structure that is simple to understand and parse. Thanks to PIL and MoviePy python packages for this.

About page

At first I planned to create direct integration with LinkedIn, I even started to dig into python-linkedin and LinkedIn api. Initial plan was to request all the required information about my jobs and experience from LinkedIn profile, to keep it all in sync and only edit it in one place. But, unfortunately, LinkedIn was blocked in Russia due to some unknown to me reasons. It's easy to access it via proxy, but setting up proxy connection on the server... Well, not now at least.

So I went with different route. Instead I wrote a small script, that can quickly parse html data copied directly from LinkedIn page, and produce a .yaml file from it. This file is then read by the website server, and presented to the user. Just one simple step to copy data from LinkedIn.

PDF CV

Right now PDF CVs are still my old CV's, made by hand. But I do want to generate them dynamically upon request, from the relevant up-to-date information. That's my next goal, and field of research. Generating PDFs with python :D

Blog

Writing Blog with Flask is so easy! Initial setup litarally took just a few hours. And then days of tweaking, yes, but it was working within hours! Python is awesome.

I did start with this great tutorial by Charles Leifer , and expanded from there. So what does it feature right now?

Blog posts are stored in SQLite database. Switching to MySQL would be easy, but I don't think I'll need it. SQLite reading is very fast, more than enough for a personal website, and writes only happen if I change anything in media gallery or blog.

Blog posts can act as Gallery items, Blog items and\or Project items. So just like in WordPress they basically act as universal items. But I made it much simpler and easier to use, at least for me.

Each post has tags, title, associated media slug, timestamp and content, and a few booleans: Published, Gallery, Blog, Project. Simple as that. Might switch those bools to another string input field though, and call it "category"...

Tags switching is done with Isotope JS library. Tags are dynamically gathered from all posts during query, there is no separate tag database anywhere. So adding new tag is as simple and just adding it to Tags section of any post.

Future plans and thoughts

Work is not finished here. I feel like this will become a long-term side-project for me, since there's a lot to improve here, some things are still not polished. And with time I might just want to add or change something. In the near-future I'm sure I'll need to make PDF generation...

I want to add actual 3D media, using webgl and three.js , sort of like DIY sketchfab. That'd be cool! Actual 3d models moving in the header! :D And in Portfolio gallery.

While editing old posts here, I can already see and feel how much faster and easier it is, compared to WordPress, so I'm glad I pulled this off :)

All in all this was and still is a great project to learn Python and programming. I already have ideas about implementing this new knowledge in GameDev and CG production.

Stay tuned for more.