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.
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.
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. <! DOCTYPE html>
base.html is the simple html file we use as a ‘skeleton’ template. It contains common elements of our site. You can see some “blocks” there; we will use the child template to overwrite these blocks. Now open the post.html which is in the same folder as base.html. {% extends “base.html”%} {% block title%} {{title}} | Cactus {% endblock title%} {% block content%} {% 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%}
{% for message in messages%} {{post.date | date: ”M y”}} {{post.title}} {{post.headline}} {% endfor%}
{% 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.
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.
Implement your project
How to Make A Static Blog with Cactus: benefits
Faq
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.
