# Welcome to Blogtini! A modern "content first" approach to blogs & websites made entirely from easy to write and human readable `markdown` text files. ## Overview - All your pages and blog posts are in [markdown](https://en.wikipedia.org/wiki/Markdown#Examples) -- this means your content is clean and **just** content. No formatting mixed into your files. - A single line of javascript in each post or page file is used to load the page contents and process it. eg: ```html comment: ``` In turn, the single `theme.js` at the top of your website, is _itself_ a simple one line `import 'https://...'` file, pointing to whatever theme URL you'd like to use for your site. - To change your theme, all you have to do is change that one line in your `theme.js` file to use another theme URL. ## Features - no build step - static pages - sitewide quick search in nav - comments can still be integrated ## Example page ```markdown --- title: Blogtini Overview date: 2022-07-25 categories: - website tags: - markdown - javascript comment: --- # Blogtini! An entire website, blog, or mixed setup which is entirely `markdown` and one line of `javascript`. This is a new paragraph. ## This is a 2nd level heading Here is a list: - blogtini is _exciting in italics_! - blogtini boldly **loves** you ``` ## Get Started in seconds - Copy all the text in the "Example Page" box above - Paste it into a new file called `index.html` (change text if desired) - Run any simple static file server, eg: `python3 -m http.server` in a `terminal` in the same directory where `index.html` lives - Load the printed serving url in a browser, eg: http://localhost:8000/ ## Take it to the next level For multiple posts & pages: - Change the `https://blogtini.com/js/blogtini.js` in your markdown file(s) to `./theme.js` - Create a `theme.js` file with `import 'https://blogtini.com/js/blogtini.js'` - Now you can change the `theme.js` contents to another theme anytime you like and your entire site will change with one line change :) - Create directory names that "sort in reverse order", to make a `sitemap.xml` file easier. - We like directory and filenames like: ``` 2023-05-may-the-fourth-was-wild-this-year/index.html 2022-12-christmas-with-family/index.html index.html theme.js sitemap.xml ``` You can add days into the filenames/urls, too: ``` 2023-05-04-may-the-fourth-was-wild-this-year/index.html 2022-12-25-christmas-with-family/index.html index.html theme.js sitemap.xml ``` - Create a `sitemap.xml` with contents like: ```xml /index.html /2023-05-may-the-fourth-was-wild-this-year/ /2022-12-christmas-with-family/ ``` - Reload your simple web server browser url to see the site - You can create a free https://github.com/ (new account if needed) and new repository and add your files there - xxxxx document sitemap auto-generator setup & explain sitemap importance - xxxxx document setting up top-level `index.html` file ``` ## More info - https://traceypooh.github.io/slides/dweb-2023 (tracey talk at https://dwebcamp.org ) ## Example Blog