Use Clio

Start the site

Pico CSS styles ordinary tags. The model writes the HTML. You type only the sentence that describes the page.

Terminal, before Neovim

mkdir -p ~/my-site/css
cd ~/my-site
cp ~/.clio/share/pico.classless.min.css css/
nvim index.html

If that file is missing, download it once and copy it again:

mkdir -p ~/.clio/share
curl -fsSL -o ~/.clio/share/pico.classless.min.css \
  https://cdn.jsdelivr.net/npm/@picocss/pico@2.1.1/css/pico.classless.min.css
cp ~/.clio/share/pico.classless.min.css css/

Generate the homepage

Neovim

Press ,ga and type:

A personal homepage with my name, a short intro, and a link to about.html.

The editor adds the Pico rules to that sentence. Save with :w, then quit with :q.

Generate the about page

Terminal

nvim about.html

Neovim

Press ,ga and type:

An about page with one paragraph and a link back to index.html.

:w then :q.

Terminal, after you quit

find . -type f | sort
grep pico index.html

You should see css/pico.classless.min.css, index.html, and about.html.

On a phone, preview with python3 -m http.server 8080 and open http://127.0.0.1:8080. Press Ctrl-C when you are done. If python3 is missing: pkg install -y python.

Push to GitHub

Stay in ~/my-site. Neovim must be closed.

Terminal

git init
git add index.html about.html css
git status
git commit -m "Add my first homepage"
gh repo create my-site --public --source=. --remote=origin --push

If the name my-site is taken, pick another and run gh repo create again.

Check: gh repo view prints a URL. The HTML files and css are there.

Deploy over SSH

You need a hostname and username. This page does not create the server.

Terminal, on your device

pkg install -y openssh
ssh-keygen -t ed25519 -C "student-site"
cat ~/.ssh/id_ed25519.pub
ssh USER@HOST

Skip the package install on a computer if ssh-keygen already exists. Press Enter for the file location and an empty passphrase. Send the .pub line to whoever runs the server. Type yes at the first fingerprint prompt. exit returns you to your device.

On the server, with sudo

sudo apt-get update
sudo apt-get install -y nginx
sudo mkdir -p /var/www/my-site
sudo chown "$USER" /var/www/my-site
git clone https://github.com/YOUR_USER/my-site.git /var/www/my-site
sudo tee /etc/nginx/sites-available/my-site >/dev/null << 'EOF'
server {
    listen 80;
    server_name _;
    root /var/www/my-site;
    index index.html;
}
EOF
sudo ln -sf /etc/nginx/sites-available/my-site /etc/nginx/sites-enabled/my-site
sudo rm -f /etc/nginx/sites-enabled/default
sudo nginx -t
sudo systemctl reload nginx

Open http://HOST in a browser.

On the server, without sudo

mkdir -p ~/sites
git clone https://github.com/YOUR_USER/my-site.git ~/sites/my-site
cd ~/sites/my-site
python3 -m http.server 8080

Open http://HOST:8080. This stops when you press Ctrl-C or the SSH session ends.

Publish a change

Terminal, then Neovim

cd ~/my-site
nvim index.html

Edit with i, or select lines and press ,gr. :w then :q.

Terminal, after you quit

git add .
git commit -m "Update the homepage"
git push

On the server

ssh USER@HOST
cd /var/www/my-site
git pull

If you used the home-folder copy, cd ~/sites/my-site before git pull. Reload the browser.

When you forget a command

clio

Ask in a sentence, for example how do I see my git status, then exit. Run Git, gh, and ssh yourself.