Github Pages Themes Free

Posted onby admin
  1. Github Pages Examples
  2. Free Github Pages Themes
  3. Github Pages Theme Not Working

A few months ago, I logged into my GitHub account. I had it since 2015 but wasn’t able to add anything until recently. I was trying to learn how things work around Git and GitHub when I learned about hosting static websites via GitHub Pages. Since I recently had an idea of having my personal site to put things I learned and some projects that I will do, I grabbed this opportunity to setup a personal site and host it via GitHub Pages.

Set Up Website with Jekyll and GitHub Pages

Github Pages Examples

Creating and hosting a site on GitHub is pretty easy, based on my experience. I used Jekyll as my static site generator because it is easy to setup and use. Also it is adopted in GitHub Pages. Below are the steps I took to setup my personal site which you can try on building your own site:

Github Pages Themes Free
  1. Create a repository following the naming format <username>.github.io

    This format basically tells GitHub that you are creating a User Page. Another type of a GitHub Page is the Project Page which is available at <username>.github.io/project-name/.

  2. Choose a jekyll theme

    I first selected a theme from the theme chooser. To do this, go to the Settings Page, scroll down to the GitHub Pages section, and click the Choose a theme button.

    There’s a list of officially supported themes by GitHub Pages. Click on any theme to see how they look and click Select theme button to choose.

    After choosing a theme, a new file will be added to the repository, _config.yml. It just contained the line theme: jekyll-theme-architect, which was the theme I chose.

    From here, a static site is already available via https://<username>.github.io.

  3. Developer Setup on PC

    So far, all the steps I listed was done in the browser. To actually work on adding content and setting up the configurations for the site, I needed to setup my local workspace for the project. These steps are also documented on this repository’s wiki.

    • Install ruby and jekyll.
    • Clone this repository and move to the directory.
    • Create a file named Gemfile and write the following content:
    • Build and serve the page, it will be in http://localhost:4000 by default and rebuilds the site for every changes saved.

    Now, any changes can be tested locally by serving the site on the local server.

  4. Choose a remote jekyll theme

    With all the basics done, I wanted to use a different jekyll theme not included on the officially supported jekyll themes on GitHub Pages. I browsed some themes on https://jekyllthemes.io/ and I found minimal-mistakes theme. In order to use a theme not officially supported by GitHub Pages, simply update the _config.yml file. Instead of using theme:, replace it with remote_theme:. My _config.yml file now has the line:

    A requirement with the minimal-mistakes theme was to add jekyll-include-cache to the plugins list. I added it to _config.yml:

    And added it to Gemfile:

    Commit and push the change on _config.yml and Gemfile. https://<username>.github.io should be updated with the new theme.

Themes

After you have added the values, your Secrets page on your forked ghost theme repository on GitHub would look something like this: Note that this repository already contains a '.github' directory. If your theme's repository does not have the '.github' directory, then you would have to create one as well. GitHub Pages are public web pages for users, organizations, and repositories, that are freely hosted on GitHub’s github.io domain or on a custom domain name of your choice. GitHub Pages are powered by Jekyll behind the scenes, so they’re a great way to host your Jekyll-powered website for free. A nice free landing page theme. A simple & clean portfolio theme. GitHub Pages themes. All premium themes. All free themes. Get updates about new GitHub Pages themes. We email our list around once a month with all the latest theme updates, special offers and useful resources.

Adding Content to the Site

Once website is hosted, adding content should be easy. Make sure to read on the docs of Jekyll and the theme chosen. For my site, I basically followed the guide from the documentation of the jekyll theme (minimal-mistakes) I am using. For the content of my site, I used Markdown syntax to add styling to the pages/posts. A good resource to learn Markdown is to read this article.Below are the steps I took to add content to my site and some other additional tasks:

  1. Pages

    The home page content is inside the index.html file. At the start of the file, the following Front Matter is added:

    Every page or posts must have Front Matter in order to add layout and other meta data needed in the page or post. Learn more about Front Matter from the Jekyll Docs.

    I’ve added the following on _config.yml to list recent posts on the Home page:

    For other pages, I wrote the following content on _data/navigation.yml file to add them to the page menu/navigation:

    The files for both About and Projects pages are in _pages folder, named about.md and projects.md respectively. Permalinks are also added in the Front Matter of each file matching the url value in the _data/navigation.yml file. For example, about.md has the following Front Matter:

    Finally, to make sure that these _pages/ files are read/seen by Jekyll, I added the following line to _config.yml:

  2. Blogs

    To add blog articles to the site, like this article, I simply add a new file with the format yyyy-mm-dd-title-separated-by-dash.md under the _posts directory. This is the usual format and directory for posts in Jekyll. Any setting or meta data are again configured in the Front Matter of each blog/article file. For example, this blog’s Front Matter looks like the following:

    For blog drafts, the files are put under the _drafts folder so jekyll won’t publish them. And in order to preview these drafts in the local server, simply add --drafts to the jekyll command:

    For all other settings/configuration, you can check it on this site’s _config.yml

  3. RSS Feed and Favicon (just extra stuffs)

    My site is already up and has content. The first few things I noticed was a missing feed.xml when FEED link at the footer is clicked and also I wanted to have a custom icon for the website.

    To add the feed.xml file, I added jekyll-feed to the plugins list in _config.yml and gem 'jekyll-feed' in the Gemfile. Run bundle install and bundle exec jekyll serve locally to test if missing feed.xml is fixed.

    For the website icon, I created it using Microsoft’s Paint :). I am not an art kinda guy so I created a simple icon via Paint. I made it a transparent png file using this online png tool. With that transparent png file, I created the favicon via https://realfavicongenerator.net/. I added the output favicon.ico file to the root folder of this site.

Next Steps

I was able to set this site up just by reading documentations and guides and simply trying them out. GitHub Pages and Jekyll surely made this site easy to setup so go and try it yourself!

I personally used GitHub Pages and Jekyll because they are free. But if you want to add custom domain to your site, you can do so and follow the steps on this documentation. There are other things you can do with GitHub Pages and Jekyll so make sure to read their documentations (see links below).

Also, it is important to test changes locally first before putting them online. Another useful thing to setup is to have Continuous Integration (CI) in your workflow to automatically test the changes that are pushed in your repository. I will be sharing how I setup CI on this site using Travis CI on my next blog. Stay tuned!

Resources:

About

Free Github Pages Themes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at neque vulputate, vestibulum magna in, accumsan urna. Nulla feugiat ipsum ex, molestie porttitor nibh faucibus at. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam hendrerit lorem ut finibus semper. Donec ac vehicula erat, nec consequat massa.

Github Pages Theme Not Working

Quisque rhoncus fermentum sapien id congue. Nam at rutrum turpis. Aliquam sagittis imperdiet tortor vel dignissim. Ut ipsum nunc, egestas et odio id, vestibulum posuere orci. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.