blog

Hello World

Welcome to my blog!

In this first post, I’d like to share how I was able to generate this website.

Generating the Website

The website is generated using GitHub Pages, serving content directly from the docs directory of the repository. It uses a simple HTML file (docs/index.html) and a bit of JavaScript (docs/app.js) to fetch and display content.

GitHub Pages Setup

GitHub Pages is configured to serve the website from the docs folder on the main branch. A .nojekyll file in the docs directory ensures GitHub Pages serves the files directly without attempting to use Jekyll.

The main page is docs/index.html, which includes:

Custom Domain

A custom domain is configured for the website through the GitHub Pages settings, pointing to the GitHub Pages service.

With this setup, the website automatically updates whenever changes are pushed to the docs directory in the main branch.

The JavaScript Code

The docs/app.js file contains the JavaScript code that loads the content of the main README.md file from the repository root and displays it on the website. Here’s what the code looks like:

document.addEventListener('DOMContentLoaded', function() {
    // Fetch README.md from the repository root
    fetch('../README.md') // Relative path from docs/app.js to root README.md
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.text();
        })
        .then(markdown => {
            // Convert Markdown to HTML using marked.js
            const htmlContent = marked.parse(markdown);
            
            // Display the HTML in the 'content' div
            const contentDiv = document.getElementById('content');
            if (contentDiv) {
                contentDiv.innerHTML = htmlContent;
            } else {
                console.error('Content div not found.');
            }
        })
        .catch(error => {
            console.error('Error fetching or parsing README.md:', error);
            const contentDiv = document.getElementById('content');
            if (contentDiv) {
                contentDiv.innerHTML = '<p>Error loading README.md. Please check the console for details.</p>';
            }
        });
});

This code runs when the page’s HTML is fully loaded. It fetches the README.md file located one level up from the docs directory, converts its Markdown content to HTML using the marked.parse() function, and then inserts that HTML into the <div id="content"> element within index.html.

Advantages of This Setup

This setup has several advantages: