This is the second post about the photography portfolio website project. If you want to find out more about the project, you could read the first post. In this post I will explain the initial setup of the project, and the creation of a bare home page for the site.
First things first: a new GitHub repository
I created a new github repository to host the project. In this and in the following posts about the project I will refer to specific commits of this repository, so you can see the changeset details.
Managing a Haskell project: cabal and sandbox
I use Hakyll to generate the static web site, so I set up a proper Haskell project:
- creating a cabalized project
cabal init, setting up Hakyll as a dependency, and creating a source file with an empty
- creating a sandbox
to work in a isolated environment with
cabal sandbox init
- installing all the dependencies in the sandbox with
cabal install --only-dependencies
- building the project with
cabal buildto check for errors: executing the program
./dist/build/mtphotosite/mtphotositegave no errors
- freezing libraries
cabal-constraints dist/setup-config > .cabal.config(now with Cabal 1.20 you could use
Creating a Hakyll site with the default template
To test the initial set up, I created a Hakyll site with the default template
hakyll-init. I changed the default directories in the configuration to
keep the root of the project less cluttered:
site-src for the original files,
site-pub for the generated site, and
.hakyll-cache for Hakyll temporary files.
After compiling with
cabal build, I tested the site with
http://localhost:8000 with the web browser. All worked!
Using Zurb Foundation Sass version
To use Zurb Foundation I had to integrate it with Hakyll.
At the time of this writing it is available Foundation 5. You can use the straight CSS version of Foundation or the Sass version. The latter let you made more customization and with Sass mixins you can use semantic HTML markup. I don’t know much about Sass, but I like the promised flexibility and I take this as an occasion to learn more about it.
Unfortunately the Sass version of Foundation requires Ruby, Node.js, Grunt, Bower. While I want to learn about Sass, I’m not very keen to learn about the Node.js ecosystem to use a CSS framework. The only dependencies I could accept is with Ruby, as I have it already installed for other projects. After some research in the Foundation forum, I found out that there is a precompiled Sass version on Github that is updated frequently and that has tags for every Foundation release.
I created a git submodule linked to this repository and fixed it to a specific release tag.
Prototyping the home page
Finally I created a prototype for the home page with a top bar, a footer and a grid with 12 squared images. I created this page as a complete HTML file and then I converted it in a Hakyll template page.
I tested the site with
./dist/build/mtphotosite/mtphotosite watch and opened
http://localhost:8000 with the web browser. All still worked!