Create a personal academic website (minimal coding)
You have arrived here as you are interested in creating a new and exciting website to showcase your research work and potentially appeal to recruiters. The problem is, like with all early researchers, you may not have the funds to spend on expensive hosting nor the time to mess around with HTML/CSS/JavaScript code (or those really laggy and annoying website builder companies).
This article will show you how to get a solid, responsive (works on web and mobile!) website up and running quickly, hosted on GitHub Pages, built with Jekyll, for free! The website will be easy to edit, will offer lots of customisation for a personal feel and will work on mobile too!
This article is based on the al-folio theme. If you want to have a look at how your website will look once you’ve finished this article — check it out here (don’t worry — I’ll show you how to make appearance and content changes!)
Some questions…
Do you need to know how to code to do this?
Not really, but some basic understanding may be handy. Nevertheless, I will talk you through each step of the way, including how to use GitHub. This article is targeted at researchers from all disciplines, not just computer science.
How much effort is it?
Not a lot. You‘ll need to install a few small things, but I’ll talk you through that step-by-step. It shouldn’t take you more than 30 mins to get your website up and running.
What can you include on your website?
Lots of things: an About You section, your publications, any projects you have worked on, news (e.g. “I recently attended a conference to present my new paper on…”), a digital CV (with an option to download a .pdf copy), links to other personal sites (social media, code repositories, Scholar), a blog section, possibly connected to Medium.com, and anything else you may think of.
Let’s get started…
First of all, I’m doing this on a Windows PC. MacOS may be slightly different, but you should be able to follow these steps just the same.
- Get a GitHub account.
Navigate to www.github.com and create an account.
GitHub will be a repository to store all our files and act as a server for our website.
2. Install GitHub on your computer.
You can use the command line version, or simply download the desktop app from https://desktop.github.com/ and log in.
This allows us to make changes to our site on our own computer, and push them up to GitHub to host.
I will be assuming you have the Github Desktop app during this article.
3. Install Jekyll
We are going to use Jekyll which is a static site generator. It does all the hard work for us — creates the layout, theme, icons etc. All we need to do is give it the content. But don’t worry, you’ll still be able to have control over your website’s appearance.
The full detailed instructions for each OS are here. I will talk you through the steps for Windows.
Download and install the latest Ruby+Devkit version from RubyInstaller Downloads.
Run the installer and check both boxes.
Make sure the run check box is checked and finish.
Type “3” and press enter.
Give it time to install, it can take a while.
Now we have ruby and the required toolchain, we can get Jekyll.
Open a command prompt in Windows and enter gem install jekyll bundler.
Once installed, run jekyll -v to check it has installed properly.
Done! You have Jekyll.
3. Set up a Jekyll template on your GitHub Pages
Now we have everything installed, we need to choose a template for our website. Jekyll has lots of templates that are free to use, we just need to pick one and pop it in our GitHub repository so we can make it ours.
I personally like this one. It’s well-documented, has lots of nice features and is targeted at academics. Feel free to explore other templates. This article is focused on the one in the link, but the general idea is the same for them all.
Follow that link and fork the repository.
(IMPORTANT) The repository name must be <your github username>.github.io (otherwise it won’t work!)
This naming convention is recognised as a special repository by GitHub where the code inside is automatically hosted on the GitHub Pages service.
Now you have your own version of the template files in your GitHub space.
Navigate to the Actions tab and enable workflows. This will allow GitHub to build our website automatically so we don’t have to do the work.
Then, navigate to the Settings tab > Pages and change the Source to the gh-pages branch and press Save.
Ok, everything is set up on GitHub now, but we need to make a few more changes before we can view our live website properly (GitHub will provide a live link to your website now, but the layout will not show properly yet).
4. Clone the project to your local computer
We need to get the project files from github.com onto our local computer so we can make changes to our website.
In the GitHub Desktop app, Clone repository.
You’ll need the URL for your project, you can get this from your Code tab on github.com.
Paste the URL and select a local path where you would like your files to sit. I chose my Documents\GitHub\ folder on my computer. Now press Clone.
Select For my own purposes and continue.
Now we have a local version of all our project files. The idea is that we edit these locally, and then push them up to GitHub once we are happy with our changes.
4. Configure your website URL
Let’s make the first necessary change to our project.
Although using Jekyll requires nearly no coding, I would strongly recommend using a code editor. This will allow us to make changes efficiently on a nice usable interface before we push them to the live site.
There are lots of different editors out there. I recommend https://atom.io/ as it is free and lightweight.
Open your project in a code editor.
Don’t be intimidated by the number of files, it will all become apparent!
Navigate to the _config.yml file. This is where all the important information/settings for your website are.
You’ll see that the .yml files are made up of tags such as first_name: which we can simply change the values of. Jekyll handles formatting and styling in the background.
We need to change the url: tag to <your github username>.github.io. Then change the baseurl: tag to empty.
Once complete, your file should look like the above image.
5. Push your changes to GitHub
We have made a change locally on our computer but for this to take effect on the live website we need to push our changes up to GitHub.
On the GitHub Desktop app, you’ll see the changes that you have made in the project space.
Commit these (you may need to give the commit a name).
And Push.
You will need to repeat these commit and push steps any time you want your local changes to be made available on the live website.
6. Let’s look at our live website
Once you push changes, GitHub initiates a workflow to build and deploy the website. This can take a few minutes, but you can view the progress in the Actions tab.
This will also report any build errors due to bad code you may have written.
Once the workflow has completed successfully, in your web browser, navigate to <your username>.github.io
Great! Our website is now live.
You’ll notice a few things here. Firstly, the URL is not custom (it has “github.io” in it). If you want a custom URL, for example, “www.carlobee.com” you’ll need to buy this from a domain service (they are usually fairly cheap, with yearly payments). I will make an article on how to do this shortly.
Secondly, the live website is still the template of someone else’s work! We need to add our own content.
7. Make changes to your website
Let’s go back into our code editor and open the _config.yml file.
Add your own name to the name tags. Scroll further down and add you username to the github_username: tag on line 70.
Make sure your files are saved.
Now, to see the change take effect on the live site we need to commit and push to GitHub like before, but we don’t want to do this every time we make a tiny change. So we need a development view that only we have access to while we are making changes. Then only once we are happy with our development version of the site we can push to the live GitHub site.
To do this, open a command prompt in Windows and navigate to your GitHub project space. Enter bundle exec jekyll serve.
This starts a new local server so we can view our website privately.
You may get an error like the one above, if so, open the Gemfile and remove the line gem 'miniracer'. We won’t need it.
Save a rerun the bundle exec jekyll serve command if necessary.
This can take a few minutes but once done, your website will now be hosted locally at the server address given in the command prompt (http://127.0.0.1:4000).
Paste this into your web browser.
We can now see our changes have taken effect (scroll down to the GitHub icon and it should link you to your GitHub page!).
(Important) Every time we make changes to the _config.yml file, we need to re-run the jekyll serve command, as refreshing the web page does not allow the changes to take automatic effect. This is irritating as the command can take time to run, but a normal quirk of Jekyll. I recommend making as many changes as possible to config.yml before running. But good news — all other file changes will take effect by just refreshing the webpage (meaning you can keep the command prompt running while you make changes locally)!
8. Push local changes to your live website
Once you are happy with your changes on the local server, just do the same commit and push operations as before on the GitHub Desktop app!
Your changes will take a few minutes to go live while the GitHub workflow runs.
Remember to ctrl+c in the command prompt to stop the Jekyll server once you are done with it.
9. Customising other parts of the website
I have shown you how to make basic changes to the _config.yml file by changing your name and adding links, but there is much more you can do with this specific template!
You can: add lots of social media links/icons; enable and disable certain display elements using true/false values for the tags; create posts/blogs/publications/CVs; and lots more.
The author of the template documents some of the features here and how to use them, but I would strongly recommend exploring the files yourself and experimenting by changing tags and editing the .md files which hold the content for pages such as CV’s and blogs.
If you really don’t like how a certain part of the website looks and there is no tag to change it, you can dive deeper into the CSS/HTML code and manually change it.
Some things to note…
- images are stored in /assets/img. You can replace existing ones or add new ones
- if you want to delete a post, or page from the navbar, just delete its corresponding file
- the colours that the theme uses can be changed in /_sass/_variables.scss
- don’t include your bare email address on your website unless you want lots of spam
Thanks for reading!
You should now hopefully have a fully operational live website with an academic look. You can edit this website locally, and when you are happy you can push these changes to the live version for everyone to see.
Be sure to subscribe and give this article a 👏 if you liked it.
