-----------------------[ How to write your own website ]------------------------ Publication date: 2026-01-14 Last updated: 2026-04-24 I recently wrote about why you should set up a personal website rather then using social media. In sort, doing so lets you own your space on the internet, customize it and frees your readers from constant advertising and algorithmic feeds. Despite how much time we spend using it, creating something for the internet is arcane wizardy to most people. This is a fairly accessible guide to getting started. You'll need a text editor (any will do) and a browser (you already have one). This post has some fancy formatting, so if you are reading this in RSS, you'll want to switch over to the web version. All sites are written in HTML, which is a simple text-based format. This is a perfectly valid HTML document: Check out my epic site! To try it, just create a text file with a ".html" extension, and open it in your favorite browser. Do this now: experimenting is the best way to learn how it works. This is what the page should look like: Plain text is boring, so let's add some formatting: Check out my epic site! If your browser shows angle brackets on the page, it's likely you accidentally created a file with double extensions. You can check for this by looking at the URL bar: It should look something like this "file://.../site.html". If it ends with ".html.txt" or similar, will will need to fix the file name. Windows will hide the real file extension by default: If you are using it, ensure that "Show file extensions" is enabled in the file explorer's settings. The angle bracket things are tags: "" is an opening tag, and "" is the matching closing tag. The word surrounded by brackets ("b") is the tag name, which tells the browser what to do: In this case, bolding the enclosed text. The other formatting tags are emphasis, underline, subscipt, superscript, small text, highlight and deleted. You don't have to memorize this list, but go and try a few out. There's also
(break), which adds a line break. It's special because there's no closing tag: It's always closed immediately and can't contain any text. I like to add a slash after the tag name to indicate this, but it's not required. A big wall of text can get quite ugly, so it's good to break it up with

(paragraph) tags. Each paragraph will be visually separated from other content on the page:

Check out my new site

I have many epic things here.

Together, the matching tags and their contents form an an element. Elements can contain other elements, but it's important that they are closed in the correct order: This is wrong: Some random text ... but this is fine: Some random text Browsers will attempt to render invalid HTML, but the results may not be what you intended: It's best to make it easy for them. On that topic, it's good practice to put all your content inside a element which is itself inside a element:

Check out my new site:

I have many epic things here.

This isn't mandatory, but it helps browsers render your page correctly: You don't want metadata (we'll add some later) getting confused for page content. Back to text-wall-avoidance: the
    and
      (unordered/ordered list) tags create, well, lists. Each item should be wraped in
    1. tags (list item)

      About this site (unordered):

      • This site has epic things
      • ... and I wrote it myself

      It uses these tags: (ordered)

      1. <html>
      2. <body>
      3. <p>
      4. <ul> and <ol>
      5. <li>

      - You can add angle brackets to a page with > (>), < (<) and & (&). These entities will render as the corresponding character, but won't form tags. Headings use

      (heading 1) through

      (heading 5), with larger numbers using smaller font sizes:

      My cool site:

      This site has epic things and I wrote it myself.

      Other cool places:

      To do: Figure out how to add links.

      ####################################################### ####################################################### About that. Links are just (anchor) tags, but they have something new: an attribute after the tag name but before the bracket. I found this cool blog about electronics. The "href= " attribute sets where the link points to. A lot of other tags can also have attributes: For example, ordered lists with "reverse=true" count backwards. The URL in "href=" can be relative: If linking up multiple pages on the same site, instead of this: Some page ... just write this: Some page Images work similarly to links, except that they are self-closing elements like
      :

      Check out this picture of a nebula I took!

      [IMG /astro/m27/small.jpg ] (If you don't have a URL for your image, skip to the hosting section to set one up) That's all the essentials, but there's a lot of other useful tags. For example
      creates a dropdown that works with ctrl-f: ...but I can't cover everything without writing a book. (The Mozilla Docs are a fantastic reference) Making it look nice: #################### At this point, you should have something like this:

      Check out my cool site:

      I made this site to write about things I do. More updates soon™.

      Other cool places:

      Photography:

      Here's my picture of the Dumbbell Nebula:

      [IMG /astro/m27/small.jpg ] - Let's start by giving the page a machine-readable title: My epic site Like with , the tag isn't required, but it's good to include it: Otherwise, any metadata that the browser doesn't understand might be mistaken for content. The page still looks kinda bad: Text extending the edges of the page isn't exactly easy to read. It's not too bad when crammed into my blog's column, but longer paragraphs will look terrible on large monitors. (You may have to switch to landscape to see this problem on mobile) To fix this, we need to add some style and layout information using the Unlike other tags, the contents of ################################################################# ################################################################# ################################################################# [IMG /astro/m27/small.jpg ] - (For varable width elements, use flexbox for centering and other fancy layouts. A single line of text can be centered with "text-align=center") Personally, I like dark themed sites, so lets change some of the colors: ########### ########### ########### [IMG /astro/m27/small.jpg ] - The "color" style will carry over to every element inside of the styled tag, so there's no need to individually change the text-color of every element. However, the links do need to be changed because they override the color by default. CSS supports both named colors (like black), and RGB hex colors. Hex colors can be shortened by dropping every other digit, at the cost of color accuracy. That's it: Everything needed to replicate my blog, minus a few small bits like the sans-serif font, navigation box, etc. Of course, your website can and should be different: It's yours. I highly recommend you read some documentation and play around with CSS. There's also way more to it then I can possibly cover here. Every fancy design on the internet was created with it, and it even supports animations and some interactivity ... also, check out your browser's devtools (ctrl-shift-i): It will have a nice GUI which lets you mess around in real time and shows you what's going on under the hood. If you ever run out of tags, you can just make up your own and style them as needed. As long as the name includes a hyphen, it's guaranteed not to be included in any future version of HTML. The specification even lists and as allowed custom element names. I've used this heavily on this page: All the example websites aren't screenshots, they are elements styled up to look like a browser window. Custom tags are also very handy for styling text: It works! Sharing it: ########### You should now have a reasonably nice page ready to put up on the internet. The easiest way is to use a static file hosting service like Github pages or Cloudflare pages. Both of these have generous free tiers that should last a very long time. If you don't like big companies, there are plenty of similar, smaller services. These can be more limited: The popular Neocities charges $5/mo to use a custom domain. Another option is to rent a server (~$5/mo) or, if you have good internet, run one yourself. This is by far the most fiddly option: I would not recommend it unless you like playing with computers. All off these (except a server) will give you a subdomain by default. For example, Github Pages will give you your-username.github.io However, I do recommend setting up a custom domain: That lets you switch providers seamlessly should anything happen. A warning about domain registrars: ABSOLUTELY DO NOT BUY FROM ANY COMPANY YOU SEE IN AN AD. It's important to understand that there are two companies involved: the registry and the registrar. The registry runs everything behind the scenes, will assesses a fee (usually $10/year) to discourage domain squatting. There's only one registry for any TLD: If you want a .com, your registry must be Verisign. The registrar deals with customers, and there are multiple options for any TLD. Importantly, because they are just resellers, their profit margins are very small: Any registrar that can afford advertisements or run promotions like ".com for $1" must either... - ... be charging a lot more than competitors. - ... or regularly screw over customers. These are not mutually exclusive: plenty of places will overcharge you and engage in very scummy business practices. Look for a registrar that doesn't do anything exciting and ideally, one that has a profitable non-domain business. I can recomend Cloudflare (zero markup), or Porkbun (if you don't like big companies). They all work in a similar way: Upload a file with some name, and it will given a URL with that same name. The one exception is that files called "index.html" will be viewable at the root of the folder they are in. Filename URL root/ +- my_cats.html https://example.com/my_cats.html +- cat_photos/ | +- cat1.jpg https://example.com/cat_photos/cat1.jpg | +- cat2.jpg https://example.com/cat_photos/cat2.jpg | +- index.html https://example.com/cat_photos/ | +- index.html https://example.com/ You should put an index.html in the root of your site to serve as the homepage, but apart from that, the organization is up to you.