How to Run Your Own Website

By Zac J. Szewczyk on 2019/07/12 17:59:51 EST in Programming

I wanted to get into this when I explained why you should manage your own website, but that got a little long and this topic deserves its own post. I have talked before about my setup and my blog engine, First Crack, but today I want to explain how I run my site, so that you can run yours. I agree that most technical people underestimate the difficulty of setting up a website, and so today I will make that easy.

Again, let me clarify what “run your own website” means. Under my definition, you must have 1) total control over your content, and 2) the ability to make it public or private at any time. This rules out Medium, for example, because the company owns the rights to the content you publish there. It can also rule out hosted engines like Blogger: if you come back to writing after a four year break to find your host shuttered, you may no longer have the ability to manage that work. Good backups mitigate this risk, though, so you do not have to start from zero. You may write your own blogging engine that builds a site you can upload to any web server, but you do not have to.

How I Run My Website #

In brief, because I have covered it before, my setup allows me to write anywhere. I send finished posts to First Crack, which can run on any machine with Python 3. First Crack then builds a full-featured static website that I can deploy to even the most basic web server. After spending a few arduous weeks with Amazon Web Services, I now use Google Firebase.

This covers, at a high level, how I run my own website. That’s not what you came here for, though, so let’s move on to how you can run your own.

How to Run Your Own Website #

Running your own website does not have to take a lot of time, effort, expertise, or money. Sure, you can choose between the easy path that screams “I just picked a template someone else designed” and a hard one that took many painful weeks to build yourself, but why not opt for the middle ground? This guide will take you from zero to having a live, distinct, and professional-looking website in five easy steps. Although a technical background will make some steps a bit easier, I wrote this guide for novices. I have included links to in-depth how-tos, spelled out every field you need to fill in, named every button you must click, and listed all the command you have to run.

Step 1: Buy a Domain Name #

For the novices reading this, domain names identify websites. When you want to use Google, you type its domain name, google.com, into your browser. When I want someone to see my site, I tell them to go to zacs.site. These addresses are unique: there is only one google.com, and only one zacs.site. In this step, you will buy the rights to your own unique address that anyone in the world can use to get to your website.

As your public resume and home on the Internet, you will build a brand around this website; as the gateway to your site, take care in choosing a good domain name. This rules out unprofessional ones, and means you should pick one and stick to it. You will jot it down or spell it out for years, so get rid of any ideas for funny wordplay or creative spellings now. Choose something short, unambiguous, and — if possible — catchy or memorable. I recommend something based on your name.

I prefer to buy domain names at Hover. If you want an odd one like thisismy.site instead of thisismy.com, you could also use Namecheap. Both Hover and Namecheap have good how-to guides to help you through this process, so check those out. Make sure you get WHOIS protection, which both offer during checkout. This service will keep your name and address private. Other than that, though, take care to avoid any added products or services. No matter what anyone says, you do not need them. Most domains will set you back about $25 per year.

Step 2: Choose a Host #

Next, choose a host. For the novices reading this, these companies store your website on a computer — called a “server” — that anyone in the world can see. These servers have addresses that look like 156.100.101.102, though. Who wants to deal with that? Your domain name can mask that IP address behind the short and catchy domain name you bought earlier. This will make getting to your website easy for anyone in the world, and the host you choose here will keep it online 24/7/365.

Choosing a host sounds scary. It gets even scarier when facing monthly fees and the prospect of spinning up virtual machines on Amazon Web Services for a side project with little tangible value, so let me make this step easy for you. Look for a company with a free tier and easy scalability. This will keep your costs low, and on the off chance a post goes viral, the traffic won’t crash your server. Amazon S3 comes up all the time, but few think of Google Firebase. For some reason, no one talks about the easiest, cheapest, and most flexible host, and the one I recommend for all new websites.

Firebase’s free Spark plan has plenty of resources for a simple website. Even better, on the off chance a post goes viral, for pennies a month you can allow those resources to grow to keep your site online. I have yet to find an easier, more powerful host. Setup takes minutes, and even after days where I have had thousands of visitors, I have yet to pay a single bill. To create a free Firebase account, follow only step one in this guide. Do not move on to step two. You can also follow the short guide below:

Go to https://console.firebase.google.com/.
Click “Create a project”.
In the “Project Name” field, enter a name. Choose anything you want, or just use “public-website”. Don’t worry about changing the “Project ID” field.
Check all three checkboxes, then click “Create project”.
Firebase will take a few seconds to build everything. Click “Continue” once it finishes.

You now have a Google server set aside for your website, and a domain name to make it easy for people to get there. We will finish setting that up later, though, so move on to step three now.

Step 3: Choose a Blog Engine #

Blog engines build websites. Some have all sorts of fancy features, which come at the cost of speed and complexity. Others do a little less, but churn out lightweight sites and do not need a bunch of third-party tools just to function. I prefer the latter, and so I wrote First Crack. Given a thousand articles, my engine will build a full-featured, lightweight, static site in less than two seconds. I recommend First Crack, but you can choose anything you want. To follow along with this guide, though, your engine will need to give you a folder full of HTML files.

To get started with First Crack, open a shell window. On a Mac, open Spotlight with the shortcut ⌘+SPACE, type in terminal.app, hit return, then follow the steps below. You can also skip to the end for a single command that will take care of everything at once. On Windows, use a git client.

Copy this snippet, paste it into your shell, and hit return: git clone https://github.com/zacjszewczyk/FirstCrack-Public.git ~/FirstCrack. This will download First Crack into your home folder, in a folder called FirstCrack.
Open the FirstCrack folder with this command: cd ~/FirstCrack.
Use ls to see all the files in the folder.

Download First Crack and open the folder in one command by copying and pasting this into your shell, and hitting return: git clone https://zjszewczyk@bitbucket.org/zjszewczyk/firstcrack-public.git ~/FirstCrack; cd ~/FirstCrack.

Step 4: Build Your Site #

I will assume you chose First Crack for the rest of this guide. If you did, follow the steps below to build your new site; if not, build it with your engine, then move on to step five.

Setup First Crack by running the makefile. Just type make in your shell, and hit return.
First Crack will display some helpful information about the commands you can run with the makefile, then tell you that the configuration file does not exist. It will then ask if you want to set it up. Answer y and hit return.
First Crack will not build your website unless you answer each question. If one does not apply to you, enter None.
Once finished, First Crack will build your new website. Check it out with make preview, which will open the local copy in your default browser.

Step 5: Publish Your Site #

You now have a Google server, a domain name, and a website on your home computer. You must get that site to that server, though, and so we will focus on that next. The Firebase how-to does a nice job of walking you through this process, but so do I.

Go to the Node.js website and get npm, the Node Package Manager. Download the version recommended for most users, then double-click the .pkg file to install it.
Go back to the shell window from before, and enter this command: npm install -g firebase-tools. Wait until the Firebase install finishes.
Enter firebase login. Sign in to the Google account you used to create a Firebase project in step two.
Enter firebase init. Scroll down to “Hosting”, using the down arrow. Press the space bar to select this line, then hit return.
Scroll down to select the project name from step two, then hit enter.
When Firebase asks for a public directory, type in ./local and hit return. Do not use ./local/ or any other folder, unless you chose a blog engine other than First Crack.
Answer “n” to “Configure as a single-page app”. You want a full website.
First Crack comes with a 404.html page, so answer “n” when it asks to overwrite the existing one. Answer “n” when it asks you to overwrite index.html, too.
To make your new site live, use make deploy.

Firebase will upload local to your server, then display two URLs. Use the first, “Project Console”, to manage your site. The second, “Hosting URL”, replaces that ugly IP address we talked about earlier. You can use this to get to your server, like 156.100.101.102 earlier, but since public-site-12345.firebaseapp.com does little to improve on 156.100.101.102, let’s change that next.

To make your domain name redirect to your new site, open the “Project Console” URL. Login if necessary.
Click “Connect domain”, and enter the name you bought in step one. If, for example, you bought zacs.site, you would enter zacs.site in the first box.
Leave the redirect checkbox unchecked, then click “Continue”.
To verify that you own the domain name, you will need to add a TXT record. Google has helpful guides for Hover and Namecheap, so check those out. In general, though, find the advanced settings in your registrar, click the button to create a new entry, choose “TXT” for the type, and paste in the values Firebase provides.
Go back to the Firebase console and click “Verify”.
Once Firebase verifies that you own the domain name, go through similar steps to add “A” records. These “A” records will let anyone in the world type in your domain name and get redirected to the Hosting URL from before.
Click “Finish”. It may take a few hours for your domain to start redirecting to your version of public-site-12345.firebaseapp.com.

You now have a public website on your own custom domain. Anyone in the world can see this now, so let’s make it your own.

Your Next Steps #

Out of the box, First Crack gives you a working website. It has a home page, a blog, a place for projects, and a disclaimer with a copyright notice and some verbiage saying you speak for yourself alone. Make this site your own by editing the home page, writing about your projects, and posting your first article. I will walk you through this, but you should check out First Crack’s README, too.

Editing the Home and Projects Pages #

First Crack updates the blog and archives pages, and the RSS feed, every time you post something new, For the content of the home and projects pages, though, it looks to the HTML files in the system folder. Start by editing these.

In a text editor like Sublime Text or Notepad++, open index.html. Replace everything below <! — DIVIDER — > with a picture of yourself and a short bio. Remember, as your public resume and home on the Internet, you want this page to give potential employers and new acquaintances a polished first impression. I talk about myself, some of the things I wrote, and how readers can get in touch. Save the file, then move on to the projects page.

On this page, talk about all the projects you have ever worked on. They all deserve a shout out here, no matter how small. I got my first job in the Army because of some work I did on a Hacker News scraper, even though that project never amounted to anything. You never know what might catch someone’s eye.

I like to break up academic work, writing, and programming. Leave the stock table and headers in there for this layout, or toss them all out for your own. Save the file, then move on to posting your first article.

Posting Your First Article #

The Content folder has examples of the two types of blog posts First Crack supports. Use original articles for long-form original content, and linkposts to add in your two cents as you point your readers to something someone else wrote. This piece is an example of the former. Look to my recent link to Shawn Blanc’s excellent article Writing vs writing for an example of the latter.

For your first post, I recommend a short intro. Talk about yourself and your goals. Picture someone reading this because they want to know more about you, why you decided to start a website, and what they can expect from you in the future. Use this to set the tone for your entire website. Do a good job. Once you finish, save the file in the Content folder. Get rid of the two example posts, then rebuild your site with make. Preview your work with make preview. Edit as necessary, then make it all public with make deploy. Your new site will go live a few seconds later.

You now have a distinct and professional-looking website, open to the world, on your own custom domain. Aside from $2/month for the domain name, this will cost you nothing until you hit it big — so get to writing, already. It’s about time we heard from you.