Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,150,373 members, 7,808,298 topics. Date: Thursday, 25 April 2024 at 10:03 AM

How To Build A CMS! Freedom From Wordpress.. - Programming - Nairaland

Nairaland Forum / Science/Technology / Programming / How To Build A CMS! Freedom From Wordpress.. (2377 Views)

Make Money From Wordpress Or Free Blogging Platform / Framework Or A CMS For An E-commerce Website? / HELP: I Need WYSIWYG INTEGRATED INTO A CMS (2) (3) (4)

(1) (Reply) (Go Down)

How To Build A CMS! Freedom From Wordpress.. by Nobody: 7:41am On Jan 20, 2016
There has been a trend of “flat CMS design” webservers. This simply refers to a Content Management System (CMS) that does not store its information in a database. Instead, all information is stored in plain text files. Since many virtual private servers (VPS) these days are using RAM-based hard drives, this approach is faster and a bit more secure.

In this tutorial I will show you how to create your own flat file system CMS using some standard web technology. These systems are not as full featured as others, but have the basics with a good response time.

With all the information on the hard drive, file organization becomes a big issue. With that in mind, the site information will be in a different directory than the styling and layout information. Also, each type of page has its own directory under the site folder with a parts directory for small parts of the CMS. This keeps everything in its own place and makes a flexible system.

Jeez, I talk too much, Let's do this!

First Step:
Main Directory Structure

In the directory in which you are going to build the project, create the following directories: src, site, and themes. The src directory will contain the server code, the site directory is for all the site information, and the themes directory for the layout and theming information.

In the themes directory, you need to make a layouts and a styling directory. The layouts directory will contain the different web page layouts. By separating the layout information from the styling information, the themes become much more flexible. For now, there will be one layout called SingleCol.

For all the styling and layout creation, I am using Sass (http://sass-lang.com/), Compass (http://compass-style.org/), and Susy (http://susy.oddbird.net/). Sass is a Custom Style Sheet processing language. It gives a more robust way to create the CSS style sheets for your website. Compass is an extension to Sass. Sassy-buttons is a Sass extension for making nice-looking buttons on the website. Susy is also an extension for creating a grid layout system for your site.

Since Ruby is pre-installed on all Macs, you will not need to install it. To get Ruby on a Windows system, you will need to download Ruby’s Windows Installer (http://rubyinstaller.org/). On Linux, you need to use your system’s package manager to install Ruby.

Once Ruby is on your system, you can install Sass, Compass, Sassy-buttons, and Susy with these command lines:

gem install sass
gem install sassy-buttons
gem install compass
gem install susy

For this tutorial, I am using Sass 3.4.16, Sassy-buttons 0.2.6, Compass 1.0.3, and Susy 2.2.5. Depending on your system’s configuration, you might have to run these commands with 
sudo
before them.

I want to be sure everyone understands this step before I go into the next one (Layouts)
Ask your questions at https://www.nairaland.com/2876227/professional-webdev-help-center
The next step/part will start in 20 Minutes!
Re: How To Build A CMS! Freedom From Wordpress.. by Nobody: 8:18am On Jan 20, 2016
Layouts

To get started creating layouts, run these commands in the 
SingleCol
directory:

compass init
This will create the sass and stylesheets directories, and a file named config.rb. Since I like using css for the stylesheet directory, rename the stylesheets directory to css. Also, create a js directory for any needed JavaScript files for the layout. Open the config.rb file and make it look like this one:


require 'susy'
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "js"


Now, to create the basic layout of the website, create a file in the layout directory called template.html. In this file, add this code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <meta name="generator" content="goPress Servery by Custom Computer Tools.">
    <meta charset="utf-8">
    <title>
        {{{title}}}
    </title>
    <link rel="stylesheet" type="text/css" href="{{{WebAddress}}}/stylesheets.css">
    {{{head}}}
</head>
 
<body>
    <div id='wrap'>
        <div id='headerwrap'>
            <div id='header'>
                {{{header}}}
            </div>
            <div id='navigation'>
                {{{navbar}}}
            </div>
        </div>
        <div id='sidebar'>
            {{{sidebar}}}
        </div>
        <div id='content'>
            {{{content}}}
        </div>
        <div id='footer'>
            {{{footer}}}
        </div>
    </div>
    <script type="text/javascript" src="{{{WebAddress}}}/scripts.js"></script>
</body> 
</html>


This template creates a standard web page for the site. Each page has a header with a navigation bar, a single sidebar, a content area, and a footer area. The last thing loaded is the javascripts needed for the site.

Each section is represented with a Handlebar macro. The server expands the macros before giving it to the user.

In the sass directory, create a file called base.scss and place this code:

@import 'compass/reset';
@import 'susy';
 
$susy: (
  flow: ltr,
  math: fluid,
  output: float,
  gutter-position: after,
  container: auto,
  container-position: center,
  columns: 16,
  gutters: .25,
  column-width: false,
  global-box-sizing: content-box,
  last-flow: to,
  debug: (
    image: hide,
    color: rgba(#66f, .25),
    output: background,
    toggle: top right,
  ),
  use-custom: (
    background-image: true,
    background-options: false,
    box-sizing: true,
    clearfix: false,
    rem: true,
  )
);
 
body {
}
 
#wrap {
  @include container(16);
  width: 1024px;
  display:  block;
}
 
#headerwrap {
  @include span(16 of 16);
  margin-bottom: 20px;
}
 
#header {
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  width:    95%;
}
 
#content {
    @include span(11 of 16);
 }
 
.col1 {
    @include span(5 of 10);
}
 
.col2 {
    @include span(last 5 of 10);
}
 
#footer .col2 {
    width: auto;
}
 
.box {
  @include span(4 of 10);
}
 
#sidebar {
  @include span(last 4 of 16);
}
 
#footer {
  @include span(16 of 16);
}
 
/** CSS dropdown menu **/
 
#navigation  {
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  width:    95%;
}
 
#menuh-container {
  top: 1em;
  left: 1em;
  display: inline;
  width: 100%;
}
 
#menuh {
  margin-top: 1em;
  display: inline;
  width: 100%;
}
 
#menuh ul li {
  display: inline-block;
  width: fit-content;
}
 
#menuh a
  {
  text-align: center;
  display:block;
  white-space:nowrap;
  margin:0;
  padding: 5px;
  text-decoration: none;
  }
 
#menuh ul
  {
  list-style:none;
  margin: 0px 20px 0px 20px;
  padding: 0px;
  }
 
#menuh li
  {
  position:relative;
  min-height: 1px;
  vertical-align: bottom; 
  width: fit-content;
  }
 
#menuh ul ul
  {
  position:  absolute;
  z-index:  500;
  top: 50px;
  left: 20px;
  display:  none;
  padding: 0.5em;
  margin:  -1em 0 0 -1em;
  }
 
  #menuh ul ul li {
    width: 100%;
  }
 
#menuh ul ul li  a {
    text-align:  left;
}
 
#menuh ul ul ul
  {
  left: 90px;
  }
 
div#menuh li:hover
  {
  cursor:pointer;
  z-index:100;
  }
 
div#menuh li:hover ul ul,
div#menuh li li:hover ul ul,
div#menuh li li li:hover ul ul,
div#menuh li li li li:hover ul ul
{display:none;}
 
div#menuh li:hover ul,
div#menuh li li:hover ul,
div#menuh li li li:hover ul,
div#menuh li li li li:hover ul
{display:block;}
 
/* End CSS Drop Down Menu */


This sass code loads in the compass reset styles to neutralize the browser defaults. Then it loads and sets up susy for creating the proper grid layout for all the elements of the web page.

The css navigation system is after the page defines. The hidden drop-downs for the menus become visible with mouse-over definitions. This gives a css only menu system.

All of these styles define the basic structure of the website. Nothing here creates a look to the page, just its positioning. All styling gets handled by the styling content.

I want to be sure everyone understands this step before I go into the next one (Styles)
Ask your questions at https://www.nairaland.com/2876227/professional-webdev-help-center
The next step/part will start in 20 Minutes!
Re: How To Build A CMS! Freedom From Wordpress.. by feldido(m): 8:22am On Jan 20, 2016
This is where I should be not some yeye celebrity and Politics section.

Ride on Op

2 Likes

Re: How To Build A CMS! Freedom From Wordpress.. by williesmith: 9:53am On Jan 20, 2016
I like your post, really. Unfortunately, almost can't code at all, just learning smiley I have a travel blog builder with free template ( http://www.webstarts.com ), hope one day I am experienced enough to build another website by myself.
Re: How To Build A CMS! Freedom From Wordpress.. by Nobody: 6:54am On Jan 25, 2016
Styles

For the styling directory, create a directory called Basic. Initialize the sass information as done for the layouts/SingleCol [/i]directory. In this directory, run the following command line:

compass init

This will create the sass and stylesheets directories, and a file named 
config.rb
. Since I like using css for the [i]stylesheet directory, rename the stylesheets directory to css. Also, create a js directory for any JavaScript for creating the theme. Open the config.rb file and make it look like this one:

require 'sassy-buttons'
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "js"


For styling buttons on the website, I like to use sassy-buttons. Therefore, it is required first, and then the directory structure.
Re: How To Build A CMS! Freedom From Wordpress.. by Nobody: 7:07am On Jan 25, 2016
This thing is too complicated for man to follow jor,
just package the thing inside:
- batch file
- bash file
- msi installer
- php installer
- composer installer
or whatever. na which one be susy again? Hope you are not messing with my babe sha?

1 Like

Re: How To Build A CMS! Freedom From Wordpress.. by Standing5(m): 8:43am On Jan 25, 2016
I would love to know about things like these. COULD OD ASSIST FOLKS LIKE US WITH TEXTBOOK REFERENCE OR VIDEO TUT SERIEIS THAT WILL TEACH US SASS LESS AND ALL TECHNOLOGY USED.
Re: How To Build A CMS! Freedom From Wordpress.. by Nobody: 8:09pm On Jan 25, 2016
The poster above me does not understand jack of what the OP posted.

1 Like

Re: How To Build A CMS! Freedom From Wordpress.. by Nobody: 9:11am On Jan 26, 2016
These Links will help you understand better:

https://css-tricks.com/sass-vs-less/
https://www.codeschool.com/courses/assembling-sass
www.sass-lang.com/
www.1stwebdesigner.com/learning-less/

https://www.youtube.com/watch?v=5mgsQ2csCIU

https://www.youtube.com/watch?v=CGPXkVawXQc

And for sassy,
Here she is: www.jaredhardy.com/sassy-buttons/

lol @dhtml, Susy is hot!

1 Like

Re: How To Build A CMS! Freedom From Wordpress.. by Nobody: 11:26am On Jan 26, 2016
I shall deal with the hot susy later then!

1 Like

Re: How To Build A CMS! Freedom From Wordpress.. by yinkeys(m): 10:15am On Jan 29, 2016
dhtml18:
This thing is too complicated for man to follow jor,
just package the thing inside:
- batch file
- bash file
- msi installer
- php installer
- composer installer
or whatever. na which one be susy again? Hope you are not messing with my babe sha?
@DanielTheGeek what you guys put down is complicated, like seriously
Re: How To Build A CMS! Freedom From Wordpress.. by Nobody: 10:18am On Jan 29, 2016
yinkeys:

@DanielTheGeek what you guys put down is complicated, like seriously
Na im put am down o, no be mi o.

2 Likes

Re: How To Build A CMS! Freedom From Wordpress.. by Nobody: 8:32am On Feb 05, 2016
yinkeys:

@DanielTheGeek what you guys put down is complicated, like seriously

I already provided links to help out dude..
Re: How To Build A CMS! Freedom From Wordpress.. by yinkeys(m): 9:06am On Feb 05, 2016
dhtml18:
The poster above me does not understand jack of what the OP posted.
grin cheesy very funny
Re: How To Build A CMS! Freedom From Wordpress.. by Nobody: 9:15am On Feb 05, 2016
yinkeys:

grin cheesy very funny
What is even more funny is the fact that the OP thinks that he is being helpful, when in reality he is even less-than-helpful.

3 Likes

Re: How To Build A CMS! Freedom From Wordpress.. by yinkeys(m): 1:20pm On Feb 09, 2016
@DanielTheGeek @dhtml18
Hello guys, coding seems hard to me since I don't know jack about it. I want to draw your attention to a dilemma so you guys could help me choose the most appropriate & efficient option. I'm an affiliate marketer who doesn't know jack about web designing & coding. I recently got a course on web design online that probably would help me upload videos & design killer landing pages to link to my product pages & for generating/creating email lists on MailChimp. The problem is
1. At the moment I don't have the technical know-how needed to be able to link my banner ads to my killer landing page/sites & then to the original product site.
2. And also how to create/customize banners & attach my domain link to it .
Now here's where you guys would help me decide. Should I carry on with
A) The web design course: will this help me achieve the goals I've stated above. I was able to get this course on skillsology dot com. It also contains HTML, Wordpress & CSS. But I don't think they are all fully treated. Since I also need my site to be SEO integrated, that wasn't treated here. OR
B) Do I look for where I could learn everything on WORDPRESS including the SEO integration & all of that. I mean would Wordpress do all I basically need.
My heart tells me that I should have gone for WordPress on that site. I would be glad if you could glance through the courses on that site & affix your suggestion on what best would be of help to me.

Thanks in advance,
I appreciate
Re: How To Build A CMS! Freedom From Wordpress.. by Nobody: 5:21pm On Feb 09, 2016
From my accessment of https://skillsology.com/course/details/Web-Design/2cKw9ynVjq, all you need to know is what they'll teach you.. it's up to you to do extra work and research and spend time practicing, by the end of the course you should be able to design that "killer" landing page you've been dreaming of.

So my advice is to go ahead with skillsology's web design course...
Banner design as far as i know is more related to Graphic Design than Web Design, you may want to work on your graphic design skills to get your preferred design then you can now link it with HTML to any site. The course will help you understand all these and also SEO too which is in Unit 5, section 5.4 of the syllabus.

Good luck.

1 Like

Re: How To Build A CMS! Freedom From Wordpress.. by yinkeys(m): 7:38pm On Feb 09, 2016
DanielTheGeek:
From my accessment of https://skillsology.com/course/details/Web-Design/2cKw9ynVjq, all you need to know is what they'll teach you.. it's up to you to do extra work and research and spend time practicing, by the end of the course you should be able to design that "killer" landing page you've been dreaming of.

So my advice is to go ahead with skillsology's web design course...
Banner design as far as i know is more related to Graphic Design than Web Design, you may want to work on your graphic design skills to get your preferred design then you can now use link it with HTML to any site. The course will help you understand all these and also SEO too which is in Unit 5, section 5.4 of the syllabus.

Good luck.
Thanks a lot.
If you don't mind could you also checkout the Basic Wordpress course syllabus & highlights in particular, compare it with the Web Design. I'm just trying to make sure there's nothing omitted in the Web Design course. More like I keep having this feeling that keeps telling me I should have gone for the Wordpress because when I looked through the highlights it seems more detailed. I mean i think it breaks the learning procedure into ABC.
Once I start the Web Design on there, I don't want to look elsewhere & get distracted
Re: How To Build A CMS! Freedom From Wordpress.. by Nobody: 8:23pm On Feb 09, 2016
The OP has given you a beautiful answer, i rest my case.
Re: How To Build A CMS! Freedom From Wordpress.. by Nobody: 8:04am On Feb 10, 2016
I have compared both already, i still see the Web design course as the best option. They even called it "Basic WordPress Course", which means you'll only be taught the basics.

Moreover the basic WordPress course has 3 units in it's syllabus while the web design course has more than 5 or so.
Re: How To Build A CMS! Freedom From Wordpress.. by yinkeys(m): 11:13am On Feb 10, 2016
DanielTheGeek:
I have compared both already, i still see the Web design course as the best option. They even called it "Basic WordPress Course", which means you'll only be taught the basics.

Moreover the basic WordPress course has 3 units in it's syllabus while the web design course has more than 5 or so.
Thanks a lot

1 Like

Re: How To Build A CMS! Freedom From Wordpress.. by yinkeys(m): 11:14am On Feb 10, 2016
dhtml18:
The OP has given you a beautiful answer, i rest my case.
dhtml18 is a lowkey badt sharp HTML guy

1 Like

(1) (Reply)

Good Book On Javascript / How To Create Mobile Apps With Xamarin.Forms For iOS, Android, Windows / How To Bundle Java Db Database In My App.

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 55
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.