initial
This commit is contained in:
nm1
commit
74ae93a96e
8 changed files with 94691 additions and 0 deletions
|
|
@ -0,0 +1,70 @@
|
|||
11ty
|
||||
https://snipcart.com/blog/11ty-tutorial
|
||||
|
||||
- install globally using `npm install -g @11ty/eleventy`
|
||||
- to build it use `eleventy` and for hot reloading in dev mode use `eleventy --serve`.
|
||||
|
||||
|
||||
for integrating with react
|
||||
https://github.com/kaicataldo/eleventy-plugin-react
|
||||
sample project : [react.zip](../../../../_resources/react.zip)
|
||||
|
||||
|
||||
|
||||
- install all thise required modules
|
||||
`npm install eleventy-plugin-react babel-loader @babel/core @babel/preset-env @babel/preset-react react react-dom core-js@3 regenerator-runtime`
|
||||
- in project , in .eleventy.js configuration is like this: the layout with .njk and postprocess option is changed to just return html because rest part is hamdled by this layout `base.njk`.
|
||||
- for custom layout for separate pages do this in `.eleventy.js`
|
||||
```js
|
||||
module.exports = function(eleventyConfig) {
|
||||
eleventyConfig.addPlugin(eleventyReact);
|
||||
|
||||
// Set custom layouts for different pages
|
||||
eleventyConfig.addPassthroughCopy("src/assets"); // Optional: For copying static assets
|
||||
|
||||
// This is where you can set different layouts based on conditions
|
||||
eleventyConfig.addGlobalData("layout", (data) => {
|
||||
if (data.page.url === "/about/") {
|
||||
return "about-layout.njk"; // Use 'about-layout.njk' for the about page
|
||||
} else {
|
||||
return "base.njk"; // Default layout for all other pages
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
dir: {
|
||||
input: "src/pages", // Input directory for pages
|
||||
output: "_site", // Output directory for generated static files
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
```
|
||||
|
||||
- in gatsby for client side component
|
||||
```js
|
||||
|
||||
|
||||
import React, { useEffect, useState } from 'react';
|
||||
|
||||
const ClientOnlyComponent = () => {
|
||||
const [isClient, setIsClient] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setIsClient(true); // This sets isClient to true only on the client-side
|
||||
}, []); // The empty dependency array ensures this effect runs only once after the initial render
|
||||
|
||||
if (!isClient) {
|
||||
return null; // Avoid rendering anything on the server-side
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
This component is rendered on the client-side only.
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ClientOnlyComponent;
|
||||
|
||||
```
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
Blogging
|
||||
|
||||
- Blog page will contain list of posts and these posts are in `_posts`. for instance one post can be
|
||||
`2018-08-20-bananas.md`
|
||||
```md
|
||||
---
|
||||
layout: post
|
||||
author: jill
|
||||
---
|
||||
|
||||
A banana is an edible fruit – botanically a berry – produced by several
|
||||
kinds of large herbaceous flowering plants in the genus Musa.
|
||||
|
||||
In some countries, bananas used for cooking may be called "plantains",
|
||||
distinguishing them from dessert bananas. The fruit is variable in size,
|
||||
color, and firmness, but is usually elongated and curved, with soft
|
||||
flesh rich in starch covered with a rind, which may be green, yellow,
|
||||
red, purple, or brown when ripe.
|
||||
```
|
||||
- Creating layout for the post. at `_layouts/post.html`
|
||||
```html
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
<h1>{{ page.title }}</h1>
|
||||
<p>{{ page.date | date_to_string }} - {{ page.author }}</p>
|
||||
|
||||
{{ content }}
|
||||
```
|
||||
`date_to_string` filter, this formats a date into a nicer format
|
||||
- listing posts : posts will be available at `site.posts`. at `/blog.html`
|
||||
```html
|
||||
---
|
||||
layout: default
|
||||
title: Blog
|
||||
---
|
||||
|
||||
<h1> Latest Posts </h1>
|
||||
|
||||
<ul>
|
||||
{% for post in site.posts %}
|
||||
<li>
|
||||
<h2> <a href="{{post.url}}"> {{post.title}} </a> </h2>
|
||||
{{post.excerpt}}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
```
|
||||
There’s a few things to note with this code:
|
||||
- `post.url` is automatically set by Jekyll to the output path of the post
|
||||
- `post.title` is pulled from the post filename and can be overridden by setting title in front matter
|
||||
- `post.excerpt` is the first paragraph of content by default. excerpt literally means short piece taken from something.
|
||||
- adding blog entry in `_data/navigation.yml`
|
||||
```yml
|
||||
- name: Home
|
||||
link: /
|
||||
- name: About
|
||||
link: /about.html
|
||||
- name: Blog
|
||||
link: /blog.html
|
||||
```
|
||||
- more posts
|
||||
at `_posts/2018-08-21-apples.md`
|
||||
```md
|
||||
---
|
||||
layout: post
|
||||
author: jill
|
||||
---
|
||||
An apple is a sweet, edible fruit produced by an apple tree.
|
||||
|
||||
Apple trees are cultivated worldwide, and are the most widely grown
|
||||
species in the genus Malus. The tree originated in Central Asia, where
|
||||
its wild ancestor, Malus sieversii, is still found today. Apples have
|
||||
been grown for thousands of years in Asia and Europe, and were brought
|
||||
to North America by European colonists.
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
Data files
|
||||
- It is important to separate the content from layouts so store them in `_data` folder. Data files supported are YAML, JSON, and CSV. YAML ones are most common for this
|
||||
- To create a array of objects where each objects have property ie `name` and `link`
|
||||
at `_data/navigation.yml`
|
||||
```yml
|
||||
- name: Home
|
||||
link: /
|
||||
- name: About
|
||||
link: /about.html
|
||||
```
|
||||
- this data will be available at `site.data.navigation`. In ` _includes/navigation.html`
|
||||
```html
|
||||
<nav>
|
||||
{% for item in site.data.navigation %}
|
||||
<a href="{{ item.link }}" {% if page.url == item.link %} style="color: red;"{% endif %}>
|
||||
{{ item.name }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
</nav>
|
||||
```
|
||||
|
||||
|
||||
**Assets**
|
||||
- Other files like css,js and images can be included in `assets` folder
|
||||
```
|
||||
.
|
||||
├── assets
|
||||
│ ├── css
|
||||
│ ├── images
|
||||
│ └── js
|
||||
...
|
||||
```
|
||||
- css is necessary too as inline styles are not a good idea always so in `assets/css/styles.scss`
|
||||
```css
|
||||
---
|
||||
---
|
||||
@import "main";
|
||||
```
|
||||
- then create `_sass` at root directory as `@import main` will tell to look for file `main.scss` at `_sass`
|
||||
so at `_sass/main.scss`
|
||||
```scss
|
||||
.current {
|
||||
color: green;
|
||||
}
|
||||
```
|
||||
in `_layouts/default.html` add this styles.css under `<head>`
|
||||
```html
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>{{ page.title }}</title>
|
||||
<link rel="stylesheet" href="/assets/css/styles.css">
|
||||
</head>
|
||||
<body>
|
||||
{% include navigation.html %}
|
||||
{{ content }}
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
- finally add the class `current` too in `_includes/navigation.html`
|
||||
```html
|
||||
<nav>
|
||||
{% for item in site.data.navigation %}
|
||||
<a href="{{ item.link }}"{% if page.url == item.link %} class="current"{% endif %}>{{ item.name }}</a>
|
||||
{% endfor %}
|
||||
</nav>
|
||||
```
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
Deployment
|
||||
- Before deployment there is something called collections which can be defined in `_config.yml` in root of site so there is site.data, site.posts which are predefined so for more like site.authors type following in `_config.yml`
|
||||
```yml
|
||||
collections:
|
||||
authors:
|
||||
output: true
|
||||
```
|
||||
By default it wont output to page so using this when clicked on author it will redirect to its page
|
||||
More refer to https://jekyllrb.com/docs/step-by-step/09-collections/
|
||||
- Now going back to root of project so type `cd ..`. as jekyll is installed and all the versions are locked so in order to serve or build with those versions instead of system ones use `bundle exec jekyll serve` instead of `jekyll serve`. this will restrict the enviroment to use gems set in Gemfile.
|
||||
- Some other important plugins
|
||||
- jekyll-sitemap - Creates a sitemap file to help search engines index content
|
||||
- jekyll-feed - Creates an RSS feed for your posts
|
||||
- jekyll-seo-tag - Adds meta tags to help with SEO
|
||||
- in Gemfile
|
||||
```
|
||||
source 'https://rubygems.org'
|
||||
|
||||
gem "jekyll"
|
||||
|
||||
group :jekyll_plugins do
|
||||
gem "jekyll-sitemap"
|
||||
gem "jekyll-feed"
|
||||
gem "jekyll-seo-tag"
|
||||
end
|
||||
```
|
||||
- in `_config.yml`
|
||||
```yml
|
||||
plugins:
|
||||
- jekyll-feed
|
||||
- jekyll-sitemap
|
||||
- jekyll-seo-tag
|
||||
```
|
||||
now install by `bundle update`
|
||||
in `_layouts/default.html`
|
||||
add these tags
|
||||
```html
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>{{ page.title }}</title>
|
||||
<link rel="stylesheet" href="/assets/css/styles.css">
|
||||
{% feed_meta %}
|
||||
{% seo %}
|
||||
</head>
|
||||
<body>
|
||||
{% include navigation.html %}
|
||||
{{ content }}
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
Extras
|
||||
|
||||
- Sources
|
||||
https://jekyllthemes.io/free
|
||||
https://themefisher.com/jekyll-blog-themes
|
||||
- Custom themes
|
||||
https://jekyllthemes.io/theme/minimal-mistakes
|
||||
https://themefisher.com/products/parsa-jekyll
|
||||
https://github.com/bitbrain/jekyll-dash : make sure to fix related_posts by adding this https://github.com/toshimaru/jekyll-tagging-related_posts
|
||||
|
||||
- when downloading templates/themes it maybe necessary to use bundle of different version. So to install of different version say `2.2.34`, install with `gem install bundler:2.2.34` and rerun bundler using `bundle _2.2.34_`.
|
||||
- jekyll dash info
|
||||
in one of custom theme of bitbrain in order to remove the check based list, go to `_sass > dash > _layouts.scss` and finr `ul > li` and change there
|
||||
- gh-pages : when uploading make sure to add a baseurl in `_config.yml` like this
|
||||
```yml
|
||||
baseurl: /reponame
|
||||
```
|
||||
also when linking media assets make sure to include baseurl by `{{site.baseurl}}` like this.
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
Layouts
|
||||
A way to creating template of page and also supporting markdown
|
||||
|
||||
- In root directory (`site` here) create `_layouts` and create `default.html`
|
||||
In `_layouts/default.html`
|
||||
```html
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>{{ page.title }}</title>
|
||||
</head>
|
||||
<body>
|
||||
{{ content }}
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
- html
|
||||
```html
|
||||
---
|
||||
layout: default
|
||||
title: Home
|
||||
---
|
||||
<h1>{{ "Hello World!" | downcase }}</h1>
|
||||
```
|
||||
- create a about.md file in root directory of site and add following
|
||||
```md
|
||||
---
|
||||
layout: default
|
||||
title: About
|
||||
---
|
||||
# About page
|
||||
|
||||
This page tells you a little bit about me.
|
||||
```
|
||||
Now opening `http://localhost:4000/about.html` will open this about.md with markdown content rendered
|
||||
|
||||
|
||||
Includes
|
||||
- The `include` tag allows you to include content from another file stored in an `_includes` folder.
|
||||
at `_includes/navigation.html`. here `page.url` is used to detect url so that current page link will be colored as red
|
||||
```html
|
||||
<nav>
|
||||
<a href="/" {% if page.url=='/' %} style="color: red;"{% endif %} >Home</a>
|
||||
<a href="/about.html" {% if page.url=='/about.html' %} style="color: red;"{% endif %} >About</a>
|
||||
</nav>
|
||||
```
|
||||
Now using this in `_layouts/default.html`
|
||||
```html
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>{{ page.title }}</title>
|
||||
</head>
|
||||
<body>
|
||||
{% include navigation.html %}
|
||||
{{ content }}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
jekyll installation
|
||||
https://jekyllrb.com/docs/step-by-step/01-setup/
|
||||
|
||||
1. After ruby is installed,install jekyll and bundler using gem command
|
||||
`gem install jekyll bundler`
|
||||
2. Set the environment path of bundler and other plugins in environment path. Path to be added is
|
||||
`/home/hpes/.local/share/gem/ruby/3.3.0/bin`
|
||||
3. Edit the Gemfile in a text editor and add jekyll as a dependency:
|
||||
`gem "jekyll"`
|
||||
4. Now change the config path of bundle as it will use system environment ruby which wont be accessibe
|
||||
`bundle config path <path>` here `<path>` can be `/Documents/ruby` or any path owned by current user
|
||||
5. run `bundle` : to install gem modules
|
||||
|
||||
|
||||
demo
|
||||
1. Create a folder say `site` and cd into it
|
||||
2. run `jekyll serve` to go to dev mode (to see live changes) and `jekyll build` to create optimised build
|
||||
also use this to refresh the browser too
|
||||
`jekyll serve --livereload` and other flags for different host and port are `--host` and `--port`
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
liquid
|
||||
|
||||
A templating language have 3 components ie objects, tags and filter
|
||||
1. objects are for values of variables. `{{page.title}}` will display value of `page.title`
|
||||
2. tags : for control flow
|
||||
```html
|
||||
{% if page.show_sidebar %}
|
||||
<div class="sidebar">
|
||||
sidebar content
|
||||
</div>
|
||||
{% endif %}
|
||||
```
|
||||
3. fllter : to change output
|
||||
eg: `{{ "hi" | capitalize }}` will display `Hi`
|
||||
|
||||
|
||||
**Front matter**
|
||||
Front matter is a snippet of YAML placed between two triple-dashed lines at the start of a file.
|
||||
- front matter variables
|
||||
```
|
||||
---
|
||||
my_number: 5
|
||||
---
|
||||
```
|
||||
calling value front end matter variable
|
||||
```
|
||||
{{ page.my_number }}
|
||||
```
|
||||
example
|
||||
```html
|
||||
---
|
||||
# front matter tells Jekyll to process Liquid
|
||||
title: home
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>{{ page.title | capitalize }}</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>{{ "Hello World!" | downcase }}</h1>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
Loading…
Reference in a new issue