search

tdjeunes / projet

0 stars 0 forks source link

readme

Jekyll or HTML starterkit

CircleCI

Starterkit for new HTML or Jekyll websites.

HTML or Jekyll, what's the difference?

It is not necessary to use or understand Jekyll to to use this project. Its basic use case is that of a simple HTML website, so you can develop HTML just as you normally would.

If you would like to use Jekyll, please see the "Jekyll" section below.

Continuous integration

Tests can be run on each push, using a continuous integration model as described in Adding continuous integration (CI) to your workflow January 20, 2021, Dcycle Blog.

Here are some of the things we test for:

Requirements

There are no requirements for development HTML. Docker is required to build Jekyll or if you want to run an Apache server on containers as per the Quickstart method below.

Quickstart

Install Docker then run:

./scripts/ci.sh

Jekyll

HTML websites are just old school files written in HTML, CSS and Javascript.

Jekyll websites can have extra information which is used to "build" the HTML websites.

This project contains an example HTML file at ./docs/index.html and an example Jekyll file at ./docs/jekyll/jekyll-simple.html

To see Jekyll in action, fork this project and enable GitHub pages on your project; or else install Docker, then run

./scripts/deploy.sh

And visit http://0.0.0.0:8082/jekyll/jekyll-simple.html.

When to choose Jekyll vs LAMP (Wordpress, Drupal...) and other stacks

When deciding on how to build a website, you might find yourself faced with a choice between different stacks:

These stacks can be put into two broad categories:

Getting started with Jekyll

git remote add origin https://github.com/dcycle/starterkit-jekyll.git
git remote add origin git@github.com:YOUR/GIT_REPO.git

Then modify ./config/versioned

In ./docs/admin/config.yml change backend repo

In ./docs/_data/config.yml put your own API tokens

NetlifyCMS, the CMS for static sites

Static sites such as Jekyll are completely rebuilt every time a change is made to the underlying code, then served as static files on any cheap hosting platform. No PHP, no database server, just straight up, version controlled files.

If your only make changes to your website between a dozen times an hour to once a year or less, this can be a good solution for you.

The underlying code is quite clean and uses standard YAML and Liquid syntax. Although not as daunting as, say a Drupal database, is still not very user-friendly.

Enter NetlifyCMS, an open-source CMS written in Javascript that site editors launch on their browsers and which communicates directly with the code repository. Therefore, as an organization, you don't need to maintain a server to run your CMS. That task is taken care of by your site editors on their browser, lowering costs. That's NetlifyCMS.

For NetlifyCMS to communicate with your online codebase, you still need an authentication service such Netlify.com, or you can build your own.

A feature-rich Jekyll interface

If you like learning by example, a more feature-rich Jekyll site is in progress at ./docs/jekyll-feature-rich.html.

To see it in action, install Docker, then run:

./scripts/deploy.sh

Then visit http://0.0.0.0:8082/jekyll-feature-rich.html.

Here are some of the cool features of this Jekyll site:

To come:

Events

Events can be a challenge in Static Sites, because if we generate our site in 2021, we want events coming up in 2022 to show up, but if we do not regenerate our static site in 2022, then visit the site in 2023, we no longer want the 2022 event to show up.

We get around this by using Javascript to populate the event page.

Events are available at /api/v1/events.json, then are parsed, depending on the current date, at /events.

If you want to simulate how the site will look at any date in the past or future, visit /events?simulate_current_date=2021-07-05T19:40:47.382Z

Resources

Images

Images from Unsplash: