GoPablo – Static site generator

• GoPablo, Static

6 min. (1190 words)

gopablo-–-static-site-generator

Dependencies

GoPablo a static site generator.

TL;DR

Install dependencies

npm install

Runs the app in the development mode

Build and open your browser to http://localhost:3000.

npm run dev

Linting JS & CSS

npm run lint

Builds distribution files for the app in production

npm run prod

Ready to deploy ?

Introduction

GoPablo is a static site generator with a modern development workflow, integrated web server, auto-reload, CSS preprocessors, and ES6 ready.

Features

? Includes
? Live Server
? Hot Reload & CSS Injection
⚙ Babel 7
? Express Server
? Code Minification
? Image Compression
? Templating & Partial HTML Injection
? PostCSS & Next Generation CSS
✂️ Cache-Busting
? Distribution Files

GoPablo requires Node v7.5 . This is the only global dependency. You can download Node here.

Node.js is a JavaScript runtime built on Chrome’s V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js’ package ecosystem, npm, is the largest ecosystem of open source libraries in the world.

File Structure

    ├── build/                   # Build files
    ├── dist/                    # Distribution files
    ├── src/                     # Source files
    │   ├── assets/              # Assets directory
    │       ├── css/             # CSS files
    │       ├── fonts/           # Fonts directory
    │       ├── img/             # Image directory
    │       ├── js/              # JavaScript files
    │   ├── etc/                 # Extra files
    │   ├── includes/            # HTML template partials
    │   ├── index.html           # Index page
    └── .babelrc                 # Babel configuration
    └── .gitignore               # Git ignored files
    └── .stylelintrc             # Stylelint configuration file
    └── gulpfile.js              # Gulp configuration
    └── LICENSE                  # License agreements
    └── package-lock.json        # Packages lock file
    └── package.json             # Node packages
    └── README.md                # You are reading this
    └── server.js                # Express server

To install GoPablo you need to clone the repository from GitHub:

git clone https://github.com/luangjokaj/gopablo
  • This will clone the repository on your local machine. Navigate to the newly created folder and install the dependencies:

INSTALL DEPENDENCIES

npm install

START WORKFLOW

  • We are ready to start our development server with the command:
npm run dev

Templating and HTML Partials

To avoid repetitive HTML code, GoPablo uses gulp-file-include. It has a simple templating synthax and allows to re-use chunks of code written in separate files. These partials are located in the directory:

src/includes/

For more information check out their documentation and examples: https://github.com/haoxins/gulp-file-include

New pages

To create new pages, simply create new .html files in the src/ directory.

Generate production files

To generate your distribution files run the command:

npm run prod

The files will be generated in the dist/ directory.

PostCSS

By default GoPablo supports PostCSS, a similar preprocessor to Sass, Less and others but with more functionality. On top of that PostCSS is 3x faster than Sass and 4x faster than Less. Features come in the shape of PostCSS plugins. Think of these like using Lego, where each piece is a different feature that can transform your CSS in some way. PostCSS lets you stick these pieces together so that you can build up your own feature set, adding and removing plugins as and when you need them. postcss-preset-env is installed by default. Read more about PostCSS here.

POSTCSS PLUGINS

GoPablo has two different sets of PostCSS plugins – one for the development environment (pluginsListDev) and one for the production task (pluginsListProd).

//--------------------------------------------------------------------------------------------------
/* -------------------------------------------------------------------------------------------------
PostCSS Plugins
 ------------------------------------------------------------------------------------------------- */
const pluginsDev = [
	postcssImport,
	postCSSMixins,
	postcssPresetEnv({
		stage: 0,
		features: {
			'nesting-rules': true,
			'color-mod-function': true,
			'custom-media': true,
		},
	}),
];
const pluginsProd = [
	postcssImport,
	postCSSMixins,
	postcssPresetEnv({
		stage: 0,
		features: {
			'nesting-rules': true,
			'color-mod-function': true,
			'custom-media': true,
		},
	}),
	require('cssnano')({
		preset: [
			'default',
			{
				discardComments: true,
			},
		],
	}),
];
//--------------------------------------------------------------------------------------------------

WRITING CSS

The starting point for CSS is the file:

src/assets/css/styles.css

Sass

GoPablo is super flexible. You can install Sass and use it as the main CSS preprocessor:

npm install gulp-sass --save-dev

Include Sass in gulpfile.js:

const sass = require('gulp-sass');

Change the gulp tasks stylesDev to:

function stylesDev() {
	return src('./src/assets/css/styles.scss')
		.pipe(sourcemaps.init())
		.pipe(sass().on("error", sass.logError))
		.pipe(sourcemaps.write('.'))
		.pipe(dest('./build/assets/css'))
		.pipe(browserSync.stream({ match: '**/*.css' }));
}

Also the watch task has to be changed in order to watch for .scss filetypes:

watch('./src/assets/css/**/*.scss', stylesDev);

Change the gulp tasks styleProd to:

function stylesProd() {
	return src('./src/assets/css/styles.scss')
		.pipe(sass().on("error", sass.logError))
		.pipe(dest('./dist/assets/css'))
}

Images

It is recommended to store image assets in the directory:

src/assets/img/

In the production build SVGs and other image assets will go through a minification process.

Fonts

Fonts are always special. Your fonts should be stored in:

src/assets/fonts/

Then you can include them in your CSS:

@font-face {
	font-family: 'Helvetica Neue Thin';
	src: url('./fonts/Helvetica-Neue-Thin.eot');
	src: url('./fonts/Helvetica-Neue-Thin.eot') format('eot'),
	url('./fonts/Helvetica-Neue-Thin.woff2') format('woff2'),
	url('./fonts/Helvetica-Neue-Thin.woff') format('woff'),
	url('./fonts/Helvetica-Neue-Thin.ttf') format('truetype'),
	url('./fonts/Helvetica-Neue-Thin.svg') format('svg');
}

GoPablo supports ES6 JavaScript with Babel. Babel has support for the latest version of JavaScript through syntax transformers. These plugins allow you to use new syntax, right now without waiting for browser support.

Write ES6 JavaScript

Your JavaScript code should be located in:

src/assets/js/

GoPablo will watch for changes under the js directory and bundle the code in a single file, which will be included in the footer of the page as:

footer-bundle.js

Check the gulp configuration to learn more about how JavaScript is generated.

Including external JavaScript libraries is as simple as installing the npm script and including it in the gulpfile.js

/* -------------------------------------------------------------------------------------------------
Header & Footer JavaScript Boundles
-------------------------------------------------------------------------------------------------- */
const headerJS = [
	'./node_modules/jquery/dist/jquery.js',
	'./node_modules/nprogress/nprogress.js',
	'./node_modules/aos/dist/aos.js',
	'./node_modules/isotope-layout/dist/isotope.pkgd.js'
];
const footerJS = [
	'./src/assets/js/**'
];
//--------------------------------------------------------------------------------------------------

You can include the scripts in the head of the page before the DOM is loaded by placing them in the headerJS array or in the footer of the page after the DOM is loaded in the footerJS array. Only footer scripts are processed with Babel thus supporting ES6, however you can change this in the configuration if you want to run both header and footer scripts with Babel.

A build restart is required for changes to take effect.

GoPablo comes with its own set of code style rules:

.stylelintrc

Lint CSS

Before pushing changes make sure you have clean and consistent CSS. Run stylelint with the command:

npm run lint

There are a lot of possiblities and different ways to deploy your static website. The most traditional one being: generating your distribution files and uploading them manually, usually FTP.

Heroku

With the help of a simple Express server, with GoPablo we can deploy to heroku out of the box.

  1. Create Heroku application: heroku create.
  2. Push the branch to Heroku origins: git push heroku master

Automated Netlify deployments

Netlify is a great service that can be used to deploy generated websites. All you have to do is:

  1. Connect your GitHub repository.
  2. Choose Branch to deploy, usually: master.
  3. Set the Build command to: npm run prod.
  4. Set the Publish directory to: dist/.

We are live ?

v0.0.1

  • Meet GoPablo.

MIT

96 comments

  4. Hi would you mind stating which blog platform you’re working
    with? I’m going to start my own blog soon but I’m having a hard time deciding
    between BlogEngine/Wordpress/B2evolution and Drupal.
    The reason I ask is because your layout seems different then most
    blogs and I’m looking for something completely unique.
    P.S Apologies for being off-topic but I had to ask!

  5. I want to to thank you for this excellent read!! I certainly enjoyed every little bit of it.
    I have got you book marked to look at new stuff you post…

  6. Hi there! Someone in my Myspace group shared
    this site with us so I came to check it out. I’m definitely loving
    the information. I’m bookmarking and will be tweeting this to my followers!
    Wonderful blog and excellent style and design.

  12. Hi there, I found your blog by means of Google whilst searching for a related matter, your web site got
    here up, it seems to be good. I’ve bookmarked it in my google bookmarks.

    Hello there, simply was alert to your weblog through Google, and located
    that it is really informative. I am gonna watch out for brussels.
    I’ll be grateful in the event you continue this {in future}.

    Numerous people might be benefited out of your writing. Cheers!

  13. of course like your web site but you need to take
    a look at the spelling on quite a few of your posts.

    Many of them are rife with spelling issues and I to find it very
    troublesome to tell the truth nevertheless I’ll surely come back
    again.

  16. I will right away seize your rss feed as I can not to find your email subscription hyperlink or newsletter service.
    Do you’ve any? Please permit me know so that I may subscribe.
    Thanks.

  17. It is perfect time to make a few plans for the future and it’s time to
    be happy. I’ve learn this post and if I may I wish
    to recommend you few attention-grabbing issues or suggestions.

    Maybe you could write subsequent articles relating to this article.
    I want to learn more things approximately it!

  19. I’m not that much of a online reader to be honest but your blogs really nice, keep it up!
    I’ll go ahead and bookmark your website to come back later on. All
    the best

  20. I simply could not leave your site before suggesting that I actually enjoyed the standard information an individual supply in your visitors?
    Is gonna be again incessantly to check up on new posts

  21. Interesting blog! Is your theme custom made or
    did you download it from somewhere? A theme like yours with a few simple tweeks
    would really make my blog stand out. Please let me know where you got your design. Thanks a lot

  22. Greate article. Keep writing such kind of info on your
    site. Im really impressed by your site.
    Hello there, You have done an excellent job. I will definitely digg it and individually recommend to my friends.
    I am sure they will be benefited from this web site.

  25. Aw, this was an extremely good post. Finding the
    time and actual effort to make a really good article…
    but what can I say… I hesitate a whole lot and never manage
    to get anything done.

  26. Simply want to say your article is as astonishing. The clearness for
    your post is simply nice and i could suppose you are knowledgeable on this subject.
    Well together with your permission let me to seize your
    feed to keep up to date with forthcoming post. Thanks one million and please carry on the enjoyable work.

  27. Do you mind if I quote a few of your articles as long as
    I provide credit and sources back to your weblog?
    My blog site is in the very same area of interest as yours and my visitors
    would certainly benefit from a lot of the information you provide here.
    Please let me know if this ok with you. Many thanks!

  31. Hello there, just became aware of your blog through Google, and found that it
    is truly informative. I am going to watch out for brussels.
    I will be grateful if you continue this {in future}.
    Numerous people will be benefited from your writing.
    Cheers!

  33. Hey there! This post couldn’t be written any better!
    Reading this post reminds me of my old room mate!
    He always kept chatting about this. I will forward this post to him.
    Fairly certain he will have a good read. Thanks for sharing!

  35. I am genuinely glad to glance at this webpage posts which consists of plenty of valuable data, thanks
    for providing these information.

  36. Hey! This post couldn’t be written any better! Reading this post reminds me of my good old room mate!
    He always kept chatting about this. I will forward this write-up to him.

    Fairly certain he will have a good read. Thanks for sharing!

  37. Superb blog! Do you have any tips and hints for aspiring writers?
    I’m planning to start my own blog soon but I’m a little lost
    on everything. Would you propose starting with a free platform like WordPress or go for a paid option? There are
    so many choices out there that I’m totally overwhelmed .. Any suggestions?
    Cheers!

  39. Quality articles or reviews is the important to be a focus for the people to pay a quick
    visit the site, that’s what this web page is providing.

  40. Hey there! I know this is kinda off topic nevertheless I’d
    figured I’d ask. Would you be interested in trading links or maybe guest writing a blog post or
    vice-versa? My website addresses a lot of the same subjects as yours
    and I think we could greatly benefit from each other.
    If you happen to be interested feel free to shoot me an email.
    I look forward to hearing from you! Terrific blog by
    the way!

  41. Does your blog have a contact page? I’m having problems locating it but, I’d like to shoot
    you an e-mail. I’ve got some suggestions for your
    blog you might be interested in hearing. Either way, great blog
    and I look forward to seeing it grow over time.

  42. We are a bunch of volunteers and starting a
    brand new scheme in our community. Your site provided us with helpful information to work on. You’ve done
    an impressive activity and our entire neighborhood will be thankful to you.

  43. I am in fact grateful to the holder of this website who has shared this impressive
    post at at this place.

  45. Link exchange is nothing else but it is only placing the other person’s blog link on your
    page at proper place and other person will also do same for you.

  46. It’s an remarkable article designed for all the internet
    viewers; they will take advantage from it I am sure.

  47. Ahaa, its good dialogue about this post here at this
    webpage, I have read all that, so at this time me also
    commenting here.

  48. Hello, i think that i saw you visited my site so i came to “return the favor”.I am attempting to find things to improve my site!I suppose its ok to use a few of your ideas!!

  49. I don’t even know how I ended up here, but I thought this post was good.
    I don’t know who you are but certainly you are going
    to a famous blogger if you aren’t already 😉 Cheers!

  50. Have you ever considered about including a little bit more than just your articles?
    I mean, what you say is important and all. However think of if you added some great photos or video clips to give your posts more,
    “pop”! Your content is excellent but with images and clips, this blog could certainly be one
    of the best in its field. Good blog!

  51. It’s fantastic that you are getting ideas from this post as well
    as from our discussion made at this time.

  54. Wow, wonderful weblog layout! How long have you ever been running a blog for?
    you made blogging look easy. The whole glance of your web site is excellent,
    let alone the content material!

  56. I do not know if it’s just me or if perhaps everyone else encountering issues with your site.
    It appears like some of the text in your content
    are running off the screen. Can someone else please comment and let me know if this is happening to them as well?
    This might be a problem with my web browser because I’ve had this happen previously.
    Kudos

  57. Hi there to all, the contents present at this site are in fact amazing for people experience,
    well, keep up the good work fellows.

  59. I’m excited to uncover this site. I want to to thank you for
    ones time due to this wonderful read!! I definitely enjoyed every bit of it
    and I have you saved to fav to see new things on your
    blog.

  60. If you wish for to improve your knowledge only keep visiting this website and be
    updated with the hottest news update posted here.

  61. Hi! This is kind of off topic but I need
    some guidance from an established blog. Is it
    hard to set up your own blog? I’m not very techincal but I can figure
    things out pretty quick. I’m thinking about setting up
    my own but I’m not sure where to start. Do you have any points or suggestions?
    Many thanks

  63. Everything is very open with a precise description of the issues.
    It was really informative. Your website is extremely helpful.
    Many thanks for sharing!

  64. Hello There. I found your blog using msn. That is a really neatly written article.
    I’ll be sure to bookmark it and come back to learn more
    of your helpful info. Thank you for the post. I’ll certainly comeback.

  65. I’ve been exploring for a little bit for any high-quality
    articles or blog posts on this kind of space . Exploring in Yahoo I finally stumbled upon this site.
    Reading this info So i’m happy to convey that I’ve a
    very just right uncanny feeling I came upon exactly what I needed.
    I so much for sure will make sure to do not disregard this website and provides
    it a look regularly.

  66. Thanks for ones marvelous posting! I truly enjoyed reading it, you
    are a great author. I will be sure to bookmark your blog and definitely will come back down the road.

    I want to encourage you to ultimately continue your great job, have a
    nice evening!

  69. Have you ever considered about adding a little bit more than just your articles?
    I mean, what you say is valuable and all.
    Nevertheless think about if you added some great visuals
    or video clips to give your posts more, “pop”! Your
    content is excellent but with pics and videos, this site
    could undeniably be one of the greatest in its niche.
    Terrific blog!

  71. Thanks for ones marvelous posting! I seriously enjoyed reading it, you will
    be a great author.I will be sure to bookmark your blog and definitely will come back at some point.
    I want to encourage yourself to continue your great job, have a nice
    morning!

  72. Hi there! This is my 1st comment here so I just
    wanted to give a quick shout out and say I truly enjoy reading your blog posts.
    Can you recommend any other blogs/websites/forums that go over the same
    topics? Thanks a ton!

  74. Hi! This post could not be written any better!
    Reading through this post reminds me of my previous
    room mate! He always kept talking about this. I will forward this page to him.
    Fairly certain he will have a good read. Thank you for sharing!

  77. An outstanding share! I’ve just forwarded this onto a coworker who was doing a
    little research on this. And he actually bought me dinner because I discovered it for him…
    lol. So allow me to reword this…. Thanks for the meal!!
    But yeah, thanx for spending time to talk about this matter here on your internet
    site.

  79. whoah this blog is wonderful i like studying your
    posts. Keep up the great work! You realize, a lot of people are looking
    round for this info, you could aid them greatly.

  80. I like the helpful info you supply to your articles.
    I will bookmark your weblog and check once more here frequently.
    I am fairly sure I’ll be informed lots of new stuff proper here!
    Best of luck for the next!

  87. Hello, Neat post. There’s an issue with your web site in web explorer, would check this?
    IE still is the market chief and a big portion of people will miss your magnificent writing because of this problem.

  88. Howdy! This blog post couldn’t be written much better! Looking through this article reminds me of my previous roommate!
    He continually kept preaching about this. I will send this article to
    him. Fairly certain he’s going to have a great read.
    Many thanks for sharing!

  89. Hello i am kavin, its my first time to commenting anywhere, when i read this paragraph i thought i could also
    make comment due to this sensible article.

  90. I was extremely pleased to uncover this great site.
    I want to to thank you for your time due to this wonderful
    read!! I definitely liked every part of it and
    i also have you saved to fav to check out new things in your site.

  92. I do believe all of the concepts you have presented for your post.

    They’re very convincing and can certainly work. Still, the posts are
    very short for newbies. May just you please prolong them a bit from next
    time? Thank you for the post.

  94. I was wondering if you ever thought of changing the layout of
    your website? Its very well written; I love what youve got to say.

    But maybe you could a little more in the way of content so
    people could connect with it better. Youve got an awful lot of text for only having 1 or
    2 pictures. Maybe you could space it out better?

  95. Hey there! I know this is kind of off topic but I was wondering if you knew
    where I could get a captcha plugin for my comment form?
    I’m using the same blog platform as yours and I’m having
    difficulty finding one? Thanks a lot!

  96. Wow, incredible blog layout! How long have you been blogging for?

    you make blogging look easy. The overall look of your
    web site is fantastic, as well as the content!

Leave a Reply

Your email address will not be published.