Github Pages tutorial and exploration!

What is Github Pages

Github allows free and easy hosting for users to create an html page to represent users, organization and projects. All you have to do is upload your files through version control (git) and Github will serve your html, css and js – all static assets*.

How do you create a github page?

Step 1: Create a repo

Simply create a github repo called <username>.github.io.

My username is theptrk so I created the repo theptrk.github.io.

* Here are the command line instructions on your Mac:

curl -u <user_name> \
https://api.github.com/user/repos \
-d "{\"name\": \"<repo_name>\"}"

Step 2: Upload your index.html

Github will serve your index.html page by default so create this and git push

This is the most simple way to create  an html page

$ echo "Hello world!" > index.html

Step 3: Push your files to github

$ git add index.html

$ git commit -m "My first commit"

$ git push origin master

Visit your new Github webpage!

url: <username>.github.io

Mine is located at https://theptrk.github.io

What next?

Note that all your files are completely accessible at this path.

So if you create a javascript file called kale.js, you can access it with

https://your_username.github.io/kale.js and your index.html.

 

Exploration

Github will serve your static assets.

Will github serve text files?

Yes! I’m serving an entire copy of the Autobiography of Benjamin Franklin here

Will github serve css and javascript?

Yes! Add css files to your repo and reference them in index.html.

On most major browsers, you may even have module support like this:

|- index.html
|  <!DOCTYPE html>
|    Hello World
|    < script type="module" src="kale/index.mjs"></script>
|  </html>
|- mjs/
  |
  |- index.mjs
  |    import { hello } from './hello.mjs'
  |    hello()
  |
  |- hello.mjs
  |    function hello() {
  |      console.log('hello modules!');
  |    }
  |    export { hello }

vim settings: tabs, spaces, indents

Basics

tabstop – amount to indent when using <Tab>

shiftwidth – amount to indent when using ‘>’ or ‘<‘

expandtab – always insert spaces at the amount of tabstop

set tabstop=4 set shiftwidth=4 set expandtab

 

How to change tab size based on filetype

setting it inline

make sure there are no spaces between the languages

autocmd FileType javascript,haskell set tabstop=2 shiftwidth=2

setting it with a function

autocmd FileType javascript, haskell call s:set_indents_at_2()

function! s:set_indents_at_2()
  set tabstop=2
  set shiftwidth=2
endfunction

 

Setting up version controlled bash_profile

Sometimes your roommate spills water on your computer for a second time.

Why would I upload .bash_profile to github?

If you keep your config files uploaded to github, you can avoid having to recreate your dotfiles like .bash_profile every time you need to set up a new computer. For most people, setting up a new computer happens once very rarely, but this also makes it extremely hard when you have to relearn all your bash configuration settings.

What is the version controlled bash_profile strategy?

Step 1: Create a directory specifically for your bash settings 

The directory name could be anything but I use  ~/.bash

This is necessary because you are going to create a git repo and not a single file git gist

Step 2: Create a sample .bash_profile in your new directory

You can add a sample alias such as alias bp="vim ~/.bash_profile"

Step 3: Create a symbolic link to your home directory

$ ln -s ~/.bash/.bash_profile ./bash_profile

Step 4: Create a git repo called .bash , git init and upload your new directory

Done!

What if I encounter a new computer?

Simple!

Step 1: Encounter a new computer

Step 2: Pull down your .bash repo in your home directory

Step 3: Create your symbolic link 

$ ln -s ~/.bash/.bash_profile ./bash_profile

Set up your dotfiles, config files

Sometimes your computer explodes. Sometimes your roommate spills water on it.

If you keep your config files uploaded to github/gitlab, you can avoid recreating your dotfiles (.vimrc, .bash_profile, .sh, .zshrc) and reconfiguring every laptop and virtual machine you encounter.

* this is assuming you have already version controlled your configs (examples: bash, vim)

Step 1: Upload your config to Github

Step 2: Encounter a new computer

Step 3: Download your configs immediately and set up your symlinks

set up .vimrc

cd && git clone https://github.com/theptrk/.vim

ln -s ~/.vim/vimrc ./vimrc

Enjoy your fd mapped to <Esc>

set up .bash_profile

cd && git clone https://github.com/theptrk/.bash

ln -s ~/.bash/bash_profile ./bash_profile

Enjoy using l to see all files, gs for git status, bp for bash_profile and bpr for reloading bash_profile

TODO: create a startup script to download these and symlink it appropriately. How though?