Creating a website with Bear app
essay
productivity
This web page is written and maintained 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 set of pages I convert into this website. 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:
Select the top-level tag and choose File->Export Notes…
Choose the folder containing the Python and header and footer html, save as “site” and complete the other details like this:
Run the make-site python script (reproduced below):
The script does the following:
- Adds a header and footer to the pages, by just inserting the contents of the files named
header.html
andfooter.html
. - Adds the contents of a
style.css
file to the<style>
tag to make a few tweaks to how things look. - Adds a favicon to the root directory.
- Runs clop from the command line to compress all the images (reduces the file sizes by about 50% on average).
- Creates a zip file of the site.
- Adds a header and footer to the pages, by just inserting the contents of the files named
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
= os.path.dirname(os.path.abspath(__file__))
current_directory = os.path.join(current_directory, 'site')
site_directory = os.path.join(current_directory, 'header.html')
header_file_path = os.path.join(current_directory, 'footer.html')
footer_file_path = os.path.join(current_directory, 'style.css')
style_file_path = os.path.join(current_directory, 'favicon.png')
favicon_path
# Read the contents of header.html, footer.html, and style.css
with open(header_file_path, 'r', encoding='utf-8') as file:
= file.read()
header_content
with open(footer_file_path, 'r', encoding='utf-8') as file:
= file.read()
footer_content
with open(style_file_path, 'r', encoding='utf-8') as file:
= file.read()
style_content
# 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'):
= os.path.join(root, filename)
file_path
# Read the content of the current HTML file
with open(file_path, 'r', encoding='utf-8') as file:
= file.read()
html_content
# Modify the HTML content
# Add header after <div class="document-wrapper">
= html_content.replace('<div class="document-wrapper">', f'<div class="document-wrapper">\n{header_content}', 1)
modified_html_content
# Find the position of the last </div> and insert the footer before it
= modified_html_content.rfind('</div>')
last_div_pos if last_div_pos != -1:
= modified_html_content[:last_div_pos] + footer_content + '\n' + modified_html_content[last_div_pos:]
modified_html_content
# Insert style content before </style> tags
= 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)
modified_html_content # if the filename is index.html, remove "<h1 id='index'>index</h1>"
if filename == 'index.html':
= 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)
modified_html_content
# 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
= "~/.local/bin/clop optimise -r /location/of/your/site"
command
# Run the command
= subprocess.run(command, check=True, shell=True)
process
# The script will wait here until the command is completed
print("Image compression completed")
# Make site.zip
= zipfile.ZipFile(os.path.join(current_directory, 'site.zip'), 'w', zipfile.ZIP_DEFLATED)
zipf for root, _, files in os.walk(site_directory):
for file in files:
file),
zipf.write(os.path.join(root, file),
os.path.relpath(os.path.join(root, '..')))
os.path.join(site_directory,
zipf.close()
print("Zip file created")
if __name__ == "__main__":
modify_html_files()