Where to get started making your personal website

PUBLIC Guides and Resources
1

With the upticks in censorship and loss of privacy on social media websites, more and more people are turning to personal websites to share their work and to keep up to date with the works of other creators.

That said, the idea of making a personal website may be a bit imposing. While I maintain that this is something that anyone, regardless of level of technical background, can do, it is undeniable that making a website has a higher barrier of entry than signing up for a new socmed account.

This wikipost is a list of resources and pointers to get you started.

Step 1: Select a Host

One of the first things you’ll need to decide on is where your website will be hosted, because this might put constraints on what you can do when writing your sites.

Static Hosts

A static host means that webpages have no server-end code, typically uploaded in plain HTML; If you don’t know what that means, just know that this will likely fit your use case and are usually the simplest option.

Plus, these host options all offer free tiers.

  • Neocities is going to be what you hear people talk about the most in indie web spaces, and with good reason-- it’s a very easy to use drag-n-drop host with a robust free plan. If you want to get your feet wet with webdev, making a site here is low-commitment and can easily be packed up and moved elsewhere if you end up wanting a more diverse featureset.
  • Bearblog is the no-nonsense option for people who only care about blogging. Has a very restricted featureset and doesn’t do much else, but does what it does well. (If this is what you want to use, you can basically stop reading this guide here.)
  • Netlify is going to be a high-performance option for the more technically-inclined. You’ll have to connect your site with a git repo and provide your own custom domain (more on that later), but upkeep is easy once it’s off the ground. Note that, unlike the other free options, this one has no restrictions on the types of files that you can upload.
  • Nekoweb is a website that is mostly included here for completeness’ sake. It’s largely comparable in features to Neocities, but has a dicey history with censorship policies. Not recommended.

Domain Name Vendors

Most of the above options will provide you with a subdomain of their URL, but it’s also possible to buy your own domain name and point it to the aforementioned host.

This can be really nice because it means that your users won’t have to know or care about who your hosting service is-- even if you pack up from neocities and switch to self-hosting, they will be able to follow the same bookmark as they always have.

  • Google Domains is trusted. It’s Google, for better and worse.
  • Namecheap is a good option with affordable pricing.
  • Porkbun is generally the cheapest option for .com addresses.
  • Do not use GoDaddy; Outside the initial cheap offering price, the user experience is nasty and they will ransom your URL once it expires.

Non-static Hosting Options

If you want to do anything on your website that involves a database or otherwise requires that the server process something before sending the user an HTML page, like hosting a webforum, you’re going to need to use an option like one of these.

Notably, these all cost money and require that you buy your own domain name.

  • Mala’s guide to self-hosting is going to be the way to go if you want the most control over your system, but will also be the most involved to set up and maintain.
  • ViceTemple is a webhost explicitly geared towards porn (NSFW at link).
  • NearlyFreeSpeech.NET is a pay-for-what-you-use host with anti-censorship policies.
  • RackNerd offers affordable virtual servers at a variety of scales.

Step 2: Select a Template

Now that you’ve selected a host (and know what capabilities it has), it’s time to decide what your site will look like.

Site Generators

It is HIGHLY recommended to use a site generator, because it makes site maintenance a much simpler process.

If you use any of these options, you will be able to alter the layout of your website in a single file, instead of painstakingly editing every single html page your site contains.

  • Zonelets is going to be the simplest of these options, and doesn’t require using the commandline to build your site. Posts will need to be written in HTML, however.
    • ZoneRSS is a plugin for Zonelets that will automatically generate an RSS feed for your blog posts. (You probably should be using RSS feeds, if you aren’t already)
  • Strawberry Starter is a static site tool that was inspired by Zonelets, and offers a similar blog interface. Unlike zonelets, you can actually write the text of your website in markdown– just like posts in this forum! It also offers a one-line upload tool to Neocities (you can do this with any static site tool, though-- more on that later).
  • Eleventy is what Strawberry Starter is built on, if you want to get even deeper in the weeds of customization. If you have experience in software and want to write a site template from scratch, this is going to be the direction you want to go in.
  • Jekyll has the same level of ground-up customizability as 11ty (and, similarly, allows for posts to be written in markdown), but with more thorough plugin support. With just a few lines of code, you can add many complex features to your website with 0 added upkeep.

Website Themes

If you want, it’s also possible to write your website directly in raw HTML. Pick a layout you like, make any modifications you want, and then copy/paste the html file and populate them with your content.

Alternatively, you could modify these themes and use them with the aforementioned site generators, if you put in a little elbow-grease.

DIY It

Of course, there’s always the option of writing your site from scratch, if that’s what you really want to do! (And honestly, taking a detour to learn more about how HTML and CSS work will be beneficial regardless of what your approach is.)

You’re going to want to learn HTML to structure the content on your website, CSS to change the appearance of your website, and, optionally, Javascript for any kind of user-side interactive content.

And, on a related note, you can also look at the source code for any website in order to understand and get ideas on how to implement pages. Right click the thing you’re interested in and then select “inspect element”, then poke around the elements and styles panes that open up (or read this if you want more specifics).

This can also be a powerful tool for debugging your website-- when in doubt: inspect, inspect, inspect.

Step 3: Write your site content!

Get to it! Maybe check out the webistes of users in these webrings for some inspo?

We also maintain a list of web dev resources, which can help with displaying content.

(optional) Step 4: Make your site easier to maintain

Alternative Guides

There are many other guides out there covering the same material as this wiki, some of which are more specialized or more in-depth than the guide written here.

Need Help?

This is a post that is visible to non-forum members; If you’re reading this post but the web dev category gives you an error, then you need to sign up for the forum and follow the new user directions.

Once you can see the the web dev category, it is recommended to read the web dev introductory post before posting.

5 Likes
Web Dev Tools, Templates, and Resources