{"id":23701,"date":"2015-04-16T23:01:23","date_gmt":"2015-04-16T15:01:23","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=23701"},"modified":"2024-06-20T19:56:56","modified_gmt":"2024-06-20T11:56:56","slug":"static-blog-with-cactus","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/static-blog-with-cactus\/","title":{"rendered":"How to Create a Static Blog with Cactus"},"content":{"rendered":"<p><strong>Update<\/strong>: The Cactus app is no longer available. Consider checking out <a href=\"https:\/\/www.hongkiat.com\/blog\/blogging-with-assemble\/\">How to Build a Static Blog Using Assemble<\/a> for an alternative.<\/p>\n<p>If a CMS is not required and you\u2019re interested in a static site or blog, <a href=\"https:\/\/www.hongkiat.com\/blog\/blog-with-jekyll\/\">Jekyll<\/a> is a great option. However, for those who prefer a graphical user interface over command line tools, <strong>Cactus<\/strong> might be the better choice.<\/p>\n<p>Cactus is a robust <strong>static site generator<\/strong> that offers an array of powerful tools to <strong>build websites locally<\/strong>. It provides four pre-designed templates to jumpstart your project, allowing for a quick and efficient setup.<\/p>\n<p>When you work on a project using Cactus, it <strong>monitors all your changes<\/strong> and <strong>automatically updates the browser view<\/strong>, whether you\u2019re on a Mac or a mobile device. This means you can see your updates in real time. It also seamlessly integrates with SASS\/SCSS and Coffeescript, automatically processing changes in these files.<\/p>\n<h2>Getting Started<\/h2>\n<p>Begin by downloading Cactus from its official website and completing the installation. After installation, open the application, and you\u2019ll find four main options: Create, Deploy, Edit, and Preview.<\/p>\n<p>To start a new project, click <strong>Create<\/strong>. You\u2019ll find four templates available; for this guide, select the Blog template and click <strong>Create<\/strong> again.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/static-blog-with-cactus\/choose_blog_template.jpg\" alt=\"Selecting a blog template in Cactus\" width=\"581\" height=\"447\"><\/figure>\n<p>Next, you\u2019ll need to name your project and select a storage location. For example, here we\u2019ll name it \u201cMy Awesome Blog\u201d. Once configured, you\u2019ll see your new project active in Cactus.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/static-blog-with-cactus\/new_project_created.jpg\" alt=\"New project creation screen in Cactus\" width=\"467\" height=\"299\"><\/figure>\n<h2>Modifying Files<\/h2>\n<p>The project created using the Blog template is now accessible through your Finder. We\u2019ll explore the essential components required to build our blog. Navigate to the directory where your files are stored. The key directories we\u2019ll focus on are <strong>Templates<\/strong>, <strong>Pages<\/strong>, and <strong>Static<\/strong>. We\u2019ll ignore the others for now.<\/p>\n<p>To summarize, here\u2019s the purpose of each directory:<\/p>\n<ul>\n<li><strong>Templates<\/strong>: Holds HTML files that serve as templates. These are used by pages to construct the website.<\/li>\n<li><strong>Pages<\/strong>: Contains all HTML files that are directly converted into pages on your site. For example, hello.html will appear as http:\/\/yoursite.com\/hello.html<\/li>\n<li><strong>Static<\/strong>: Stores all static resources like CSS, JavaScript, and images.<\/li>\n<\/ul>\n<p>We will focus on editing three primary files: <code>base.html<\/code> and <code>post.html<\/code> in the Templates directory, and <code>index.html<\/code> in the Pages directory.<\/p>\n<p>Cactus employs the <strong>Django Template Engine<\/strong> for its templating. This allows for including HTML elements from other files within your project, helping to avoid code duplication. The features most commonly used are <strong>template inheritance<\/strong> and <strong>variable<\/strong> management.<\/p>\n<p>Let\u2019s start by opening <code>base.html<\/code> from the Templates directory.<\/p>\n<pre>\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=\"en\"&gt;\r\n&lt;head&gt;\r\n    &lt;meta charset=\"utf-8\"&gt;\r\n    &lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\"&gt;\r\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"&gt;\r\n\r\n    &lt;title&gt;{% block title %}Blog{% endblock %}&lt;\/title&gt;\r\n    &lt;link rel=\"shortcut icon\" href=\"{% static '\/https:\/\/assets.hongkiat.com\/uploads\/static-blog-with-cactus\/favicon.ico' %}\"&gt; \r\n    &lt;link rel=\"stylesheet\" href=\"{% static '\/css\/style.css' %}\"&gt;\r\n    &lt;link rel=\"alternate\" type=\"application\/rss+xml\" title=\"My Blog Feed\" href=\"\/rss.xml\"&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n    {% block content %}\r\n    Main content\r\n    {% endblock content %}\r\n\r\n    ---\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>The <code>base.html<\/code> file acts as a fundamental template for your site, containing common elements. Within this file, you\u2019ll notice several \u201cblocks\u201d designed to be overridden by child templates.<\/p>\n<p>Next, let\u2019s open <code>post.html<\/code>, which is located in the same directory as <code>base.html<\/code>.<\/p>\n<pre>\r\n{% extends \"base.html\" %}\r\n{% block title %}{{ title }} | Cactus{% endblock title %}\r\n{% block content %}\r\n\r\n---\r\n\r\n&lt;header&gt;\r\n    &lt;h1&gt;{{ title }}&lt;\/h1&gt;\r\n    &lt;h2 class=\"headline\"&gt;{{ headline }}&lt;\/h2&gt;\r\n&lt;\/header&gt;\r\n&lt;section id=\"post-body\"&gt;\r\n    {% block body %}\r\n    This is where the post content is.\r\n    {% endblock body %}\r\n&lt;\/section&gt;\r\n\r\n---\r\n\r\n{% endblock content %}\r\n<\/pre>\n<p>The <code>post.html<\/code> file structures the markup for our blog entry page. It begins by extending <code>base.html<\/code>, allowing us to override the predefined blocks in <code>base.html<\/code> with new content specific to each post.<\/p>\n<p>Within <code>post.html<\/code>, we encounter variables like <strong>{{ title }}<\/strong> and <strong>{{ headline }}<\/strong>, which will be assigned values in each individual blog post later on.<\/p>\n<p>The <strong>{% block body %}<\/strong> block in <code>post.html<\/code> is designed to be replaced by the child template containing the actual content of our blog posts.<\/p>\n<p>Navigate to the <code>pages\/posts<\/code> directory to view our post entries.<\/p>\n<pre>\r\ntitle: My Post Entries\r\nheadline: My Post Headline\r\nauthor: Agus\r\ndate: 15-01-2015\r\n\r\n{% extends \"post.html\" %}\r\n{% block body %}\r\n\r\n{% filter markdown %}\r\n\r\nLorem 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.\r\n\r\n---\r\n\r\n{% endfilter %}\r\n{% endblock body %}\r\n<\/pre>\n<p>In each post entry, values are assigned to variables such as title, headline, author, and date. These values are then utilized when the variable names are called within the parent template. The content of our blog is written using Markdown.<\/p>\n<p>Next, let\u2019s open the <code>index.html<\/code> file from the <strong>pages<\/strong> directory, which displays a list of our blog entries and links to each one. The primary code is as follows:<\/p>\n<pre>\r\n{% extends \"base.html\" %}\r\n{% block content %}\r\n\r\n--\r\n\r\n&lt;ul id=\"post-list\"&gt;\r\n{% for post in posts %}\r\n&lt;li&gt; \r\n&lt;a href='\/{{ post.path }}'&gt;&lt;aside class=\"dates\"&gt;{{ post.date|date:\"M j\" }}&lt;\/aside&gt;&lt;\/a&gt;\r\n&lt;a href='\/{{ post.path }}'&gt;{{ post.title }} &lt;h2&gt;{{ post.headline }}&lt;\/h2&gt;&lt;\/a&gt;\r\n&lt;\/li&gt;\r\n{% endfor %}\r\n&lt;\/ul&gt;\r\n\r\n--\r\n\r\n{% endblock content %}\r\n<\/pre>\n<p>At this point, we have established a simple blog consisting of two main pages: the <strong>index page<\/strong>, which displays the blog entries, and the <strong>blog entry page<\/strong> itself.<\/p>\n<p>Go to the Cactus application window and click the preview button to start the server. This will automatically launch your website in the browser.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/static-blog-with-cactus\/browser_preview.jpg\" alt=\"Previewing the blog in a browser using Cactus\" width=\"785\" height=\"613\"><\/figure>\n<h2>Styling the Blog with SCSS<\/h2>\n<p>One of the key features of Cactus is its built-in support for SASS\/SCSS. Simply <strong>drop your .sass or .scss files<\/strong> into the <strong>static<\/strong> directory. Each time these files are edited and saved, Cactus automatically compiles them into CSS.<\/p>\n<p>As an example, let\u2019s use bootstrap-sass to style our blog. If you\u2019re using <a href=\"https:\/\/www.hongkiat.com\/blog\/bower-package-manager\/\">Bower<\/a>, open the terminal, and navigate to the <strong>static<\/strong> directory of our project using the <code>cd<\/code> command. Install bootstrap-sass with the following command:<\/p>\n<p><code>$ bower install bootstrap-sass-official<\/code><\/p>\n<p>Once the download completes, a <strong>bower_components<\/strong> directory will appear inside the static directory, containing <strong>bootstrap-sass-official<\/strong>.<\/p>\n<p>Next, go to the directory: <strong>static\/css<\/strong>. Create an SCSS file named <strong>style-bs.scss<\/strong> and add the following code:<\/p>\n<pre>\r\n@import \"..\/bower_components\/bootstrap-sass-official\/assets\/stylesheets\/_bootstrap\";\r\n<\/pre>\n<p>This code imports all components from bootstrap-sass. After saving style-bs.scss, a corresponding CSS file named style-bs.css will be generated in the same directory, containing all the styles from bootstrap.<\/p>\n<p class=\"note\"><strong>Note:<\/strong> This is just an example. In practice, it\u2019s not advisable to import all styles from bootstrap-sass because it is designed to be modular \u2013 you should only import what you need. You can see my selections in <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/assets.hongkiat.com\/uploads\/static-blog-with-cactus\/demo.zip\">my demo<\/a>.<\/p>\n<h2>Deploying Your Project<\/h2>\n<p>Finally, when your project is ready for the public, you can easily deploy it to a live environment using <strong>Amazon S3<\/strong>.<\/p>","protected":false},"excerpt":{"rendered":"<p>Update: The Cactus app is no longer available. Consider checking out How to Build a Static Blog Using Assemble for an alternative. If a CMS is not required and you\u2019re interested in a static site or blog, Jekyll is a great option. However, for those who prefer a graphical user interface over command line tools,&hellip;<\/p>\n","protected":false},"author":141,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3408],"tags":[3933],"topic":[4523],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Create a Static Blog with Cactus - Hongkiat<\/title>\n<meta name=\"description\" content=\"Update: The Cactus app is no longer available. Consider checking out How to Build a Static Blog Using Assemble for an alternative. If a CMS is not\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/static-blog-with-cactus\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create a Static Blog with Cactus\" \/>\n<meta property=\"og:description\" content=\"Update: The Cactus app is no longer available. Consider checking out How to Build a Static Blog Using Assemble for an alternative. If a CMS is not\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/static-blog-with-cactus\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2015-04-16T15:01:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-06-20T11:56:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/static-blog-with-cactus\/choose_blog_template.jpg\" \/>\n<meta name=\"author\" content=\"Agus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@bagusdesain\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Agus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/static-blog-with-cactus\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/static-blog-with-cactus\\\/\"},\"author\":{\"name\":\"Agus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/b23dad06815dff0bcc222088bed549dd\"},\"headline\":\"How to Create a Static Blog with Cactus\",\"datePublished\":\"2015-04-16T15:01:23+00:00\",\"dateModified\":\"2024-06-20T11:56:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/static-blog-with-cactus\\\/\"},\"wordCount\":862,\"commentCount\":5,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/static-blog-with-cactus\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/static-blog-with-cactus\\\/choose_blog_template.jpg\",\"keywords\":[\"macOS\"],\"articleSection\":[\"Blogging\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/static-blog-with-cactus\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/static-blog-with-cactus\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/static-blog-with-cactus\\\/\",\"name\":\"How to Create a Static Blog with Cactus - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/static-blog-with-cactus\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/static-blog-with-cactus\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/static-blog-with-cactus\\\/choose_blog_template.jpg\",\"datePublished\":\"2015-04-16T15:01:23+00:00\",\"dateModified\":\"2024-06-20T11:56:56+00:00\",\"description\":\"Update: The Cactus app is no longer available. Consider checking out How to Build a Static Blog Using Assemble for an alternative. If a CMS is not\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/static-blog-with-cactus\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/static-blog-with-cactus\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/static-blog-with-cactus\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/static-blog-with-cactus\\\/choose_blog_template.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/static-blog-with-cactus\\\/choose_blog_template.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/static-blog-with-cactus\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Create a Static Blog with Cactus\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/b23dad06815dff0bcc222088bed549dd\",\"name\":\"Agus\",\"description\":\"Agus is a music enthusiast, backpacker and code writer. He has an ambition to build a Skynet on top of HTML and CSS.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/bagusdesain\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/agus\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Create a Static Blog with Cactus - Hongkiat","description":"Update: The Cactus app is no longer available. Consider checking out How to Build a Static Blog Using Assemble for an alternative. If a CMS is not","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/static-blog-with-cactus\/","og_locale":"en_US","og_type":"article","og_title":"How to Create a Static Blog with Cactus","og_description":"Update: The Cactus app is no longer available. Consider checking out How to Build a Static Blog Using Assemble for an alternative. If a CMS is not","og_url":"https:\/\/www.hongkiat.com\/blog\/static-blog-with-cactus\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2015-04-16T15:01:23+00:00","article_modified_time":"2024-06-20T11:56:56+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/static-blog-with-cactus\/choose_blog_template.jpg","type":"","width":"","height":""}],"author":"Agus","twitter_card":"summary_large_image","twitter_creator":"@bagusdesain","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Agus","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/static-blog-with-cactus\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/static-blog-with-cactus\/"},"author":{"name":"Agus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/b23dad06815dff0bcc222088bed549dd"},"headline":"How to Create a Static Blog with Cactus","datePublished":"2015-04-16T15:01:23+00:00","dateModified":"2024-06-20T11:56:56+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/static-blog-with-cactus\/"},"wordCount":862,"commentCount":5,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/static-blog-with-cactus\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/static-blog-with-cactus\/choose_blog_template.jpg","keywords":["macOS"],"articleSection":["Blogging"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/static-blog-with-cactus\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/static-blog-with-cactus\/","url":"https:\/\/www.hongkiat.com\/blog\/static-blog-with-cactus\/","name":"How to Create a Static Blog with Cactus - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/static-blog-with-cactus\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/static-blog-with-cactus\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/static-blog-with-cactus\/choose_blog_template.jpg","datePublished":"2015-04-16T15:01:23+00:00","dateModified":"2024-06-20T11:56:56+00:00","description":"Update: The Cactus app is no longer available. Consider checking out How to Build a Static Blog Using Assemble for an alternative. If a CMS is not","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/static-blog-with-cactus\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/static-blog-with-cactus\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/static-blog-with-cactus\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/static-blog-with-cactus\/choose_blog_template.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/static-blog-with-cactus\/choose_blog_template.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/static-blog-with-cactus\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Create a Static Blog with Cactus"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/b23dad06815dff0bcc222088bed549dd","name":"Agus","description":"Agus is a music enthusiast, backpacker and code writer. He has an ambition to build a Skynet on top of HTML and CSS.","sameAs":["https:\/\/x.com\/bagusdesain"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/agus\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-6ah","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23701","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/141"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=23701"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23701\/revisions"}],"predecessor-version":[{"id":72146,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23701\/revisions\/72146"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=23701"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=23701"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=23701"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=23701"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}