How to Create A Static Blog Using Cactus

Update: Cactus app has been discontinued. See How to Build a Static Blog Using Assemble instead.

If you’re not looking for a CMS and you just want a simple static site or blog, then you should give Jekyll a try. But if you prefer a tool with a user interface, instead of working with command line tools, then you might be interested in checking out Cactus.

Cactus is a free tool that helps you build websites locally, using modern web technologies. It’s a static site generator that comes with powerful features, making the process faster and easier. It provides you with a few pre-designed templates to get you started on your project.

While I’m working on your project, I’ll keep an eye on every change you make and automatically refresh the browser, so you can see the changes right away on your Mac or mobile device. I’ll even support SASS/SCSS and Coffeescript right out of the box, so any changes you make to those files will be automatically generated as well.

Let’s Begin

First things first, you’ll need to download Cactus from its homepage and then install it. Once that’s done, go ahead and open it up. You’ll be greeted with four buttons: Create, Deploy, Edit, and Preview.

To start a new project, click on the Create button. You’ll see four templates to choose from. For this tutorial, we’re going to use the Blog template. So go ahead and click on Create.

Hey there! So, when you’re creating a new project in Cactus, there are a couple of things you need to do. First, you gotta come up with a cool name for your project. Something that really represents you and what you’re all about. Let’s say, for example, that you decide to call it “My Awesome Blog” – perfect choice, by the way!

Once you’ve got your name all sorted, it’s time to choose the location where your project will live. Where it’ll call home. You know, like picking the perfect spot for your dream house. Just imagine! So, go ahead and select that location. It could be anywhere. Literally anywhere. Cactus is super flexible like that.

And guess what? As soon as you’ve done those two simple steps – giving your project a fab name and choosing its location – your project will magically appear in Cactus. Just like that! It’s like cactus-y wizardry. How awesome is that? Now, you’re all set to start creating, designing, and sharing your amazing content. Good luck with your awesome new venture, and have a blast with “My Awesome Blog”!

Changing Files

Hey there! So, now that we have our project created with the Blog template, let’s take a look at the different parts we need to work with. Open up the folder where all your files are stored. There are a few main folders we’ll be focusing on: Templates, Pages, and Static. Don’t worry about the rest for now.

Just to give you a quick overview:

• Templates: This is where you’ll find all the HTML files that act as templates. They’re used by the HTML files in the Pages folder to build our website.
• Pages: Here, you’ll find all the HTML files that will become individual pages on your website. For example, if you have a file called hello.html here, it will show up as http://yoursite.com/hello.html.
• Static: This folder contains all the resources that won’t change, like CSS, Javascript, and images.

Now, I’m going to make changes to three key files: base.html and post.html in the Templates directory, and index.html in the Pages directory.

Cactus uses a handy tool called the Django Template Engine. It’s like a language that helps us create templates for our website. With this tool, you can include code from other files without having to write it all over again. The two major features we’ll focus on are template inheritance and variables.

To see how these work, let’s start by opening the base.html file in the Templates directory.

“`

Blog

Main content —

“`

The base.html file is like a simple template that serves as the foundation for our site. It includes common elements that appear throughout our website. Inside the file, you’ll notice some “blocks” marked out. We’ll use child templates to replace or customize these blocks in different parts of our site.

Hey there! So, here’s what you gotta do: open up the post.html file, which you can find in the same folder as base.html.

In post.html, we’ve got all the content for our blog posts. Take a look at the very first line, where it says “post.html extends base.html.” This means that we’re gonna replace the stuff in base.html with the stuff in post.html.

Oh, and guess what? Inside post.html, we’ve also got some variables, like {{ title }} and {{ content }}. We’ll assign values to these variables later when we create our actual blog posts.

So, now let’s check out the block. This part is gonna get replaced by another template that will hold all the blog post entries.

Ready for the next step? Head over to the pages/posts directory. This is where you’ll find the rest of our blog post entries.

When I create my blog post, I include important information like the title, headline, author, and date. This information is stored in variables, which I can use later when I want to display the blog post. To write the content of my blog post, I use a simple formatting language called Markdown.

Now, let’s take a look at the index page of my blog. This page is called index.html and it can be found in the “pages” directory. The index page displays a list of all my blog entries, along with a link to each individual entry. Here is the main code for the index page:

As I’m writing this, we have a basic blog set up, consisting of two primary pages: the index page, which houses all the blog entries, and the individual blog entry pages. To see your blog in action, all you have to do is open the Cactus window and click on the preview button. Doing so will start the server and automatically launch your website in your default browser. Pretty neat, huh?

Styling Your Blog with SCSS

I’m excited to share a cool feature of Cactus – it lets you use SASS/SCSS right from the start! All you have to do is place your .sass or .scss files in the static directory, and Cactus will automatically generate the CSS every time you make changes and save the files.

Let me show you an example of how to style your blog using bootstrap-sass. Assuming you have bower installed, open your terminal and navigate to the static directory of your project using the cd command. Then, use the following command to install bootstrap-sass:

$ bower install bootstrap-sass-official

After the installation is complete, you’ll find a directory called bower_components inside the static directory. It contains the bootstrap-sass-official files.

First, let’s navigate to a specific directory. Go to static/css. Once you’re there, create a new file called syle-bs.scss. Inside this file, you can put the following code:

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

This code is useful because it imports all the necessary styles from bootstrap-sass. When you save the file, you’ll notice that a file called style-bs.css will be generated in the same directory. This file will contain all the styles from bootstrap.

Important: It’s worth mentioning that in real-life scenarios, it’s not recommended to import all the styles from bootstrap-sass. The goal of bootstrap-sass is to allow for modular styles, which means you should only import what you actually need. In my demonstration, you can see what I chose to import.

Now, Deploy your Project

Finally, when your project is complete, you can easily deploy it to the live version by using Amazon S3. This service makes the deployment process much simpler and more efficient.