Introduction

Creating a personal portfolio is an essential way to showcase your skills, projects, tutorials, and your Linux/Dev aesthetic. This guide will walk you through setting up a portfolio using the Astro Terminal theme and deploying it to Cloudflare Pages. By following these steps, you will have a fully functional, stylish, and fast portfolio.

We will cover:

  • Installing and setting up Astro
  • Adding the Astro Terminal theme
  • Customizing pages, projects, and blog posts
  • Testing locally
  • Deploying to Cloudflare Pages

Prerequisites

Before you begin, ensure you have the following installed:

You will also need a Domain and a GitHub account to push your project and connect it with Cloudflare Pages. Cloudflare has cheap domains listed.

Step 1: Create a New Astro Project

Open your terminal and run the following commands:

# Create a new Astro project using the latest version
npm create astro@latest my-portfolio
cd my-portfolio

# Install project dependencies
npm install

During setup, select the “Minimal” template to start clean. You can also select other templates, but minimal is recommended to easily add the Terminal theme later.

Step 2: Add the Astro Terminal Theme

The Astro Terminal theme replicates a retro terminal aesthetic. To install it:

  1. Go to the Astro Terminal Theme page.
  2. Follow the installation instructions:
# Install the Astro Terminal theme package
npm install astro-theme-terminal

# (Optional) Install peer dependencies if prompted
npm install -D tailwindcss postcss autoprefixer
  1. Add the theme to your project by following the theme’s README, typically involving:
  • Importing BaseLayout from the theme
  • Wrapping your pages with <BaseLayout>
  • Copying theme assets (CSS, fonts) into src/assets
  1. Verify that the theme works by running:
npm run dev

Your site should now look like a terminal interface at http://localhost:3000.

Step 3: Customize Your Portfolio

Homepage

Edit src/pages/index.astro to include:

  • A welcome message
  • Short bio or introduction
  • Links to projects or blog posts

Example snippet:

<BaseLayout title="Home">
  <div class="index-content framed">
    <h1>Hello, I'm Danial!</h1>
    <p>Welcome to my Linux/Dev portfolio. Explore my projects and tutorials below.</p>
  </div>
</BaseLayout>

About Page

Edit src/pages/about.astro to include:

  • Your bio
  • Skills, tools, or tech stack
  • Contact info and social links (GitHub, LinkedIn)

Projects

  1. Create a folder: src/content/projects/
  2. Add Markdown files for each project. Example:
---
title: "Kubernetes TLS Automation"
description: "Automated TLS certificate management in Kubernetes clusters."
pubDate: 2025-11-01
tags: ["kubernetes", "devops", "tls"]
---

Description of the project and links to the GitHub repo or demo.
  1. Display projects on the homepage or a dedicated Projects page using the theme’s PostCard or ProjectCard components.

Blog / Tutorials

  1. Create src/content/blog/
  2. Add Markdown files for your tutorials. Example:
---
title: "Linux Networking Essentials"
description: "A step-by-step guide to basic Linux networking commands and setup."
pubDate: 2025-12-01
tags: ["linux", "networking"]
---

Your tutorial content here.

Step 4: Test Your Portfolio Locally

Run the development server:

npm run dev

Visit http://localhost:3000 to verify:

  • Terminal aesthetic is applied
  • Pages display correctly
  • Projects and blog posts are visible

Step 5: Deploy to Cloudflare Pages

  1. Push your project to GitHub:
git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/YOUR_USERNAME/my-portfolio.git
git push -u origin main
  1. Go to Cloudflare Pages and click “Create a Project”.
  2. Connect your GitHub repository.
  3. Configure the build settings:
Build command: npm run build
Build output directory: dist
  1. Click Deploy, and wait for your portfolio to be live on https://<your-site>.pages.dev.

Step 6: Optional Enhancements

  • Search: Add a search bar for blog posts using FlexSearch or Algolia DocSearch.
  • Analytics: Add Google Analytics or Plausible for tracking.
  • Dark Mode Customization: Tweak Terminal theme colors using Terminal.css generator.
  • CI/CD: Automate deployments with GitHub Actions if needed.

Conclusion

You now have a fully functional portfolio using Astro and the Terminal theme, hosted for free on Cloudflare Pages. This setup:

  • Highlights your projects and tutorials
  • Maintains a Linux/dev aesthetic
  • Is fast, static, and mobile-friendly

Iterate, add content, and personalize your portfolio to make it your own.

For more information on Astro, visit the Astro documentation.
For the Terminal theme, see the Astro Terminal theme page.
For deploying static sites, refer to Cloudflare Pages docs.

Feedback is welcome! I might have missed a step or left out details needed to follow along.