How I coded my website, using WSL, Fedora, Neovim, tmux, avante.nvim, Next.js and more.

Getting more technical in this one, following the previous blog post, I decided to vibe code my website. To witness to myself, how simple is it to create a simple personal website with Next.js and Tailwind from scratch?

For almost 4 years now, I am an Arch Linux user. I used to write code using my old laptop, but since I got a new one, I wanted to use it.

Since I am also interested in music production, in order to use my favorite DAW(Ableton) I needed Windows. Furthermore, my interest in audio signal processing made me use the JUCE framework for building VST plugins etc., and I found a better combatibility through Windows after all, even though Linux integration is straightforward these days.

I didn't want to dual boot my laptop this time, neither to use a VM. I said then, let's try WSL. How it performs after all?

I was really surprised by WSL2. Indeed it's fast. I can use now my Arch Linux workflow into Windows, just by running WSL.

I installed a Fedora distribution. Then I used my .dotfiles in order to bring my Linux workflow into Windows Powershell.

I vibe coded my blog using avante.nvim and Claude 3.7. Preferred Next.js for SEO, and Tailwind because it's awesome. The standard for styling.

First of all, I installed WSL through Powershell I installed Fedora 42 this time. While in Powershell.

wsl.exe --install FedoraLinux-42

After installation and setting password for my new OS, while in bash shell, I navigated into the root of my linux file system

cd ~

and then I started by adding some essential software i.e. Neovim

sudo dnf install git curl gcc make ninja-build cmake gettext
sudo dnf update
sudo dnf install neovim

Then I proceeded by setting up git

git config --global user.name "Angelos Bousis"
git config --global user.email "*****"

Communication is being done through SSH with GitHub, so I created an SSH key

ssh-keygen -t ed25519

and appended it into my GitHub settings.

Proceeded then by cloning my .dotfiles

git clone git@github.com:abousis/.dotfiles.git

I use zsh in general, so I install zsh, and ohmyzsh to make my terminal more fancy

sudo dnf install zsh
sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

I used my .zshrc file, and I had to install some Rust crates in order to use my aliases

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
cargo install ripgrep
cargo install git-delta
cargo install lsd
cargo install bat

and the absolute Golang tool fzf for fuzzy searching

sudo dnf install fzf

I also to install tmux for terminal multiplexing

sudo dnf install tmux

I really like tmux because I can define windows per session, and each window can represent a different thing. For example I might need a window for my server, another for Neovim editor, another for opencode, another for another TUI app, etc. etc.

I had then to configure properly my Neovim editor. I use vim-plug for Neovim plugins. Furthermore, through Mason, I installed LSPs, formatters, linters etc.

Then I proceeded by using T3 stack. I didn't need everything. tRPC, NextAuth, Prisma etc. were not needed for my simple case. I just used T3 stack, because I like how they have combined everything, and how easy they made it to build a full-stack type-safe Next.js app.

npm create t3-app@latest

Then I proceeded by connecting my local git repo with GitHub, communicating with the previously created SSH key.

git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin git@github.com:abousis/*****.git
git push -u origin main

In order to make avante.nvim to work, I had to install the following

sudo dnf install openssl-devel pkg-config
sudo dnf install perl

then go inside the plugin's folder and build it

cd ~/.local/share/nvim/plugged/avante.nvim
make

I opened avante, added the ANTHROPIC_API_KEY, after registration with Anthropic and started using it. By prompting, and changing things a bit, fixing some TypeScript errors, I created this website.

I furthermore used next-themes for dark mode and react-markdown for writing my blog posts, as I want to incorporate code, graphics and math equations in future.

My key takeaways are the following:

1. WSL2 feels like a game changer. If you don't want like me, to switch OS on boot, or use VM, this is the optimal way in my opinion.
2. Terminal User Interfaces are here to stay. Having a mouseless workflow nowadays makes even more sense due to AI.
3. The fact that simple things can be done by prompting doesn't mean that we are doomed. We have to leverage carefully AI, understand the associated costs from financial perspective mostly, and in my opinion, it's a great opportunity to dive into more complex concepts in software engineering, implement ideas that were much harder to be implemented before.
4. Engineering is not coding. It never was. It was always about designing systems and solving problems or at least approximating them.