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.
You will need a couple accounts to get started.
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!
- Go to Forestry.io and “Select a Starter Template”
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.
The default name for your repo is fine:
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.”
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!
5. When you are done, you are ready to deploy to Netlify. To do this, go to Netlify and select “New site from Git”.
The build settings that worked for my template were:
hugo --gc --minify
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.
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.
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.
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!