Website Relaunch with CSS Grid Layout
4 months of work, 49 hours of coding, plus more hours for designing a new homepage, creating a new OTF font, and polishing up some of my old 3D models. But now my martial arts website kogakure.de is online.
The old website still used Jekyll, and it took a long time to generate and deploy my website. For the same reasons I migrated this website to Hugo – which are speed and getting rid of Ruby – I decided to do the same for kogakure.de.
But I had more in mind: I always wanted to create a website with the new CSS Grid Layout Module Level 1, or in short CSS Grids. This spec landed in all modern browsers (including mobile browsers) this spring. CSS Grids are one of the coolest additions of the last 15 years. Finally, Responsive Layout with CSS opens up possibilities to new layouts never seen before. Everything, which is possible in Print should be possible with CSS Grids, but much more, because of the responsiveness build into CSS Grids.
Mozilla Firefox CSS Grid Inspector
Special thanks to Mozilla for their fantastic Firefox browser. The Firefox Nightly Edition includes already a new CSS Grid Inspector, which is awesome. And it was really needed, my homepage uses 12 different grids. Yes, you read correctly. 12. CSS Grid Layout can be used for the overall page layout, but developers are encouraged to also use it on a component basis.
Hosting on Netlify
My new website is hosted on Netlify. A fantastic service, which comes with deployment via Git, build hooks, single page pre-rendering, asset optimization, forms, split testing, notifications, and free SSL with Let’s Encrypt, and you can set a custom domain. And they have a global CDN, which means assets are delivered much fast, wherever you live.
You can create unlimited sites, add unlimited collaborators, and even use it for commercial projects. For free. And of course, they have packages for users and companies, who need more control or reliability.
The source code for my website is completely open, the content is as always provided with a Creative Commons license. The unique design is not free, but everybody is encouraged to learn from the code and reuse the code of the website.