How to Make a Personal Site (in progress) [pixietails.club]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== How to Make a Personal Site (in progress) ======
Eventually this will be more fleshed out, but for now here's my notes and links to various resources. 

===== 1. Finding a host =====
This is where your site will live. It's where the files go (besides on your computer)

There are several free webhosts you can use to get started (though you may be limited to file size and types of files etc.). The most popular one is [[https://neocities.org/|Neocities]]; other options are [[https://nekoweb.org/|Nekoweb]] and [[https://pages.github.com/|GitHub Pages]].

I am hosted on Dreamhost (paid) because I have a lot of sites and needs the space. You can get good intro deals for like $3/month for the first year or two if you find a sale. 

You could even try [[https://blog.prutser.net/2021/01/20/how-to-securely-self-host-a-website-or-web-app/|setting up your own server]], if you're techy.

==== 1b. Domain name  ====
This is how a person gets to your site. For instance, my domain name is **pixietails.club**. 

If you're just starting out and don't want to invest much money into making your site, then you don't need a custom domain name. Just use whatever freebie comes with your webhost and invest time in designing and fleshing out your site first. You can always get a domain name later. 

I recommend buying your domain from Porkbun, as they're the cheapest and least scammy. 

Note: if you get a domain that isn't the standard .com/.net/.org etc. then you can usually get a deep discount on the pricing for the first year, but it'll go way up in the subsequent years. Like, my .club domain was on a promo for $3 for the first year and now the normal price is $12-15 or so. 

====== 2. Finding a layout ======
Technically you can just use a very basic file, slap a bunch of text onto it, a background image and some links and you're good to go! But mostly people want pretty websites, so you'll need a layout. 

If you want to learn to code yourself, the way to do it is to start totally from scratch and use HTML/CSS tutorials to learn how (see below).

You can go two ways with this: either get an old school layout (if you can find one), or get a modern layout from a modern maker. The modern layouts will mostly be mobile responsive and accessible, which is good!

I find it easiest to start with a basic HTML layout and then edit it (usually frankensteining parts from other layouts). 

==== Layout Resources ====
<WRAP group>
<WRAP half column>
[[https://ribo.zone/free/layouts/|ribo.zone]] 

[[https://repth.neocities.org/theme|repth]]

[[https://itinerae.blogspot.com/2024/01/foryou.html|Itinerae]]

[[https://goblin-heart.net/sadgrl/webmastery/layouts/|sadgrl]]
</WRAP>

<WRAP half column>
[[https://neothemes.neocities.org/layouts/|Neothemes]]

[[https://onlywonder.net/themes/|Only Wonder]]

[[https://www.beepbird.net/freebies/site-templates/website-templates.html|BeepBird]]

[[https://kalechips.net/projects/layouts/|Kalechips]]
</WRAP>
</WRAP>

===== 2b. Free graphics & fonts =====
Things you may want for your site: background image, header, dividers, icons. Sometimes you'll need to download fonts if you want specific ones or don't want to use Google font services. 

==== Backgrounds & Graphics Resources ====
[[https://rec0de.net/var/papertiles/|Paper Tiles]]

[[https://itinerae.blogspot.com/2023/12/backgrounds.html|itinerae's backgrounds]]

[[https://goblin-heart.net/sadgrl/webmastery/downloads/tiledbgs|sadgrl's tiled backgrounds]]

===== 2c. Customizing your layout (HTML/CSS tutorials) =====
I NEVER use a layout just as it comes, and you shouldn't either. Customize that shit! Change the colors, add extra tabs, stick another sidebar on there, whatever. 

[[https://webguide.neocities.org/|A Beginner's Guide to HTML and CSS]] by Pauli Kohberger is super easy to read and learn; I recommend starting there and then building out your knowledge based on what you want to do. I also like [[https://htmlforpeople.com/|HTML for People]] by Blake Watson.

More:
[[https://ritualdust.com/craft/make-yourself-a-website/|ritual dust]]: "Make yourself a website" -- good list of resources for making a personal, non-commercial, low-tech website. Also has a list of interesting personal sites to look at for inspiration.

[[https://stefanbohacek.com/blog/resources-for-keeping-the-web-free-open-and-poetic/|Stefan Bohacek]]: "Resources for keeping the web free, open, and poetic" -- lots of great links for making a people-first personal webspace

[[https://discourse.32bit.cafe/t/resources-list-for-the-personal-web/49|Huge resource list from 32bit.cafe]]

====== 3. What to put on your site ======
The hardest part is filling out that first blank page. Once you start adding things it gets easier over time to find //more// stuff to add. The nice thing about personal sites is they're totally //personal// to your interests, so you can literally put whatever.  

[[guides:personal_site_content|]]

Of course, you can always see what other people on their sites and copy them (with your own personalization of course).

===== 3b. Filling your toybox =====
A toybox is where you keep your pixel adoptions and related things. This is a pixel: {{ :pink-sparkle-star.gif?nolink |}}

Half the indie web loves pixels and half don't seem to care. I'm on the LOVE IT! side, so I want pixels. See [[https://www.pixietails.club/links:pixels|all my pixel links here]] and my toybox page (soon).

Scrounge through old pixel websites. Join pixel cliques and clubs. Learn how to make your own pixels. Go for it!

===== 3c. Guestbooks & pingbacks =====
**Guestbooks** are where people can leave notes for you about your site without having to commit to an email or going off-site to a social media thing. If you want to interact with your visitors, then giving them a guestbook is a good way to do that.

I use [[https://atabook.org/|Atabook]] for my guestbook, which is a 3rd party service. Other options are [[https://groundedwren.neocities.org/pages/controls/guestbookDemo|GroundedWren's guestbook (Javascript)]] or [[https://kalechips.net/projects/code/guestbook|Kalechips' guestbook (PHP)]], both of which run directly through your site.

**Pingbacks** are a thing blogs use to let other websites know they linked to them. Static websites don't have that option, BUT you can use something like [[https://webmention.net/|Webmention]] as an alternative. 

You can also always send an email to the webmaster that you linked to their site, too...

====== 4. Linking & webrings ======
Linking off-site is super **super** important. Linking to other personal sites is how we spread the wealth of the indie web. I have an [[links:start|extensive link section]] on my site because I LOVE finding links-- but you don't have to go that hard. Find a few sites you love, make a link page and stick them on.

Once you get some things on your site you can try [[https://brisray.com/web/webring-list.htm|joining webrings]], which are like clubs for websites. Each member of the ring links back to the hub and to another member, so it's a great way to explore and find sites with a common interest. 

If you'd like to host your own webring, you can try it with [[https://webri.ng/|webri.ng]]. 

Other things to join are, like, cliques, clubs, [[https://thefanlistings.org/|fanlistings]], etc.


===== 4b. RSS feeds!!!! =====
Coming soon.

====== 5. Further reading re:the indie web ======
If you're interested in diving deeper into the modern personal (non-commercial) website stuff, here's some articles and other stuff:

(coming soon)