Everyone knows that blog is the number one item in content marketing strategy. There are a plenty places where you could setup your blog and start writing. But what if you need some custom content model for blogging? Then you’ll probably should choose self-hosted or cloud solution giving more flexibility in building your specific content model. Today I’m going to show you how to make a blog using . Let’s skip installation steps and consider we already have blank installation. By following steps below, you’ll get fully functional blog. APIQ CMS APIQ CMS Pick HTML template First, you need to have HTML either downloaded or prepared from scratch by HTML coder. I picked : this one Create first temlate Ok, in downloaded template archive I have . I’m going to use it as a template for blog index page. Just paste html content, give template a name, and click “Add template”. index.html Upload assets Now we need to upload all assets (under “Assets” section) we have in downloaded template, i.e. images, stylesheets and javascripts. You could select multiple at once. For my template, I uploaded folder content first, then , and . js fonts images css Now we need to fix fonts URLs (like ) or other URLs in our stylesheets by inserting correct URLs from “Assets” section. url("../fonts/icomoon/icomoon.eot") Next, let’s find in template’s content a place where page content should be injected and insert there special Liquor instruction . I’m going to insert it after and remove all content until closing tags. {% yield %} <div id="gtco-main"><div class="container"> Create index page Now let’s create index page that uses just created template and paste there the content we’ve cut earlier from template. Once we have this in place, you should see something like this at website’s root: Create first model Next I’m going to make index page dynamic by introducing some models. First, I want main menu ( , and etc.) to represent blog categories. Let’s create model under APIQ section. Develop Business Category Models Now let’s output categories as menu snippet. I extracted from template into new snippet with “Menu” name and “menu” slug, and included this snippet in template with: <ul>...</ul> {% include 'menu' %} And finally, I modified snippet like this ( is the only property I added to model, is built-in property): name Category permalink <ul>  {% for category in: models.categories do: %}    <li><a href="/{{ category.permalink }}">{{ category.name }}</a></li>  {% end for %}</ul> Create Post model Ok, I can add categories and have dynamic menu based on them. Let’s add second model — - and set up relationship between it and model. Post Category After this, I added one post belonging to “Development” category. Now I’m going to show the latest post as wide banner (as suggested by template design). I updated template’s content like this (notice how I fetched the most recent post ): {% assign recent_post = models.posts.order('created_at desc').first %}<header id="gtco-header" class="gtco-cover" role="banner" style="background-image:url({{ recent_post.image }});" data-stellar-background-ratio="0.5">  <div class="overlay"></div>  <div class="container">    <div class="row">      <div class="col-md-7 text-left">        <div class="display-t">          <div class="display-tc animate-box" data-animate-effect="fadeInUp">            <span class="date-post">{{ recent_post.created_at | strftime format: '%d %B %Y' }}</span>            <h1 class="mb30">              <a href="/{{ recent_post.permalink }}">{{ recent_post.title }}</a>            </h1>            <p><a href="/{{ recent_post.permalink }}" class="text-link">Read More</a></p>          </div>        </div>      </div>    </div>  </div></header> And now, below this header I’d like to list all posts. This is the only content of index page for this purpose: <div class="row row-pb-md">  <div class="col-md-12">    <ul id="gtco-post-list">      {% for post in: models.posts.order("created_at desc") do: %}        <li class="full entry animate-box" data-animate-effect="fadeIn">          <a href="/{{ post.permalink }}">            <div class="entry-img" style="background-image: url({{ post.image }})"></div>            <div class="entry-desc">              <h3>{{ post.title }}</h3>              {{ post.preview }}            </div>          </a>          <a href="/{{ post.category.permalink }}" class="post-meta">{{ post.category.name }}  <span class="date-posted">{{ post.created_at | strftime format: '%d %B %Y' }}</span></a>        </li>      {% end for %}    </ul>  </div></div> Index page should look like this (isn’t it cool?). Create template pages for Category and Post model This is our final step: we want to have category page and post page so our properties will start working and point to concrete category or post. Let’s create these 2 pages as children of index page. The most tricky thing here is to enable property and choose representable object. permalink Use as object template Don’t forget to put some html displaying Category and Product in corresponding pages. In these pages you have access to current object via object. I.e. you could output post’s content like this (on Post page): item <h1>{{ item.title }}</h1>{{ item.content }} On Category page there’s one more trick for fetching current category’s posts (because I used field): belongs to {% assign posts = models.posts.find_all_by(category: item.id).order("created_at desc") %}{% for post in: posts do: %}... And that’s it — now I have completely dynamic and working Category page and Product page! And that’s all for this tutorial: we have pretty basic blog functionality with a lot of possibilities to improve it further. For example, you might add field to model and list only published posts by default, or maybe introduce posts tagging. Your imagination is the only limit, so just try it ;-) Published Post You could find my final result at: http://patient-forest-605.app.apiq.io ✋ If you liked this post, please click on to spread the word. This article was originally published on APIQ CMS Blog.

How to create a blog with APIQ CMS

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

5 Ruby on Rails Tips You Probably Don’t Know

100 Stories To Learn About Blogging

24 Best JavaScript Blogs and Websites

2018: My Technology Retrospective

4 Simple Ways to Skyrocket Your Blog Readership

46 Stories To Learn About Blog

5 Ruby on Rails Tips You Probably Don’t Know

100 Stories To Learn About Blogging

24 Best JavaScript Blogs and Websites

2018: My Technology Retrospective

4 Simple Ways to Skyrocket Your Blog Readership

46 Stories To Learn About Blog

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps