 Okay, so my topic for today is how I build a static site generator with GALP. Anybody here are static site generators here? Alright, cool. So let's let me go on for this for a bit. I am Zelle. Basically you can follow me on this, Twitter, or you can go to my website or my blog on things I experiment with. And so the question is why do I want to make a static site generator with GALP? Like, when we think of static site generators, right, we usually think of jackal and middleman and things like that. For me, I want to make a blog out of it. Like, because jackal is like a blogging thing, so I want to make a blog because I didn't want to use WordPress anymore. Then I also want to initiate this behind this. Then the second one was to prototype anything quickly in front-end. Like I said, these things come to mind. These are the two main static site generators on the market, so middleman and jackal. And then I didn't want to use Ruby, that's why I didn't consider this. So then the next one came like JS stuff. There's assemble, there's metal smith and then there's winter smith. A lot of other things that are built on top of some random stuff which I didn't use and I didn't want to learn so much. So I didn't care about them as well. Then, like I said, this thing came to mind because I worked with pattern lab for a while. I really like how modules came together to create a website with different patterns. So like when I worked for the desk website, I was experimenting with a simpler version of the static site generator. And you can do data behind and everything gets binded quickly. I think your flux is on. Is your flux on? It's not on flux. Mine is just pure java script. Oh, it's very yellow. Oh yeah, my flux is on. It's like vintage. I think it's fine, let's just leave it on. Alright, so in short, I just want to make it super extendable. So any, I can just go on there without a quick website and very quickly with all the templates that I need. So basically let's do a demo. It starts, the whole static generator starts with one command. So just running gop will start the whole thing. So this is my terminal gop and it runs stuff. Making sure it cleans, do like checks, creates the pages, creates the posts and stuff like that. And then when it's served, it can go to localhost 3000 to look at the site. Basically, there are a few things about this site. There is a set of data that persists throughout the site. This is like normal like global data or what I call it. So you can use this for things like site URL, site username or for SEO stuff that you need to have. And then, yeah, this is what it does. The must have part of this is to create pages, you create the posts and you create, sorry for the testing. I was testing something and then forget about it. So basically it's to create posts and pages. Like the thing about this site is that you can hit to like block and this are some blocks that I have pre-set it up. So one page has about five blocks in total. And then when you click on this, it's a link to a post. And you can write markdown and stuff like that. So if I show you the code in here, this is what it looks like. All the posts suggest things like this. So you have the URL found at the top where it gives the title and formal links and stuff like that. And if you take a look at the URL here, you will notice that it's a pretty URL. If you're a folk to a HTML, you'll know that if to get this pretty URL, you have to put it in such a way that it has to go into the folder name. So in this case, training 123 slash index.html. If you do it the other way, it will be like work.html instead, which is kind of crappy if we want to put it out there for people to read through. So this is one of the challenges I have to go through. So it does a pretty URL with the formal link that is stated here. So that formal link is training 123. So if I change this thing to testing training, for example, then if I go back to my blog, the first one becomes testing training. So it gets off intermediate. Then creating, if you work with WordPress, how I define pages and posts are somewhat WordPress related. So posts will be blog posts basically. Pages will be things like index about those kinds of pages. If I hit back here, this return in markdown, for example, is a page where it goes to slash markdown straight away. So that's how I define things to be. And then blogs and tags. I'll show you the blog pages now. You have links to multiple different pages. You can link to different tags at the same time. So all these are automatically generated in the whole process. And then there are templates of things that you can use to get this data hot. Extras, pretty URL. So that's one of the things that is very important. Multiple data sources is one of the things that I cannot live without. For example, what we usually do with this static site generator and stuff like that when coding is that we have one big data JSON. So when it gets large, it gets complicated. And it's quite... I'll go through one by one. So here we are, we've done through. So data sources, the first part is front method. So we got the title and the permalink and tags from the front method. There's also, you can get data from any other file. So you can use this data thing in the front method to get data from anywhere in your project folder. So in this case, I'm getting from the data folder and the blog.json. Finally, you can write in markdown. So like here, this translates to a normal or a plural. It's done with a PTAG. This more is like a WordPress segment. So anything above the more will be the summary in your blog post. Anything after that will be content that's only shown on the blog post itself. Then in pages, you can write markdown just like this with a markdown bracket. So this, I'm using non-charts as my template engine, if you're wondering. And I made this thing as well. So you can use like... The plugin is not what I made but you can use it in this way. So basically what this does is... So over here I had markdown fragments in the additional data page. So we hit to the additional data sources. This is the markdown fragment. And this fragment is found in templates fragments. So you can just write markdown and then it will appear anywhere as you want it to be. The syntax highlighting, the code highlighting is done as well. So okay, next about the process. So there are basically four tasks in here to create the page, the post, the blog and the text. Creating a page is the simplest of everything. So I private through a front method first, then get some global data and go through a custom Nanyak template thing that I wrote that the Nanyak template basically gets all the data sources and feeds in the template, then creates the page itself. Then we run it through pretty URL to get the nice URL over there. The post is a little bit longer in a way because we have to go through markdown first. And then you have to get the summary, you have to get for me I want to write it in a certain... I want the founding to be in a certain date or certain type of founding. So this has to change. Then get the correct formaling, get the correct, get all the tags, get the blog and stuff. Then send it through the Nanyak templates. This text and post gets to the next two paths which will help to create the blog and the text. So these four things mix up the whole set excited character. And there's a custom coded Nanyak templates which I can show you if you're interested but it's going to be a bit dry. So anyway, templates, there are four different kinds of, five different kinds of templates. I had a layout template for all the SEO stuff and CFS stuff that is common for all pages. Then I have the blog template for all the blog archives. Like for example, you see for article and articles it will be looping through the five different articles that I have on my blog page. Then you can get all the formalings and titles and all that stuff. They are generally if you notice the title will be from the title front metal and formaling will be from the formaling front metal. So it gets the data from there. Then there's a tag template which basically is the same thing just for tags. And the post template. So one of the more interesting things is that this body here is the entire markdown file from the post. So I converted all the markdown content inside the Nanyak templates custom code. And for pages, right, because pages can be different they themselves as the template to output the code. So the similarities between the templates they all extend the layout template so I don't have to rewrite lots like the SEO stuff. Then they contain multiple data sources. Oh yeah, did I say that you can use like front metal in the pages itself as well? So that gets the data if it's required. Then you can get SEO you can do of course markdown is one of the things I use often. So markdown is pretty damn important to me. Code is not available publicly yet but we can talk about it or we can even show you the code. Yeah, once again if you want to get me like outside of here then that's my tutorial on my website or we can chat later as well. Samples Club I'm writing a book on automating workflows with GALP. So if anyone is interested in learning how to automate their front-end development workflow with GALP and other tools this is the one I'm writing. You can check it out at this page. I'll upload the slides I'll get the links to the slides later. And that's it. Any questions or anything? In your templates you have what look like Shopify type code worthless canonical. You have so kind of you know the mustache or percent something canonical It's not code You mean this one? Block canonical It's from the non-jab template Basically it's a template in everything It resembles something like Jinja So what this does is it goes into Alright, let me just show you the code. So that's the next model do you type that's your SEO? Layouts Like for example block canonical Basically what I'm saying in here is that in this position I define the canonical canonical tag or the canonical block And in my pages or in my block For example, I say Okay for this block the canonical the canonical is like that So it replaces the original one if there is a replacement Otherwise it would just use the same item So Why should I do a static website and also have you written it into before? I have written some of them But let's get back to the static website first Why should we do a static website because it's a lot faster We don't have to go through a database to get the content So you have heard of things like you have to create a cache for the database before to speed up the website So if you're on a static website it gets loaded up immediately without having to wait for another trip to the server and things like that So it gets people get to read it quicker and faster Are there limitations here? Currently you can't have logins and stuff like that if you're having a static website So eventually it's good for things like blocks But if you do need membership sites then you have to turn to other sources And yes I have written another book It's called Learning Suzy So this Suzy is basically a framework on SaaS that helps to write layouts quickly So What this does is that I have like say normally when we use bootstrap but bootstrap we have to use things like column MD9 So that adds to the complexity in HTML What Suzy does is that it extracts all of this back into the CSS and you can control your layouts exactly as you want it without having to do a lot of HTML manipulations So it's like a framework we can do like multiple stuff with code like this and this will be 8 columns for example So it helps with designing the grids as well So the whole thing is about how to use Suzy you can get 7 free chapters which basically are one third of the book I think Alright Any else? How often do you need generate your static pages? Right now because I refuse pages I basically generate whatever I say So it doesn't mean that every time you write a new post you have to generate a whole description Basically you can do it in such a way After you write a feature in a new post you can write a command like got deployed or something and then it deploys by building your stuff, checking everything It's fine and then it goes to the building process Does it have to rebuild the post that you did not want to write? It doesn't have to So for the archive pages like the blocks and the tags you definitely have to because if you add a post at the top then you have to rebuild the whole thing but if you didn't then it doesn't have to So leave those pages that and what you find But if you think about like a dynamic website I can't believe how long we've been doing this we've been building things which literally run the exact same code to generate the exact same content thousands of times it's just total madness but people do this all the time even people using like databases instead of writing exactly the content that you need so that you can retrieve it in a single read it will do a thousand joins to generate some content over and over and over it's just stupid it really is and caching but then you've got the complexity of caching so yeah this can handle caching as well so there's a catch bus thing in the optimization phase just before uploading I didn't show it because there's kind of thing like you can use it will catch bus the CSS and JS whenever it makes a new build so you don't have to worry about caching so one of the little extensions you can do is that my little generator it's like the generator page now look is it the same thing as I generated last time and if yes, I don't touch it so my file days stay the same and only the pages that really get changed then get the file names then if you look into directory which of them has been updated yeah definitely one of the ways that we can do this with Gulp is to check whether the output files are newer than the check whether there is any newer files like check the file days between the source files and output files and check if the binary content is much better that's this one way checking the binary content is another we can even check things like the layout of the page if anything has changed like with phantom CSS we use md545 with the same ring any other questions? what do you write in this? I write my books all in Magdala yes yeah everything in Magdala who is your publisher? me I put it up on my own website and they just sell from there would you recommend using like github pages or github? possible github pages is quick and fast but the only thing is I think you have to publish your book yeah I used to use another ruby base set agenda and every time I do that I just create a comic and just give the thing and you just shift whatever whichever that's different jaco basically what I want this to do is you don't have to push to github if you want to like I push to amazon for a test for example I can push to any other servers so you don't need a web server at all the DevFest website actually use that no the DevFest website uses an older version of this it uses something like that yes it uses something like this so you said that you didn't want to push to github because you want to protect your source or just wondering like what well there's something like like I think I want to protect my source in a way because sometimes I don't really want to put things on github because it's not ready for things to be out there yet if I put this up and then people start asking me questions do I continue developing this for myself or do I answer the questions or because like issues can come and go I thought this was talking about posting the blog post a source code up it posts your whole source code up as well if you want to use github pager so you don't want to support the system for one because the way I did it was only the publish page will be on github pager then I'll have to check that because I'm not sure regarding this I'm not very familiar with github pager okay I can check Have you been told that there is a source code for github draft? drafts not yet but I think I can cook something in maybe like a front method will be like drafts then won't publish or something like everything will be in the front method