Building a Blog with Yesod - Preliminaries

Posted on 24 April 2020

A few words first.

One of the projects I liked to realize was a rewrite of my own small-business website, which I had jumbled together years ago. The site should be responsive and have some functionality. By looking to build it in Haskell I felt using the Yesod-Webframework the most convincing way to go. Yesod is a big framework, very fast and well constructed. For building only one website maybe a bit of overdo, you might argue. To learn Haskell in a practical way, it is actually the contrary. As you will see we "move on inside it's structure" full of good examples and best practices.

I assume that you use linux.

While we are learning a bunch of things here, I suggest to take notes in some way. One good per project related examples is depicted below, but for more general approach we will do well using something like Zim

[https://zim-wiki.org/]

Ok, let's jump in and prepare our environment.

Bash

Take the Terminal of your choice and edit the hidden .bashrc file in your home-directory. With

Crtl h

you may switch to view hidden files in your file manager.

In my case, to edit it (I use vim as an editor), the command will be

vim .bashrc

Inside .bashrc we will set some aliases and prepare a route (PATH) that our Haskell-Environment, which we install later on will use.

Aliases are a nice way to make live more comfortable. As from now often using a Terminal, we alias the ls -lha command with a simple ll. Move to the

# some more ls aliases 

section and insert

alias ll='ls -lha'

save the file and exit. If using the nano-editor you have to do Ctrl x and confirm with y. Take care not to mistype.

Now we can restart the .bashrc by giving

source .bashrc

If you now type

ll

in your Terminal, you will get a nice list of files in the directory, if there are any. This is only true for your actual user.

Other useful entries in .bashrc might be:

alias h='history'

Inserting

h 

now gives you a list of commands you have used. By typing

!

and the respective number of the command you like to (re-)use, you will execute that command directly. Take care!

Another nice trick to find history commands is using

Ctrl r

which change your shell prompt and let you (reverse-)search by letters.

Now we go to the very end of .bashrc and enter

export PATH=/home/ye/.local/bin:$PATH

where /home/ye is my home-directory. Change accordingly. This allows our Haskell-Environment to work properly.

As an

Extra

we may insert also

alias n='log.sh'

where n calls a really useful and lightweight commandline note and logging tool. It is written by Justin Le

[https://blog.jle.im/entry/log-sh-lightweight-command-line-note-logging.html]

who runs a very interesting blog for mostly advanced topics. Follow his instructions to install.

If you want to dig deeper in bash and how to configure

[https://blog.balthazar-rouberol.com/customizing-your-shell]

Geany

Next we will install the Geany-Texteditor. (Feel free to use anything else, but please give Geany a try.)

    sudo apt install geany

The Geany wiki is located here:

[https://wiki.geany.org/config/start]

Under Tools/config-files/filetype you may set the entry .hamlet in the HTML section as well as .lucius in the CSS, and .julius in the Javascript section. This will give you some pretty and useful code-colors. As you might haved already anticipated .hamlet, .lucius and .julius are the fileformats we use in Yesod. In the View tab you may want to switch on the line number option.

So let's move on.

Postgresql

As quite a lot of data everywhere even our blogpostarticles will be saved in a database. For to keep things reusable, also for non-web projects, Postgresql may be the best fit. It is easy to install. In Debian based systems we insert

    sudo apt install postgresql

into a terminal.

After it installed

    sudo su - postgres

with

   psql

we enter the database editor and are now ready to insert something like:

    CREATE USER blogpost WITH PASSWORD 'blogpost';
    CREATE DATABASE blogpost;
    GRANT ALL PRIVILEGES ON DATABASE blogpost TO blogpost;

So our database here has the name blogpost and the user blogpost with the password blogpost. Feel at least urged to change the password. The settings for USER and PASSWORD are crucial for the persistent part of our App, so better take them down somewhere.

[https://github.com/yesodweb/yesod/wiki/Setting-up-PostgreSQL]

[https://www.postgresqltutorial.com/psql-commands/]

Don't be afraid if you get an error from Postgres. Database is hard and severe. The above is true for Postgresql 11 and is all the preparation we need for our BlogPost.

With

    \q

you may exit psql and with

    Crtl d

you may exit postgres.

Ok, now let's jump to the Haskell side of things:

Environment Installation

[https://www.yesodweb.com/page/quickstart]

Read the page carefully before executing any command. You might have to install curl from your distribution repositories and the indicated libraries if not already done so. For now this site gives us all we need, especially a link to the Yesod book, which is recommended to read.

The author of the book and creator of the Yesod Webframework, Michael Snoymann has done a fantastic work in both and is one of the most recognized Haskell developers.

So, time to set up a working directory. Let's name it blog and have it inside our home directory. In a terminal, inside the blog directory we execute

     curl -sSL https://get.haskellstack.org/ | sh

In the next step, instead of picking the sqlite-template, we choose to install

    stack new blogpost yesodweb/postgres && cd blogpost

Time for a break? Aah, yeah later maybe. Let's dig in a bit deeper:

[https://docs.haskellstack.org/en/stable/README/]

will certainly go to your Haskell-Bookmarks, as you will need more information about Stack later on. For now, it is fine that we use Stack to install our enviroment.

    stack install yesod-bin --install-ghc

You may notice that

    Copied executables to /home/ye/.local/bin:
    - yesod
    ...

is printed by Stack.

At time of writing this, stack select the (package-)resolver: lts 14.27. Every resolver-version meets with a certain Ghc-version. From

[https://www.stackage.org/]

you get an overview.

[https://en.wikipedia.org/wiki/Glasgow_Haskell_Compiler]

Will let you learn some things about Ghc. With Ghc, and here I am quite certain, you will begin a most ambivalent relationship. Hint: consider to let him become a helpful friend.

    stack build

And after that

    stack exec -- yesod devel

will need some time to finish, but then, uuh check:

we get an error! And what a bold one. May this have to do with the password not known by our Yesod application but only by the database? Yup, if we look into config/settings.yml we find in the database section exactly what we mean and change

    password: "_env:YESOD_PGPASS:blogpost"

according to. Save the file and

let's get it going...

    stack exec -- yesod devel

again and

    localhost:3000

in your browser... and yeah, there we are.

All well? Thanks for reading.

If you like to go on:

[https://blog.onepigayear.de/posts/building-a-blog-with-yesod-part-1]