I am Tracy. I work at the Internet Archive. I've been
the founding coder since the start.
And today I'm working on a side project called Blogtini. And the idea is mark
down only blogs and posts and pages with just a little shim of JavaScript and off
you go. So I'll get going. So here's the idea. We'll just start right with a
trick immediately. If you go to blogtini. com, you can see it in action. This is
an example of a site. You can see some like header, search bar, bunch of stuff
over here, like posts and tag clouds, all the things you can imagine. Flutters,
things like that. So that's the site itself. This is a post.
It looks pretty similar, but now you're looking at a single post. And if you view
source for the page we just saw, that's it. That's the whole source. So it's
HTML, but it's actually mark down. So there's front matter at the top. So there's
YAML key values, just like you'd see in GitHub pages or GitLab pages or similar.
Down here is the little trick that loads the JavaScript. And then here's your
content. And your content is in markdown. So you can have paragraphs, bold,
italics, all the things, headers. So the idea is, you know, as a human or a roach
in the future, if you saw this, right, or a crawler, you'd know what's going on,
right? You'd be like, okay, here's some metadata. Here's the content. Simple. So
what's really going on here? So that JavaScript is the gist is basically it's
going to read the contents of the body. So when a browser comes and sees this
weird HTML thing, it just puts everything in the body. So then it reads the body,
it then goes ahead and parses it into two pieces, the front matter and the
markdown. The front matter can then be parsed with a YAML parser in JavaScript.
And the markdown can be processed into mark up from a little package we'll see in
a second. So here's an example of a blog. I like to bike. So there's some
biking stuff here. But there's three directories and each has an index HTML that
just makes your URLs look a little bit nicer. You can name them however you like.
Doesn't really matter. But it's nice to have them in reverse sort order, like
some sort of time thing. I like year and month. But if you like your month date
or wanting to go even further, you can do that too. To keep it simple, I just
kind of kept all the images in one directory. And you can put them anywhere you
like. And then there's this, you can see my pointer. Oops. Yeah, sort of.
There's this sitemap XML file. And that's the thing that tells the processing
where your posts are and how to process them. We'll see more in
a second. Yeah. So basically what I was saying, it's all markdown. The
markdown to markup is using JavaScript. So you don't have to worry about any of
the formatting. You use the sitemap XML files.
That's the only thing you have to kind of manage or you can run a little script
that will manage it for you. That is included if you want to use the blog team.
And that sitemap is like pointers to your posts and pages. So a sitemap is legal.
You can point to all over the web. You can point to different websites or URLs.
That's totally fine. So you can post your stuff on IPFS or storage or other kinds
of distributed providers. And you can also put on GitHub or getlab.com for free.
And you can self-host if you want or
put it anywhere you want because it's static files.
So what happens is I'll sort of cruise through this kind of briefly. But the
JavaScript crawls your site. It opens up your sitemap XML, finds your posts,
starts pulling them down, starts parsing the YAML, starts parsing the markdown,
and it starts building up like tags and categories. So it can build up like a tag
and category cloud. Also, if you were going to look at a specific post, this is a
good time for it to figure out which post you're looking for. Then it takes the
markup and uses something called showdown that converts it back up to markup or
HTML, repaints the page, repaints the body tag, and the browser caches that
crawled site. So the next time you come to the page, it'll be much quicker. And
it'll update daily, but you can also re-cache it too.
For searching, which is really nice, there's something called lunar, which is a
pun on solar if you know solar. And it's client side. It's so cool. You just
throw in documents and you tell it what fields to analyze, like the description,
title, tags, categories. And if I remember in halftime, I'll try to hit the live
search button because it's really fun. It feels like magic.
Okay. So each post is markdown. Markdown is primary content, archive friendly. I
work at the archive. I've been there for like 25 years. And all disks fail, all
storage fails, all network fails, all companies fail. All your providers will
fail you. So in my opinion, you better have your content if you want it to live
forever in a really simple format. Like we're talking JPEG, we're talking
markdown, we're talking maybe PDF or something. And the rest, good luck, right?
Maybe it'll work a thousand years from now, but who knows? So also the site
formatting is secondary. That has nothing to do with their content. So don't mix
it with their content. That's just clutter. There's no build step. There's no
backend needed. So these can just be static file servers, which is really nice.
And you can change your theme anytime. So if you don't like the theme you saw
before, you want something a little more snazzy or more
nuanced, you can just change it with one line.
It has good Google SEO, not great, but it's good because we're re
doing the meta tags in JavaScript.
So Google will crawl your site relatively well with that, but it's not quite as
fast and as good as you might want, but it's not bad. And they're working on
that. So the view source is your original content, no formatting,
no clutter. You control your content. When you post to Facebook, Twitter, Strava,
Athlete, where's your content go? What if you want it 50 years from now?
Where is it? How do you get it? And if you get it, I got a zip of my Twitter when
I was thinking about, I did go to Mastodon and I was thinking about just dumping
Twitter. It's a nice zip file.
It's a nice static site, but what are you going to do with it? So the hope would
be maybe we'd just start making little filters that filter right into Markdown
and stuff it into Blogtini or something like that. So what do you, you know,
things to think about, like what do you want to do later in your life or
whatever? Like it's your content, right? It's not the people who are making money
off of you. Life is better client side. It just is much more flexible. So if you
imagine WordPress, I like WordPress. I had WordPress before. Anyone ever had a
WordPress site and never had a problem with a WordPress site? Problem with your
database, problem with your theme, you know, and it's like a hand in your ass.
You're like, oh, I was just trying to blog something and now I'm spending like
hours or maybe a day on this. What happens if WordPress goes away, right? Or
decides to dump your content because, you know, they're not making money off you
anymore. So here's an example of just some of the tools they're using. So these
are, this is using ES modules in JavaScript, which is the coolest import system
ever. You can just pull from anywhere on the web, which is what we do. So you can
read, you can do a YAML parser and pull it from over here. You can do the
showdown, markdown to markup here. HLJS is great. So if you write code in your
post, it'll highlight the code, syntax, whatever. And it's just like one little
include and one little run, boom, off it goes. Lunar is the client side search,
super cool. Just some other little stuff.
So you might wonder, well, what about comments? What about other kind of dynamic
content? So comments are possible and there's a static man is one approach.
There's other approaches too, but I like static man because you have like a
little Docker thing running somewhere, which I host.
And your people, the people come in, make a comment and they make a pull request
to your repo, which is pretty wild. And that's your approval process. So you
approve that, it inserts a little JSON thing into your repo. And then once the
GitHub pages or whatever does its thing or your static website updates, the
comment is there. Pretty nice. So you can also approve and just, you know, get
rid of, just delete the branch if you don't like what they did.
So that's kind of nice. And then the content is in your repo, right? It's not
stuck in disk somewhere, which is like who knows where that is. So your comments
go with your site, which is nice. And if you want to write your own site map
maker, oh, that's great. I can highlight this way. Or you want to manually do it.
That's totally fine. But there's also some little GitHub scripts you can do. So
every time you do a command, it'll just update your site map for you, which is
kind of nice. So if you wanted to try it, it's like literally the simple.
You can you could copy this into an index HTML page.
And it'll just work. It'll give you a site.
And it does that because of this little JavaScript include here. And here's your
content. And here's your front matter. And if you just have a little web server
or something like that in localhost, boom, it'll work. It's really nice. If you
want to mess around with Safari, you can disable cores, do that your own
whatever. But that's kind of a nice way to you don't even have to run a web
server, you can just open with the file colon colon protocol to. Okay, so
I'll show you this example.
And let's see, launch that to another tab. Okay, so this is the
site. And you can see there's a slight delay while it sort of reformats the page.
But these are just like really simple markdown files. And then I can show you the
search. If you search and I look for like, talk.
So that was solar. Really fast, right? Because it's just like, there's, you know,
even if you had 10,000 posts, I don't think it's going to be any kind of a
problem. And it comes right up. New this year, we I've been working with a
volunteer and other volunteer to do a theme setup. And so we've moved things into
web components, if you know about web components.
And that means that when you send out the page, it kind of comes out as like,
we're using like BT post, and with a URL, and it will do the right thing. So you
can write your own post and set up the way you like. So I could like switch over
to this grid theme and it'll just work. See
which which page I'm in, but anyway,
it does generally work. So that's pretty exciting.
Back to the main talk. Okay, yeah, and I
won't show all these. But this is an example of I called it D web teeny. I made
this last year. So I made posts in GitHub, IPFS, web three, and some other
providers and archive org. And all of the URLs were different. And it doesn't
matter. Like, it's like, okay, you got to post here, post here, post here, post
here. And it all just works. So if you want to see that you can see that you can
visit that link. Yeah, there's a full IPFS site just as an example with a usual
lovely URLs, which is just great content has content hashes. And
yeah, and if you want to make one of your own, you can try this pretty easily.
You can go to GitHub, make a new account, you can do this no Jekyll thing that
just means your markdown doesn't get processed. And you can just follow the few
different steps to include, write a post, include the JavaScript file, and off
you go. And then for free, you will get your name, dot GitHub, dot IO, and the
new repository name as a URL. And if you want to get fancy, you can buy your own
web domain for like 10, 20 bucks a month, a year, excuse me. So extending out
like the idea of communities, like what if 10 people have
worries with blog team? What if 10,000 people, what if every family member of
yours was using blog team or your circles, your tech circles, like you could just
merge all the feeds into another site, right? An aggregator, because again, the
site now can point to anything. So you could have something that automatically
updates. And anytime like Jonathan or myself make a post, it'll just start, you
know, updating the site, you'll see them released and you could go off to the
other sites. That sounds lovely to me, a great way to kind of share stuff.
Yeah, and I like the idea too, that we could write some exporters maybe that
would pull stuff very easily, simply from WordPress, Twitter, Facebook, Strava,
whatever, and just slide them right in a markdown, that would be very easy to
transform. And then you could interlace them all in time and maybe a little
provider URL, whatever you want to the original content. But now you've got your
content and you've got a website and now you're all the things we do on social,
right, is yours again and in one place. Yeah, so I talked about the
site of many sites, which is pretty easy, just one combination sitemap XML.
And Christine from, who is the author, co-author of the Activity Pub spec is
here. So I've been thinking about, could we make notifications once someone posts
a new blog post or kind of work into that framework? So that's still kind of
like, hopefully we do that at some point. Just a reminder about GDPR.
You have the right to get your data back and to put it wherever you want. So
yeah, think about that. Like, if you get the data and you get a zip file, like
what do you do with it? So I'm hoping this will be a good way or something to
think about. Maybe you've got some ideas and maybe that's why you're here. So
we'll go into questions in just a few minutes. But I just want to impress upon
you that think about longevity, right? Think about your data. Like what do you
want your kids or your grandkids or whatever, your colleagues to know about you?
What if you go away? What if they go away? What if WordPress goes away? If
WordPress goes away, like maybe it's not likely, but you could imagine a billion
people could kind of go dark in some way or another. Or if the engine fails or
the Postgres stops working. Or I guess they use MySQL. That's fine.
We like MySQL. It's simple. Didn't say secure, but it's simple. Okay. So the
average web page is gone in about three months, 90 days. Actually it's a little
bit less we found. So that's another thing to think about longevity. Just it's
good to know. So I recommend you make your digital life, the things that you're
contributing to the world or you're telling the
world about yourself, where your friends are.
Make it like a vampire and make it live forever. That's the
hope. Thank you for attending the talk.
This is from me from last year right here in the Lovely Redwoods. And now I want
to open it to just any kind of thoughts, questions, discussions. Like I'm working
with this volunteer and he's great. And he has so many ideas. The last time we
talked, I took like three pages worth of notes.
And we got through most of the ideas. He wanted to split out the formatting loop
from the processing loop and make it so you could anyone could change things. So
we did that. We moved to web components that seemed like the best and most
flexible thing. Split out the whole theming from the crawling and everything. And
he just kind of like that took like weeks to get done. And then just like more
ideas, more ideas, more ideas. So I'm curious like maybe, you know, if anyone
feels comfortable, like, you know, what's your interest or what, you know, if you
were to use something like this, what maybe would be the shortcomings if there's
something that would be higher in your hit list or something you'd like to
integrate with anything come to mind. Just I'm curious, like, now that you've
seen this sort of strange new world, what do you think? Like, what's what kind of
thoughts are going on? I know it's 10 in the morning. So it's a little bit
like, it's also a little overcast.
I get that too. So I appreciate even more that you all came. So
good on you. Yes, and
great question. Yeah, I, I have been in my head kind of wondering if I get my
parents who are, you know, in their 80s, see if I could get one of them to maybe
make a one and maybe help them through it. And then, you know, bonus points would
be like, could they modify a post? Could they make a new post? I think, you know,
most non-technical people that I've seen, if you give them kind of like a thing
on the side that they can kind of follow, it's not so bad. So it's sort of like,
okay, like GitHub and GitLab, right? They have the editors right online. So I
would say like, you know, click this button, say add new page, write out your URL
or your file name, and then just copy these few lines in, adjust the title,
adjust your tags, start writing content. And, you know, here's a link to the
markdown and you know how you can do titles and, or, yeah, headers and things
like that. But one thing I like about markdown, right, is like a lot of people,
it's intuitive to go return, return, like, great, you just made a paragraph,
like, so there are little things like that where you're like, you don't have to
think about it or, you know, hopefully that's, that's, that's helpful. But that's
kind of what I think about. So I think maybe more realistically, if I can get one
of my less technical siblings to do it, then I'll feel like really good and then
watch them make some posts. But yeah, yeah, good question. And if you have any
ideas, or if you've been through this before, or you, you know of ways to
bootstrap, yeah. Yes.
Is there any room for some more flexibility without, say, sacrificing the ease of
use that you've done? So like, you know, right now, you know, very
opinionated in terms of like markdown.
What if, could you envision someone wanting to write a post in a different format
and having a way for it to work and kind of just be smooth from that point
without ruining the, what you were just talking about people who are not super
tech savvy, just having a nice, easy path?
I love that question. That is exactly. Yeah. Yes. Perfect. Yes. Yeah, I think so.
Because, you know, if you have a sitemap or you can do the RSS feed as well, as
long as it points to something, and as long as we've got like a parser set up,
like maybe you're, I don't know, you're posting go code, right, or something like
that, and you want it to like format or do something in the browser, I'm trying
to think of something that's more active, like the software emulation or
something like that. Yeah. I mean, as long as the JavaScript can parse it, and it
can parse text, it can parse binary, right? It doesn't really matter. Sure. Yeah.
Love that idea. Yeah. So if your post or whatever your thing has just a little
pointer to a different JavaScript entry point, or you've got a different theme
where the theme can sort of say what it wants to do with posts.
Yeah. Easy. Yeah. Good question.
Oh, time to drive. Oh, almost that time. Darn. I could show more stuff. But yeah.
What's that? Bernie. Oh, thanks. I think you said Bernie. I'm like, Bernie, yeah.
Bernie Sanders. A blog teeny for every person here.
Oh, that's a bad Bernie impression. I apologize.
I've had one coffee, not two coffees. So we'll just keep it there. But
yeah, thanks for coming.
What I really liked about it was, I was going to try to
show my other site, I'll show you this, just more for
history, not to show my own site.
[...] said my own site. So I've been writing a site for
25 years or something like that.
Actually, almost 30 years. And it's been in regular markup with junk in it, then
minimal markup with some JavaScript, then XSLT, weird. Then
PHP, like three.
Then WordPress, then Jekyll, then Hugo. I have a problem. But
the idea, I kept thinking, was like, remove the boilerplate. I just want the
content. I don't want to put the same crap in everything.
And I don't want a system that I have to trust like WordPress. I just didn't like
it. I like the Hugo site. This is on Go right now. But my goal is to rip this off
and do everything it did, but do it in the browser. So that's kind of like the
genesis of this idea. And I'm just thrilled that it's working with just your
content markdown. Boom. And then all of this JavaScript could go away. It could
be broken. It doesn't matter. You still have your content, right? And you could
just switch to another theme or another JavaScript file and would do the right
thing. So yeah.
Thank you all.