Pyotek RebootsAug 18, 2019 · 5 minute read
Blog About News AMP Hugo
What is this Pyotek, anyways?
For now, it is a Tech-Blog that respects your privacy with a strong focus on Software and Hardware projects. On the other hand, it is also a GitHub organization/collective (yeah, currently a one-man show) that works on Open Source projects.
Follow Pyotek on its journey!
This site is built via Hugo a fantastic static site generator that utilizes Go‘s template mechanism and is therewith pretty fast. Static means that the HTML delivered by the server will always be the same for every person. There are no dynamic server-side changes.
That is the reason why we are able to host on GitHub pages which - put in simple words - serves repository files without ever making any changes to them.
Before, we used a customized (in the sense of manually stripped-down) version of the now deprecated Hyde-X theme. This theme was based on Hyde, a very popular theme for another static site generator named Jekyll (fitting, eh?).
Though very inactive, this blog worked pretty well for about 2 years - but it was neither very responsive on smaller screens nor SEO-optimized. With newer Hugo major releases, there also came up incompatibility problems and errors regarding the theme’s layout files.
Therefore, we decided to do a full migration of the theme.
The State of the Art
We rewrote most of Hyde-X‘s templates, changed about half of the CSS and adapted to the freshest Hugo features (Hugo Pipes, anyone?). We tested and tested… And we made it lightning-fast ⚡ - by limiting to just a few HTTP requests and only using the relevant styles for the current page.
Oh and we implemented another major breaking change: We made it fully AMP-conform.
So what is AMP? This is how the project is advertised on amp.dev:
AMP is an open-source HTML framework that provides a straightforward way to create web pages that are fast, smooth-loading and prioritize the user-experience above all else.
To support that, AMP uses several clever modern web development concepts (read how AMP works). It has to be said that most website developers use AMP for primarily one single reason consisting of three letters: SEO. But why?
Well, AMP is a project introduced by Google. At least on mobile, your AMP site evidently ranks better than your regular one.
To be honest, we can agree to some of the critical points. Google prioritizes AMP content. By doing so, the big 🐙 Google could potentially get even more control over the web.
Furthermore, some people would say that a company which makes not just a few dollars with personalized ads conceptually cannot exactly respect your privacy.
evil spirit moved us to use this particular web technology?
We have to admit that there are some really good things about AMP. Like often, there is no clear “good” 👼 or “bad” 😈.
Well. First, AMP’s source code can fully be reviewed. Everyone can verify that there is no user tracking involved unless the web page author actively decides to do that (e.g. via analytics). Secondly, Google has no intention to use AMP’s JS components itself for spying purposes. That is simply not the aim of the project.
We like performance-tuned code and this is exactly where we see AMPs strengths:
- AMPs components are pluggable
- AMPs JS is optimized thoroughly
- Async loading of scripts, images etc. guarentees a smooth experience (no more strangely moving text etc.)
- You need to follow some of modern best practices for performance and security (reduce requests, use HTTPS, etc.)
While it can be a complex (or even impossible?) task to migrate existing pages with a lot of JS, quickly prototyping a whole fresh website is a relatively easy task.
If there is not much JS to take care of, it’s also pretty doable - as done for this page:
How we did it
We started with the official documentation and followed the tutorial “Convert HTML to AMP".
It is pretty easy. Until you enable the nasty
#development=1 flag and see all the shiny red validator errors in the JS console.
At first these errors felt overwhelming. But don’t be too afraid. We fixed them piece for piece - and it was a great feeling to finally see the result:
Yes, AMP validation successful!
Porting a page from regular HTML to AMP-conform HTML is a very individual task, but AMP’s documentation is supportive. It always seemed to be up-to-date and we only ran over some smaller typos/mistakes.
How we respect your Privacy
See how the
v0.js request is blocked?
Additionally, we currently do not have any plans of integrating analytics, ads or any other form of user tracking. First, we want to at least try to stay a complete donation-based blog.
Here’s what’s currently on our blog theme’s roadmap:
- Mobile: Auto-hide top bar when scrolling
- Mobile: Implement an actual sidebar
- Mobile: Improve offline usage
- Add user configuration using PWA mechanisms
- Refactor and improve theme
Let’s see what the future will bring.