Project Information

Subject	Description
Subject	Build a Personal Website from Scratch, Deeply Understand the Cybersecurity Behind a Website, DNS, Self-hosting, and Cryptography.
Device requirement	Computer/Laptop (linux, macOS, or something that supports booting from external disk drives)
Author	Iceless Usr

Introduction

Personal Website

There are several ways to self-introduce, for instances, when you back to school, you may be forced to self-introduce in front of your new classmates; Or, you completes the bio on your Instagram profile; Maybe, you also do your bio.site or linktr.ee. But all these ways are limited, like self-introducing in front of your classmates, you didn't prepare a presentation (and why?), you have no idea what to say, right? Or maybe you use bio sites, but the style is limited by the site itself.

To introduce myself on the Internet, with images, icons, paragraphs, animations and interactions, including posting system (something like blog), simple web applications, contacts, control panels, etc. What I can do is to deeply learn how to build a fully functional website from ZERO.

And of course, it's not something like just programming a HTML (Hypertext Markdown Language) from a notepad, or something that could have security panics, something that only works for yourself. It's gonna be a high-performance, fully self-hosted, security-cared, and multi user web application.

Version Controlling

To host a Git server, for my friends and me to share projects, control versions, merge codes, or team-working in a trusted space.

Cloud Drive and HTTP File Server

To host a personal cloud drive, with some simple office apps on the web, to share some files.

Tools/Utilities

Purpose	Name	Highlights
Operating System	ArchLinux	Open-source, lightweight, large community, easy to use
Container Management	Docker	Open-source, large community
Code Editor	Zed	Open-source, lightweight, good performance
Version Control	Git	Open-source, fully tested, universal
Package Manager	Bun	Open-source, fresh, good performance
Flow Diagram	Draw.io	Open-source, fully tested, universal
Web UI/UX Design	Figma	Open-source, large community, full-featured
Web Browsing/Previewing/Debuging	Firefox	Open-source, universal, large community, full-featured, good performance
Planning	Obsidian	Open-source, universal, large community, full-featured
Presentation and Documents	LibreOffice	Open-source, universal, large community, full-featured

Libraries/Technologies

Name	Purpose	Features
Hono	HTTP API endpoint	Fast, lightweight, built on Web Standards. Support for any JavaScript runtime.
Zod	HTTP API validator	TypeScript-first schema validation with static type inference
YAML	Server-side configuration files	A definitive library for YAML, the human friendly data serialization standard.
React	Client-side virtual DOM and eco-system	The library for web and native user interfaces
React-Markdown	Client-side rich markdown renderer	A React component that can be given a string of markdown that it’ll safely render to React elements. You can pass plugins to change how markdown is transformed and pass components that will be used instead of normal HTML elements.
Tailwind CSS	Client-side compiled CSS for HTML ready	A utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.
TypeScript	Type-safe trans-compiler for JavaScript	A strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.
Drizzle	Server-side ORM (object relational mapping) for PostgreSQL and TypeScript	A lightweight and performant TypeScript ORM with developer experience in mind.
PostgreSQL		A powerful, open source object-relational database system with over 35 years of active development that has earned it a strong reputation for reliability, feature robustness, and performance.
Forgejo		A self-hosted lightweight software forge. Easy to install and low maintenance, it just does the job.
NextCloud		A modern, on-premises content collaboration platform with real-time document editing, video chat & groupware on mobile, desktop and web.
HFS 3		A web file server for your computer. Share folders or even a single file thanks to the virtual file system.
Cloudflare		A global technology company that provides web security, speed optimization, and infrastructure services to make internet properties faster and safer.
PufferPanel		An open source game server management panel designed to be easy to use and easy to install.
Caddy

Roadmap

A. Cybersecurity and Cryptography

Hashing

Before we put users' passwords into database, the best approach to protect sensitive information, is to hash the password.

There are some common algorithms to hash passwords:

• Argon2
• bcrypt

Here I'd choose the Argon2 way, because of the main features it has:

• Memory Hardness: Argon2 requires a substantial amount of memory to process data, making it resistant to attacks using powerful hardware (e.g. GPUs and ASICs).
• Parallelism: Designed for scalability, Argon2 can leverage multiple CPU cores to speed processing without compromising security.
• Use of Salts: To mitigate rainbow table attacks, Argon2 employs a cryptographic salt (random data) with every password hash, ensuring unique outcomes even for identical inputs.

Hashing password is to convert any-sized input data into a unique, fixed-length string of characters and numbers using a mathematical formula.

When we're checking whether the password to validate is the correct password, we do the same thing to the password user submits to try, so we got two hashed passwords, then check whether they're same, that's how the most applications check our password, and one of the reasons why companies ask you to set a new one instead of telling you the correct one when you forget your password.

Asymmetric Encryption

Asymmetric encryption is an encryption method that uses two different keys—a public key and a private key—to encrypt and decrypt data. It’s generally regarded as more secure, though less efficient, than symmetric encryption.

SSL (Secure Sockets Layer) and TLS (Transport Layer Security)

Authentication v.s Authorization

Authentication verifies who you are, while authorization determines what you are allowed to do.

• Authentication (Who you are): Confirms your identity using credentials like a password, PIN, or fingerprint. It always happens first.

• Authorization (What you can do): Decides if your verified identity has permission to access a specific resource or action. It always happens after authentication.

HTTPS (Hypertext Transfer Protocol Secure)

So first we need to know what HTTP (Hypertext Transfer Protocol) is: HTTP sends data in plain text, so the risk is that anyone on the same network (e.g. public Wi-Fi) can intercept and read your passwords or messages, so best only for some services that promised to serve public assets, or static webpages.

While HTTP communicates in plain text, HTTPS (Hypertext Transfer Protocol Secure) adds an SSL/TLS certificate to scramble your data, so for applications that you logs in, you store sensitive data (e.g. banking, shopping).

Cookie

AES-GCM

B. Hosting

Linux

Linux is a kernel, while Windows uses NT (New Technology) and macOS uses darwin (which bases on xnu bsd).

It's now widely used for hosting servers, super-computing, or security-researching, etc. In this case to host a server with a few services for personal usage, the best choice of course is to use Linux (and why not?).

So I chose the one I know the best, ArchLinux, a simple, lightweight distribution, which provides a clean, and powerful environment to build things, with no unused packages or applications (e.g. desktop environment, GUI applications)

Containerization

Docker

Package Managers

C. Networking

DNS (Domain Name System)

Cloudflare

Reverse Proxy

Caddy

D. Frontend

Responsive Website

UI/UX Design

Virtual DOM (Virtual Document Object Model)

React

Color P3

The reason why Color P3 is mentioned here is that Tailwind CSS declares their color only and in format of DCI-P3.

DCI-P3 (also known as Color P3) is an RGB color space defined in 2005 as part of the Digital Cinema Initiative, for use in theatrical digital motion picture distribution[1] DCDM(https://en.wikipedia.org/wiki/DCI-P3#cite_note-2). Display P3 is a variant developed by Apple Inc. for wide-gamut displays.

E. Backend

API (Application Programming Interface)

Hono

Database

PostgreSQL

References

• Understanding P3 Color Profile: A Comprehensive Guide to Color Management
• How To Create Apple's Iconic 'Hello" Animation Without After Effects | Tutorial
• DB fundamentals with Hono, Drizzle, and Postgres - Bun, TypeScript, Testing, Docker
• Production Grade Authentication with Hono & Better Auth - Mailgun, Postgres, TypeScript, Bun, Zod
• What is asymmetric encryption?

Goal