How I maintain this website
You want to build a website. How to go about it? You've got website builders like Wix; Content Management Systems like Wordpress, Drupal or Joomla; WYSIWYG (What You See Is What You Get) website builders like Dreamweaver; Or even plain old HTML and CSS. There is a plethora of ways to build your own website.
Some options offer a huge ecosystem with themes, extensions and maybe even a support community. Other options are from the stone age and should never be used again - looking at you, Dreamweaver. Some are convenient some less so. Some are large and require significant resources, some are tiny and can be hosted on a potato.
Then when you've picked how you're going to build your website, next comes where to host it. In case of things like Wix, that option is easy. They host it for you. This obviously comes at a cost. There are also free options, like hosting your website on GitHub pages, but that means you've got to be a little more technical as it has a learning curve.
You could also buy space on a web host and use that, but does this web host offer all the functionality you require? For instance, if you want a Wordpress site, you'll need to be able to have a database. Or you could just host it yourself on your own pc, which needs to run 24/7 or the website goes down. Or maybe you've got a Raspberry PI lying around. You could host it there.
The point is, there's a lot of options and with decent research anyone can have a website. My way of doing it is a little... different.
My way of doing it
I've got something of a hybrid setup going. I have a web hosting provider, which I pay (very little for) yearly. This includes a domain name (the one up top) and a nice email service.
The site you see here (and you can check its source code) is plain HTML and CSS. I wanted a simple site and I made a simple site. I wrote the code for it and put it on my server... however, I then began to contemplate how to maintain a blog on an HTML/CSS only website. If I was to add a post, I'd need to create a new page with the post. I'd then need to update the index, to show said post on the top of the list and remove the oldest post. Next I'd have to add a link to the post on the All posts archive page and finally I'd have to update the RSS feed.
No.
That's not gonna happen, that's way too much work. So, I decided to make use of a Static Site Generator, which is software which will, in my case, turn a bit of Markdown into an HTML site. After a long-long time searching for one that was right for me, I found Eleventy.
Eleventy
I've got a couple of reasons for picking Eleventy:
- It's open source;
- It converts Markdown to HTML;
- It's easy to set up;
- No database required;
- It has a live edit function.
Number 5 may be a bit cryptic, but in a nutshell, it means that when I am working on the website locally (not online, but on my own computer), all edits I make are shown in real-time on a temporary locally hosted instance of the site. This makes editing easy as it makes edits to the looks of the site immediately visible. It's also great for proofreading.
Version control and hosting
I want version control. I really do (and so should you). I need to be able to revert changes I've made and I like keeping a record of when I did what and I want to be able to undo mistakes I've made with ease. I also want to be able to update my site with one command. Like say pushing to a Git repository. I need Git.
I also want to have full control of the content, so hosting on something like GitHub pages is out. I have my own web host, so I can host there. They don't have a way to also have a Git repository for the site, though so I need a way to combine the two. I need a script. And a script I wrote!
#!/usr/bin/env bash
# UpdateWebsite 1.0
# Updates my website
# Dependencies: npm, eleventy, rsync, git
#
# By Joris van Dijk | Jorisvandijk.com
# Licensed under the GNU General Public License v3.0
echo "Updating website!"
cd $HOME/Website-builder
npx @11ty/eleventy
git status
read -p "Git commit message: " COMMIT
git add .
git commit -m "$COMMIT"
git push
cp -r _site/* $HOME/Website/
cd $HOME/Website
git status
git add .
git commit -m "$COMMIT"
git push
rsync -rvz -e 'ssh -p 7685' --progress [LOCAL DIR]/* [REMOTE DIR]/public_html/
read -p "Done! Press any key to exit"So what's going on here?
Usually I go into exactly how I set stuff up, but I feel this is unneeded in this case. Just install Eleventy and read how to use it. Set up some Git repositories and read how to use them. Use the script and understand how to use it.
Basically I write a new post, then I'd run the script which tells Eleventy to build the website. Next the script asks me what's changed, and I can type that in which is what's used as the commit message on both Git repos. Yes both. One for the base unbuild Eleventy directory and one for the built website directory. So the script pushes the changes to both repositories. Next the script uses rsync to sync the local built website directory with the public_html directory on my server over SSH. And that's that.
I have an updated website, I have a repository which holds the website's repository with a great changelog and I have a repository which has the base Eleventy version of my site.
Like I said before. Kinda different, but works for me.