Creating a website with Bear app

Creating a website with the Bear App is wonderfully simple

This is James / creating

I no longer use this process

This is a great process for quickly creating simple websites. However, I no longer use this process for maintaining this website. I still use Bear to write the pages, but have a more complex process for generating the site.

I love using the Bear app, a simple note-taking app for Apple devices. I now use it for all my note-taking, and have a special sets of pages I convert to simple websites. The whole process of converting the pages into the website and updating the server takes about 90 seconds. You can see the process here:

This is the process in detail:

1. Select the top-level tag and choose File->Export Notes…

2. Choose the folder containing the Python and header and footer html, save as “site” and complete the other details like this:

3. Run the make-site python script (reproduced below):

4. The script does the following:

   1. Adds a header and footer to the pages, by just inserting the contents of the files named header.html and footer.html.
   2. Adds the contents of a style.css file to the <style> tag to make a few tweaks to how things look.
   3. Adds a favicon to the root directory.
   4. Runs clop from the command line to compress all the images (reduces the file sizes by about 50% on average).
   5. Creates a zip file of the site.

5. Drag and drop the zip file to my static web host, tiiny host

Here’s the Python code I use:

# Process output of Bear App to make my notes website
# James Johnson 30 June 2024

import os
import zipfile
import shutil
import subprocess

def modify_html_files():
    # Define paths
    current_directory = os.path.dirname(os.path.abspath(__file__))
    site_directory = os.path.join(current_directory, 'site')
    header_file_path = os.path.join(current_directory, 'header.html')
    footer_file_path = os.path.join(current_directory, 'footer.html')
    style_file_path = os.path.join(current_directory, 'style.css')
    favicon_path = os.path.join(current_directory, 'favicon.png')

    # Read the contents of header.html, footer.html, and style.css
    with open(header_file_path, 'r', encoding='utf-8') as file:
        header_content = file.read()

    with open(footer_file_path, 'r', encoding='utf-8') as file:
        footer_content = file.read()

    with open(style_file_path, 'r', encoding='utf-8') as file:
        style_content = file.read()

    # Walk through the site directory and process all HTML files
    for root, _, files in os.walk(site_directory):
        for filename in files:
            if filename.endswith('.html'):
                file_path = os.path.join(root, filename)

                # Read the content of the current HTML file
                with open(file_path, 'r', encoding='utf-8') as file:
                    html_content = file.read()

                # Modify the HTML content
                # Add header after <div class="document-wrapper">
                modified_html_content = html_content.replace('<div class="document-wrapper">', f'<div class="document-wrapper">\n{header_content}', 1)

                # Find the position of the last </div> and insert the footer before it
                last_div_pos = modified_html_content.rfind('</div>')
                if last_div_pos != -1:
                    modified_html_content = modified_html_content[:last_div_pos] + footer_content + '\n' + modified_html_content[last_div_pos:]

                # Insert style content before </style> tags
                modified_html_content = modified_html_content.replace('</style>', f'{style_content}\n</style>')

                modified_html_content = modified_html_content.replace('<title>index</title>', '<title>James Johnson notes</title>', 1)
                modified_html_content = modified_html_content.replace('<meta name="last device" content="James’s MacBook Pro"/>', '<link rel="shortcut icon" type="image/png" href="/favicon.png"/>', 1)
                # if the filename is index.html, remove "<h1 id='index'>index</h1>"
                if filename == 'index.html':
                    modified_html_content = modified_html_content.replace("<h1 id='index'>index</h1>", '', 1)
                    modified_html_content = modified_html_content.replace('Go to <a href="/">index page</a> | ', '', 1)

                # Write the modified content back to the HTML file
                with open(file_path, 'w', encoding='utf-8') as file:
                    file.write(modified_html_content)

    print("HTML processing completed")

    # Copy favicon.png to site folder
    shutil.copy2(favicon_path, site_directory)

    # Define the command to run
    command = "~/.local/bin/clop optimise -r /location/of/your/site"

    # Run the command
    process = subprocess.run(command, check=True, shell=True)

    # The script will wait here until the command is completed
    print("Image compression completed")

    # Make site.zip
    zipf = zipfile.ZipFile(os.path.join(current_directory, 'site.zip'), 'w', zipfile.ZIP_DEFLATED)
    for root, _, files in os.walk(site_directory):
        for file in files:
            zipf.write(os.path.join(root, file),
                       os.path.relpath(os.path.join(root, file),
                       os.path.join(site_directory, '..')))
    zipf.close()

    print("Zip file created")

if __name__ == "__main__":
    modify_html_files()