Hi everyone!

First time poster here, so I hope I've posted this in the right section. Okay, this is a long post, so feel free to scroll down to the tl;dr.

Ok, here is the thing… I'm educated as a graphic designer, but web design wasn't a part of my education back when I went to college. I'm not working in the industry at the moment.

A little while ago I started my own website as a side project, learning the basics of html/css and designing/coding everything from scratch. It's been a great learning project, although I'm obviously still somewhat inexperienced with css. (I prefer static html to a conventional CMS, partly because it gives me more bang for the buck. Another reason is that I manage my own VPS so I also prefer things to be simple to maintain from a security point of view.)

My website is a niche site with articles written by myself and a few friends. It's still in a “beta” phase, so I'm still adding new features. However, the lack of automation is slowing becoming a problem. Every time I add a new feature to the site I have to manually edit every relevant page, which obviously takes a lot of time and introduces unnecessary errors.

My site currently consists of a “front page” in addition to articles and certain standard pages. (Privacy policy, “about”, etc.) I use a little jquery on my site, Adobe EdgeWebFonts, and I minify the css and the html before uploading it. My site is responsive.

My roadmap for the site is to add PDFs and epubs of the articles for download, in addition to giving the site a visual overhaul at some point. (It looks kind of flat and basic at the moment.)

So basically I'm thinking about perhaps beginning to use some kind of static site generator, or a similar solution. However, my site is already online so I need a rather flexible solution. For instance, I need to preserve the directory structure of the site, etc. Also, keep in mind that I'm not working in the industry, I've never even used a CSS pre-processor, so I would prefer something that isn't insanely difficult to learn.

What I have in mind is something that is modular. I'm going to explain what I mean by “modular”... For instance, I want to be able to make things such as footers, headers, so that if I change the footer everything will be rebuilt automatically instead of manually copypasting everything. I'd also prefer a solution that makes me keep as much of my existing code as possible. In other words, I want to keep my html/css, rather than using premade themes; something that preferably doesn't break my site or require me to rewrite everything from scratch.

About my current toolset: I use Atom as a text editor and I run linux on my desktop. I use git and rsync.


Tl;dr
I'm not a professional webdesigner. Should I use a static site generator for my existing website, and can you recommend one that is flexible and relatively easy to learn? Any other suggestions about how to improve my workflow?

Edited December 9, 201510 yr by Virtual Broccoli

I don't really have time right now to read the post in it's entirety, but Jekyll is easy enough to pick up, you can also host Jekyll sites on GitHub pages for free.

Edited December 9, 201510 yr by rbrtsmith

You could use PHP to create your own templates. Place the header in it's own file and then call it with: <?php require 'header.php';?>

 

Do the same for all your "modules" - footer, menu, etc

 

My favourite CMS is TextPattern and I think you'd like it too based on your requirements. If you like I would be happy to take you through setting it up.

Go with Wordpress and purchase themes that have Visual Builder integrated (WPBakery), you're basically going to create your pages with drag&drop but also have the flexibility to customise even further everything if you need to in the future.

Edited December 11, 201510 yr by CGeorges

Go with Wordpress and purchase themes that have Visual Builder integrated (WPBakery), you're basically going to create your pages with drag&drop but also have the flexibility to customise even further everything if you need to in the future.

 

You're not gonna learn much hacking away with pre-built themes. Once you do this the results are always gonna be terrible, especially in terms of scalability and performance.

Edited December 11, 201510 yr by rbrtsmith

Hi Matey,

 

I would suggest learning some basic php. With php you can include files for anything, for example lets make this page called test.php.

<html>
<head>
<title>Test Page</title>
</head>
<body>
<ul>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
<li><a href="#">Page 4</a></li>
<li><a href="#">Page 5</a></li>
</ul>
<h1>Hello World</h1>
<p>This is specific to this page.</p>
</body>
</html>

This I assume is how your pages are currently structured. If however you make a new file called nav.php and add the following.

<ul>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
<li><a href="#">Page 4</a></li>
<li><a href="#">Page 5</a></li>
</ul>

Now in the test.php change it to the following.

<html>
<head>
<title>Test Page</title>
</head>

<body>
<?php include "nav.php"; ?>

<h1>Hello World</h1>
<p>This is specific to this page.</p>
</body>
</html>

Now when you update nav.php any page including it will update too. It's well worth exploring, but be warned, php can be addictive

I don't really have time right now to read the post in it's entirety, but Jekyll is easy enough to pick up, you can also host Jekyll sites on GitHub pages for free.

 

I agree with what rbrtsmith has put, Jekyll is a great tool for developing static sites, it's also blog aware as well so writing a new blog/article entries is as easy as writing text on a page.

 

Will take a few hours of learning but once you have your site setup each time you want to add new content you only have to run the compiler and upload the news files to your server.

 

I'd stay away from the likes of WordPress/Joomla/Drupal as you're basically jumping into a pool of worms especially if you don't have good knowledge of php not to mention the bloat, and at least with something like Jekyll you don't have to keep checking that all of the plugins and core files are up to date to prevent security issues..

 

CSS pre-processors are amazing and I'd certainly recommend taking a look, but before you do it's worth getting to grips with CSS and learning how to write that properly first. That way when you finally start using preprocessors you'll understand why they are amazing!!

Edited December 11, 201510 yr by richardmountain

There's a caveat with CSS preprocessors though - Things like nesting can be dangerous and result in really bloated CSS. I actually avoid nesting for everything apart from state. It can also be tempting to make mixins for everything and necessarily over complicate things, mixins are very useful for avoiding repetition in your code, but don't overdo them. I'd also advise agains @extend, it can create strong binding relationships between totally unreleated classes - it can be useful but because it's dangerous I think it's best avoided.

 

I feel like a book on Sass should be released: Sass the good parts - like it's JS counterpart

Edited December 11, 201510 yr by rbrtsmith

 

You're not gonna learn much hacking away with pre-built themes. Once you do this the results are always gonna be terrible, especially in terms of scalability and performance.

I've read just the tl;dr and I don't know if he wants to learn to become a programmer and not just make his website.

Thanks for your responses, everyone!

Let me first point out that I'm not really looking for a CMS due to the reasons I outlined in my first post. I believe static site generators represent the future, see for instance this article: http://www.smashingmagazine.com/2015/11/modern-static-website-generators-next-big-thing/

@@Nickalocka & @@BrowserBugs

You're right, I hadn't thought about this, but php is naturally a real alternative to static site generators. I did initially try something like what you outlined using jquery instead of php:

$(function(){
  $("#footerr").load("footer.html");  
});

However, I found out that this didn't work very well, due to the fact that if I used javascript in my footer or header it wouldn't be executed properly when loaded. I never found a way around this. It would also multiply the number of http requests, something that obviously isn't ideal. (Php includes don't make additional http requests, right?)

Anyways, you're right, so at the moment my options are using php (but not sql), or going for a static site generator. (I understand that php without sql is relatively safe from a security point of view?)

On the other hand, I guess one good thing about static site generators is that you can use markdown, and simplify my workflow in this sense. Even if I used php it would still require a bit of manual editing to make new pages. However, I'm not negative to your suggestion. Whether I use php includes or a static site generator kind of depends on how flexible those static site generators are...

Edited December 12, 201510 yr by Virtual Broccoli

@@rbrtsmith & @@richardmountain

Thanks for your advice! Jekyll is defintively the most popular static site generator out there, and it will naturally score high on the "ease of use" scale. However, some say that Jekyll is a bit limited and less flexible compared to other site generators. (Not sure if this is true, thought).

Anyways, if I go for a static site generator I obviously want to avoid choosing one that will limit me later on, I want to chose something that is future proof, so that I won't be held back when I'm more experienced due to a lack of features. Simplicity is obviously a good thing, but it's not my only requirement.

Anyways, a question for those of you familiar with site generators... If I end up using for instance Jekyll, how comprehensive is the process of turning existing css into a Jekyll theme?

Edited December 12, 201510 yr by Virtual Broccoli

@@Nickalocka & @@BrowserBugs

 

You're right, I hadn't thought about this, but php is naturally a real alternative to static site generators. I did initially try something like what you outlined using jquery instead of php:

 

$(function(){
  $("#footerr").load("footer.html");  
});

However, I found out that this didn't work very well, due to the fact that if I used javascript in my footer or header it wouldn't be executed properly when loaded. I never found a way around this. It would also multiply the number of http requests, something that obviously isn't ideal. (Php includes don't make additional http requests, right?)

 

Anyways, you're right, so at the moment my options are using php (but not sql), or going for a static site generator. (I understand that php without sql is relatively safe from a security point of view?)

 

 

The problem with loading it with JS is that the content is technically not 'in' the page source, which can cause seo issues. And no, php does not use additional http requests, the server gets all the assets before the page headers are sent as it's server side and not browser side like js. In addition you can store your php includes files in a folder and use htaccess to deny access to the folder directly.

 

Depending how big your site is will depend if sql is the way forward. PHP is pretty safe, the exception and areas for concern are insert, update and delete to a database or when data provided by a third party is used (e.g. search function) as this is where you need to check the data is clean.

 

By the sounds of your project I would suggest setting up a database if nothing more than to manage the quantity of articles. If you really want to avoid SQL then you could use php to manage your navigation and xml sitemap, something like...

<?php
$url_home = "/"; $url_about = "/about/"; $url_prices = "/prices/"; $url_faq = "/faq/"; $url_contact = "/contact/"; $url_privacy = "/privacy/"; $url_sitemap = "/sitemap/";
$sitemap = array(
	array( name => "Home", base => "index.php", url => $url_home, nav => "main", rel => "home"),
	array( name => "About", base => "about.php", url => $url_about, nav => "main", rel => ""),
	array( name => "Prices", base => "prices.php", url => $url_prices, nav => "main", rel => ""),
	array( name => "FAQ", base => "faq.php", url => $url_faq, nav => "main", rel => ""),
	array( name => "Contact", base => "contact.php", url => $url_contact, nav => "main", rel => "contact"),
	array( name => "Privacy", base => "privacy.php", url => $url_privacy, nav => "foot", rel => ""),
	array( name => "Site Map", base => "sitemap.php", url => $url_sitemap, nav => "foot", rel => "")
);
?>

With something like this it would be easy to make a main navigation and a foot navigation, a sitemap list, load content and more, all from a little array. And when you make links from the body text you could write it as ...

Nice to see you, please <a href="<?php echo $url_contact; ?>">get in touch</a>.

so if at any point you move the contact page you simply update the $url_contact to the new path and any page with links to contact would be updated.

Worth noting that GitHub page have a jekyll compiler built in so all you need to do is push your source files to your repo and GihHub will create your static site from the templates. It is also free.

 

The big plus with something like Jekyll rather than using PHP is that you keep your posts and content separate from your templates, much like in a CMS.

Your content is written in markdown which is a great little typesetting language specifically for writing content. But with a CMS this has to be fetched from a database which is less secure and a LOT slower.

With Jekyll your content gets merged in with the templates producing html on the output. Ideal for blogs. And if you know GIT then deployment takes a matter of seconds.

Edited December 13, 201510 yr by rbrtsmith

The big plus with something like Jekyll rather than using PHP is that you keep your posts and content separate from your templates, much like in a CMS.

 

Using the sitemap example above you can use on single page and pull the 'base' content into the template allowing you unique layout per page. I suppose it's just preference, I love php thus probably bias

It's the markdown thing as well, writing posts in markdown is significantly faster than HTML (Once you know the syntax) I do assume though that PHP will have some markdown module though.
Also probably not much difference, but the server still has to interpret that PHP to HTML, wheres a static site merely just serves HTML and it's assets. It might only be microseconds difference, I do not know but it could be significant on a high traffic site. It's not something that I've looked at in any real depth but it's perhaps worth some consideration.

 

I'm a JS lover so If I'm looking to build an app then Node would generally be my personal preference, but for static (or rarely changing) sites where the person posting content is fluent with Markdown and Git I see that as preferable PHP/Node/Ruby etc...

We have loads of great tools and some are better for certain tasks than others.

The case I outlined above is an ideal candidate for static site generation.

Edited December 13, 201510 yr by rbrtsmith

Thanks for your responses, everyone!

 

Let me first point out that I'm not really looking for a CMS due to the reasons I outlined in my first post. I believe static site generators represent the future, see for instance this article: http://www.smashingmagazine.com/2015/11/modern-static-website-generators-next-big-thing/

 

 

 

Everyone has pointed out good stuff already so i'm not going to repeat.

 

However regarding your last paragraph...

 

Don't take everything you read on smashing etc as bible. You admit yourself you have no web development experience so to say you agree with CMS / static is a bit of a statement.

 

The blogs like smashing etc are great, but its still opinion and isn't going to be the 100% future whatever they say.

I've concluded that the best way to find out what's most suitable for my project is to shop around a little...

Right now I'm investigating different static site generators, php includes is still an option, but overall I think a static site generator probably means less work updating and maintaining the site once it's set up.

So basically it's a question of finding a solution that cover all my needs. I've realized that no static site generator probably will cover every case “out of the box”, which means that I'll probably have to get my hands dirty to get things exactly the way I want.

In other words, I guess it comes down to what kind of language/ecosystem that I want to use. Ruby, (Jekyll, Middleman), Javascript, (Hexo, Metalsmith) or Python (Pelican).

I've installed Jekyll and Middleman, so from now on I'll try to get some “hands on experience” and I'll take it from there.

All the static site generators will require you to code. Really there's no way getting around it - If you want a good website it must be coded up from the ground up to suit it's particular set of requirements.

@@rbrtsmith, yeah, definitively.

Right now I realize that the Ruby based generators are the most popular ones, but I must admit that I'm also kind of interested in those who are based on JavaScript, because JavaScript is something that I already use to some degree.

It doesn't really matter what language they are in. I have never written a line of Ruby in my life yet I use Jekyll which is built on it.

 

The reason I chose Jekyll is because Github has a Jekyll compiler so I just push up my site and gitHub will build it.

PHP will a little better in the long run, but Jekyll is a safer choice for beginners. It's very simple to use and it allows you to use partials. If you run mac, it's very easy to install jekyll. Just some basic terminal commands and you're good to go. Whereas php requires you to install a local server environment and then php library. Takes quite a bit of work. And if you really want to take php further, you will need to look into database as well.

PHP will a little better in the long run, but Jekyll is a safer choice for beginners. It's very simple to use and it allows you to use partials. If you run mac, it's very easy to install jekyll. Just some basic terminal commands and you're good to go. Whereas php requires you to install a local server environment and then php library. Takes quite a bit of work. And if you really want to take php further, you will need to look into database as well.

 

Why would PHP be better? In some cases a static site generator is better. For one it loads considerably faster, especially if you are getting high traffic volumes, secondly it is more secure.

If you need a CMS for a client then go for PHP / other backend lang. If it's for you and you already know how to write markdown and use things like Git, SSH then static site generator is almost definitely the way you want to go - assuming it's an information based website or a blog.

Edited January 16, 201610 yr by rbrtsmith

Update: Right now I'm rebuilding my site in Jekyll, and the principles behind it are pretty simple.

Middleman was the first site generator that I checked out, and I'm convinced it's an awesome solution if you're already familiar with Ruby on Rails. (The templating language is ERB in contrast to Jekyll which uses Liquid.) In the end I decided to ditch Middleman, at least for the time being. Middleman and Jekyll both lack good examples in their documentation about how to solve semi-advanced problems, and this is a problem if you're doing something more complex than a simple blog.

However, Jekyll has quite an edge over Middleman for a newbie such as myself, simply because there is a decent amount of information out there on sites such as stackexchange. So, never having used Liquid before, I've been able to solve many problems simply by googling and experimentation. I found myself stuck more often with Middleman/erb.

So, for now I'll use Jekyll, the problem with the lesser known static site generators is generally that documentation will be even more sparse than with Jekyll and Middleman.