Example header; check the HTML in "/_includes/archived/archive-page-header.html" to change what appears here.

Tweets archive website template

A description of your Tweets archive website. This could include your Twitter bio too, if you want. Remember to add your profile picture to the archive as "avatar.jpg" next to "index.html" so that the profile picture shows up correctly. If it's not a .jpg, you have to do a find-and-replace on "avatar.jpg" with "avatar.png" (or whatever the extension is for you). Also be sure to read the example posts below so you know how this template works. Template created by Drew Naylor and the code is under the MIT License. You can fork this repo if you want to create your own Tweets archive website. Please only archive your own Tweets and those you have permission to archive. If you want to, you can put additions to posts that weren't there originally in italics.



profile picture    Display name here @YourHandleHere • Original post date here
This is a basic sample post. Most Tweets are probably going to be able to be based off this one. Since this is the post at the top of the page, I'll explain a few things. Be sure to look at the code to know what's going on. So in the code, I have the date link to the original post on Twitter using the Tweet ID that's in the Twitter URL for each Tweet and given to you underneath each Tweet in the backup. I'm also using that ID to allow linking directly to posts from elsewhere on this website by using section IDs which work like HTML anchors, if you're used to that. Try it out by clicking "jump to this post" below, next to the Retweets and Likes area. Please keep the class-related stuff there, as I'm going to make a CSS file that'll make this all look a lot better after archiving all my posts. Note that I'm putting the numbers for Retweets and Likes in code blocks to ensure that, say, zeroes will be easily differentiated from capital O.

Retweets: 0 Likes: 0 (jump to this post)

profile picture    Display name here @YourHandleHere • Original post date here
If you have multiple posts that were immediately Tweeted one after the other and you want them to appear together in the archive, you can...
(next post joined in archive as reply; link to post)
...use this post as an example for how to do that, but note that if posts other than the original have Retweets or Likes, those aren't handled here as I had neither on the original post this was based on, so you'll have to add that in yourself.


Retweets: 0 Likes: 0 (jump to this post)

profile picture    Display name here @YourHandleHere • Original post date here
#hashtags and @handles appear as plain text like everything else and aren't links, unless you want them to be by manually linking them somewhere.

Retweets: 0 Likes: 0 (jump to this post)

profile picture    Display name here @YourHandleHere • Original post date here
Image posts just have images below the post text like Twitter, but there's no built-in code for opening the image when clicked (you can put it in though, if you want; just trying to get my archive done as soon as possible; competent browsers like Firefox do allow you to right-click and click "Open image in new tab", give or take a few wording changes). I try to just have the image size be large enough to see whatever I want to be shown (Twitter's image preview is 497 on the width based on what the backup website's image elements told me with Inspect Element), then it can be zoomed in more if desired. I also include alt text with images.
See? I use alt text. The image is just the words "sample image" written in cursive in black on a white background.

Retweets: 0 Likes: 0 (jump to this post)

profile picture    Display name here @YourHandleHere • Original post date here
This post will be linked to by a post further down as an example of an archived version of quote-Retweeting yourself.

Retweets: 0 Likes: 0 (jump to this post)

profile picture    Display name here @YourHandleHere • Original post date here
You can have links appear in archived Tweets like so. This one has been left as-is from my original post, so enjoy an article on supporting Net Neutrality.

Netflix joins Amazon and Reddit in Day of Action to save net neutrality - Ars Technica


Retweets: 0 Likes: 0 (jump to this post)

profile picture    Display name here @YourHandleHere • Original post date here
Sometimes you might need to have more than one image in a post, and this is an example of that case.
"post image sample 1" written in cursive in black on a white background.
"post image sample 2" written in cursive in black on a white background.

Retweets: 0 Likes: 0 (jump to this post)

profile picture    Display name here @YourHandleHere • Original post date here
Sometimes you might've quote-Retweeted something but the original post is gone now so you can't even write what the original post was about. You can do what I did here in the italics below, if you want.
(link to something I quote-retweeted but is no longer available so I have no idea what it said)


Retweets: 0 Likes: 0 (jump to this post)

profile picture    Display name here @YourHandleHere • Original post date here
Sometimes you might quote-Retweet yourself, so you can do this to preserve the experience mostly:

pretend this is a quote-retweet of a previous post I made; jump to original post


Retweets: 0 Likes: 0 (jump to this post)

profile picture    Display name here @YourHandleHere • Original post date here
There may be times when you want to archive a bunch more than just what was in a Tweet, like my Facebook post linked here. I'll replace the details with a short example text. Note that the link is about the death of the cat I loved the most, if you're not up for that right now. The text in the details is just sample text.

(link to my Facebook page explaining my absense; unrelated example text is below)

Click to view the full example text. Example of a lot of text. Example of a lot of text. Example of a lot of text. Example of a lot of text. Example of a lot of text. Example of a lot of text. Example of a lot of text. Example of a lot of text. Example of a lot of text. Example of a lot of text. Example of a lot of text. Example of a lot of text. Example of a lot of text. Example of a lot of text. Example of a lot of text.

Another paragraph and so on. Another paragraph and so on. Another paragraph and so on. Another paragraph and so on. Another paragraph and so on. Another paragraph and so on. Another paragraph and so on. Another paragraph and so on. Another paragraph and so on. Another paragraph and so on. Another paragraph and so on. Another paragraph and so on.

Mitty on the top of the drier. She's a beautiful long-haired Calico cat
            with green eyes. I miss her every day.

Retweets: 0 Likes: 0 (jump to this post)