The making of a blog using Hakyll, Disqus, and Bitbucket

Posted on January 12, 2015

Tags: meta, yup

For posterity, let us record how this blog was made. Surely there are others who may want to duplicate the process.

Why are we doing this process when we can use Pandoc to transform our literate code into coloured html then copy-paste that into, say, blogger? Well, blogger doesn’t support all the mathematical scripts I’m interested in. Fine, then paste the html into, say, wordpress. Then, I lose the colouring scheme produced by Pandoc. Moreover, this approach let’s us use version control and gives us more power, if we so desire to use it.

I’m working on a Ubuntu Linux machine, mainly on the terminal.

make a bitbucket account, https://bitbucket.org/
make a new remote repo called alhassy.bitbucket.org, using your bitbuckect account name instead of alhassy. Use this naming scheme.
```
mkdir /path/to/project
```
```
git clone https://alhassy@bitbucket.org/alhassy/alhassy.bitbucket.org.git
```
Recall how version control works by glancing at http://guides.railsgirls.com/github/ or at http://alistapart.com/article/get-started-with-git.
make a remote repo called, say, blog.
```
cabal install hakyll
```
```
hakyll-init blog ; cd blog ; ghc --make -threaded site.hs ; ./site build
```
This’ taken from https://jaspervdj.be/hakyll/tutorials/01-installation.html.
```
git init
```

git remote add origin https://alhassy@bitbucket.org/alhassy/blog.git

where you would use your bitbucket account name instead of alhassy.

```
git add .
```

git commit -m "Made a dummy site using Hakyll"

```
git push -u origin master
```

You can see your site by opening blog/_site/index.html, and this file is the one we need, among with the other contents of _site, in our alhassy.bitbucket.org repo —as documented at https://confluence.atlassian.com/bitbucket/publishing-a-website-on-bitbucket-cloud-221449776.html.

We can write a small script that takes a commit message, removes all contents of the alhassy.bitbucket.org repo, copies over those of blog/_site and git commit’s using the given message and then pushes.

cd ~
gedit .bashrc

at the bottom of the file, paste

function publish(){
        cd .. 
        rm -rfv alhassy.bitbucket.org/*
        cp -a blog/_site/. alhassy.bitbucket.org/
        cd alhassy.bitbucket.org/
        git add .
        git commit -m "$1"
        git push origin master
        cd ../blog
}

then save and close

source .bashrc , to reload with the new defined function.
cd /path/to/project/blog
publish "used publish command to update site"

Now the site works, mine is alhassy.bitbucket.org.

Now a usual workflow would be

make changes to blog/posts
git commit -am "made changes"
git push origin master
./site rebuild
publish "I did stuff"

Note that all the work is done in the blog repo, and the publish command performs the book-keeping for the site to work correctly.

Tip: see http://pandoc.org/README.html; it’s quite useful.

Finally, now that we’ve made a post, we’d like to have readers leave comments –if they are so willing. We do so as follows.

make a disqus account, https://disqus.com/
click the gear icon, settings, in the top right
select add disqus to site
follow the prompts and enter a name and the site url alhassy.bitbucket.org, where as usual replace alhassy with your bitbucket account name. I decided to name my blog Superfluous Speculations and thus diqus gives me https://superfluousspeculations.disqus.com
anyhow, select universal code, then copy the first code block.
paste it at the bottom of blog/templates/post.html, so that every post will have comments.

Now we have comments! To see the comments section while editing the site you’ll need to ./site watch then open a browser and go to localhost:8000.

Finally, let’s change the display name of our blog. Open up blog/templates/default.html and find-replace My Hakyll Blog with the blog name you’ve chosen; while you’re at it, open blog/css/default.css and change the first width (for the body) say to 1000.

Neato!

Now I can write a literate agda file, say blah.lagda, then run Pandoc on it, with say,

NAME=blah ; sed 's/\\begin{code}/```agda/g' $NAME.lagda > $NAME.pandoc
; sed -i 's/\\end{code}/```/g' $NAME.pandoc ; pandoc -o $NAME.html $NAME.pandoc -Ss
; rm $NAME.pandoc

then I copy the styles defined in the resulting html and paste them at the bottom of css/default.css so that I have colouring for my code blocks, then copy the contents of the <body> of the html into a markdown file in blog/posts. –or see the next post for a better way.

The source for this blog can be found at https://bitbucket.org/alhassy/blog.

Happy reading!

Bonus: adding tags to the blog

Real blogs have tags, labels for posts. Let’s get some for ours as well.

The following is taken from http://javran.github.io/posts/2014-03-01-add-tags-to-your-hakyll-blog.html, which provides more detail at each step.

open site.hs, at the bottom paste

postCtxWithTags :: Tags -> Context String
postCtxWithTags tags = tagsField "tags" tags `mappend` postCtx

line 23 of site.hs is blank, insert there:

tags <- buildTags "posts/*" (fromCapture "tags/*.html")
tagsRules tags $ \tag pattern -> do
	let title = "Posts tagged \"" ++ tag ++ "\""
	route idRoute
	compile $ do
	    posts <- recentFirst =<< loadAll pattern
	    let ctx = constField "title" title
	    	      `mappend` listField "posts" postCtx (return posts)
		      `mappend` defaultContext

    makeItem ""
    	>>= loadAndApplyTemplate "templates/tag.html" ctx
	>>= loadAndApplyTemplate "templates/default.html" ctx
	>>= relativizeUrls

Keep the existing indentation.

in the next 6 lines, replace all instances of postCtx with (postCtxWithTags tags).
now to make tags visible, paste the following in templates/post.html just before $body$ :
```
<div class="info">
$if(tags)$
Tags: $tags$
$endif$
</div>
```
make a new file templates/tag.html with one line of content: $partial("templates/post-list.html")$ .
now recomplie using ghc --make -threaded site.hs and rebuild your website using .\site rebuild.

Now you’ve got tags!