Blog

man giving a memory stick to a woman
Photo by Photo By: Kaboompics.com on Pexels.com

A Complete Idiot’s Guide to Building a Free File-Sharing Website

By way of full disclosure, I have worked with a couple AIs to develop this guide. As with many technical tasks, your mileage may vary. In other words, I can’t guarantee anything about how well this will work when you are driving the build. My hope is that you will be blindingly successful. Having performed the requisite CYA (Cover Your A55) tasks, I wish you godspeed.

Introduction

This guide will walk you through creating a simple website for sharing downloadable PDFs and other files using free and open-source tools. No prior coding experience is required!

Table of Contents

  1. Choosing Your Platform
  2. Setting Up GitHub Pages
  3. Creating Your Website Structure
  4. Adding Your Files
  5. Styling Your Website
  6. Testing and Going Live
  7. Alternative Options
  8. Maintenance and Updates
  9. Troubleshooting

Choosing Your Platform

For a free, reliable file-sharing website, we’ll use GitHub Pages. It’s completely free, doesn’t require server management, and works well for file sharing (with some size limitations).

Why GitHub Pages?

  • Completely free with no hosting costs
  • No server maintenance required
  • Built-in version control
  • Custom domain support (optional)
  • Reasonable file size limits (100MB per file, 1GB repository limit)

Setting Up GitHub Pages

Step 1: Create a GitHub Account

  1. Go to GitHub.com
  2. Click “Sign up” and follow the registration process
  3. Verify your email address when prompted

Step 2: Create a New Repository

  1. After logging in, click the “+” icon in the upper right corner
  2. Select “New repository”
  3. Name your repository: yourusername.github.io (replace “yourusername” with your actual GitHub username)
  4. Make sure it’s set to “Public”
  5. Check the box for “Add a README file”
  6. Click “Create repository”

Step 3: Enable GitHub Pages

  1. Go to your new repository
  2. Click on “Settings” (tab near the top right)
  3. Scroll down to “Pages” in the left sidebar
  4. Under “Source”, select “Deploy from a branch”
  5. Select the “main” branch and “/ (root)” folder
  6. Click “Save”
  7. Wait a few minutes for GitHub to set up your site

Your site will now be accessible at https://yourusername.github.io

Creating Your Website Structure

Step 1: Understanding the Basic Structure

Your website will need these basic files:

  • index.html (homepage)
  • styles.css (for styling)
  • /files (folder for your downloadable content)

Step 2: Create the Homepage

  1. In your repository, click “Add file” > “Create new file”
  2. Name it index.html
  3. Copy and paste this basic HTML template:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My File Sharing Site</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>My File Sharing Site</h1>
        <p>A collection of downloadable resources</p>
    </header>
    
    <main>
        <section class="file-list">
            <h2>Available Files</h2>
            <ul>
                <!-- File links will go here -->
            </ul>
        </section>
    </main>
    
    <footer>
        <p>Created with GitHub Pages</p>
    </footer>
</body>
</html>
  1. Click “Commit new file” at the bottom

Step 3: Create a CSS File

  1. Click “Add file” > “Create new file” again
  2. Name it styles.css
  3. Copy and paste this basic CSS:
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

header {
    text-align: center;
    margin-bottom: 40px;
    padding: 20px;
    background-color: #f5f5f5;
    border-radius: 5px;
}

h1 {
    margin-bottom: 10px;
    color: #2c3e50;
}

h2 {
    margin-bottom: 20px;
    color: #2c3e50;
}

.file-list {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.file-item {
    margin-bottom: 15px;
    padding: 15px;
    background-color: #f9f9f9;
    border-radius: 5px;
    transition: transform 0.2s;
}

.file-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.file-item a {
    color: #3498db;
    text-decoration: none;
    font-weight: bold;
}

.file-item a:hover {
    text-decoration: underline;
}

.file-description {
    margin-top: 5px;
    font-size: 0.9em;
    color: #666;
}

footer {
    margin-top: 40px;
    text-align: center;
    color: #7f8c8d;
    font-size: 0.9em;
}
  1. Click “Commit new file”

Adding Your Files

Step 1: Create a Files Directory

  1. Click “Add file” > “Create new file”
  2. Name it files/.gitkeep (this creates a folder named “files”)
  3. Click “Commit new file”

Step 2: Upload Your Files

  1. Navigate to the files folder by clicking on it
  2. Click “Add file” > “Upload files”
  3. Drag and drop your PDFs or other files (remember 100MB limit per file)
  4. Click “Commit changes”

Step 3: Add File Links to Your Homepage

  1. Go back to your repository root
  2. Click on index.html and then the pencil icon to edit
  3. Find the <ul> tag, and add list items for each file like this:
&lt;ul>
    &lt;li class="file-item">
        &lt;a href="files/example1.pdf" download>Example PDF Document&lt;/a>
        &lt;p class="file-description">A sample PDF document about topics ABC (1.2 MB)&lt;/p>
    &lt;/li>
    &lt;li class="file-item">
        &lt;a href="files/example2.docx" download>Example Word Document&lt;/a>
        &lt;p class="file-description">A sample Word document about topics XYZ (843 KB)&lt;/p>
    &lt;/li>
    &lt;!-- Add more items as needed -->
&lt;/ul>
  1. Replace the filenames and descriptions with your actual files
  2. Click “Commit changes”

Styling Your Website

Basic Customization

  1. Edit styles.css to change colors, fonts, and layout
  2. Some simple changes you might make:
    • Change background-color values for different sections
    • Adjust font-family for different text styles
    • Modify color values for text colors

Adding a Simple Search Function

If you’d like to add a basic search function:

  1. Edit index.html and add this before your file list:
&lt;div class="search-container">
    &lt;input type="text" id="fileSearch" placeholder="Search for files...">
&lt;/div>
  1. Add this JavaScript at the end of your HTML file (before the closing </body> tag):
&lt;script>
    document.getElementById('fileSearch').addEventListener('keyup', function() {
        let searchTerm = this.value.toLowerCase();
        let fileItems = document.querySelectorAll('.file-item');
        
        fileItems.forEach(function(item) {
            let text = item.textContent.toLowerCase();
            if(text.includes(searchTerm)) {
                item.style.display = 'block';
            } else {
                item.style.display = 'none';
            }
        });
    });
&lt;/script>
  1. Update your CSS to style the search box:
.search-container {
    margin-bottom: 20px;
}

#fileSearch {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
}

Testing and Going Live

Step 1: Visit Your Website

  1. Go to https://yourusername.github.io to see your live site
  2. Note: Changes may take a few minutes to appear after committing

Step 2: Test All Downloads

  1. Click each file link to ensure downloads work correctly
  2. Test on different devices (mobile, tablet, desktop)

Step 3: Share Your URL

Your site is now live! Share the URL with anyone who needs access to your files.

Alternative Options

If GitHub Pages doesn’t meet your needs, consider these alternatives:

Netlify Drop

  1. Go to Netlify Drop
  2. Drag and drop your website folder
  3. Get an instant website with a random URL
  4. Upgrade for a custom domain (optional)

Google Drive + Website

  1. Upload files to Google Drive
  2. Create shareable links for each file
  3. Build a simple website with those links

GitLab Pages

Similar to GitHub Pages but with larger file size limits.

Maintenance and Updates

Adding New Files

  1. Upload new files to the files folder
  2. Update index.html with new file links
  3. Commit your changes

Removing Files

  1. Delete the file from the repository
  2. Remove the corresponding link from index.html
  3. Commit your changes

Tracking Downloads

For basic download tracking:

  1. Sign up for a free Google Analytics account
  2. Add the tracking code to your index.html
  3. Set up event tracking for downloads

Troubleshooting

Common Issues and Solutions

Files Not Showing Up

  • Ensure paths are correct (e.g., files/document.pdf)
  • Check for case sensitivity in filenames
  • Verify files were successfully uploaded

Website Not Updating

  • Wait 5-10 minutes for changes to propagate
  • Check if you committed your changes
  • Verify you’re using the correct repository

File Too Large

  • GitHub has a 100MB file limit
  • Split large files into smaller parts
  • Consider using Git LFS (Large File Storage) for larger files

Need More Space

  • GitHub repositories have a 1GB soft limit
  • Create multiple repositories for more storage
  • Consider alternative platforms for very large files

With this guide, you should be able to create a simple but effective file-sharing website completely free. The advantage of this approach is that it requires minimal technical knowledge while providing a professional-looking result.

This content is free to use, adapt, and share.
Knowledge should be open—spread it far and wide.

Remember, like with all of my work, I am able to provide the following assurance(s):

  • It is almost certainly going to work until it breaks; although I have to admit it may never work and that would be sad.
  • When/if it does break, you may keep all of the pieces.
  • If you find my materials helpful, both you & I will be happy, at least for a little while.
  • My advice is worth every penny you paid for it!

Discover more from eirenicon llc

Subscribe to get the latest posts sent to your email.