This site is build using Jekill static blog-aware static website. No programing experience is required
Github pages are a great choice for free hosting. If you create a github repository named
username.github.io, it will automatically convert the contents to a webpage at address username.github.io. However to make this work, it takes more than just uploading all the related local files to the repository.
bundle in order to test the website localy.
gem install bundle gem install jekyll
Copy minmal mistakes:
# create a new folder for this online version website mkdir GitPage cd GitPage # initiate git repository git init # add minimal-mistakes repository to your remote git remote add minimal "https://github.com/mmistakes/minimal-mistakes" # clone the repository to your folder git pull minimal master
Configure GitHub website
We need now to edit
_config.yml. For more information about what congiuration items does you can read details from Jekyll Configuration page
You can take as example my
_config.yml file from gavagiuc.gitub.io
You can safely delete folders
Website pages are specified in file
_data/navigation.yml for ex:
main: - title: "About" url: /About/ - title: "Blog" url: /Blog/
- corresponds to one page tab:
title is the page title
url is the link to the file that contains contents of the page
Then you make a new directory
/_pages/, create inside markdown files
--- title: "Blog" layout: archive permalink: /Blog/ author_profile: true comments: true ---
And include the folowing code:
--- layout: single title: "About" permalink: /About/ author_profile: true --- Awsome description about me.
Posts should be kept in
_posts folder and named after
YEAR-MONTH-DAY-filename.md so that minimal-mistakes can correctly identify them.
An example post markdown file: 2018-04-27-my-first-post.markdown
--- layout: single title: "My GitHub Blog first post" date: 2018-04-27 16:25:13 +0300 categories: aws ec2 report python comments: true --- My first post
where layout:single specifies this is a single page post; title would appear on top of page; date keeps time of “latest update”, and could be used to sort your post. There are also a bunch of other parameters you can specify: other parameters. More information on working with posts ca be found on mmistakes posts documentation Also Jekyl Editor extension for Chrome is verry usefull
Test GitHub website localy
bundle exec jekyll serve --watch inside the GitPage directory, and then a template website will be locally hosted at localhost:4000/.
Upload the new site to GitHub
# initial git configuration git config --global user.name "John Doe" git config --global user.email firstname.lastname@example.org # add your github repository to remote git remote add origin "ADDRESS.OF.YOUR.GITHUB.REPOSITORY" # track all files in GitPage folder and stage a commit git add . git commit -a -m "first commit" # push the folder online git push origin master
If every step goes well, your personal website should be alive at “username.github.io”!
This tutorial was inspirated from Li Zeng’s post