dweb-2023/index.html

<!doctype html><head><meta charset="utf-8"/><script src="../eveal.js/eveal.js"></script><title>Blogs & Websites from Markdown & JS - Tracey Jaquith</title></head><body>

# Blogtini
## Blogs & static Websites
## Markdown + 1 line of Javascript
### Decentralize & Archive your content forever

### [Tracey Jaquith](https://twitter.com/tracey_pooh)

#### [DwebCamp 2023](https://dwebcamp.org)

[tracey.archive.org](https://tracey.archive.org)


---
# The Idea

[blogtini.com](https://blogtini.com)

---
# A Site
<a href="https://blogtini.com"><img src="i/website.jpg"</a>

---
# A Post
<a href="https://blogtini.com/2022-07-blogtini-update/"><img src="i/post.jpg"</a>

---
# View Source
<a href="view-source:https://blogtini.com/2022-07-blogtini-update/"><img src="i/view-source.jpg"</a>

---
# Huh?
The page reads & parses itself

```js
const [frontmatter, markdown] = markdown_parse(
  document.getElementsByTagName('body')[0].innerHTML
)
```
[JS](https://blogtini.com/js/blogtini.js)


---
# [Files Layout](https://github.com/traceypooh/ipfstini)

---
<!-- .slide: data-background="i/layout.jpg" data-background-size="contain" -->


---
## Publish full blog & web pages
- content 100% markdown
- theme & markdown-to-markup using JavaScript

---
## Publish full blog & web pages
- uses a `sitemap.xml` or RSS feed

<p class="fragment fade-up">
It's like "pointers" to your posts/pages
</p>

<p class="fragment fade-up">
Posts can be hosted anywhere
</p>

<div class="fragment fade-up">
• free github.com, gitlab.com
</div>

<div class="fragment fade-up">
• including DWeb
</div>

<div class="fragment fade-up">
• self-hosted
</div>


---
## How 🕷️
<pre class="fragment fade-up">
JS "crawls" your site
</pre>

<pre class="fragment fade-up">
parses markdown "front matter"
- date
- title
- tags
- categories
</pre>

<pre class="fragment fade-up">
`showdown` to convert to HTML
</pre>

<pre class="fragment fade-up">
re-paints page
</pre>

<pre class="fragment fade-up">
browser caches the analyzed site, auto-updates daily (can force re-cache)
</pre>

<pre class="fragment fade-up">
`lunr` for browser searching your posts/pages
</pre>

---
## Why 🤔
- each post or page is a markdown file

<p class="fragment fade-up">
• markdown is primary, archive-friendly, format/theme agnostic
</p>

<p class="fragment fade-up">
• site formatting is _secondary_
</p>

---
## Why 🤔
<p class="fragment fade-up">
• no build step, no backend needed<br>
  - just a static file server
</p>

<p class="fragment fade-up">
• theme can be changed anytime (1 line change)
</p>

<p class="fragment fade-up">
• [_good_ google SEO](https://www.google.com/search?q=site%3Ablogtini.com+and)
</p>

<p class="fragment fade-up">
• google & more crawlers doing JS rendering
</p>

---
## Why 🤔
- "View Source" is your _original_ content -- no formatting, no clutter

<p class="fragment fade-up">
• You control your content
</p>

<p class="fragment fade-up">
• posting to facebook, twitter, strava sucks
</p>

<p class="fragment fade-up">
• where is your content?
</p>

<p class="fragment fade-up">
• _what_ do you do with your GDPR?
</p>

<p class="fragment fade-up">
• your data should last forever
</p>

<p class="fragment fade-up">
• "roach proof" content-only format
</p>

---
## Life is better client-side 😊

---
### Life is better client-side 😊

```js
// parse frontmatter & (optional) `config.yml`
import yml from 'https://esm.archive.org/js-yaml'

// markdown-to-html
import showdown from 'https://esm.archive.org/showdown'

// code highlighting
import hljs from 'https://esm.archive.org/highlightjs'

// client-side search - like `solr`
import lunr from 'https://esm.archive.org/lunr'

// date/time hacking
import dayjs from 'https://esm.archive.org/dayjs'

// comments
import './staticman.js'

// sort hashmap by key
import { krsort } from 'https://av.prod.archive.org/js/util/strings.js'
```


---
## Static Sites
- _comments_ possible using `staticman`, etc.
  - `staticman` -- comments go into your site repository
- _website search_ using `lunr` JS
- can use `git` "hooks" to run small script:
  - keeps `sitemap.xml` and RSS feed up-to-date
  - minor comments management

---
## Try it! 🤓
Simple as:
- create new file
- index.html
  - contents:

<pre style="white-space: pre-wrap">
&#45;&#45;&#45;
title: my neat post
date: 2022-08-27
tags: [blogging, markdown]
comment: &amp;#60;script src="https://blogtini.com/js/blogtini.js" type="module" charset="utf-8"&amp;#62;&amp;#60;/script&amp;#62;
–––

Having fun *blogging* and hoping to write _more_ this year.
</pre>

---
# Preview 👀
- use any basic http file server, eg:
```sh
python3 -m http.server
```
- OR open `index.html` in browser
  - [mac]: double click from `finder` folder; `open index.html` in `terminal`
- copy url to `safari` (if not already)
- dev tools, disable CORS restrictions & reload

---
<!-- .slide: data-background="i/cors.jpg" data-background-size="contain" -->

---
# Examples
https://blogtini.com/

Site with all posts in same github repository

---
# Examples
https://traceypooh.github.io/dwebtini/

Site with posts served from multiple storage sites
- github
- IPFS
- web3
- archive.org

_(click post links and notice browser url chnages)_

---
# Examples
https://ipfs.io/ipfs/QmWhoVkYm2SNoPEAK5ZmKFNtqVAietNsdzZrZYWK9KaXw9/

Site with all posts on IPFS


---
# Full Example
Tracey's website using HuGo :
- https://poohbot.com

Tracey's website using https://blogtini.com :
- https://traceypooh.github.io/poohtini/


---
# Publish ✍🏽
- make https://github.com account
- create and `git clone` a new repository
- add your `index.html` file
- add `.nojekyll` (empty) file
- `git push`
- [turn on GitHub Pages](https://docs.github.com/en/pages/quickstart)
- https://[YOUR-GITHUB-USERNAME].github.io/[REPOSITORY-NAME]/

---
# Extending out
- millions of sites linked together
- save a list of friends & families for a merged activity "feed"
- only needs to determine latest few posts from each site per sitemap/RSS
  - JS "crawl" them, parse their markdown, merge into decentralized feed

---
# Future 🔮
- Aggregate all _your data/posts_ (twitter, facebook, etc.) to markdown posts on _your own_ site

- Friends & Family aggregate sitemap/feed
  - Friends & Family client-side aggregate lunr search
  - comments go to correct specific site/place/person/entity


---
# Future 🔮
Archive a site of many sites

<p class="fragment fade-up">
Just one combo `sitemap.xml` away <span class="fragment">!</span>
</p>


---
# Future 🔮
- https://www.w3.org/TR/activitypub
  - SocialWG _(Christine is here...)_
  - publish new activity
  - notify followers in their chosen way


---
# GDPR 🇪🇺
- General Data Protection Regulation (EU)

<p class="fragment fade-up">
• primary aim is to enhance individuals' control & rights over their personal data
</p>

<p class="fragment fade-up">
"must be able to transfer personal data from one electronic processing system to and into another, without being prevented from doing so"
</p>


---
# Longevity 🧛
<p class="fragment fade-up">
• If `WordPress` goes away, billions of people _disappear forever_
</p>

<p class="fragment fade-up">
• Average web page is gone in *three months*
</p>

<p class="fragment fade-up">
• Make your (digital) life a _Vampire_
</p>

<p class="fragment fade-up">
• Make it _Live Forever_
</p>


---
<!-- .slide: data-background="i/redwoods.jpg" data-background-size="contain" -->
## 🙏🏽 Thank You! 🙏🏽

[tracey.archive.org](https://tracey.archive.org)


---
# The Future