Creating a Terminal-Accessible Website: My Journey and How You Can Do It Too
I recently found myself captivated by a fascinating Instagram reel from @yousuckatprogramming. In the video, he showcased his website, https://ysap.sh, using curl to get a text-based view in the terminal. Intrigued and inspired, I made my website, https://jhhemal.dev, accessible via terminal. Here’s how I did it, with all the steps, struggles, and solutions you can follow.
I already had a personal website built with React and hosted on Vercel. My goal was to create a text-based version of the site that could be viewed using curl in the terminal. Here’s how you can do it too, no matter what platform you’re using.
For Static Websites on Apache or Nginx
If you have a static website running on Apache or Nginx, you can make it accessible via curl with a text-based view without using any JavaScript servers. Here’s a simple step-by-step guide.
1. Create the Text-Based Content
First, create a simple text file (index.txt) with the content you want to display when users access your site using curl.
Welcome to the terminal-based website of John Doe!
=============================================
-- About Me --
Name: John Doe
Profession: Hacker Extraordinaire
Hobbies: Coding, Hacking, Exploring Unix Systems
-- Skills --
Programming Languages: C, Python, Bash
Tools: Nmap, Wireshark, Metasploit, Vim
Operating Systems: Linux, BSD, Unix
-- Projects --
1. Network Intrusion Detection System
2. Automated Security Scanning Scripts
3. Custom Unix-based Operating System
-- Contact --
Email: john.doe@example.com
LinkedIn: https://linkedin.com/in/johndoe
Twitter: https://twitter.com/johndoe
Stay curious. Keep hacking.2. Configure Apache
If you’re using Apache, add a configuration directive to check for curl in the User-Agent and serve the text file.
- Create a .htaccess file in the root directory of your website with the following content:
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} ^curl.* [NC]
RewriteRule ^$ /index.txt [L]- Restart Apache to apply the changes:
sudo service apache2 restart3. Configure Nginx
For Nginx, you need to modify your server configuration to serve the text file for curl requests.
- Edit your Nginx configuration file (usually located at /etc/nginx/sites-available/default or similar):
server {
listen 80;
server_name yourdomain.com;
location / {
if ($http_user_agent ~* "curl") {
alias /path/to/your/index.txt;
}
try_files $uri $uri/ =404;
}
}- Restart Nginx to apply the changes:
sudo service nginx restartFor WordPress
For WordPress, you can use a plugin and some custom code:
1. Install a Plugin
Use a plugin like “Custom Headers” to handle requests based on the User-Agent.
2. Add Custom Code
Add this code to your theme’s functions.php file:
add_action('init', function() {
if (strpos($_SERVER['HTTP_USER_AGENT'], 'curl') !== false) {
header('Content-Type: text/plain');
echo file_get_contents('path/to/your/index.txt');
exit;
}
});For Django
Here’s how to do it in Django:
1. Create a View
Create a Django view that returns a plain text response:
# views.py
from django.http import HttpResponse
import os
def terminal_view(request):
# Path to the index.txt file
file_path = os.path.join(os.path.dirname(__file__), 'index.txt')
# Read the content of the file
with open(file_path, 'r') as file:
content = file.read()
# Return the content as plain text
response = HttpResponse(content, content_type='text/plain')
return response2. Update URLs
Add a URL pattern to direct to your view:
# urls.py
from django.urls import path
from . import views
urlpatterns = [
path('terminal/', views.terminal_view),
# Add other URL patterns here
]3. Handle User-Agent in Middleware
Create middleware to check for curl:
# middleware.py
from django.http import HttpResponse
class TerminalMiddleware:
def __init__(self, get_response):
self.get_response = get_response
def __call__(self, request):
if 'curl' in request.META['HTTP_USER_AGENT']:
return HttpResponse("Your plain text content here", content_type='text/plain')
return self.get_response(request)4. Add Middleware to Settings
Add the middleware to your Django settings:
# settings.py
MIDDLEWARE = [
# ... other middleware ...
'yourapp.middleware.TerminalMiddleware',
# ... other middleware ...
]For Flask
Here’s how to do it in Flask:
- Create a Flask App Create a simple Flask app that returns the content of
index.txtforcurlrequests.
# app.py
from flask import Flask, request, Response
app = Flask(__name__)
@app.route('/')
def home():
if 'curl' in request.headers.get('User-Agent', '').lower():
with open('index.txt', 'r') as file:
content = file.read()
return Response(content, mimetype='text/plain')
return 'Welcome to the website!'
if __name__ == '__main__':
app.run(debug=True)For React (Without My Template)
For a React application, here’s an alternative approach:
- Create a Text File
Create a text file (e.g., terminal.txt) with the content you want to display like the index.txt
2. Create Middleware in Next.js
In your Next.js project, create a middleware.js file in the root directory:
import { NextResponse } from 'next/server';
import fs from 'fs';
import path from 'path';
export function middleware(req) {
const userAgent = req.headers.get('user-agent') || '';
if (userAgent.includes('curl')) {
const textContent = fs.readFileSync(path.join(process.cwd(), 'public', 'terminal.txt'), 'utf-8');
return new Response(textContent, {
headers: { 'Content-Type': 'text/plain' }
});
}
return NextResponse.next();
}3. Deploy Your Application
Deploy your Next.js application on Vercel or your preferred hosting service.
The Struggles and Solutions
Throughout this process, I encountered several challenges. Initially, I struggled with configuring the middleware properly in my Next.js project. The error messages were confusing, and I had to frequently refer to documentation and ask for help. Eventually, I learned to set up the middleware correctly, ensuring the terminal response was formatted as plain text.
I also faced issues with deploying the server on Vercel. The configuration settings needed to be adjusted multiple times to handle curl requests properly. But with persistence and a lot of trial and error, I finally got it working.
By following these steps, I successfully transformed my website into a terminal-accessible platform. Inspired by @yousuckatprogramming, I embarked on this journey, learned a lot, and now have a unique and retro way to showcase my website. Check it out yourself by running:
curl https://jhhemal.devWhether you’re using a static site, WordPress, Django, or React, you can achieve the same effect. Give it a try, and add a touch of the 90s hacker-movie vibe to your website!
