michalvankodev/michalvankodev-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

spell check

Browse Source
This commit is contained in:
Michal Vanko 2020-02-28 17:20:24 +01:00
parent 1c28ad0682
commit b4615f8219
1 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
_posts/blog/2020-02-18-how-ive-built-my-web-site.md
View File

@ -13,11 +13,11 @@ tags:
## Motivation ## Motivation
Creating my own website with blog was something I had in my mind from start of my profesional career after I left school. Creating my own website with blog was something I had in my mind from start of my professional career after I left school.
I had a lot of new experience with development which I wanted to elaborate on and save into a small library so I can take a look back on my thoughts how they evolve over time. I had a lot of new experience with development which I wanted to elaborate on and save into a small library so I can take a look back on my thoughts how they evolve over time.
This was like 6 years ago. I had a successful first attempt at doing so. I created a wordpress with the simplest theme I've found and wrote some articles. I've published it under a domain of one of the first startups I've been part of. I still have a backup of the _Wordpress_ database somewhere so I can export those articles here when I will feel like doing so. The blog haven't lived for long as the domain once expired and I was not satisfied with it enough to deploy it somewhere else. This was like 6 years ago. I had a successful first attempt at doing so. I created a WordPress with the simplest theme I've found and wrote some articles. I've published it under a domain of one of the first startups I've been part of. I still have a backup of the _Wordpress_ database somewhere so I can export those articles here when I will feel like doing so. The blog haven't lived for long as the domain once expired and I was not satisfied with it enough to deploy it somewhere else.
For all those years I was trying to create it in my spare time (of which wasn't that much appereantly). There were several attempts. One with _Angular_ when it was "the cool kid on the block". Another one with _cycle.js_ which was not that far from being done. I regret it now as it would be really satisfying to finish that one. I had created neat <abbr title="Server side rendering">SSR</abbr> layer which was not really difficult to accomplish with _cycle.js_ as it is reactive and it only required skipping first client render of _virtual-dom_ after page load. I'm still in love with _cycle.js_ but after _sapper_ was released I've found out of its ability to create a nice **static site** I wanted to try it out. I think that the approach of **compiling the source code** as classic client applications have been doing for many years makes a lot of sense on the internet as well. This is the one thing I'd really like to be able to accomplish with reactive frameworks like _cycle.js_. For all those years I was trying to create it in my spare time (of which wasn't that much apparently). There were several attempts. One with _Angular_ when it was "the cool kid on the block". Another one with _cycle.js_ which was not that far from being done. I regret it now as it would be really satisfying to finish that one. I had created neat <abbr title="Server side rendering">SSR</abbr> layer which was not really difficult to accomplish with _cycle.js_ as it is reactive and it only required skipping first client render of _virtual-dom_ after page load. I'm still in love with _cycle.js_ but after _sapper_ was released I've found out of its ability to create a nice **static site** I wanted to try it out. I think that the approach of **compiling the source code** as classic client applications have been doing for many years makes a lot of sense on the internet as well. This is the one thing I'd really like to be able to accomplish with reactive frameworks like _cycle.js_.
## How I got my domain ## How I got my domain
@ -29,7 +29,7 @@ The **michalvanko.dev** domain celebrates 1 year with the release of this blog p
So I had a domain with no content published on it for few months. But I knew that I'd use it at least for my **portfolio** page. I was not rushing myself into building it right away. But the time came when had to do it as I wanted to change my employment as I was not satisfied with the one at that time. So I had a domain with no content published on it for few months. But I knew that I'd use it at least for my **portfolio** page. I was not rushing myself into building it right away. But the time came when had to do it as I wanted to change my employment as I was not satisfied with the one at that time.
While I was choosing technology stack I was making a decision between static site generators as I wanted to make it as less resource dependant as possible. This lead me to the _sapper_ framework as it supports building (exporting) static assets with **efficiency**. At first I've wrote the portfolio just in _HTML_ without need of any <abbr title="Content management system">CMS</abbr>. I wanted to build it really fast and deploy it with some automated pipeline just like <abbr title="Javascript, APIs, Markup">JAM</abbr> apps should be. While I was choosing technology stack I was making a decision between static site generators as I wanted to make it as less resource dependent as possible. This lead me to the _sapper_ framework as it supports building (exporting) static assets with **efficiency**. At first I've wrote the portfolio just in _HTML_ without need of any <abbr title="Content management system">CMS</abbr>. I wanted to build it really fast and deploy it with some automated pipeline just like <abbr title="Javascript, APIs, Markup">JAM</abbr> applications should be.
I've chosen to deploy it on _Amazon's S3_ as I have some experience with it and I knew that it won't cost me anything. I had a 1 year free tier still available for my account even that it was 6 years old as I haven't set up any payments yet. _Amazon_ made this neat tool called [_amplify_](https://aws.amazon.com/amplify/) which suits very well for my needs. It supports **git based deployment** so I can setup my site to build whenever I create or edit any article and it will be published right away with purged cache. I just had to setup configuration of build step with _sapper_ so the exported site is correctly uploaded to _S3_ and that was it. I've chosen to deploy it on _Amazon's S3_ as I have some experience with it and I knew that it won't cost me anything. I had a 1 year free tier still available for my account even that it was 6 years old as I haven't set up any payments yet. _Amazon_ made this neat tool called [_amplify_](https://aws.amazon.com/amplify/) which suits very well for my needs. It supports **git based deployment** so I can setup my site to build whenever I create or edit any article and it will be published right away with purged cache. I just had to setup configuration of build step with _sapper_ so the exported site is correctly uploaded to _S3_ and that was it.
@ -55,14 +55,14 @@ frontend:
- node_modules/**/* - node_modules/**/*
``` ```
Mapping _amplified_ app to my domain was easy as well. I didn't even needed to leave _amplify_ console. They've built the setup of the domain right into it so I just had to copy the settings for verification into my domain name registrator and in few minutes it was all synced and done. Mapping _amplified_ app to my domain was easy as well. I didn't even needed to leave _amplify_ console. They've built the setup of the domain right into it so I just had to copy the settings for verification into my domain name registrar and in few minutes it was all synced and done.
## Development experience ## Development experience
So when I had deployed a basic portfolio site I was able to find a new job with completely different terms which made me happier as I am much more independant. I've started to build the blog with the features that _sapper_ offers. I was doing some research around some <abbr title="Content management system">CMS</abbr> systems and tried some of them out. One that deserves the mention is [_strapi_](https://strapi.io/). It was really cool as I could create models for anything and if I was building an application which was not static I'd use it. Now I can only recommend you to look at it. I was looking for something like it for 5 years and it finally looks like there are now more options. While I am writing this article I have to mention [_Keystone.js_](https://www.keystonejs.com/) as one of those libraries that I was looking at 5 years ago and it looked promising but just wasn't 100% compatible with my requirements. At the end I just grabbed the most simple tool I've found and that is [_Netlify CMS_](https://www.netlifycms.org/). I was sceptic about it as one colleague had some experience with it and he was not enjoying it. But when I've tried it out and set it up for my needs it just met all of the requirements I have and it integrates with the deploy pipeline very well. So when I had deployed a basic portfolio site I was able to find a new job with completely different terms which made me happier as I am much more independent. I've started to build the blog with the features that _sapper_ offers. I was doing some research around some <abbr title="Content management system">CMS</abbr> systems and tried some of them out. One that deserves the mention is [_strapi_](https://strapi.io/). It was really cool as I could create models for anything and if I was building an application which was not static I'd use it. Now I can only recommend you to look at it. I was looking for something like it for 5 years and it finally looks like there are now more options. While I am writing this article I have to mention [_Keystone.js_](https://www.keystonejs.com/) as one of those libraries that I was looking at 5 years ago and it looked promising but just wasn't 100% compatible with my requirements. At the end I just grabbed the most simple tool I've found and that is [_Netlify CMS_](https://www.netlifycms.org/). I was skeptic about it as one colleague had some experience with it and he was not enjoying it. But when I've tried it out and set it up for my needs it just met all of the requirements I have and it integrates with the deploy pipeline very well.
I've created some articles for development with [Lorem Markdownum](https://jaspervdj.be/lorem-markdownum/) so I can debug styles for every type of content without hassle. I've created some articles for development with [Lorem Markdownum](https://jaspervdj.be/lorem-markdownum/) so I can debug styles for every type of content without hassle.
Then I had to finally meet the power of the _sapper_ framework. I had to adapt my thoughts (find better word) about how to create an <abbr title="Application Programmer Interface">API</abbr> so it can be exported into static assets. One thing that makes me mad about it to this day is [_Typescript_](https://www.typescriptlang.org/) support. As I was writing back-end there was no help for node <abbr title="Application Programmer Interface">API</abbr> which I got so used to from my other projects I work on. I've definitely lost some unnecessery minutes debugging why some variables are not something I thought they should be. Then I had to finally meet the power of the _sapper_ framework. I had to adapt my thoughts (find better word) about how to create an <abbr title="Application Programmer Interface">API</abbr> so it can be exported into static assets. One thing that makes me mad about it to this day is [_Typescript_](https://www.typescriptlang.org/) support. As I was writing back-end there was no help for node <abbr title="Application Programmer Interface">API</abbr> which I got so used to from my other projects I work on. I've definitely lost some unnecessary minutes debugging why some variables are not something I thought they should be.
I also had some trouble with finding library for parsing article content. I was looking at the [_netlify-gatsby_ starter template](https://github.com/netlify-templates/gatsby-starter-netlify-cms) and the name for the package is just not clearly searchable on the internet. At least I was struggling with it because search results for markdown parsing didn't contain or support anything for files of the type that _netlify CMS_ produces. But after some searching I found the library as [_front-matter_](https://github.com/jxson/front-matter). It turned out that I didn't know what I was searching for. When you read the documentation of it then it will make sense to you why you couldn't find it out. I needed an _YAML_ parser. After that when I got the files parsed I just parsed markdown body with the with the most popular [markdown parser _marked_](https://marked.js.org) which has really nice options. I also had some trouble with finding library for parsing article content. I was looking at the [_netlify-gatsby_ starter template](https://github.com/netlify-templates/gatsby-starter-netlify-cms) and the name for the package is just not clearly searchable on the internet. At least I was struggling with it because search results for markdown parsing didn't contain or support anything for files of the type that _netlify CMS_ produces. But after some searching I found the library as [_front-matter_](https://github.com/jxson/front-matter). It turned out that I didn't know what I was searching for. When you read the documentation of it then it will make sense to you why you couldn't find it out. I needed an _YAML_ parser. After that when I got the files parsed I just parsed markdown body with the with the most popular [markdown parser _marked_](https://marked.js.org) which has really nice options.
@ -70,8 +70,8 @@ I also had some trouble with finding library for parsing article content. I was
I didn't have any experience with [_Netlify CMS_](https://www.netlifycms.org/). Setup was very straight forward. I didn't have any experience with [_Netlify CMS_](https://www.netlifycms.org/). Setup was very straight forward.
1. Create a static _HTML_ page with one scipt tag. 1. Create a static _HTML_ page with one script tag.
2. Setup _YAML_ config file with git repository mapping, models and input types. 2. Setup _YAML_ configuration file with git repository mapping, models and input types.
That's it. Sometimes I've changed some properties in my models, but I haven't struggled with it. That's it. Sometimes I've changed some properties in my models, but I haven't struggled with it.