Quarantine Activity: Make personal websites with your kids

I made my first website when I was in middle school because I was blessed with an incredible public education system in Maryland and to be part of an awesome magnet program at Takoma Park Middle School. Our school had a computer science lab (uncommon at the time) with desktops and bubbly iMac G3s and many great computer science teachers including one I accidentally called “Mom” in exasperation once (more on that another time).

One year, we learned Microsoft tools from a VERY big book, entirely self-guided. I remember it being extremely boring but, looking back, it taught me extremely useful Excel skills that could constitute basic computer literacy today at any entry-level job. My all-time favorite unit though was the one where we learned basic HTML and CSS to make our own websites that we hosted on our school’s server (with our own subdomains).

I ended up making a website with a black background that said something like “Welcome to Jessica’s website” on the top. The crown jewel of my one-page website though was an image of a silver iPod Nano. I learned about linking (a hrefs) and created an image map where if you clicked on different parts of the iPod wheel, the text on the iPod screen changed. Pretty good for a middle schooler, right? Anyways, I thought it was SO COOL. I loved that I had my own website that was entirely mine. I loved that I had full creative control over how it looked. I loved that I could make the screen respond to my clicks. If I had to single out one defining moment in my life to explain why I became so interested in tech, it was probably working on that project.

I have two younger siblings who are about middle-school aged now and I’ve been trying to figure out how I could re-create that magic for them remotely and with technology that is accessible to them. As I was exploring options, I was delighted with how easy it was. BOY has technology improved leaps and bounds since I was in middle school! Setting up a website in a way that is accessible to middle-school-aged kids is crazy simple now with the modern internet stack and I wanted to walk through that process so you could do it with your family too. At worst, it’s an interesting quarantine activity for the family. At best, it might inspire a life-long interest in technology (like it did for me!) and allow them to experience the magic that I felt in middle school with my (very bad) iPod Nano website.

The Basics:

You will need a couple accounts to get started.

The first is a Gitlab account. Gitlab allows you to manage Git (version control) really easily and has a couple great add-on features to manage the deployment lifecycle. A Github account also works.

The second is a Netlify account. Netlify allows you to continuously deploy from a Git repository to a URL and also has super easy custom URL set-up (including setting up all the annoying HTTPS security if you buy a custom domain from them).

Lastly, Forestry.io is an awesome Content Management Software (CMS) I found that allows a non-technical audience to edit content on a website and commit to a Git project like a boss. This functionality was really important to me because I did NOT want to try to teach my two middle-schoolers about SSH keys or Terminal or how to add/commit/push because that stuff is super not accessible to a non-technical audience.

Alright, let’s get started!

  1. Go to Forestry.io and “Select a Starter Template”
Image for post
Image for post
So many templates to choose from!

2. Forestry does a ton of the heavy lifting with a built-in selection of starter templates with awesome front-end (way better than my middle school website).

Select a template you like and select Gitlab as your Git Provider.

Image for post
Image for post
As I mentioned, you can use Github or Gitlab.

The default name for your repo is fine:

Image for post
Image for post
The default name for the repo is fine or if you want to deploy through Gitlab/Github pages, you can name the repo `username.gitlab.io` or similar.

3. In the new site that Forestry sets up for you, you can add/make changes to posts and settings on the website as well as upload new photos to the website. Forestry also has a great Preview functionality so you can view your changes in (almost) real-time with a preview server. To turn this on, go to “Settings” and hit “Start Preview.”

Image for post
Image for post
Follow the green button!

4. Forestry is pretty self-explanatory so play around and add a different logo, social media links, text, maybe a post or two. If you are looking for free, cool icons to put in as your favicon or logo, check out The Noun Project.

When you save your changes, these are automatically committed to your Gitlab repository with the comment “Update from Forestry.io”.

Wow, that’s SO cool!

Image for post
Image for post
Git comment from Forestry update. Magic!

5. When you are done, you are ready to deploy to Netlify. To do this, go to Netlify and select “New site from Git”.

Image for post
Image for post
Follow the green button again!

The build settings that worked for my template were:

Build Command:hugo --gc --minify

Publish directory:public

But yours may be different depending on the template you selected.

That’s it! Any changes you make to the website via Forestry.io will be auto-published and kick off a re-deployment of the website.

Image for post
Image for post
This continuous deployment is so cool!

I also had to set the Hugo version as an environment variable to make my template work. To do this, go to “Settings” and “Build and Deploy.” In environment variables, set the variable to HUGO_VERSION and value to 0.69.0.

Image for post
Image for post

6. If you would like to set up a custom URL, just click “Domain Settings” and “Add custom domain”. If the domain you search is available to purchase, you can purchase it directly from Netlify and they will handle the DNS settings and HTTPS security certifications.

Image for post
Image for post
If your domain is purchasable, you can buy it directly from Netlify or use a domain you already own from Namecheap or GoDaddy.

Done! 🎉🎉🎉

Pretty cool right? Hopefully, this was super accessible, even for a non-technical audience, and shows you don’t have to be a computer whiz to set up your own website!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store