README.md


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# Karan's Homepage

Everyone should have a website. [Here is mine](https://karanj.com). I created this website for two reasons:

- Provide first hand information about myself on the internet
- Reserve a URL for myself from where I can share [my work](https://gitlab.com/KaranJayachandra)

A website is just a folder that is shared on the web. The standard way of storing content in this folder is via HTML (Hypertext Markup Language). This allows for a bit of [markup](https://en.wikipedia.org/wiki/Markup_language) and linking to other documents. Standard HTML looks good as you can see on the [first ever website](https://info.cern.ch/hypertext/WWW/TheProject.html) but a bit of CSS (Cascading Style Sheets) goes a long way to make a website look much better. The third piece of the puzzle for web development is JavaScript. This allows for dynamic behaviour and user interaction. For this website however, I just wanted to display some static content. So I decided to ignore JavaScript for now. So I needed to create HTML and CSS files and serve / provide them to other via the web.

Another reason I wanted to do this project was because setting up this website was the first **production** project that I did and I wanted to be able to explain how each piece in the project works. Now I explain exactly why things are placed at a certain location or look a certain way on my website.

## HTML: Content

Writing HTML by hand is not hard. HTML itself has some basic [tags](https://www.w3schools.com/tags/). When these tags sprinkled over a text document and the documented is stored with the `.html` extension, a browser should be able to open and render it. A lot of the tags especially the ones used for meta data are quite repetitive though. Also, tags for search engine optimization (SEO) need to be dynamically chosen based on content. This is crucial for getting your content featured on your favourite search engine. Thankfully, some really smart developers have created tools we can use to automatically generate HTML using  Markdown files. This document is a Markdown files. Markdown is significantly easier to write and doesn't require us to memorize much. Static site generators then convert these documents to HTML files for us. I initially used [Jekyll](https://jekyllrb.com/). Jekyll is a static site generator built using the programming language Ruby. But I got tired of having to have Ruby installed and maintained on my machine just for this application. I then came across [hugo](https://gohugo.io). Hugo is just a simple application that you can plop into your path and with some [basic setup](https://gohugo.io/getting-started/quick-start/), you have a website.

## CSS: Styling

For quite some time, CSS had been my least favourite amongst HTML, JS and CSS. I had always delegated the styling of web pages to others. Design mattered less than functionality. This opinion was **wrong**. Hugo comes with several [themes](https://themes.gohugo.io) you could choose from. I wanted something [simple and clean](https://deadsimplesites.com/). I initially used [hugo-bearblog](https://janraasch.github.io/hugo-bearblog/) blog theme inspired by [Herman](https://herman.bearblog.dev). It looks good but it felt a bit off, it was not **perfect** for me. Whenever I came across another site using this theme, I felt that my website was a bit disingenuous to myself. When looking at [Hacker News](https://news.ycombinator.com), I came across [Neat](https://neat.joeldare.com), a minimalist CSS framework. It make a website look great with just over 150 lines of CSS. This inspired me to attempt creating a simplistic style sheet of [my own](https://gitlab.com/KaranJayachandra/karanjayachandra.gitlab.io/-/blob/main/static/main.css?ref_type=heads). The whole of it ended up being less that 100 lines in a 2 kB CSS file. It is created for text heavy websites focusing on legibility and simplicity. I have also styled this blog using the same CSS. I learnt quite a lot doing this and have a new found respect for front-end work. Please feel free to reuse the CSS if you need, you can change the color to your preference using the `hue` and `saturation` variables.

## Deployment

Any text content that is repeatedly edited is source controlled on my machines. This includes this website because I need to change the content based on changes in my life. I use git and store my files on GitLab. GitLab also offers a free functionality to host websites for each of your repositories via GitLab pages. It also offers free server resources to convert your markdown files to HTML via the static site generator discussed earlier. This is accomplished via [pipelines](https://docs.gitlab.com/ci/pipelines/). Pipelines allow you to run commands on a machine temporarily available to you on change to the git repository automatically. This allows me to make changes to the markdown documents and push these changes to GitLab. The pipeline automatically converts these files into HTML and hosts them on a website owned by GitLab. I didn't want to stop here though because the site that gitlab provides is "karanjayachandra.gitlab.io" but I wanted my own. So I bought the domain "karanj.com" and [connected](https://docs.gitlab.com/user/project/pages/custom_domains_ssl_tls_certification/) it to my page. A by product of buying this domain was that I also got a [nice email address](https://support.apple.com/en-us/102540).

## References

- [Dead Simple Sites](https://deadsimplesites.com/)
- [Raj Thilak Rajan's Homepage](https://www.rtrajan.com/)
- [Luke Smith - Get a Website Now! Don't be a Web Peasant!](https://www.youtube.com/watch?v=bdKZVIGRAKQ) (I don't endorse any of the views here)