How did Alex make this website????

This website was hard to make. I had to spend a lot of time reading manuals and guides. Now that I have some experience, though, I bet I could do it again a lot faster. Some aspects of this were very easy though.

I could then tell all the DNS servers that ahartman.me should point to the server.

Then it got a little more involved because I had to choose what software to use. I had to pick between many similar open-source softwares to use.


I was tempted to make this website be old-school plain, hand-made html files with no styling, but that would make adding content kind of tedious. I wound up choosing Pico because it's very simplistic, and will allow me to write in a combination of pure html and a convenient markdown syntax. Adding pages is simply adding folders and files. Or, there's a nice plugin called pico_edit that I'm using now to allow an admin page to edit the whole site with a browser.

I also followed my host's recommended security guides. That meant configuring more softwares to do things like establish a firewall and harden remote access. Pico edit is probably a security no-no because I can't really harden that login interface. Its authors recommend only using it on a local github repository and then just syncing the results with the actual server.


So though you could say I "made" this website, I really am just stringing together a lot of software that other people have wrote. I am just a user to those people. It still required a lot of technical knowledge, and I had to become familiar with how each piece of this system works. They all have their quirks: command-line arguments, .conf files, error messages and logs. But, I was able to do it without having to reinvent the wheel. I just had to read a lot of documentation.

Customizing Update

The main reason I chose to make the site this way (not the easiest way) is because I like to learn about how things work, and if I'm going to put something out on the internet with my name on it I really want it to be mine. There are services that you can just point your domain to that will set up a "professional" site for you for a small fee. Or you can get a hosting provider that will install wordpress for you. Or you can go to fiverr and get a "professional website design" for $5. I've done way more work on this site than I really needed to, beause I wanted to make something I can call my own. What have I done?

Pico uses twig: a PHP template engine, along with the usual CSS and HTML for style, and markdown files for the contents of the templates.

Twig

I don't have experience programming in PHP or javascript, so Pico CMS is a good choice for me because I can fully customize everything else while I let the PHP code work out of sight. Twig is a "PHP template engine." What I've seen of it is .twig files that I can assign to pages of this website. The .twig files look like a HTML webiste file with references to metadata mixed in there like:

<h1>{{ site_title }}</h1> or {{ content }}. You can also put a little program logic in there like:

{% for page in pages(depthOffset=-1) if page.title and not page.hidden %}
    ...

It's a very clever system here that lets the content of one page change based on the YAML header metadata of others. My blog index page will list the titles and dates of posts. As I create more posts, they are automatically added to that page, I don't have to edit the index page anymore once the template is set up how I like it.

CSS & HTML

Another area that I had no experience in (until now). CSS is deceptively complicated. It's a technology that was supposed to make styling websites easy, and it has. I can go to one line in a CSS sheet and change the font of all paragraphs on all pages by altering one line. It doesn't make everything easy, though. To change the style of the site to accomodate different screen sizes is challenging. A webiste desinged for use on a mobile device is a lot different that a good webiste for a desktop user. CSS lets you add conditions based on client resoultion, but it's hard to make a website look good in every case. I just chose a few and focused on making those look allright while compromising with other cases so that they're not too bad.

Using markdown to generate most of the content is great because I can make posts with a plain text editor and know that things will look allright. HTML is required though, because markdown isn't as precise. In my markdown (.md) files I can insert a block of HTML code. This is great for specifying the size/postion of an image, or a different style of text. Or, embedding something from somewhere else. But you'd probably just copy+paste that.

I'm not really a webiste designer. I mainly just picked apart the default theme for pico and made it more like I wanted. I used paletton to come up with a cool color scheme, and I always liked the overpass font.

Most of the work was in the CSS files, and some was making/tweaking .twig templates. Some things remain that might "give away" that I based it on a template theme, but I think it looks different enough.

Certification

Another thing that self-hosters should do is get a SSL Certificate. It costs money. It cost me $19.40 for 5 years.
What does it do?
A "Certificate Authority" is a third party that issues a certificate that your browser checks to make sure that my server actually belongs to me. I had to pay ssls.com the money and they made me upload a token to a publicly visible spot on my website, here.
The browser knows the certificate is legit because it comes from the trusted authority and is signed by them. This also legitimizes my server's public key, and from there a browser will exchange data with my server through HTTPS.

So now you can enjoy a little padlock in your address bar:

secure
I have read that this makes my website very good. It supposedly makes Google trust it more and more likely to index it, and looks more professional. My website doesn't have any sensitive information. You can't enter your credit card or address anywhere here. In my case this security prevents someone else from impersonating my computer.

I had to reconfigure NGINX to make this work. The CA gave me a certificate and generated a private key for my server to use. I downloaded them and told NGINX to use SSL and told it where the files were (and made sure it had permission to access).
Then I had to tell the server to listen on port 443 (the HTTPS standard) and handle requests the same way it did on port 80.
But then I noticed that when I typed "ahartman.me" in my browser I was getting the unencrypted version. So I changed the NGINX server again to redirect all requests on port 80 to go through port 443 and use HTTPS. So now you cannot access the site without HTTPS.
This seemed strange but I gave it a google and it seems like this is normal.

If you want to make your own site / Conclusion

If you're a normal person, just use squarespace, a hosting provider that will set up wordpress for you, or some other similar service. Buy your domain name from anybody, Google has worked for me. I've also seen wix will do all the work for you and make a pretty nice site.

But if you're trying to be cool or show that you have technical ability, or show that you have style, you should consider making your site unique. Don't just use templates, prefabs, and other services!

If you like to learn about how websites work, or want that extra customization, I think setting up the webserver yourself is not too hard and a good exercise. I also don't think squarespace, etc. will let you add a Minecraft server or whatever else you might want later.