Build a Website Hosted on GitHub

I have been thinking about creating a blog to write about my research and others for a long time. And i am actually having one using a free service provided by WordPress( link) and another one using Google Blogger created when i was a PhD student.Many more providers of personal website and/or blog site are out there, e.g., WIX, Google Site, etc. And WordPress is actually one of the most popular ones among people of many industries. However, I always do not feel comfortable with these platforms, especially considering they are always not free if you want to get rid of annoying advertisments on your site.

My attention was eventually drawn to GitHub. As one of the most popular code sharing platforms nowadays, it can also host websites as diverse as personal, group, projct, etc by storing source code, files, and other data. One clear advantage of using GitHub is it has NO ADs, offering us a clean persoanl website. So I did a little research on creating a blog on GitHub, and found the learning curve is not steep.

This post is served as a brief tutorial for building a personal website hosted on Github using Hugo and the Academic theme. Many website builders analogous to Hugo are out there(e.g. Jekyll). Here i chose Hugo because of the popularity in academia of the Academic Theme built for it. Following the 3 steps below closely, you will be able to start your own GitHub website in a few minutes:

Step 1: Install essential softwares

1. Have Hugo installed

2. Sign up a GitHub account

3. Get either Git or GitHub installed on your computer.

Step 2: Create GitHub Repos

Firstly create two git repositories both remotely under your GitHub account:

1. Fork the Academic Kickstart repository
2. Create a repository named ‘yourname.github.io’ (replace yourname with your own actual GitHub account name)

Then clone these two repos to your computer locally. To do so, first open a terminal and then type the following shell command to install the Academic Theme.

git clone https://github.com/bioatmosphere/academic-kickstart.git My_Website
cd My_Website
git submodule update --init --recursive

Step 3: Deploy on GitHub

In essence, deploying a webiste on GitHub is powered by its feature, GitHub Page. Here is an example of using GitHub Page to display the microbial model I am working on: DEMENTpy.

Firstly, run commands:

cd config/_default/
vi config.toml

In the config.toml file, set baseurl = “https://USERNAME.github.io/" (replace USERNAME with your own GitHub username).

Now run a command:

git submodule add -f -b master https://github.com/USERNAME/USERNAME.github.io.git public

Add your USERNAME.github.io repository into a submodule in a folder named public, replacing with your Github username:

hugo
cd public
git add .
git commit -m "Build website"
git push origin master
cd ..

Then what you need to do is just tailoring this site design framework futher to your own needs and flavor and creating contents spanning from blogs, slides, and pages to photos and videos. For all these refer to the Hugo and Academic Theme Documentation. For example, to write a new blog, run command:

hugo new --kind post post/my-first-post