How To Create A Static Blog Using Cactus [OS X]

If you do not require a CMS and would prefer just getting a static site or blog, then Jekyll is a good tool to take a chance with. However, if you prefer a tool with a GUI, rather than working with command line tools, then you might want to check out Cactus.

Cactus is a free static site generator equipped with powerful tools that can help you build websites locally, faster and easier with modern web technologies. It gives you a starting point in your project with 4 predesigned templates so you can hit the ground running.

While working on your project, Cactus will monitor every change you make on your project and automatically refresh the browser so you can see the changes immediately, on your Mac or mobile device. It also supports SASS/SCSS and Coffescript out of the box, so every change on this file is also automatically generated.

Get Started

First of all, you need to download Cactus from its homepage, then run the installation. Once complete, open it, you will see four buttons: Create, Deploy, Edit, and Preview button.

To create a new project, click Create. You will see 4 templates available there. For this tutorial, we are going with the Blog template. Click Create.

You will be asked to give name of your project and choose the location where the project exist. Here i give name “My Awesome Blog” for the project. After that, you will see your project already in Cactus.

Modifying Files

The generated project using Blog template now exists on your Finder. We will now inspect the elements required to build our Blog. Head over to the directory where your files are kept. The main directories that we will use are Templates, Pages, and Static directory. Let’s skip the others for now.

To keep things brief, here’s what each directory is for:

  • Templates: Contains HTML files which behave as template, used by HTML files on pages to build on.
  • Pages: Contains all HTML files that will become a page with the same path. eg: hello.html here will become http://yoursite.com/hello.html
  • Static: Contains all static resources like CSS, Javascript and images.

Now, we will edit three main files from the directories: base.html and post.html in the Templates directory and index.html in the Pages directory.

Cactus uses Django Template Engine for the templating language. With this, you can include HTML elements from other HTML files, so you don’t need to duplicate codes. The features that are most used here are template inheritance and variable.

To see how they work, first open the base.html on Template directory.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title>{% block title %}Blog{% endblock %}</title>
	<link rel="shortcut icon" href="{% static '/http://media02.hongkiat.com/static-blog-with-cactus/favicon.ico' %}">	
	<link rel="stylesheet" href="{% static '/css/style.css' %}">
	<link rel="alternate" type="application/rss+xml" title="My Blog Feed" href="/rss.xml">
</head>
<body>
	{% block content %}
		Main content
	{% endblock content %}

	---

</body>
</html>

base.html is the simple html file that we use as a ‘skeleton’ template. It contains common elements of our site. You can see some “blocks” in there; we will use the child template to override these blocks.

Now open the post.html located in the same directory with base.html.

{% extends "base.html" %}
{% block title %}{{ title }} | Cactus{% endblock title %}
{% block content %}

	---

	<header>
		<h1>{{ title }}</h1>
		<h2 class="headline">{{ headline }} </h2>
	</header>
	<section id="post-body">
		{% block body %}
			This is where the post contents is.
		{% endblock body %}
	</section>

	---

{% endblock content %}

The post.html contains the markup for our blog entry page. At the first line you can see that post.html extends the base.html. This means we will override the blocks on base.html with the blocks here.

We can also find variables here, such as {{ title }} and {{ headline }}. We will define the values of these variables in the blog entries post later.

Now, lets look at the {% block body %} block. This will be overridden by the child template that contains the post entries of our blog.

Go to the directory pages/posts. Here are the rest of our post entries.

title: My Post Entries
headline: My Post Headline
author: Agus
date: 15-01-2015

{% extends "post.html" %}
{% block body %}

{% filter markdown %}

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, perferendis inventore dolorem rerum et tempora sint nemo illum ab saepe, assumenda, amet illo deleniti officiis, voluptatem maxime atque vero sunt.

---

{% endfilter %}
{% endblock body %}

In the post entries, we give value to the variable, like title, headline, author, and date. This value will pass when we call the variable name on the parent template. Then we write the content of our blog with Markdown.

Now we will go to the index page of our blog, open index.html in the pages directory. It contains the list of our blog entries and the link to the each entry. The main code looks like below:

{% extends "base.html" %}
{% block content %}

	--

	<ul id="post-list">
		{% for post in posts %}
			<li> 
				<a href='/{{ post.path }}'><aside class="dates">{{ post.date|date:"M j" }}</aside></a>
				<a href='/{{ post.path }}'>{{ post.title }} <h2>{{ post.headline }}</h2></a>
			</li>
		{% endfor %}
	</ul>

	--

{% endblock content %}

At this point we have a simple blog with two main pages, the index page that contains the blog entries, and the blog entry page itself.

Go to Cactus window, and click preview button to start the server. It will automatically open the browser and open your website.

Styling the Blog using SCSS

A great feature of Cactus is that it works with SASS/SCSS out of the box. Just drop your .sass or .scss files into the static directory and every time you edit and save the files, Cactus will automatically generate the CSS.

Here I will give an example using bootstrap-sass to styling our blog. Assuming you are using bower, open terminal, and navigate to the static directory of our project using cd command. Then install bootstrap-sass using this command:

$ bower install bootstrap-sass-official

Once the download is complete, you will see a bower_components directory inside the static directory containing bootstrap-sass-official.

Now go to this directory: static/css. Create the scss file, give it the name syle-bs.scss and insert this code.

@import "../bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap";

What the code does is it import everything from bootstrap-sass. Once you save style-bs.scss, you will see style-bs.css generated on the same directory that contains all styles from bootstrap.

Deploy your Project

Lastly, when your project is ready, you can deploy your project to the live version easily using Amazon S3.

FacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenEmail