Skip to content

Create a Clojurebridge London websiteλ︎

Info::This section is new, so feedback is appreciatedλ︎

We have a very simple website for ClojureBridge London and we would like to know how to make it easier to use.

We would also like to have a website create with Clojure or preferably ClojureScript, so we can host the website on GitHub pages.

HINT::An example ClojureScript website using Bootstrap CSS libraryλ︎

Clojure Study Group project contains examples of code you can include to create your ClojureScript website

Create a ClojureScript projectλ︎

Note:: Create a ClojureScript website for ClojureBridge Londonλ︎

Create a project using the figwheel template, adding reagent library.

lein new figwheel clojurebridge-website -- --reagent

This will create a project with a working web page (usually described as a single page app).

Add Bootstrap CSS libraryλ︎

Bootstrap is a simple way to structure and make your website more appealing, using a wide range of CSS styles available.

Note::Add Bootstrap to project web pageλ︎

Edit the resources/public/index.html file in your project Add the following line of code inside the <head> tag: 

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

See the Clojure study group index.html file for an example

The Bootstrap Introduction documentation includes examples of layouts and component styles you can include in your website.

Adding sections to the websiteλ︎

Create a function for each section of the website you want to add.

HINT::Reagent examplesλ︎

Introduction to Reagent has many simple examples of functions you can include in the website

Guide to Reagent has even more examples

Create a banner heading using Bootstrap jumbotron styleλ︎

(defn website-title []
  [:div {:class "jumbotron practicalli-jumbotron"}
   [:h1 (get-in @app-state [:website :title])]
   [:h4 (get-in @app-state [:website :description])]])

Writing html in Clojure with hiccupλ︎

Rather than write <div> </div>, <h1> </h1>, <p> </p> pairs of tags in html, we define our content using a syntax called hiccup.

A vector, [] is used to hold the name of the html tag, represented by a keyword such as :div

Defining our content in this way makes it easier to generate and transform using Clojure, so you can generate structure and content dynamically too.

Referencesλ︎