personal website workshop

let's make a personal website!

this workshop can run in two (about equal) parts:

1. a personal website safari, where we click around a few examples of personal sites, to see (a small slice into) the breadth of sites that people make
2. building your own website, where we use ideas and themes from the safari or your mind to get a simple site on the Internet!

part 1 - safari

here are 30 semi-random personal websites:

• https://www.tomforth.co.uk/
• https://sometimes.digital/
• https://brr.fyi/
• https://www.timhunkin.com/
• https://www.cameronsworld.net/
• https://vlad.roam.garden/Vlad's-Dating-Profile
• https://robinprice.net/
• https://nutcroft.com/
• http://tom7.org/
• https://lobi.to/
• https://alifeee.co.uk/
• https://caolan.uk/
• http://kaimac.org/
• https://novalis.org/
• http://clofont.free.fr/
• https://cobyzaby.neocities.org/
• https://maria.town/
• https://erich-friedman.github.io/
• https://sweetfish.site/
• https://seif.world/
• https://soha.lt/
• https://www.mousereeve.com/
• https://kenru.net/index.html
• https://petrapixel.neocities.org/
• https://carlwk.typepad.com/
• https://brisray.com/
• https://le.alphamethyl.barr0w.net/~elysia/
• https://robert.mathmos.net/
• https://tilde.town/~dozens/
• https://olu.online/

activities include (whatever people feel like doing)

• browse the sites and write an "observation card"/nature survey (write down things that you find)
• categorise websites somehow (personal / blog / shrines / etc)
  • try to categorise these 30 websites into 8 or fewer groups of "similar" sites
• treasure hunt (find X on specific site)
  1. a recipe for Potato Provencale (V) (GF)
  2. fonts including "Hockey is Lif", "This Boring Party", "Boring Boron", "Tom's New Roman"
  3. a dream diary
  4. a Beauty and the Beast grotto
  5. a shrine to trains
  6. Central Florida Mini-Golf Reviews
  7. THE GIANT STEAM CLOCK
  8. a Sheffield events calendar
  9. a list of alternate "search engines and directories"
  10. a clock which displays the time of day in terms of how many times you could have watched Titanic
  11. a right-handed, introverted student who is bisexual, polyamorous, an artist, a writer, and a cancer
  12. a list of every place named Bristol
  13. holiday photos from a cycling trip to Brittany
  14. a guide to getting started with Yoga

part 2 - building a personal website

option 1 - Neocities

for site hosting we'll use use: https://neocities.org... go and create an account!

1. think about what you might like to have on your site. for inspiration, look at some of the above sites
2. follow the neocities tutorial
3. "inspect element" on existing websites and copy the HTML of bits you like! (it's all public!)
   1. Firefox/Chrome/Edge: right click > inspect element
   2. Safari: Open Safari > Preferences > Advanced > Show Developer menu
4. also check out some templates!
   • https://webmastering.neocities.org/layouts
   • https://goblin-heart.net/sadgrl/projects/layout-builder/
   • https://jakechirak.com/howto/makeyourownwebsite/howtohome

option 2 - drag and drop maker

I'd encourage you to check out option 1 instead, but if you really want to, there are a few drag and drop makers: https://hotglue.me/ or https://mmm.page/

guides

• neocities built in tutorial (you should be shown this when you create an account)
• (mega list of guides with everything you could ever think of) https://discourse.32bit.cafe/t/resources-list-for-the-personal-web/49
• (more in-depth tutorial) https://htmlforpeople.com/
• (beginner's guide to neocities) https://goblin-heart.net/sadgrl/learn/articles/beginners-guide-neocities
• (list of guides for neocities) https://webmastering.neocities.org/
• (simple guide for making artist portfolio website) https://jakechirak.com/howto/makeyourownwebsite/howtohome
• (guide on writing HTML) https://lmnt.me/blog/how-to-make-a-damn-website.html

why should you care?

a personal website allows you to create and share your creations without conforming to the format of an app or service (think Instagram's square images), lets you display whatever you want (videos? recipes? text? audio?) in whatever format you want, and is shareable without advertising, tracking, or anything you didn't ask for.

The homepage of https://indieweb.org/ has more opinions about this, and so do many blog posts, including: https://birming.com/blog-painter/, https://localghost.dev/blog/this-page-is-under-construction/, https://www.htmlforpeople.com/intro/, or https://jamesg.blog/2024/01/06/the-web-is-yours.

If the sites above didn't give you any ideas of what to put on a website, maybe 100 things you can do on your personal website by James will.

cheatsheets

• how to steal from other websites (using inspect element)
• HTML <head> template with all metadata (look at intro of https://alifeee.co.uk/)
• HTML, e.g., https://htmlcheatsheet.com/, https://developer.mozilla.org/en-US/docs/Learn/HTML/Cheatsheet
• CSS, e.g., https://htmlcheatsheet.com/css/, https://devhints.io/css

specific things you could want to do

to figure out how to do these, ask someone you know, look on 32bit.cafe resources list (above), or ask a search engine

• create an RSS feed -> https://everest-pipkin.com/teaching/handmadeRSS
• use a custom font
• set custom colours
• place items anywhere on screen
• make something bigger or smaller
• custom mouse cursor
  • use animations like click spark
• have a custom URL
• add a guestbook/comments
  • https://webmention.io/
  • https://virtualobserver.moe/ayano/comment-widget
  • https://www.htmlcommentbox.com/
• add other widgets
  • https://elfsight.com/

non-exhaustive list of things you could put on your site

• answers to questions
  • who are you?
  • what do you like?
  • who are your friends (links)?
  • what do you think?
  • information about where you live?
  • see more on https://slashpages.net/
• things
  • dream diary
  • blog
  • favourite things
    • recipes
    • music
    • books
• more -> https://jamesg.blog/2024/02/19/personal-website-ideas

key understandings

• this is not for profit or productivity. this is for fun.
• you can take HTML from other people's sites