GitHub Pages Workshop
The plan was to:
- make a very basic website on GitHub;
- use a custom theme to make a website;
- look into a multilingual theme;
- demonstrate localhost development;
- use the README.md file as your log;
We will jump straight to nb 3 and focus on creating a website with a multilingual theme.
1. very basic website
1.1 Home page
- create a GitHub account;
- setup a repository (repo);
- turn this repo into GitHub Pages in the Settings of the repo (not the account settings);
- add and edit the 'index.md' file with markdown syntax;
1.2 html and md
- add and edit an 'index.html' file with html syntax;
- compare the .html and the .md files;
- add another file, 'portfolio.md' and hyperlink two files;
- html vs markdown (html vs md);
- markdown is a shortcut to html;
- markdown is easier to remember than html;
- some simple markdown editors on the computer are ByWord or MacDown;
- there are slightly different versions of markdown syntax, stick to GitHub markdown for now;
- add a new file to your repo called 'style.css' with the following content:
margin: 0 auto;
padding: 0.5em 0.5em;
- link this 'style.css' file to your 'index.hml' file. Have only the following lines in your 'index.html' file:
<link rel="stylesheet" href="style.css" />
- let's add an image:
- find an image;
- get it's url link;
- add this code to your 'index.html' file's body part:
<img src="http://i.huffpost.com/gen/1554459/images/o-COMPUTER-TRANSLATE-facebook.jpg" alt="Translation">
- images on the website atm are not responsive, so your image might be sticking out. To make the website a bit more responsive, please add the following code to your 'style.css' file:
/* responsive images */
Then wait a bit and reload your website. While waiting, let's check this out for some quick customisation ideas.
Perhaps try adding an image to the .md file with the .md syntax.
quick, fast, free, simple, adds to your technical skills;
waiting time for updates to be live;
there is plenty of space to grow (see later);
might not be for you...
2. custom themes
2.1 theme 1
- choose a theme within the Settings of your repo;
- check how this has changed your folder;
bad: you still cannot change much, takes too long initially;
2.2 theme 2 (minima)
2.2.1 fork copy
- fork it;
- in settings, for GitHub Pages, choose Master Branch for source;
- open the url (we might need to wait a bit);
- copy/paste your url in your repo's top header for a shortcut [click on Edit];
2.2.2 download and upload
- download ZIP of the repo;
- create a new repo and upload all files (make sure you copy hidden files as well;
This way you don't have all the options that come with the fork.
2.2.3 other ways?
3. multilingual theme
We will look at Jekyll Basic theme the from Wiredcraft.
- github, jekyll and wordpress;
- find the link for website version of this repository: https://krisztian-hofstadter-tedor.github.io/jekyll-multiling/
- download ZIP version to computer;
- create a GiHub account (verify email);
- create a repo (no need for readme.md);
- unzip what you downloaded and delete 'site' folder;
- upload all folders and files to your newly created repo (hidden files are not needed);
- while the site is created on your repo let's have a look at the site in my repo again, the one that is built;
- when your files are uploaded, visit repo settings and turn repo into GitHub pages;
- visit the url (probably not ready yet - try kproxy.com);
- copy/paste the website's url in your repos description for a shortcut;
- edit url in 'config.yml', change it to your new website's url;
- we might need to wait a bit (sometimes longer) for everything to be built;
- in the meantime, let's explore my site again, perahps with the localhost files;
- if ready, lets' edit a few things.
4. localhost dev.
Briefly mention Atom, Ruby, etc.
- easy to scale up;
- might be a steeper learning curve;
- gain understanding of the GitHub system;
- gain understanding of basic html and markdown syntax;
- use the readme.MD for your log/todo, examples 1, 2;