Build a Static Website with Hakyll and Github

Static websites are easy to build, deploy and present your ideas worldwide. In this post we will present the steps used to create a static website using version control.

To do it we used Hakyll a Haskell library for generating static websites and Github for hosting the static website.

Steps:

Hakyll:

1. Visit the Hakyll website.

2. Follow the Installation tutorial by Jasper Van der Jeugt in the tutorials tab.

3. Follow the instructions of the tutorial, which involves the use of cabal.
   • Optional: Here is a way on how to install a cabal package.
   • Cabal is a command line tool which is part of the Haskell platform, make sure that the platform is installed first.

4. Once you have installed Hakyll Build the example Site which follows the Installation tutorial.

   • if hakyll-init my-site is not found then make sure $HOME/.cabal/bin is in your $PATH.

   • for OS X $HOME/.cabal. In this case, check $HOME/Library/Haskell/bin and put it on your path if you find hakyll-init there.

   • Here is a way to do this:

   • Be in your home directory: cd ~

   • See if .bash_profile exists: ls -al .b*

   • If it does not, create one with your text editor.

   • I used vim, vim ~/.bash_profile

   • Add this line of text to .bash_profile export PATH=$PATH:/Library/Haskell/bin

   • Save and restart the terminal.

5. After you have built the example website. You can have a look at your website here http://localhost:8000/. You can follow the remaining tutorials at Hakyll to customize your website.

Github:

Note: Install git first before you attempt to use it.

1. Create a new Github account if you do not have one.

2. Create a new repository named username.github.io. Use your github username as the username.

3. Make an empty directory on your local machine and move into that directory:

    
    mkdir username.github.io
    
    

    
    cd username.github.io
    
    

4. Copy all the contents of your site generated in the previous step of this post.

5. Finally upload your site on GitHub (this methodology was inspired and partially adopted by Linus Arver Using Hakyll with GitHub wesite).

   • Move into the _site directory.

   • Initialize a git repository

   • Add all files in that directory.

   • Commit your changes.

   • Specify the remote handle.

   • Push your commits to the origin server.

    
cd _site
git init
git add *.html # add css, etc.
git commit -m "initial import"
git remote add origin https://github.com/username/username.github.io.git
git push -u origin master

1. Visit username.github.io to view your website.

Here is a short tutorial on how to link your domain to Github using GoDaddy.