I use the Jekyll theme: al-folio to build my academic page. My system is Windows 10, and I spent some time to finally setup the page on local host and the Github Pages.

The following steps are mainly based on al-folio Getting Started. Please read through it first.

Create a new repo

I use this template and create a new repository. Steps are here. In order to upload the page to my Github Pages later, I need to set the repository name exactly as the username Perian-Yan.github.io.

Once the new repo is created, I git clone it to my local directory:

git clone git@github.com:Perian-Yan/Perian-Yan.github.io.git
cd Perian-Yan.github.io

Setup webpage locally

First, check if Ruby, Bundler, and Jekyll have been installed on the device by checking the version:

ruby -v
bundle -v
jekyll -v

I haven’t installed Ruby at the beginning, so I downloaded it from RubyInstaller.

When I run bundle install, an error about mini_racer occurs:

This is because MiniRacer does not support Windows anymore (see MiniRacer).

The problem, however, can be resolved by commenting out mini_racer and adding gem 'wdm', '~> 0.1.0' in the Gemfile, and installing Node.js, see this thread for more details.

The next step is to install Jupyter, otherwise it will cause errors when you run jekyll serve later:

I already have conda environment and Jupyter installed. Check the Jupyter’s version in conda environment:

jupyter --version

Finally, run bundle exec jekyll serve (add flag --trace or --verbose to show the detail if any errors happen).

Before everything going well, I have to disable imagemagick in _config.yml file (set enabled: false). Otherwise, I get the error below:

Now, I can run bundle exec jekyll serve smoothly and I can connect the local host https://127.0.0.1:4000 to see my webpage.

Success!

Deploy webpage to Github Pages

To deploy the website to Github Pages, I just followed the instructions al-folio Deployment. It will automatically deploy everything, which may take 1-2 minutes. If it fails to deploy, you can run workflow manually.

Enjoy!

Now everytime I change my page, I can view it locally. To view it in Github Pages, just git push!

edit config file

Check the tutorial video to see how to edit the template.

insert images in posts

The side-effect of disabling imagemagick is that I can not use markdown version to insert images.

![Some text](image.png)

The workaround is to follow the template, use html and always store images under assets. More details at Bootstrap-Grid and Bootstrap-Images.

edit cv

Changing _data/cv.yml has no effects on the webpage because resume.json will first be used if it’s defined in _config.yml. To load the contents of _data/cv.yml, just commet out lines below “Get external JSON data” in _config.yml. See this discussion.