Finally, I've my own self hosted blog!

Finally, I’ve my own self hosted blog! I’ve been wanting to do this for so long, but never really got the time. Plus, setting up your own website, and working through hosting and dns solutions, takes a bit of experimentation and therefore, time. I should probably write a post series on how to get your own blog up and running, what are the different options and tradeoffs to consider, etc.

For me, some of the pros of having a blog are:

  • self documentation
  • resource for others
  • portfolio
  • enables increment progress and can become habitual
  • self learning and constant growth

Now that I’ve the intro out of the way, I’m looking forward to some of the tools I’ll need to express my thoughts e.g. tables, code snippets (with syntax highlighting), images, tags, etc.

So let’s test some of these now. For experimentation, I’ve copied stuff from here.

Quotes and references

That is what it is to be human. To make yourself more than you are.1

Inline style

strong, emphasis, strong and emphasis,code, underline, strikethrough, :joy:🤣, ==highlight==, Link

Images

Tables

Left-Aligned Center Aligned Right Aligned
col 3 is some wordy text $1600
col 2 is centered $12
zebra stripes are neat $1

Lists

  • Unordered list item 1.
  • Unordered list item 2.
  1. ordered list item 1.
  2. ordered list item 2.
    • sub-unordered list item 1.
    • sub-unordered list item 2.
      • something is DONE.
      • something is NOT DONE.

Code with syntax highlighting

1
2
3
4
5
var num1, num2, sum
num1 = prompt("Enter first number")
num2 = prompt("Enter second number")
sum = parseInt(num1) + parseInt(num2) // "+" means "add"
alert("Sum = " + sum)  // "+" means combine into a string

Can also highlight specific lines like below:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
#include <iostream>

void foo(int x, char y, double z) {
    std::cout << x << y << z << endl;
}

int inc(int x) {
    return x + 1;
}

int main() {
    foo();
    std::cout << "about to call the inc function" << endl;
    std::cout << inc(12) << endl;
    foo();
    return 0;
}

Math

This can get tricky in Markdown. Read this stackoverflow answer. Or use the latex code inside a div block because markdown will inline div code into the output html as far as I can tell.

Examples:

When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are \[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]

\[e = 2 + \cfrac{1}{ 1 + \cfrac{1}{ 2 + \cfrac{2}{ 3 + \cfrac{3}{ 4 + \cfrac{4}{\ldots} }}}} \]

\[ \boxed{ \int\limits_{-\infty}^{\infty} e^{-x^2} \, dx = \sqrt{\pi} } \]

For SI units, read this.

For symbols in general, read this, including the “Great big list” link at the bottom.

Visualizations

See chartjs. Similar to latex code above, use div blocks to inline chartjs code.

Raw HTML

Raw HTML can be entered as follows using the rawhtml shortcode in this site:

See Markdown/HTML source for above. I’ve also realized that things work the same without the rawhtml shortcode.


  1. From https://en.wikiquote.org/wiki/Jean-Luc_Picard ↩︎