Creating a Professional Website Hosted on Github

Websites! They exist for many occasions – companies, brands, your favourite youtuber. Creating a website as a researcher is a great way to showcase your research interests and work you’ve done, and it lets others find out who you are and be able to contact you. As an academic, a professional website is primarily viewed by potential employers, collaborators, colleagues, or non-scientists looking to contact you for a talk. This Astrobite will introduce how to build and maintain a professional website, and also touches on a lot of the ideas shared in Emily Moravec‘s article, Creating a Website to Promote Your Scientific Work.

What to put on a website?

Some things that are standard (and recommended) to put on the main page of a website include (1) a brief introduction, including your name, career stage, institution, and research interests; (2) a picture of yourself; and (3) your contact information, like your student or institution email address. For those who have some research experience, a list of publications, a more detailed summary of your research, and a CV (or condensed CV) are all great things to include.

Websites don’t have to be just this though – you can include even more about what you do. This could be  scientific outreach involvement, a blog of professional updates, or a small section on what you do outwith work. For example, my website includes sections on my research, outreach, and photography.

Deciding how to word a professional website can be intimidating, especially when writing it for the first time. For some inspiration, it can be helpful to get Googling and look at websites that others in astronomy and astrophysics have made. You can also ask if anyone in your research department knows anyone with a good website.

How to create a website?

Websites require scripts written in HTML and CSS, which determine the content and style of the page respectively. They also need a server to be hosted on. If you know some HTML and CSS, it can be fun to code a website yourself. But if you’re unfamiliar, there are many free templates available, such as those on HTML5up.

There are also various options for hosting a website. Some (like Astrobites!) use WordPress, while others host theirs on their research department’s servers (usually in a public_html folder on said server), or on GitHub, which is what we’ll focus on today. Github isn’t just for project version control with git – it  provides a simple way to host a website. A website hosted on github is contained within its own repository, which has to be named <username>.github.io for the webpage to build. This repository must be public, which means that the scripts and resources in it will be visible to anyone if they go looking for it. Take a look at the example respository used in this tutorial for more insights into the creation process.

Creating a new public repository for the website, for user pizzacat618 with repository name pizzacat618.github.io

Creating this repository, in addition to creating an initial README.md, index.html, or index.md file in the main folder of the repository, will create the front page of your website.

The new repository with an index.html file containing a Hello world line.

Github will build and deploy the website, as can be seen from the ‘Actions’ tab of the repository. If you commit any new changes to the repository, or if there are any errors in building the website, they will appear here. You can also go to Settings > Pages to see what git branch and folder in your repository the website is being built from. By default this should be the root folder of the main branch. If you ever want to unpublish the site, this is where to do it.

The actions page of the git repository which shows the building and deployment of the website.

Now we can go to pizzacat618.github.ioand see our website ready and waiting. How simple!

The front page of the website, found out pizzacat618.github.io, after the intial creation of an index.html file in the repository

We can edit the index.html file to have more content, upload files to your git repo, or create new folders in the root folder, which can then be found at <username>.github.io/folder_name. You can also clone your git repo to your local machine, and edit and add new files before committing and pushing them to the github repository. This gives you the flexibility to edit the website scripts in a different code editor, or preview the website multiple times without having to commit it to git each time.

The front page of the website after editing the index.html file to include more information, some page styling, and an image hosted in the repository

Keeping up with your website

If you’ve followed the tutorial and created your own website, congrats! Now how do you tell people about it? You can link your website in presentations, on your CV, or in the READMEs of your other projects. If your research advisor has a website with details of their research group, you could ask them to link to your website there. Once you have a website it’s also a good idea to keep it updated with any new work, career changes, or new CVs. I find it’s helpful to do a bigger website refresh once a year, and smaller changes a few times a year. Your website can, and always will be, something to develop further, so start simple and keep going.

Edited by Diana Solano-Oropeza

Featured image credit: Storm Colloms

About Storm Colloms

Storm is a postgraduate researcher at the University of Glasgow, Scotland. They work on understanding populations of binary black holes and neutron stars from the gravitational wave signals emitted when they merge, and what that tells us about the lives and deaths of massive stars. Outwith astrophysics they spend their time taking digital and film photos, and making fun doodles of their research.

Discover more from astrobites

Subscribe to get the latest posts to your email.

Leave a Reply

Astrobites is recruiting!Click here to apply!
+

Discover more from astrobites

Subscribe now to keep reading and get access to the full archive.

Continue reading