Setting up a personal website with Github Pages

Here is a post summarizing my experience with hosting a personal website using github pages.

I was trying to host my personal website with github pages with the “minima” theme. Here are some steps and information on how to use the github pages directory.

The biggest issue is that we want to write static html website for setting up photos, tables, publication items. This cannot be easily done with the markdown files processed with Jekyll system. What we want to do is to have a way to have github pages host a html file.

The key folders are “_includes/” and “_layouts/”. “_includes/” have static html files that are set up in the “_layouts” . Files in “_layouts/” sets up the overall structure of the page. Specifically, “_layouts/default.html” is the key file that sets up which static html files are going to be included and where they are going to be displayed. For my simple website, I simply have this file to include only a “_includes/main.html” static html files.

<!DOCTYPE html>

<html lang=“{{ page.lang | default: site.lang | default: “en” }}”>

  {%- include head.html -%}

  <body>

<!–     {%- include header.html -%} –>

    {%- include main.html -%}

  </body>

</html>

This way, the entire page is basically a static html for now. This file doesn’t have to be main.html. You can always edit the “default.html” file to add in new features provided in Jekyll, such as  posts.

Now you can just directly edit main.html as a static page, and github pages will automatically host the page.

The css files are in the “_sass/” directory. You can edit that file for table styles (hide border and change background color for example).

Finally, if you want to check the final generated html files, you can look at the html files in the “_site” directory. These html files are created by combing the html files in “_layouts” and “_includes”.  You shouldn’t try to directly edit the html files in “_site”, those files are going to be regenerated every once in a while. As a result, you need to locate the specific file in either “_includes” or “_layouts”.

A few notes about some of the issues I ran into during the process

  • image: github pages match image names in a case sensitive manner (the local Jekyll doesn’t). As a result, you might see images display correctly in the locally hosted website, but not in the final github pages.
  • table style: you have to modify the css file to change the table border style.

 

 

This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s