As the proud owner of pwning.tech I sometimes get asked about how I create the diagrams for the website and how I do devops. This page intends to answer these questions.
For the diagrams I utilize the draw.io tool. It provides a quite straightforward UI and UX, whilst allowing the user to customize their diagram to beyond the moon. The house style of pwning.tech - recognizable by the white stripes in the corners of a diagram - and its' logo are currently embedded into the diagrams by hand. This is done to export diagrams to the SVG format for SEO and UX purposes. Even the pwning.tech logo is made in draw.io and exported as an SVG, as you can inspect yourself.
The CMS (GhostCMS)
When considering different content management systems (CMS), GhostCMS popped up as one of the best ones. It provides out-of-the-box SEO optimizations and has a really nice feature rich editor. Other nice features include easy code injection at the HTML head and at the end of its' body, allowing for data-only JS and CSS customization. One of the drawbacks however is that GhostCMS is dynamic, and hence it cannot be compiled to static HTML pages out of box. Luckily, the community basically made an recursive wget script for exactly this purpose, which I utilize for deploying the site.
Deploying (Github pages)
Recently, pwning.tech switched to being deployed on Github pages as a static website. In order to pull this off, I host a local version of pwning.tech where I edit the site and write blogposts, and when I'm confident the updates are ready to go to the Github pages repository, I run the following script:
This approach has several advantages:
- Free and highly reliable hosting
- Better security (no backend to hack)
- Only public content is pushed (no admin interfaces)
- The local instance is unreachable from the outside
- Faster response times (free CDN)
- Basically a full response cache