About This website

Learn about how I made this website and how you can make your own

The absolute basics: files, files, and more files

Before you even begin to think about making a website, you need to know where to start. I'm not going to go in-depth about everything; I just want you to see the big picture here. First, you need to realize that a web page is just a group of publicly accessible files that people look at on their computer. HTML files are the backbone of the page. They include the basic text that you're reading and make reference to the styles and layouts that you see. These styles are defined in detail in CSS files. Here, you'll find things like font sizes, text color, image alignments, and much more. Together, HTML and CSS make up most of what you see. In addition, you'll also need image files to spruce up you're site and JavaScript files if you want to be able to perform actions. Using JavaScript is like writing a portable computer program that can be run in someone's browser (here's one of my examples).

By now, you're probably asking yourself "Do I have to make all of this from scratch!?!?" Fortunately, the answer is no. There are plenty of ways to get your hands on some HTML and CSS templates that go together. You could use a website builder to generate HTML and CSS code based on your inputs or you could download some pre-made templates directly from a site like HTML5UP.net or Pixelarity.com. I chose the latter option by combining multiple templates from Pixelarity.com. Just make sure that you follow the license terms for whichever option you choose (for example, many free options require an attribution to be listed on your site).

Hosting and Domains: Where do all these files go anyway?

Remember that in order for people to be able to see your website, your files need to be easily accessible. For that to happen, they can't just be stored on your personal computer (unless you plan on running your own server, in which case you probably don't need to be reading this tutorial). The service that stores your files is known as a web host. There are plenty of affordable hosting options available out there, but I'm going to highlight one easy-to-use free option: GitHub Pages.

By creating a free GitHub account, you can host your website directly on GitHub! In case you don't know, GitHub is an online storage service that allows people to store their git repositories on the cloud. A git repository is essentially a system that keeps track of changes to files in your project. By uploading a repository to GitHub, you are saving not only your project, but also every prior version of that project just in case you need to revert to an older version. To get started with GitHub pages, jsut create a repository on GitHub named {your_github_username}.github.io. Then, put all of your files in that repository and you're good to go. Just remember that your primary HTML file needs to be named "index.html" because that's the file that web browsers load by default when you enter a web address without any specific file (e.g. typing sheppard.page in your browser takes you to sheppard.page/index.html). Anyone can now go to that web address ({your_github_username}.github.io) and see your website. By default, this repository is public, but if you want it to be private you can upgrade to a paid version of GitHub for about $4/month (free for students).

At this point, you could be content with your new website that lives as a subdomain of github.io. If you want to take things to the next step, you can get your very own domain like yourname.com. The process of domain registration is relatively simple. Just go to a domain registration website like domains.google and purchase a domain. A domain with a common extension like ".com" or ".org" can typically cost about $12 per year. Keep in mind that some hosting services may offer promotions for free domain registration with the purchase of a hosting plan. Prices and included services vary with registrar. Some common included services often included with domain registration include things like:

  • An SSL certificate (This allows secure https connections to your site.)
  • WHOIS identity protection (This redacts your personal contact information from ICANN's WHOIS database which allows the public to look up information about domain registrants)
  • Custom email or custom email forwarding for your domain
  • Website builders
  • ...and much more

Custom Email: A More Professional Approach to Communication

Now that you have your website and domain name, you might be thinking about getting a personal email account like you@yourname.com. This can be done in many different ways and can even be free. A free option to look into is Gmail. If you buy your domain from Google Domains, you can create email addresses for your domain that will forward all emails to your existing Gmail account. You can then set these addresses up a aliases for you Gmail account which will enable you to send emails from this address as well. The downside is that you are limited to using your pre-existing Gmail inbox; you can't create multiple users with multiple inboxes. On the bright side, it's free to use and easy to set up. Alternatively, you can set up MX records for your domain that will allow you to set up aliases on a more privacy-oriented provider (like mailbox.org or mailfence.com). Once again, setting up email addresses as aliases generally won't allow you to have separate inboxes or email accounts, but these options can suffice if you only need these addresses for personal use. If you are looking for a larger-scale approach for multiple users and multiple inboxes, you can look into the plethora of email hosting providers out there. These include Google's G Suite, Microsoft 365, and many web hosting providers.

TL;DR

Creating a website can seem like a daunting task. It involves doing your research, planning, cost-benefit analyses, and plenty of learning. On the bright side, it can also be educational and even serve as an impressive testimony to your technical skills when applying for jobs. For all the lazy people out there (like me), here's a quick recap:

  • Get a website building program or download some templates
  • Buy a domain
  • Host your website
  • Create some email addresses
  • Get some sleep

  • Was this introductory information helpful...boring...useless...amazing...or something else? Do you have any suggestions or comments? Did you find a broken link? Did I misspell somethng? Let me know:

    FAQs

    What service do you use for domain registration?

  • I use Google Domains

  • How do you host your page?

  • I use a repository on GitHub Pages.

  • Is your website based on any templates?

  • Yes, I use a combination of a few templates from Pixelarity

  • What is your technical experience? Are a geek or something?

  • I have a Bachelor's degree in Electrical and Computer Engineering (so yes)

  • Is it Christmas yet?

  • Click here to find out

  • These FAQs are unrealistic

  • That's not a question.