Tech news 3: Building a free website easy

experience
webdev
technews
Published

September 22, 2023

This month, I thought of giving you some basic info on how to build a website the easy way to have a personal space where to advertise yourself or your current project. Github will help again, they offer the place to store the code, the engine that builds the website and they even host your website, all for free.

The Creation

It’s called Github Pages and they are doing an excellent job at explaining how to create, modify and personalise your website. They have a step by step guide here. And it’s only 5 steps! If could summarise it even more:

  1. Go to GitHub.com, create a public repository called username.github.io
  2. From GitHub.com or from your local machine, crate a file index.html and commit (and push it if you’re on your computer)
  3. GitHub Pages will build and publish your website at the address https://username.github.io

Then every time you will make a change, add a page, add an image and commit, the website is going to be automatically updated! Pages are written using Markdown, maybe you are already familiar with this way of writing formatted text, it’s basic and intuitive. I go here when looking for help on Markdown. Github Pages will translate this readable and simple markdown into html.

Adding content

At this stage, the website is completely empty and creating a distinctive style and all pages (About me, My publications, My projects, My data sets, My cooking recipes, Hire me…) could be a challenge but I have a couple of tips to help you get started:

  • You can just copy paste somebody’s website and replace only the text that you need… Emma and Dani use Github Pages for their personal websites (see also Matthias’) and Emma is building one for the Restore Project
  • Use a theme that will give you more freedom than the few themes found in the Github Pages settings. Emma recommends Minimal Mistakes, you can directly fork their repository in your Github account and get an entire template/skeleton to play with and they have very good documentation on how to do just that.
  • Commit often to detect any errors. From that point of view, it helps working from your computer where you could have a more complex setup and build the website locally to avoid having remote servers working so intensively. It would also be more interactive: the website is rebuild each time you save a modification, you don’t even need to commit changes to see your website change.

Jekyll

A more technical note, the engine that translates your Markdown pages into HTML is called Jekyll. It was developed for blogging but works well for websites focused on pages too. If you choose to build a website and begin making changes to the style or the structure, you’ll encounter documentation about Jekyll, it means you’re at the right place.

While helping Emma moving the Restore’s website from an expensive website builder to Github Pages, I documented the steps I followed to install Jekyll on my Mac, use the Minimal Mistakes theme and build and modify the website on my machine. See here.

Conclusion

I hope this brief introduction gave you a better idea on how to begin and what helpful tools, and difficulties…, lay in front of you. Maybe we do a live hands-on website building workshop in group meeting soon?

Cheers,

Alban