How to Make A Static Blog with Cactus

choose blog template

Hello friends today we gonna learn about How to Make A Static Blog with Cactus. So read this article, How to Make A Static Blog with Cactus step by step so you may understand it in a better way. If you have query related to same article you may contact us. So Lets begin:

Guide: How to Make A Static Blog with Cactus

Updating: Cactus app has been discontinued. See How to Instead, build a static blog with Assemble.

If you don’t need a CMS and would rather just get a static site or blog, Jekyll is a good tool for you to take a gamble. 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 pre-designed templates so you can get started.

As you work on your project, Cactus will do that check every change you make to your project and automatic browser refresh 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 any change to this file is automatically generated too.

back to menu ↑

Get started

First of all, you need to download Cactus from the homepage and then run the installation. Once completed, open it, you will see four buttons: Create, deploy, edit, and view button

To create a new project, click CreateYou will see 4 templates available there. For this tutorial, we’ll go with the Blog template. Click Create

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

create a new project

back to menu ↑

Change files

The generated project using a blog template now exists in your Finder. We will now inspect the elements necessary to build our blog. Go to the folder where your files are kept. The main directories we will use are Templates Pages, and Static directory. Let’s skip the others for now.

To keep it short, here’s what each directory is for:

Templates: Contains HTML files that act like templates, used by HTML files on building pages.Pages: Contains all HTML files that become a page with the same path. eg: hello.html becomes http://yoursite.com/hello.html hereStatic: Contains all static resources such as CSS, Javascript and images.

Now we are going to edit three main files from the folders: base.html and post.html in the Templates folder and index.html in the Pages folder.

Cactus uses Django template engine for the template language. This allows you to include HTML elements from other HTML files, so you don’t have to duplicate any tags. The features most commonly used here template inheritance and variable

To see how they work, first open the base.html directory in the template.

{% block title%} Blog {% endblock%}back to menu ↑

{{headline}}

{% block body%} This is where the body of the message is. {% endblock body%}

{% endblock content%}

The post.html contains the markup for our blog entry page. In the first line you can see that post.html extends the base.html. This means that we will overwrite 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 later in the blog posts.

Now let’s take a look at the {% block body%} block. This is overridden by the child template that contains our blog’s post entries.

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

title: My message Main line: My message Main author: Date: 15-01-2015

{% extends “post.html”%} {% block body%}

{% filtermarkdown%}

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

{% endfilter%} {% endblock body%}

In the post items, we give value to the variable, such as title, heading, author and date. This value rings when we call the variable name on the parent template. Then we write the content of our blog with Markdown.

Now we go to the index page of our blog, open index.html in it Pages directory. It contains the list of our blog posts and the link to each article. The main code looks like this:

{% extends “base.html”%} {% block content%}

{% endblock content%}

At the moment we have a simple blog with two main pages called the index page that contains the blog posts, and the blog entry page self.

Go to the Cactus window and click Preview button to start the server. It automatically opens the browser and opens your website.

browser example

back to menu ↑

Styling the blog with SCSS

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

Here I will provide an example using bootstrap-sass to style our blog. Assuming you’re using an arbor, open the terminal and navigate to it static directory of our project with the 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 in the static directory with bootstrap-sass-official

Now go to this folder: static / cssCreate the scss file, name it syle-bs.scss and enter this code.

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

What the code does is import everything from bootstrap-sass. Once you save style-bs.scss you will see style-bs.css generated in the same directory containing all bootstrap styles.

back to menu ↑

Implement your project

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

back to menu ↑

How to Make A Static Blog with Cactus: benefits

  • The How to Make A Static Blog with Cactus tutorial is free .
  • This guide already helps so many users follow up with interest in a timely manner.
  • The price of the How to Make A Static Blog with Cactus guide is free.

back to menu ↑

Faq

Tutorial summary of How to Make A Static Blog with Cactus

In this guide, we told you about the How to Make A Static Blog with Cactus; please read all steps so that you understand How to Make A Static Blog with Cactus in case if you need any assistance from us, then contact us.

How this tutorial helping you?

So in this guide, we discuss the How to Make A Static Blog with Cactus, which undoubtedly helps you.

What is actual time in which this method complete?

The time to complete the How to Make A Static Blog with Cactus tutorial is 10+ minutes.

What are the supported Device?

PC Laptop or Desktop


back to menu ↑

Final note

I hope you like the guide How to Make A Static Blog with Cactus. In case if you have any query regards this article you may ask us. Also, please share your love by sharing this article with your friends.

For our visitors: If you have any queries regards the How to Make A Static Blog with Cactus, then please ask us through the comment section below or directly contact us.
Education: This guide or tutorial is just for educational purposes.
Misinformation: If you want to correct any misinformation about the guide “How to Make A Static Blog with Cactus”, then kindly contact us.
Want to add an alternate method: If anyone wants to add more methods to the guide How to Make A Static Blog with Cactus, then kindly contact us.
Our Contact: Kindly use our contact page regards any help. You may also use our social and accounts by following us on Whatsapp, Facebook, and Twitter for your questions. We always love to help you. We answer your questions within 24-48 hours (Weekend off).
Channel: If you want the latest software updates and discussion about any software in your pocket, then here is our Telegram channel.

Compsmag
Logo