Creating a static Clojure site with Cryogen
Tutorial, walkthrough & how to’s
Cryogen
If your goal is to create a simple, static website or blog, then Cryogen (http://cryogenweb.org) is an incredibly helpful template to use. In just a few short commands you’ll have an example blog set up and ready to use, and then you can customize it from there.
Cryogen template basics
Here is an excerpt of the necessary commands to get started:
lein new cryogen my-blog
cd my-blog
lein serve Once you run that, you will see the blog pop up in your default browser. I suggest taking a minute to explore the blog that has been set up for you, look through the examples listed at the bottom of the homepage, and taking note of the site configuration file and documentation at http://cryogenweb.org/docs/configuration.html.
As you click through, you might have noticed that there is a difference between Posts and Pages. The blog posts show up in the body of the website, and the Pages are webpages, such as an About page and Archives page. There are some examples of each provided for you on the sample blog that’s been generated.
Customizing your new blog
Now let’s look at a basic walkthrough example of customizing this site, and adding your own web page and a new blog post.
Config file
In order to find the config file, I search for my-blog in Finder and open it up. Then I can open the content folder, where I can see config.edn file and several more folders, that will house content written in AsciiDoc, CSS files, images and content written in markdown language.
Here is what config.edn looks like to start with:
{:site-title “My Awesome Blog”
:author “Bob Bobbert”
:description “This blog is awesome”
:site-url “http://blogawesome.com/”
:post-root “posts”
:page-root “pages”
:post-root-uri “posts-output”
:page-root-uri “pages-output”
:tag-root-uri “tags-output”
:author-root-uri “authors-output”
:public-dest “public”
:blog-prefix “/blog”
:rss-name “feed.xml”
:rss-filters [“cryogen”]
:recent-posts 3
:post-date-format “yyyy-MM-dd”
:archive-group-format “yyyy MMMM”
:sass-src []
:sass-path “sass”
:theme “blue”
:resources [“img”]
:keep-files [“.git”]
:disqus? false
:disqus-shortname “”
:ignored-files [#”\.#.*” #”.*\.swp$”]
:previews? false
:posts-per-page 5
:blocks-per-preview 2
:clean-urls :trailing-slash
:collapse-subdirs? false
:hide-future-posts? true
:klipse {}
:description-include-elements #{:p :h1 :h2 :h3 :h4 :h5 :h6}
:debug? false}Here we can make some changes and look at some of the options.
Starting at the top, the site-title shows up in the tab in your browser, and is also read by search engines. The author is the author of the site, and you can see that in the blog at the footnote by the copyright. The site description is used by a search engine for SEO and shows up in search results, but does not show up on your website. The site-url can be changed to a custom url, but it takes a few more steps that will be covered later to deploy your website and have it linked to a custom domain. The blog-prefix is what you see at the end of the URL when you’re on the blog page, and this will need to be changed later if you deploy to Github pages, but that will be covered in another post. Notice that we can also customize things like the date format, and how many posts show up per page, and we can set the blog to show previews or full posts. Another great option is changing the theme, and I’ll briefly talk about how you can modify one to practice CSS and create a personalized version of a theme. If you have questions about any of the others, I encourage you to comment on the corresponding post to this on miuminati.com.
If you want to change the favicon, I have an example of how I did that in a section later on.
Create a post
In Cryogen, you can create a post in either Markdown or AsciiDoc language. This example will use Markdown because it appears to be the most commonly used based on all the resources and tutorials I’ve seen up until this point. There are examples of ascii posts and pages in content/asc if you’re interested.
Since we’re using markdown for this example of creating a post, let’s look at content/md/posts.
There are already a few posts in this folder, so we can see some examples already. Then we can create our own and see where it shows up on the website, and delete the example posts and documentation if you don’t want that on your website anymore. If you still want to look at the documentation, you can always go to cryogen.org to view it.
Here is the first post that is in cryogen, 2014–03–10-first-post.md:
{:title “A Post”
:layout :post
:tags [“not fetch”]}### This Post Not Fetch Enoughsome stuff happened> Stop trying to make fetch happen.
>- Regina
We can see that there is a place for us to list a title, which type of layout to use, and any tags we’d like to add. Then, there is a header, regular text, and a quote with an author.
Let’s duplicate this and then edit it to be whatever post we’d like. Notice that the title has the date in it. I believe this is helpful for the blog to organize the posts by date.
I’ll rename the duplicated version to 2021–11–1-my-post.md. Now I’ll click on it and make changes within the file.
I’ll change the title to “My New Post”, and remove the tags. In the body of the post, I’ll just copy and paste a Lorem Ipsum paragraph (commonly used text for creating content for testing purposes) and include a header. I made my header one level higher than the previous one. Instead of using ### I use one less pound sign like so ##. For the lorem ipsum text, you can go to loremipsum.io to generate similar blocks of text and learn more about it.
{:title “My New Post”
:layout :post}## Lorem IpsumLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Now, if you save your new file, you can go back to the blog in your browser, reload and the new post will appear. It should show up on the front page and in the archives. If you view the post from your blog, and you make changes to the post in your text editor and save those changes, and reload the blog again, the changes will show up.
Create a page
Now let’s take a look at the pages in content/md/pages and create our own. There are two pages in this folder: about.md and another-page.md. Notice on the homepage of the blog that we can see the About page in the navigation bar, and Another Page shows up in the Links section in the sidebar.
The reason that About shows up in the navbar, is because of a line in the code:
{:title “About”
:layout :page
:page-index 0
:navbar? true}## Write something about somethingwow wow wow
So, if we make any posts that we want to include in the navbar, then we simply have to add :navbar? true to the information at the top of our file. If we don’t want our page to be in the navbar, then we can just not include that line at all.
How do we add something to the list of links?
It looks like the linking code is in the base.html file of whatever theme you use.
Here is what I see when I search for links within my project folder, and click on the base.html file located in the blue theme, since that’s the default theme.
<h3>Links</h3>
<ul id=”links”>
<li><a href=”http://cryogenweb.org/docs/home.html”>Cryogen Docs</a></li>
<li><a href=”https://carmen.la/blog/archives">Carmen's Blog</a></li>
{% for page in sidebar-pages %}
<li><a href=”{{page.uri}}”>{{page.title}}</a></li>
{% endfor %}
</ul>Here it looks like pages that are not in the navbar are automatically added to the Links section in the sidebar. There are also some more links that are added, and you can follow that format to add some links of your own.
Let’s test this by creating our own page and see if it shows up in the sidebar.
I’ll duplicate one of the other pages, rename it my-page.md and add some lorem ipsum paragraphs.
Let’s also add a picture to practice that.
From the documentation, it looks like the most common way to add images, is to put them in the content/img folder. There is already an image in here, the cryogen logo cryogen.png so we can try adding that to the page. It looks like it should be as simple as writing  in the spot we want the image to appear.
{:title “My New Page”
:layout :page
:page-index 2}## More Lorem IpsumLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vulputate ut pharetra sit amet aliquam id. Pellentesque sit amet porttitor eget dolor morbi non arcu risus. Pharetra magna ac placerat vestibulum lectus mauris ultrices. Aliquam id diam maecenas ultricies mi eget mauris. Enim diam vulputate ut pharetra sit amet aliquam id diam. Pretium viverra suspendisse potenti nullam ac. Tempus urna et pharetra pharetra massa massa ultricies mi quis. Nisl pretium fusce id velit ut tortor pretium viverra. Elit pellentesque habitant morbi tristique senectus et. Porttitor massa id neque aliquam vestibulum morbi. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Amet dictum sit amet justo donec enim diam vulputate ut. Purus ut faucibus pulvinar elementum integer enim. Lectus nulla at volutpat diam ut. Sagittis vitae et leo duis ut. Dui sapien eget mi proin sed libero.Tincidunt ornare massa eget egestas. Fusce ut placerat orci nulla. Est velit egestas dui id ornare. Magna sit amet purus gravida quis blandit turpis cursus in. Ipsum nunc aliquet bibendum enim facilisis gravida neque. Lobortis mattis aliquam faucibus purus in massa. Venenatis tellus in metus vulputate eu. Sit amet nulla facilisi morbi tempus iaculis urna. In arcu cursus euismod quis viverra nibh cras pulvinar. Viverra nam libero justo laoreet sit amet. Viverra justo nec ultrices dui sapien eget mi proin.## Here is an image
Now I’m saving the file, reloading the blog and seeing the result. As expected, I see “My New Page” listed in the Links section. Clicking on it, I can see that the image showed up beautifully right where it is supposed to be.
Customizing themes — duplicate one and make it your own with custom css
Now, what about customizing a theme? For example, the blue theme looks very clean and professional, but what if you’re like me and prefer another color? I’ll duplicate the “blue” theme and create a new version of it called pink. Feel free to follow along with whatever your favorite color is.
In the root folder, there is a folder called themes. I duplicated blue and renamed it pink. Within this folder, there is a file called css/screen.css which has some of the css used for the theme. I was able to make all my changes just using this file, but I had to use !important with some of the changes. What that does, is if there are multiple css files being used that specify the same thing, the one that has !important will take precedence. Apparently it’s usually best to have your files configured in a way where you don’t have to do this, but for something simple like this blog, I feel that it’s fine. I was confused about having to do this at first, because there is only one css file in the css folder. So why were there some css styles showing up on the blog that weren’t coming from that file? It’s because it’s actually not the only css file being used. If you look at html/base.html, you can see some more information is being added:
<html xmlns=”http://www.w3.org/1999/xhtml" lang=”en” xml:lang=”en”>
<head>
<meta charset=”utf-8"/>
<title>{{title}}{% block subtitle %}{% endblock %}</title>
{% block meta %}
<meta name=”description” content=”{{description}}”>
<meta name=”keywords” content=””>
{% endblock %}
<link rel=”canonical” href=”{{site-url}}{{uri}}”>
<meta name=”viewport” content=”width=device-width, initial-scale=1">
<link href=”//fonts.googleapis.com/css?family=Alegreya:400italic,700italic,400,700" rel=”stylesheet”
type=”text/css”>
<link rel=”stylesheet” href=”//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css”>
<link href=”//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css” rel=”stylesheet”>
<link rel=”stylesheet” href=”//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.7.0/styles/default.min.css”>
{% style “css/screen.css” %}
</head>
<body>With code like <link rel=”stylesheet” href=“//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css”>, css themes can be used from online. This can be really helpful so that you don’t have to do everything from scratch.
Alright so I made a few changes to the screen.css file. When I noticed that the change didn’t show up, then I added !important at the end of the line for that particular code. At the bottom, I also added some fun colors for the links. If you don’t see any changes at all, remember to change the theme in your config file content/config.edn to the new one that you’re currently making changes to.
h1, h2, h3, h4, h5, h6 {
font-family: ‘Helvetica Neue’;
}body {
color: #333;
background-color: white;
font-family: ‘Helvetica Neue’, Helvetica, Arial, sans-serif;
font-size: 16px;
}.container {
max-width: 1000px;
}.right {
float: right;
text-align: right;
}.navbar {
border-radius: 0;
/* box-shadow: 0 0 0 0,0 6px 12px rgba(34,34,34,0.3); */
}.navbar-default {
background-color: #FF1493;
border: none;
}.navbar-default .navbar-brand {
color: white;
font-family: ‘Helvetica Neue’;
}.navbar-default .navbar-brand:hover {
color: white;
}.navbar-default .navbar-nav li a {
color: white;
font-weight: bold;
}.navbar-default .navbar-nav li a:hover {
color: white !important;
background-color: cyan !important;
font-weight: bold;
}.navbar-default .navbar-nav .active a {
color: white;
background-color: cyan;
font-weight: bold;
}.navbar-default .navbar-toggle:hover{
background-color: #FF1493;
}.navbar-default .navbar-toggle .icon-bar {
background-color: #FF1493;
}#sidebar {
margin-left: 15px;
margin-top: 50px;
}#content {
background-color: #fff;
border-radius: 3px;
/* box-shadow: 0 0 0 0,0 6px 12px rgb(255,20,147); */
border: 5px solid lime;
}#content img {
max-width: 100%;
height: auto;
}footer {
font-size: 14px;
text-align: center;
padding-top: 75px;
padding-bottom: 30px;
}blockquote footer {
text-align: left;
padding-top: 0px;
padding-bottom: 0px;
}#post-tags {
margin-top: 30px;
}#prev-next {
padding: 15px 0;
}.post-header {
margin-bottom: 20px;
}
.post-header h2 {
font-size: 32px;
}#post-meta {
font-size: 14px;
color: rgba(0,0,0,0.4)
}#page-header {
border-bottom: 1px solid cyan;
margin-bottom: 20px;
}
#page-header h2 {
font-size: 32px;
}pre {
overflow-x: auto;
}
pre code {
display: block;
padding: 0.5em;
overflow-wrap: normal;
white-space: pre;
}code {
color: #FF1493;
}pre, code, .hljs {
background-color: #f7f9fd;
}@media (min-width: 768px) {
.navbar {
min-height: 70px;
}
.navbar-nav>li>a {
padding: 30px 20px;
}
.navbar-default .navbar-brand {
font-size: 36px;
padding: 25px 15px;
}
#content{
margin-top: 30px;
padding: 30px 40px;
}
}@media (max-width: 767px) {
body{
font-size: 14px;
}
.navbar-default .navbar-brand {
font-size: 30px;
}
#content{
padding: 15px;
}
#post-meta .right {
float:left;
text-align: left;
}
}/* unvisited link */
a:link {
color: deeppink;
}/* visited link */
a:visited {
color: cyan;
}/* mouse over link */
a:hover {
color: cyan;
}/* selected link */
a:active {
color: deeppink;
}
Now I’ll go to the config file and change my theme to the `pink` one, reload the blog and I see my new theme.
Changing the favicon
Speaking of making changes, let’s talk about the favicon. It’s a totally optional change. Personally, I always like to have cute little pictures or a personalized logo on my websites, even if I’m just experimenting with something small. I’ve seen some fun ideas on other people’s blogs too, like using a tiny picture of your face.
I had a little trouble when changing the favicon on my first Cryogen blog, so I’ll go over the details here on how I got it to work.
Generally, I put a line of code in my base.html file in my project folder. However, there are a few base.html files with Cryogen, because there are several different themes you get to choose from. So, in the theme that you pick, (I’ll use the pink theme I just made), open up base.html.
There are a few ways to add a favicon. I go over another method in the post about creating a basic web app and doing some basic customization with it. I wasn’t able to get that method to work with Cryogen. The only way I was able to get the favicon to show up is to use free image hosting to create a link to the image and use that:
The first line of code is already there in base.html and the second line is the new code that says where to find the image for the favicon.
<title>{{title}}{% block subtitle %}{% endblock %}</title>
<link rel=”shortcut icon” type=”image/png” href=”https://i.ibb.co/mFQmb0g/hearts.png"/>
I went to https://imgbb.com/upload which just happened to be the first result when I googled free image hosting. On that website, you can upload whatever file you want to use as your favicon, then in the embed codes, click on any of the options except for the “Viewer links” one. That one doesn’t include the name of the file and the extension (in this case hearts.png). All the other ones have the relevant information, in this example https://i.ibb.co/mFQmb0g/hearts.png. You can copy your corresponding link into the browser and make sure the image, and nothing but the image, appears. Now with this change to the index.html file the new favicon should show up.
Conclusion
This has been an overview of Cryogen and a walkthrough of the main functionality and how to do some basic customization. There are more topics to look into if interested: How to deploy your static website for free using Github pages, adding comments with Disqus, and more.
Want more help? Check out the youtube channel, see more posts here or email me at kittykat@miuminati.com!
