This is not valid anymore. The site is build with hugo
This blogpost will be a about the why, but mostly about how I’ve created this site.
I’ve created this site mostly for these reasons:
- Make myself visible on the web.
- Practice my design and web-development skills.
- Practice my writing (blog).
- Record things I’ve learned for myself. Maybe someone else will find something useful here.
Secondly, I’ll try to blog about some of my hobbies (hiking for example), but that will be very occasional.
For the css I’m using the stylus preprocessor. I’ve tried Less and Sass in the past but I like stylus, and this site is a good way of exploring it. I try to keep the site low on css and don’t use a framework like bootstrap or foundation.
The blog is written with my own implementation of a React markdown component that I’ve published2. In short, it uses an existing markdown parser, but instead of rendering a html string, it renders React components. The cool thing about this is that you can have full control over the React components, so you can do all kind of cool things with. For example add a custom subscript to every image or parse different html than what you normally want (like I do in this blog. Here I render <h2> elements instead of <h1>). Of course you can do all these things if you know something about parsing, but this component makes this super easy if you know React, just substitute the main component for your own and you’re started. I’m planning on writing a short blog post about this component too.
Hosting and deploying
I build this site with gulp and webpack. My boilerplate package can be found at boilerplate-webpack-react. This site uses a very similar build, with some adaptations for the blog.
This website is hosted on DigitalOcean with Nginx. At the moment it’s just a static app, but as soon as react-router supports server rendering I’m going to implement it. I need to set up automatic deployment, probably with git. I don’t build my site on the server. I push the build to the server. When server side rendering is implemented, the way I deploy my code will change and I also have a blog about that in the pipeline.
A custom implementation of a blog, custom css and hosted on a vps. And that for a static site. It’s a bit more work, and you could say it’s not a best practice to do things this way, but it’s a good way to experiment and try new things and that’s exactly what I want to do with this site.
1 This has been fixed in a recent version.
2 I’ve switched to remarkable