Chat GPT: Static HTML Blog Hosting

Write me a Github pages tutorial with all code I need to create a hosting space for my static html blog posts, complete with searching by text.

GitHub Pages Tutorial: Hosting a Static HTML Blog with Text Search

In this tutorial, we'll walk you through the process of creating a simple static HTML blog hosted on GitHub Pages, complete with text search functionality using a third-party JavaScript library called "lunr.js".

Prerequisites

Basic knowledge of HTML, CSS, and JavaScript.
A GitHub account.

Step 1: Create a GitHub Repository

Log in to your GitHub account and click on the "+" icon in the upper-right corner.
Select "New repository".
Name your repository <your-username>.github.io, replacing <your-username> with your GitHub username. This will ensure that your blog is hosted at https://<your-username>.github.io.
Choose "Public" and initialize the repository with a README.
Click on "Create repository".

Step 2: Set up the Basic Structure

Clone your repository to your local machine, and then create the following files and folders inside the repository folder:

lua
<your-username>.github.io/
│
├── css/
│   └── styles.css
│
├── js/
│   ├── lunr.min.js
│   └── search.js
│
├── posts/
│   ├── post-1.html
│   └── post-2.html
│
├── index.html
└── search.html

Step 3: Add HTML Templates

index.html:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Blog</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <header>
        <h1>My Blog</h1>
        <nav>
            <a href="search.html">Search</a>
        </nav>
    </header>
    <main>
        <article>
            <h2><a href="posts/post-1.html">Post 1</a></h2>
            <p>Post 1 summary...</p>
        </article>
        <article>
            <h2><a href="posts/post-2.html">Post 2</a></h2>
            <p>Post 2 summary...</p>
        </article>
    </main>
</body>
</html>

search.html:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Search - My Blog</title>
    <link rel="stylesheet" href="css/styles.css">
    <script src="js/lunr.min.js"></script>
    <script src="js/search.js" defer></script>
</head>
<body>
    <header>
        <h1>Search</h1>
        <nav>
            <a href="index.html">Home</a>
        </nav>
    </header>
    <main>
        <input type="text" id="search-input" placeholder="Search...">
        <ul id="search-results"></ul>
    </main>
</body>
</html>

posts/post-1.html and posts/post-2.html:

Create simple HTML files for each post with the following structure:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="

viewport" content="width=device-width, initial-scale=1.0"> <title>Post Title - My Blog</title> <link rel="stylesheet" href="../css/styles.css">

</head> <body> <header> <h1>Post Title</h1> <nav> <a href="../index.html">Home</a> <a href="../search.html">Search</a> </nav> </header> <main> <article> <p>Post content...</p> </article> </main> </body> </html> ```

Replace "Post Title" and "Post content..." with the actual content of your blog posts.

Step 4: Add CSS Styles

css/styles.css:

Add your desired styles to the styles.css file. Here's a basic example:

css
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

header {
    padding: 1.5rem 0;
    border-bottom: 1px solid #e5e5e5;
}

header h1 {
    margin: 0;
}

nav {
    margin-top: 1rem;
}

nav a {
    text-decoration: none;
    color: #333;
    margin-right: 1rem;
}

nav a:hover {
    color: #666;
}

main {
    padding: 2rem 0;
}

article {
    margin-bottom: 2rem;
}

#search-input {
    width: 100%;
    padding: 0.5rem;
    font-size: 1rem;
}

#search-results {
    list-style-type: none;
    padding: 0;
}

Step 5: Add Search Functionality

First, download lunr.js from the official website (https://lunrjs.com/) and save it as js/lunr.min.js.

js/search.js:

javascript
document.addEventListener("DOMContentLoaded", function () {
    const searchInput = document.getElementById("search-input");
    const searchResults = document.getElementById("search-results");

    const postData = [
        {
            id: 1,
            title: "Post 1",
            content: "Post 1 content...",
            href: "posts/post-1.html"
        },
        {
            id: 2,
            title: "Post 2",
            content: "Post 2 content...",
            href: "posts/post-2.html"
        }
    ];

    const idx = lunr(function () {
        this.ref("id");
        this.field("title");
        this.field("content");

        postData.forEach(function (doc) {
            this.add(doc);
        }, this);
    });

    searchInput.addEventListener("input", function () {
        const query = searchInput.value.trim();
        const results = idx.search(query);

        searchResults.innerHTML = "";

        if (results.length === 0) {
            searchResults.innerHTML = "<li>No results found</li>";
        } else {
            results.forEach(function (result) {
                const post = postData.find((post) => post.id === parseInt(result.ref));
                const listItem = document.createElement("li");
                const link = document.createElement("a");
                link.textContent = post.title;
                link.href = post.href;
                listItem.appendChild(link);
                searchResults.appendChild(listItem);
            });
        }
    });
});

Make sure to update the postData array with your actual blog post data.

Step 6: Push Changes to GitHub

Commit and push your changes to the remote repository.

sh
git add .
git commit -m "Initial blog setup with search functionality"
git push origin main