MAJOR UPDATE! MAKEOVER MAKEOVER MAKEOVER

Does anything look different to you? This website just got a huge- MAKEOVER!!! So what’s changed?

THERE’S SO MANY POSTS NOW!

My Instagram page may look empty at the moment, as I archived all of my posts and transferred them over to this website! I’ve tagged all these posts by their year and with “Instagram Archive”, so you can just browse those if you’d like to see what I used to have on my Instagram. You currently have to go to either the tag or the “Art” tab and click on the title of each post to see the images, but that’s going to change in a future update… ;o)

WHERE AM I?

Well now, if you look up at the top of the screen, you’ll see the website title “SHABBY’S GALLERY”! It used to be that you could only see the site title on the front page, but after some tweaking and elbow grease, you’re sure to never forget what website you’re on!

FONTS YOU SAY?

Yup! Header texts now use the Metal Mania font as it just looks badass in my opinion. The body fonts now use Roboto Slab to match the gothic/serif style I’m trying to go for, as opposed to the normal Arial font.

WHAT HAPPENED TO THE FRONT PAGE?

I’ve tweaked the front page to be more aesthetically pleasing, and it now contains all posts a much prettier format than before. Here, art posts and blog posts are combined in chronological order, starting with the latest posts at the top. It’s a bit tedious scrolling all the way to the bottom at the moment, I do plan on updating that in the future to be more user friendly, though at the moment this allows users to quickly see all posts right away when they land on the front page.

WELL I WAS NEVER HERE BEFORE THE NEW UPDATE, WHAT DID IT USE TO LOOK LIKE?

Take a gander!

Old Front Page

I was feeling inspired by the old mspaintadventures comic log of having the date with an arrow next to the comic title, but the way I implemented it ended up looking a bit too sloppy, so I did some fancy UI magic to turn into a prettier table that you can see here on the current front page

Old Art Page

Old Tags Page

Technical Jargon

This website has been a fun experiment to see what it would be like to make an art website from scratch. I’ve been making this website by hand using the HUGO static site framework and writing a custom theme. All posts are markdown files stored in different folders, and cobbled together into a website using HTML templates. This way you can create new content in the form of markdown files, and have them use the existing templates to style and format the content.

Importing all the instagram posts was a fun challenge that I might go into detail on somewhere else in the future… For now, here’s the Python script I wrote to parse through the json files I downloaded from my instagram account, and a markdown template that I used to load the parsed data into.

import json
from datetime import datetime

with open("./posts.json",'r') as f:
    f_content = f.read()

parsed_json = json.loads(f_content)

# Generate Post Data
post_data = []
for i in parsed_json:
    # Initialize post structure
    post = {
        'uriList' : [],
        'time' : '',
        'caption' : ''
    }

    # Build list of images
    for slide in i['media']:
        post['uriList'] += [ '../../ig_pics/'+"/".join(slide['uri'].split('/')[2:]) ]
    
    if len(i['media']) == 1:
        i = i['media'][0]

    post['time'] = i['creation_timestamp']
    post['caption'] = i['title']
    post['time'] = datetime.utcfromtimestamp(post['time']).strftime('%Y-%m-%d')

    post_data.append(post)

# Generate Markdown Files
previous_date = post_data[0]['time']
today_count = 1
for p in post_data:
    current_date = p['time']
    if current_date == previous_date:
        today_count += 1
    else:
        today_count = 1
        previous_date = current_date
    
    # Convert image URI's into Markdown images
    imgMD = ""
    for uri in p['uriList']:
        imgMD += f"![]({uri})\n\n"
    
    # Fill out template
    with open("./post-template.md",'r') as temp:
        filedata = temp.read()
        filedata = filedata.replace("!time!",p['time'])
        filedata = filedata.replace("!today_counter!",str(today_count)) 
        filedata = filedata.replace("!year!",'"'+str(p['time'].split('-')[0])+'"')
        filedata = filedata.replace("!pics!",imgMD)
        filedata = filedata.replace("!caption!",p['caption'])

    with open(f"./posts/md/{p['time']}-{today_count}.md",'w') as new:
        new.write(filedata)

---
title: !time!-!today_counter!
date: !time!
tags: ["Instagram Archive",!year!]
draft: false
---
!pics!
!caption!

There’s no database or back end to the website, so that way I can have HUGO generate the html/js/css files to be thrown up for free on a static webpage host, and the only money I spend is on the the custom domain.

Now that I’ve imported hundreds of posts and images, it might start getting tricky managing all those posts when they’re a swarm of files, so I might look into setting up a database locally on my computer that I then generate the public files for and upload those to the static host.

Thanks for making it this far down the page! Once I make this website more user friendly and figure out a good workflow for uploading and managing content, I hope to be able to help others make personal websites like this one as well.