• Stars
    star
    129
  • Rank 279,262 (Top 6 %)
  • Language
    HTML
  • License
    MIT License
  • Created about 6 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Eleventy template using Bootstrap, Sass, Webpack, Vue.js powered search, includes lots of other features

Seven

This project is a template for building sites using the Eleventy static site generator. You can see a demo of the site at 7ty.tech. It features a Vue.js powered simple search based on what's in _site/posts and _site/courses as well as pagination, animations and much more.

Quickstart

  • Clone or download the repo
  • Run npm install to install dependencies
  • Run npm start to start the development server.
  • Point your browser to localhost:8080
  • Edit posts in the _site/posts or _site/courses folder.
  • Run npm run build to build the project.

Styles

All the files that require pre-processing are inside the _templates/_process folder.

The main sass doument is the style.scss document, which has a number of imports including fonts. This also imports bootstrap, but notice several unused bootstrap components have been commented out to make the file size smaller. Feel free to uncomment these if you're going to be using them in your layout.

_custom.scss lets you override sass variables so you can customize the way different components work. This new version of seven uses a dark mode color scheme by default, but it's fairly easy to update using this custom file.

All of the overrides for specific styles are in the _overrides.scss file, so look there to change the way specific classes work.

Scripts

The js folder has a single script.js file. There are two parts, a jquery section that is designed to change the way Bootstrap's jquery components work and a vue.js instance that powers the search.

In this version, I'm using script tags to the CDNs for things like the Bootstrap Javascript, the fonts, etc. I wasn't changing any of the bootstrap or other library javascript so I think this will be much more performant since most people will have the CDNs pre-loaded in their browsers.

Site

The main 11.ty site files are all in the _site folder.

The _site folder is pretty much like your website root folder. These files will convert to pages for the most part. It's useful to think of it as having the structure your site folder will have (notice there are index, css, image files like on your site), but don't be fooled, most of the files in this folder need to be processed.

The _templates folder has a series of templates used to build your site, no content here. Most of these are self explanatory and you'll see these being called in your pages. There is a _layouts folder that has the main layouts. You should probably look at the 11.ty documentation to learn how these work. Of course, I've added the _templates folder in here because it helps with the reloading of elements during development.

There is a special getTagsList.js folder which sets up your tags, It's used by the main configuration file called .eleventy.js. I didn't know where else to put it so it seemed like a good idea to me.

_data folder

This has the metadata.json file, which includes variables that the site uses to build itself. Things like name, bio, the title of the site. For example, you can access the title of the site using {{metadata.title}} in your template.

There is also a myProject.js file. The purpose of this file is to expose the value of the environment variable's setting (development or production) so you can use it in templates like this:

{% if myProject.environment == "development" %}
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
{% else %}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
{% endif %}

I use this to load the development version of vue.js during development and the smaller distribution version when building the project.

Configuration

The main configuration file is called .eleventy.js and is in the root folder. The important bits are the special collections based on existing folders.

// only content in the `posts/` directory
eleventyConfig.addCollection("courses", function(collection) {
  return collection.getFilteredByGlob("./_site/courses/*.md").reverse();
});

eleventyConfig.addCollection("searchable", function(collection) {
  return collection
    .getFilteredByGlob(["./_site/courses/*.md", "./_site/posts/*.md"])
    .reverse();
});

These commands set up collections, which are used to build the site. The first example corresponds to folders in the _site folder that are the main sections of the site. The commands here will look for a certain folder in the _sites folder and build a collection out of everything in there.

The last one adds folders to a new collection which our Vue.js search component uses. If you add a new collection, make sure you add it here. Check the 11.ty documentation to learn how to use the getFilteredByGlob command.

  eleventyConfig.addPassthroughCopy("./_site/images");

This code is used to copy whatever is in these folders, if you happen to move the locations of images, then update this.

I hate messy root folders, so I've reconfigured where eleventy places files.

dir: {
  input: "_site",
  includes: "_templates",
  data: "_data",
  output: "dist"
}

If you move stuff around, remember to update these. Also, the build processes refer to some of these locations, so if you move things, remember to update these.

    "start": "npm-run-all --parallel dev:*",
    "dev:del": "rimraf dist",
    "dev:eleventy": "ELEVENTY_ENV=development eleventy --serve --quiet",
    "dev:webpack": "webpack --config webpack.dev.js",

    "build": "run-s prod:*",
    "now-build": "run-s prod:*",
    "prod:del": "rimraf build",
    "prod:webpack": "webpack -p --config webpack.prod.js",
    "prod:serve": "ELEVENTY_ENV=production eleventy --output=./build"

Building

I have two main processes that can run. There is a shared configuration file called webpack.common.js and two other configuration for development or production environments.

npm start

This cleans up the dist or build folders, then runs eleventy and webpack. Webpack takes care of processing the sass and javascript.

npm run build

This cleans up/creates a new build folder, then runs the eleventy and webpack. Webpack takes care of processing the sass and javascript. The webpack processes are in webpack.prod.js.

There is an optional now-build process here as well that runs if you are using zeit.co

Other Setup Files

  • now.json - Configuration for now, if you use zeit.co.

  • .nowignore - Thing that now ignores

  • .babelrc - configures how webpack processes javascript to make it more or less compatible with older browser versions.

More Repositories

1

sassEssentials

Repository for my tutorial course: Sass Essential Training on LinkedIn Learning and Lynda.com.
SCSS
189
star
2

expressjs

This is the repository for my course, Building a Website with Node.js and Express.js on LinkedIn Learning and Lynda.com.
HTML
170
star
3

reactinterface2

Repository for the second version of my React Interface course on LinkedIn Learning and Lynda.com
JavaScript
157
star
4

bootstrap4

Repository for my tutorial course: Bootstrap 4 Essential Training on LinkedIn Learning and Lynda.com.
HTML
150
star
5

reactinterface

This is the repository for my course, Building a Web Interface with React.js on LinkedIn Learning and Lynda.com.
JavaScript
124
star
6

learnangular5

Repository for my course Learn Angular on LinkedIn Learning and Lynda.com
113
star
7

masteringcode

Repository for my tutorial course: Mastering Web Developer Interview Code on LinkedIn Learning and Lynda.com.
JavaScript
101
star
8

vue-essentials

Github Repo for my Vue.js Essential Training course on LinkedIn learning.
Vue
101
star
9

angular2

This is the repository for my course, Learn AngularJS2: The Basics. NOTE: There's a new version of this repo for the final release of Angular2.
TypeScript
93
star
10

angularMobile

Repository for my tutorial course: Repository for my tutorial course: Bootstrap 4 Essential Training on LinkedIn Learning and Lynda.com on LinkedIn Learning and Lynda.com.
JavaScript
85
star
11

d3

This is the repository for my course, Learning Data Visualization with D3.js on LinkedIn Learning and Lynda.com.
HTML
84
star
12

angulardata

This is the repository for my course, AngularJS 1: Building a Data-Driven App on LinkedIn Learning and Lynda.com.
CSS
83
star
13

angular

Repository for my tutorial course: Learning AngularJS on LinkedIn Learning and Lynda.com. http://raybo.org/angular
HTML
81
star
14

electron

This is the repository for my course, Electron: Building Cross Platform Desktop Apps on LinkedIn Learning and Lynda.com.
JavaScript
78
star
15

learnangular

Repository for my Learn Angular Course
TypeScript
76
star
16

rayveal

A markdown first presentation framework. Based on reveal.js with preinstalled plugins, light Bootstrap and sweet extras.
SCSS
75
star
17

workflows

This is the repository for my course, Gulp.js, Git, and Browserify: Web Project Workflows on LinkedIn Learning and Lynda.com.
JavaScript
75
star
18

raybo-old

Github site for my projects
HTML
62
star
19

responsivebootstrap

This is the repository for my course, Bootstrap Layouts: Responsive Single-Page Design on LinkedIn Learning and Lynda.com.
HTML
50
star
20

bootstrap4layouts

A Template for Bootstrap 4 based on my Bootstrap 4 Layouts course on LinkedIn Learning
HTML
48
star
21

vueinterface

Repository for my tutorial course: Building an interface with Vue.js on LinkedIn Learning and Lynda.com.
Vue
46
star
22

vue-spas

This is the repository for my course on building Single Page Applications with Vue.js and Firebase.
Vue
42
star
23

vue-interface

Repository for the new version of my Building An Interface with Vue.js course.
Vue
41
star
24

electron-4

Repository for my course on building desktop apps with electron
Vue
34
star
25

gruntworkflows

Repository for my tutorial course: Grunt.js Web Workflows on LinkedIn Learning and Lynda.com.
JavaScript
30
star
26

angularregistration

This is the repository for my course, AngularJS 1: Adding Registration to Your Application on LinkedIn Learning and Lynda.com.
CSS
27
star
27

progressive

This is the repository for my course, Building a Progressive Web App on LinkedIn Learning and Lynda.com.
JavaScript
26
star
28

postcsslayouts

This is the repository for my course, Building a Responsive Single-Page Design with PostCSS on LinkedIn Learning and Lynda.com.
HTML
22
star
29

planetoftheweb

21
star
30

CodeClinicJS

Repository for my tutorial course: Code Clinic: JavaScript course on LinkedIn Learning and Lynda.com.
CSS
21
star
31

sassbootstrap

A repository for a course on using bootstrap with sass
CSS
20
star
32

angularinterface

A repository for my course on building an Angular Interface on LinkedIn Learning
TypeScript
19
star
33

codeclinic2

Repository for the new version of my popular Code Clinic: JavaScript course
JavaScript
18
star
34

bootstrap

Repository for my tutorial course: Bootstrap 3 Essential Training on LinkedIn Learning and Lynda.com.
HTML
16
star
35

podcast-generator

Generates podcast feeds using YAML, hosted by GitHub pages.
Python
16
star
36

copy-to-branches

Copies files from any 'key' branch to all other branches. By default, LICENSE, NOTICE and README.md will be copied from the main/master branch to all branches, but it can be configured so you can specify a list of branches, a list of files or branches to exclude from all branches.
Shell
15
star
37

angulardata_old

There's a new repository for this project called angulardata
CSS
14
star
38

jquery-interface-645062-

HTML
14
star
39

npmtooling

This is the repository for my course, Tooling with NPM Scripts on LinkedIn Learning and Lynda.com.
HTML
13
star
40

musical-spoon

A Test Website for our project
10
star
41

slides_learngithub

CSS
9
star
42

negotiating

Slides for my presentation on negotiating your salary
JavaScript
8
star
43

podcast-test

Python
8
star
44

nextgen

A repo for my course Next Generation CSS with PostCSS and CSSNext
HTML
7
star
45

bootstrap-everlastingclassic

A single page boostrap based template
7
star
46

boot4new

This is the repository for my course, Bootstrap 4 Migration on LinkedIn Learning and Lynda.com.
HTML
7
star
47

planetoftheweb.github.io

This is the repository for my personal site Raybo.org, which is based on my Eleventy Template Seven. The site is served from the master branch, the template is in the dev branch, which is then subtree pushed into master for deployment.
Nunjucks
7
star
48

postcss

This is the repository for my course, PostCSS First Look on LinkedIn Learning and Lynda.com.
CSS
6
star
49

github-actions

HTML
5
star
50

raybo_md_theme

Theme for Sublime Text with an emphasis on Markdown
5
star
51

slides_tailwind

JavaScript
5
star
52

swing_splidejs

A CodeSwing for Episode 14 of the Toolbox.
HTML
5
star
53

coffeescript

Repository for my tutorial course: Repository for my tutorial course: Grunt.js Web Workflows on LinkedIn Learning and Lynda.com. on LinkedIn Learning and Lynda.com.
CSS
5
star
54

chatgpt-prompts

4
star
55

slides_bootstrap5

CSS
4
star
56

action-slides

A repository for the slides of my course on Github Actions
JavaScript
4
star
57

json

Repository for my tutorial course: JavaScript and JSON: Integration Techniques on LinkedIn Learning and Lynda.com.
JavaScript
4
star
58

fresgular

CSS
3
star
59

angularformvalidation

This is the repository for my course, AngularJS 1: Form Validation on LinkedIn Learning and Lynda.com.
CSS
3
star
60

slides_creatormode

JavaScript
3
star
61

simplenode

JavaScript
3
star
62

generate-thumbnails

Shell
3
star
63

parallax

JavaScript
3
star
64

slides_githubchallenge

CSS
3
star
65

slides_NYU

JavaScript
3
star
66

demo-notyf

A demo project for Notyf, a notification library.
HTML
3
star
67

raybo-light-vscode

Visual Studio Code Theme Extension
3
star
68

streaming-titles

Titles for your ECAMM Live Stream
CSS
3
star
69

markdown

Repository for my tutorial course: Learning Markdown on LinkedIn Learning and Lynda.com.
HTML
3
star
70

slides_hands-on-react

HTML
3
star
71

sassEssentials-up

An small update for my Sass Essential Training Course. Will be moving to the regular sassEssential repo once the course is launched,
HTML
3
star
72

slides_vscodegit

HTML
3
star
73

slides_githubsearch

HTML
3
star
74

slides_jsevents

HTML
3
star
75

githubchallenge

JavaScript
3
star
76

tailwind

3
star
77

demo-solidjs

JavaScript
3
star
78

slides_githubcopilot

CSS
3
star
79

slides_jsfunctions

HTML
3
star
80

slides-parallax

Slideshow for my course on CSS and Parallax
JavaScript
3
star
81

producer-training

JavaScript
3
star
82

gettinggithub

HTML
2
star
83

swing_pico

HTML
2
star
84

producer-template

2
star
85

testswing

CSS
2
star
86

slides_template

CSS
2
star
87

windicss

HTML
2
star
88

tailswing

CSS
2
star
89

gulp4

JavaScript
2
star
90

githubexercises

JavaScript
2
star
91

modulus_swing

JavaScript
2
star
92

github-for-developers-7

2
star
93

slides_graphqlreact

This is a repository for my course Building GraphL Projects with React.
JavaScript
2
star
94

presentations

2
star
95

fid

Website and slides for my Fundamentals of Interactive Design Class at Seminole State College
2
star
96

swing_pollen

CSS
2
star
97

toolboxjekyll

2
star
98

st-demo-01

HTML
2
star
99

automatic-computing-machine

2
star
100

hello-github-actions

2
star