·

Long Luong · 4 min read · Technology

Exploring My Tech Stack on This Website

Technical notes on what's in the 3rd version of my blog.

Technical notes on what's in the 3rd version of my blog.

About the version 3

I have been learning programming since I was 12 years old. Then, in 2020, I created my first blog using Divi Theme Builder on WordPress. I still have the lifetime licence of the Divi Builder 😂.

Then, around 2023, when my Bluehost expired, I started my version 2 website using Gatsby. It was fast, open-source and based on React, which is a technology backed by Facebook.

Late 2024, I successfully register the domain longluong.com, so I decided to revisit my website. This time, Astro was the state of the art, so I migrate to Astro.

What’s special in this v3 blog?

Fast, responsive and beautiful

It’s fascinating how modern framework can help us build fast, responsive and lightweight website in a very short time. I opt for static site generator approach, since most of the content on my site is static, and I’m the only author. The result is a fast website that can be hosted for free on Netlify.

Easy to create content

I use Markdown to write content, the same as my daily note in Obsidian. This current blog allow me to set up the site once, then only focus on writing in Markdown. In my daily research, I note a lot, and it’s easy for me to publish those notes on this website. So stay stun for upcoming contents. You can have a look more at [[markdown-website-content-with-obsidian]]

Can display all type of contents I need

I will document some code snippet that I find useful during my upcoming PhD, so I really need the ability to store and display code blocks. Let’s look at some example.

Python is my main programming language, so this is the first thing came to my mind.1

# This code print out the string
print('Hello, welcome to my blog!')

Then, an economist needs STATA for his regressions.

reg x y, vce(cluster a)

The code can also be displayed with line numbers and highlighted lines. Here is an example:

astro.config.ts
const prettyCodeOptions = {
theme: 'solarized-dark',
onVisitLine(node) {
if (node.children.length === 0) {
node.children = [
{
type: 'text',
value: ' ',
},
];
}
},
onVisitHighlightedLine(node) {
if (!node.properties.className) {
node.properties.className = [];
}
node.properties.className.push('highlighted');
},
onVisitHighlightedWord(node) {
if (!node.properties.className) {
node.properties.className = [];
}
node.properties.className.push('word');
},
tokensMap: {},
};

I play piano and guitar in my free time because I loveee music! Of course, I have to include Chopin in this first blog post.

I own a Fujifilm XT-2 camera and I love taking photos. Here is a photo I took in Hong Kong. A good nap! You can find more photos on my Gallery page.

A Good Nap

Writing equations is a must for a scholar in Finance, right? I use, which is easy to type and display beautifully, whether it’s a simple (but important) equation likeor an inverse document frequency (tf.idf) formula:

Note title

Highlights information that users should take into account, even when skimming.

Abstract

Highlights information that users should take into account, even when skimming.

Todo

I have to do this

This is a tip

Optional information to help a user be more successful.

This is important

Crucial information necessary for users to succeed.

This is bug

Critical content demanding immediate user attention due to potential risks.

This is caution

Negative potential consequences of an action.

Note title

Highlights information that users should take into account, even when skimming.

This is a tip

Nested Tip inside Note

This is a citation A reference to a source that supports the content.

That’s it. I will share with you more in the next posts. Stay tuned!

Footnotes

  1. Actually, Python is not the first programming language that I learned. It was Pascal, then a little PHP.

Back to Blog

Related Posts

View All Posts »