Jeff Arries Jeff Arries - 7 months ago 20
HTML Question

What CMS systems can be used with static code?

I know this isn't a coding question, but I've been googling and googling and I can seem to find ANYTHING on this topic...I can remove this post if you want, but I really, really want to know, so please give it a shot!




I have a website that I have been making (just writing HTML and CSS), and I want to have a page that is a blog, I would like to not have to rewrite code every time a do a blog post, but I don't want to use a CMS for my whole website. Is there a way to use a CMS for just one page? Or another way to simplify it somehow?

Thank you for you time!

Answer

Sounds to me like you should be looking at a more dynamic data system. CMS is an easy solution for this, but a bloated approach potentially.

If you simply wish to be able to use a static page template, and dynamically fill in the data, you could use a simple JSON file or XML.

Are you using Javascript, more specifically Angular or jQuery?

There are likely thousands of more ways to do this, but without better details on your project its a bit of a coin toss.

A really easy solution would be to simply create an AngularJS component and stick that in your single blog page html. Then, using an external JSON file only, you could dynamically populate all blog posts into the single template file.

HTML:

<div ng-app='app' ng-controller='mainCtrl'>
    <div ng-repeat="blog in myJson" class="blog-post">
        <ul class="blog-list">
          <li class="blog-post-item">
            <h3>{{blog.title}}</h3>
            <p>{{blog.body}}</p>
            <p>{{blog.date}}</p>            
            <p>{{blog.misc}}</p>
          </li>
        </ul>
    </div>   
</div>

Javascript:

angular.module('app',['QuickList']).controller('mainCtrl', function($scope){
    $scope.myJson = [{
        title: "Some title here",
      body: "Main blog post body here with <b> html content </b>",
      date: "Jan, 1, 2016",
      misc: "other info"
    },{
        title: "Some title here 2",
      body: "Main blog post body here with <b> html content </b>",
      date: "Jan, 1, 2016",
      misc: "other info"
    },{
        title: "Some title here 3",
      body: "Main blog post body here with <b> html content </b>",
      date: "Jan, 1, 2016",
      misc: "other info"
    },{
        title: "Some title here 4",
      body: "Main blog post body here with <b> html content </b>",
      date: "Jan, 1, 2016",
      misc: "other info"
    }]
})

And be sure to include the angular source in your index.html

Here is a Fiddle Example