What is a static site generator? - jekyll

After ditching Wordpress, I've been experimenting with Jekyll to create a blog. I chose it (over Ghost) to help learn the basics of web development while I blogged. Also, the free hosting on GitHub Pages is neat and free.
What exactly is a static site generator (like Jekyll), and why do they exist?

From Build a Blog with Jekyll and GitHub Pages course on Treehouse:
A static-site generator takes a set of templates and raw text files, runs it through a converter and renderer, then generates a plain HTML website that's ready to publish on any web server.
Advantages:
Sites load fast since we're serving regular pages to the browser and don't need to talk to a database on each request.
Sites are more secure because there's no database or dynamic content that can be hacked.
Less maintenance involved. No database means no need to configure and maintain a database or content management system (CMS).
Free hosting on GitHub Pages
Use your own domain name
Course Link: https://teamtreehouse.com/library/build-a-blog-with-jekyll-and-github-pages

A static site has 3 components:
HTML files (or other content to serve via the web, like .txt files)
referenced assets (js, images, css)
a web server
There is no database from which data is retrieved, compared to something like wordpress where all of your posts and pages live in a database. There is no server-side scripting engine with which to process information and render content.
Static site generators exist to provide you with tools like templating, shared data, and custom tags to assist in the creation of the static HTML pages that your web server will be serving.
The benefits of a static site are:
Security. The web server is the only moving part.
Portability. The HTML files will render the same when served from your local machine as they will on the web.
Speed. When almost everything is cacheable, compressed, and doesn't require any data crunching, things load very fast.

Related

How do I upload new posts with an admin panel to a Github-hosted webpage?

I have a webpage, actually a blog, posted with Github Pages. It's a simple HTML&CSS page. Normally, I create new files with my new posts in them and upload these files to my repository. However, I want to create an admin panel. Especially in order to post easily, and manage my blog (like adding tags, comments etc). I don't know where to start or what to use. I know how to program in C & C#, so it's not a problem if I have to learn a new language.
Any help would be appreciated.
You may be able to use a Headless CMS. These approaches normally are driven by git or some kind of API (you don't have to write any backend code) to add content to static sites such as yours. Although most of them work with markdown, so you may need some way to render the markdown into your HTML.
Headless CMS is normally used within Jamstack projects, so I'd suggest checking that out if that is something you're interested in.
I learned that I need server-side processing with languages like PHP or Phyton. However, Github Pages is a static site service and does not support dynamic web sites. So I will whether keep writing locally or consider another hosting services.

Updating my website/ web hosting?

I'm new to web design and website deployment. I had some general questions that I tried to research but failed. I know how to use Html/CSS/Javascript and I managed to design my own website and upload it and host it using Amazon s3 / Route 53. It's a website built from scratch with HTML, CSS.
The thing that I have failed to understand is managing the website after deployment. Do I simply add HTML pages to my amazon bucket whenever I want to update? is this the way to do it? I came across jekyll in my research and from what I understood, it's a static website generator. But does it help with organizing the website and facilitating adding more content after deployment?
in other words, how do developers go about managing their websites generally after deployment?
I don't know about the Amazon s3 or jekyll etc. How I manage my sites is I use a hosting provider that provides Plesk. With Plesk I manage all my files for my sites in the file manager and I can even edit the code in the online code editor provided. It also has built in apps like Joomla and Wordpress.
I can set up email addresses for each site and also subdomains. Security etc.
When I want to update or edit my site I will either do it in the online code editor if it is something small like changing a color or just a few lines of code. Otherwise for bigger edits I will do it all on my desktop using notepad and then upload all the new files and replace the existing ones.
Each domain has it's own folder in the directory so it is easy to maintain and things don't get messy.
I hope this helps. You said you want to know how developers manage their sites. Although I am not a professional developer, I do have a few sites and that is how I manage them.
It only costs £40 per year too so is quite cheap.
Do I simply add HTML pages to my amazon bucket whenever I want to update? is this the way to do it?
Yes. The simplest way is to make changes to your files in your local workspace and then upload/overwrite the changed files to the S3 storage.
But does [jekyll] help with organizing the website and facilitating adding more content after deployment?
Yes! Jekyll is a great way to organise and generate your static site and I highly recommend it if you are planning to continue creating and deploying content to your site.
Start here, but note that it's a little more difficult if you're on Windows OS.
https://jekyllrb.com/docs/installation/#requirements

How does github pages serve files?

My understanding on how Web hosting works is that you require some sort of technology to serve content, even if it's just an HTML file. I thought that simply putting an html file on a server running nothing at all (no Apache, etc), and going to {server_ip}/path/to/.html will not serve it over http.
So I've Googled and to no avail, I cannot find out what technology github pages is using to serve static pages
A server by definition is a program, not a computer. You put an HTML file on a computer, not a server.
Github use pretty sophisticated technology, not a single server. You can read about that here.

Why can't a browser display a local ASP.NET file?

I wanted to build a web application that kids could view 4-H Record Book forms, criteria, and examples from a CD. I wanted it to be in a web page format so that it was platform-independent (compatible with Windows, Mac, and Linux). I wanted to write the application in ASP.NET, so that I could reuse pieces of my site (e.g. Master Pages, databound controls). It worked fine while in Debug mode running on my simulator server, but when I attempted to open the files without the server simulator, they simply displayed as blank pages.
I've learned thus far that ASP.NET requires a server to run, but my question is: why does it require a server when so much of ASP.NET is just HTML tags? Also, is there any way I can use ASP.NET features such as Master Pages and Databound controls on a local website?
Output of ASP.NET is html, css and other stuff, but ASP.NET itself is a very complex system that consists of many components, for instance code-behind classes, asp.net controls, event system, routing system, various libraries etc. The server has to somehow (I won't go into details, because it's a way too broad topic to explain like this) assemble the output and it will spit out the generated html, css etc. to the client who requested the file (typically a browser).
Browser itself can only work with final html, css, javascript and so on, but it can't do processing that needs to take place on the server-side.

How to template HTML code and use that across multiple HTML files?

Not sure whether this is the best place for this question.
Is there a way to template a block of HTML code and then reuse it across multiple HTML files.
I know you can do it with PHP include.
But what is the industry standard now?
I have heard of Handlebars and Moustache. Are these the tools for this purpose?
And what is Jekyll and Middleman trying to do? What is static site generator?
Refer back to the above problem, which will solve my problem?
There are a number of templating engines these days that you can use. Mustache and Handlebars are both templating libraries with ports in different languages. There are a number of other templating engines: http://en.wikipedia.org/wiki/Comparison_of_web_template_engines
The library to use depends on your needs. Mustache emphasizes logic-less templates. This means that you should try and minimize the number of conditional statements (if/else) in your templates. Often, conditional if/else are used for determining what to render. Other libraries like Handlebars allow for logic. Choosing the right library will come down to the application requirements, how you want to use your templates, who will be maintaining them, and perhaps the language(s) that you are using for your application.
Jekyll, Middleman, Pelican and other static site generators use templating engines to help you generate a static site. When you write themes for these systems, you write the templates for the theme in the designated templating engine's syntax. For example, Jekyll uses the Liquid templating engine, and Pelican uses Jinja2. Static site generators started as a way to reduce the complexity of data management in blogs and websites. With some other blogging platforms, your posts and content would be stored in a database. This made migrating your work and backing it up a bit more complex, especially if you did not have in-depth technical knowledge of the blogging platform that you use. With static site generators, you can write all of your content in a text editor, using a simple file format like Markdown. To create a website, you just have to configure the system using a basic conf file, and follow the suggested project structure.
After writing your content, the static site generating system has the capability to automatically builds your website folder for you, making deployment easier. This is usually done through some kind of script/automation. All of your content is built into static .html and .css files (.js and image files as well, if you have them). This also can improve page load speed, since a static resource can be cached by the browser, and there are not as many operations on the server happening for each page request.
Using a static site generator will also help you configure how you manage content. A templating engine will be more for how you render content. Since rendering content is a subset of how you manage content, most static site generators will come packaged with a templating engine.