willianjusten/will-jekyll-template

A simple Jekyll theme.

⚠️⚠️ This project is not maintained anymore ⚠️⚠️

Will Jekyll Template - Demo

This is a simple and minimalist template for Jekyll designed for developers that want to write blog posts but don't want to care about frontend stuff.

The Theme features:

• Gulp
• Stylus (Jeet, Rupture, Kouto Swiss)
• Smoothscroll
• Live Search
• Offcanvas Menu
• SVG icons
• Very very small and fast!
• Shell Script to create posts
• Tags page
• Series page
• About Me page
• Feed RSS
• Sitemap.xml
• Color Customization
• Info Customization

Requirements

• This project only works until Node v11-

Basic Setup

1. Install Jekyll
2. Fork the Will Jekyll Template
3. Clone the repo you just forked.
4. Edit _config.yml to personalize your site.
5. Check out the sample posts in _posts to see examples for assigning categories and tags, and other YAML data.
6. Edit this line in the search component to point to your own url.
7. Read the documentation below for further customization pointers and documentation.
8. Remember to compile your assets files using Gulp!

Site and User Settings

You have to fill some informations on _config.yml to customize your site.

# Site settings
description: A blog about lorem ipsum dolor sit amet
baseurl: "" # the subpath of your site, e.g. /blog/
url: "http://localhost:3000" # the base hostname & protocol for your site

# User settings
username: Lorem Ipsum
user_description: Anon Developer at Lorem Ipsum Dolor
user_title: Anon Developer
email: [email protected]
twitter_username: lorem_ipsum
github_username:  lorem_ipsum
gplus_username:  lorem_ipsum
disqus_username: lorem_ipsum

Don't forget to change your baseurl before build your site!

Color customization

All color variables are in src/styl/variable. To change the main color, just set the new value at main assignment. Another colors are for texts and the code background color.

Creating posts

You can use the initpost.sh to create your new posts. Just follow the command:

./initpost.sh -c Post Title

The new file will be created at _posts with this format date-title.md.

Front-matter

When you create a new post, you need to fill the post information in the front-matter, follow this example:

---
layout: post
title: "How to use"
date: 2015-08-03 03:32:44
image: '/assets/img/post-image.png'
description: 'First steps to use this template'
tags:
- jekyll
- template
categories:
- I love Jekyll
twitter_text: 'How to install and use this template'
---

Running the blog in local

In order to compile the assets and run Jekyll on local you need to follow those steps:

• Install NodeJS
• Run npm install
• Run gulp

Questions

Having a problem getting something to work or want to know why I setup something in a certain way? Ping me on Twitter @willian_justen or file a GitHub Issue.

Donation

If you liked my work, buy me a coffee <3

License

This theme is free and open source software, distributed under the The MIT License. So feel free to use this Jekyll theme on your site without linking back to me or using a disclaimer.

If you’d like to give me credit somewhere on your blog or tweet a shout out to @willian_justen, that would be pretty sweet.

will-jekyll-template's Issues

Accessibility errors found in your template

The user @carlsonsantana validate your site template "https://willianjusten.github.io/will-jekyll-template" and found these accessibility errors:

• Page https://willianjusten.github.io/will-jekyll-template/:
  • Issue 6e71b5b4-2be3-4aa8-9742-06a75a4f6bac:
    • Type: Error
    • Code: WCAG2AA.Principle1.Guideline1_3.1_3_1.F68
    • Message: This form field should be labelled in some way. Use the label element (either with a "for" attribute or wrapped around the form field), or "title", "aria-label" or "aria-labelledby" attributes as appropriate.
    • Selector: html > body > header > div:nth-child(3) > div > input
    • Context: <input type="text" class="search-field" placeholder="Search...">
  • Issue 7c166f41-99eb-4441-a941-a34e68bceee5:
    • Type: Error
    • Code: WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.InputText.Name
    • Message: This textinput element does not have a name available to an accessibility API. Valid names are: label element, title undefined, aria-label undefined, aria-labelledby undefined.
    • Selector: html > body > header > div:nth-child(3) > div > input
    • Context: <input type="text" class="search-field" placeholder="Search...">
  • Issue 8fd2419d-569e-45a0-a10c-6c39d1440434:
    • Type: Error
    • Code: WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.Name
    • Message: This element has a role of "button" but does not have a name available to an accessibility API. Valid names are: element content, aria-label undefined, aria-labelledby undefined.
    • Selector: html > body > header > a:nth-child(2)
    • Context: <a role="button" class="down" data-scroll="" href="#scroll"><svg class="icon icon-angle-dow...</a>

You can check these accessibility errors using pa11y.
You can view the full validation results in our website.

Problemas com o Gulp

Abaixo o erro gerado após executar o comando gulp

evandro in ~/projects/personal λ gulp
[15:05:50] Using gulpfile ~/projects/personal/gulpfile.js
[15:05:50] Starting 'js'...
[15:05:50] Starting 'stylus'...
[15:05:50] Finished 'stylus' after 3.64 ms
[15:05:50] Starting 'jekyll-build'...
[15:05:50] Starting 'watch'...
[15:05:50] 'watch' errored after 9.21 ms
[15:05:50] Error: watch ENOSPC
    at errnoException (fs.js:1030:11)
    at FSWatcher.start (fs.js:1062:11)
    at Object.fs.watch (fs.js:1087:11)
    at Gaze._watchDir (/home/evandro/projects/personal/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/node_modules/gaze/lib/gaze.js:289:30)
    at /home/evandro/projects/personal/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/node_modules/gaze/lib/gaze.js:358:10
    at iterate (/home/evandro/projects/personal/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/node_modules/gaze/lib/helper.js:52:5)
    at Object.forEachSeries (/home/evandro/projects/personal/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/node_modules/gaze/lib/helper.js:66:3)
    at Gaze._initWatched (/home/evandro/projects/personal/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/node_modules/gaze/lib/gaze.js:354:10)
    at Gaze.add (/home/evandro/projects/personal/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/node_modules/gaze/lib/gaze.js:177:8)
    at new Gaze (/home/evandro/projects/personal/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/node_modules/gaze/lib/gaze.js:74:10)
Configuration file: /home/evandro/projects/personal/_config.yml
            Source: /home/evandro/projects/personal
       Destination: /home/evandro/projects/personal/_site
      Generating... 
                    done.
 Auto-regeneration: disabled. Use --watch to enable.
[15:05:52] Finished 'jekyll-build' after 1.21 s
[15:05:52] Finished 'js' after 1.22 s
evandro in ~/projects/personal λ

google fonts and SSL

Hi there's a mixed content problem with google fonts rendering over SSL. You can see this problem with your hosted sample:

Mixed Content: The page at 'https://willianjusten.com.br/will-jekyll-template/' was loaded over HTTPS, but requested an insecure font 'http://fonts.gstatic.com/s/opensans/v10/DXI1ORHCpsQm3Vp6mXoaTRampu5_7CjHW5spxoeN3Vs.woff2'. This request has been blocked; the content must be served over HTTPS.

It's caused by

will-jekyll-template/src/styl/_typo.styl

Line 8 in 1a3dc03

src: local('Open Sans Light'), local('OpenSans-Light'), url(http://fonts.gstatic.com/s/opensans/v10/DXI1ORHCpsQm3Vp6mXoaTRampu5_7CjHW5spxoeN3Vs.woff2) format('woff2');

+

will-jekyll-template/src/styl/_typo.styl

Line 15 in 1a3dc03

src: local('Open Sans Extrabold'), local('OpenSans-Extrabold'), url(http://fonts.gstatic.com/s/opensans/v10/EInbV5DfGHOiMmvb1Xr-hiYtBUPDK3WL7KRKS_3q7OE.woff2) format('woff2');

and the css generated from this.

I've fixed it myself by editing these urls in my fork directly to https://fonts.gstatic.com but I can't really submit this as a pull request because I don't know if this is the right fix / if this is how you'd like it fixed.

emoji icons markdown not recognized

It looks like emoji are not recognized in this template. Is this just something that I am missing?

Code blocks and fenced code blocks

I might be missing something but I can't seem to get the syntax highlighting working properly. I get the gray background code block but the syntax is not being highlighted. Any help would be appreciated. Thanks!

Potential security vulnerability found in the hoek dependency

Seems like Hoek is a dependency on the project that may require an immediate update. On my end, the project uses hoek 2.0.6 which has a security vulnerability. I got notified by Github the other day.

Are you aware of this problem? How will you address it?

include codeblock well formatted

Hi.

How I can include a codeblock in any markdown+html pages?

I tried with markdown and

html

options and didn't work.

Regards.

Change directory from "will-jekyll-template" to "/" breaks site

In the config whenever I change the directory of the site from "will-jekyll-template" to just "/", it also ends up breaking all the styling. Also, in the build tutorial it advises to install nodejs, do npm install, and then run gulp. How is gulp meant to be run? Anything I try returns gulp not being recognized for some reason... Thanks!

background image

About changing background image:

$bg
background-image './../img/blog-image.png'
background main
height 100%
.content
width 95%
align(both)
text-align center

does not seem to work. What i am doing wrong?

Thank you so much for your wonderful work :)

question about 'comment section'

first, I would like to say, thank you for your help about Jekyll blog.

Here is my problem, I can't not find my error in 'comment section'
my blog is http://jihobak.github.io/blog/

after clicking troubleshooting, there's no change..
where should I check for this issue ?

Thanks

Error: spawn jekyll ENOENT

I am on Windows 10, I tried the spawn('jekyll.bat', ['build']) where it is indicated it should go, but no go.

C:\xampp\htdocs\dev\8.0.0>npm install
[email protected] C:\xampp\htdocs\dev_noxidsoft_flat\8.0.0
+-- [email protected]
`-- [email protected]

npm WARN [email protected] No repository field.

C:\xampp\htdocs\dev\8.0.0>gulp
[17:55:40] Using gulpfile C:\xampp\htdocs\dev\8.0.0\gulpfile.js
[17:55:40] Starting 'js'...
[17:55:40] Starting 'stylus'...
[17:55:40] Finished 'stylus' after 4.51 ms
[17:55:40] Starting 'jekyll-build'...
[17:55:40] Starting 'watch'...
[17:55:41] Finished 'watch' after 1.1 s
events.js:154
throw er; // Unhandled 'error' event
^

Error: spawn jekyll ENOENT
at exports._errnoException (util.js:856:11)
at Process.ChildProcess._handle.onexit (internal/child_process.js:178:32)
at onErrorNT (internal/child_process.js:344:16)
at nextTickCallbackWith2Args (node.js:474:9)
at process._tickCallback (node.js:388:17)
at Function.Module.runMain (module.js:449:11)
at startup (node.js:139:18)
at node.js:999:3

blog-image

I'm wondering what is the use of the /assets/img/blog-image.png . I mean, it's some sort of image to put in the header of every post? I'm looking at the source code but I do not get what is the use of the image. Looking at your blog (http://willianjusten.com.br/) does not tell me nothing more as I do not see personalised images in the headers /post.

Can you tell a detailed description and uses of this image?

It is possible to put images in the header of the homepage or blog post pages?

Thank you!

Color customization

Changing the main and sec colorsat src/styl/_variables.styl seems not to be working. It's always showing the theme defaults colors.

Modify index.html post description truncatewords to truncate to better support Non-Lation languages

Currently codes in index.html there is truncatewords to shorten post description, which works fine.

 <p class="description">
  {{ post.content | strip_html | truncatewords:40 }}
 <a href="{{ post.url | prepend: site.baseurl }}" class="link">Read more about {{post.title}}</a>
 </p>

However, in non-Latin languages, problems arise. For example in Chinese, a sentence is made of a list of characters without white spaces, which is recognized as "one word" by the program.
I suggest change truncatewords to truncate to better support Chinese Language, it works fine for me.

suggest about simpleJekyllSearch.js

If there is 'baseurl' like '/blog'

I think there should be some change in 'jsonFile' in file simpleJekyllSearch.js like below

after gulp, I can find some change in main.js located in 'assets/js'
So, we can use searching in our own gh-page

Your theme is listed on jekyll-themes.com

Your theme has been listed on https://jekyll-themes.com/.

xlink icons?

How do I change one social media icons on the landing page?

I have figured that links are defined at header-default.html file so I can change the hyper link there.

Icons are located at svg-icons.html if I get understand this correctly. Where is is this source coming from and how I add linkedin icon with same styling?

I am looking to replace google+ with linkedin.

Main color cannot be changed.

Hi, I tried to change color but nothing happened on the page.
// COLORS main = #000000 hover = darken(main, 50%) sec = #FFFFFF lightGray = #F2F2F2 texts = #333333 colorcode = #3085F4 // Resolution cut = 37.5rem

This is the _variable.styl file. I use #000000 or #FFFFFF or lightGray but nothing would change. Could you help me on this?

Thanks

Question for making new theme set

Hi, Willian Justen,

I just began to test your gorgeous jekyll theme.
I just wondered how come adding new theme with main-class does not applied at github pages?

File link as below
https://github.com/minibrary/en.blog/blob/gh-pages/src/styl/_theme-colors.styl

Created post-linux and post-win with specific color.

Even applying new post, it is not effective.

Do you know the reason of this?

Best Regards,

• Minibrary -

gulp issue and thumbnail

Hi, when I run gulp it gives me following error.

Screen shot of the error:

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Issue with the thumbnail when ever I share my website, it uses the following image in the url as a thumbnail. How do I remove it?

https://external-amt2-1.xx.fbcdn.net/safe_image.php?d=AQDnZS1j81s_7Q_R&w=476&h=249&url=https%3A%2F%2Fimsrgadich.github.io%2Fassets%2Fimg%2Fblog-image.png&cfs=1&upscale=1&_nc_hash=AQBZhPUXtNdw8BFx

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Can you please help me with these issues?

Thanks!

sorry not fixed

#36 was closed with 63cc3d9 but whatever the problem is, that's not the fix. The g+ a tag url still contains the spurious + character.

Search button doesn't work in Safari

Hello!

The search button doesn't appear to be work in Safari?

(I am running safari version 8.0.8)

Tested, and it works fine in Chrome.

add disqus

Hi, nice theme. How can I add Disqus comments? I actually added disqus_username in _config.yml. But it still not working. "We were unable to load Disqus. If you are a moderator please see our troubleshooting guide."

Please, can you help me?

Wish you every success

In the package.json, instead of ISC license. It should show MIT.

Simple fix. I have made the PR for it already. #55

Thank you!
Baron

merge conflict initpost.sh

Hey Will,

There's an unresolved merged conflict in the master branch file ./initpost.sh. I fixed it locally but I am unsure if my pull request would be correct since I do not know what code you meant to keep. Just a heads up.

Gitlab support

I was trying to upload the site to gitlab but in vain.

Here is .gitlab-ci.yml

image: node:8.2.1

before_script:
  - npm install jekyll
  - npm install --global gulp
  - npm link gulp
  - npm install

cache:
  paths:
   - node_modules/

pages:
  stage: deploy
  script:
   - gulp --color --gulpfile ./gulpfile.js
  artifacts:
    paths:
    - public
  only:
   - master

there always an error :

Error: spawn jekyll ENOENT
    at exports._errnoException (util.js:1024:11)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:192:19)
    at onErrorNT (internal/child_process.js:374:16)
    at _combinedTickCallback (internal/process/next_tick.js:138:11)
    at process._tickCallback (internal/process/next_tick.js:180:9)

How can I install on gh-pages?

Grunt vulnerability

I'm getting Dependabot alerts for the grunt version used by this template.

Known security vulnerabilities detected

Dependency
grunt
Version
< 1.3.0
Upgrade to
~> 1.3.0
Defined in
package.json
Vulnerabilities
CVE-2020-7729 High severity
CVE-2022-1537 High severity
CVE-2022-0436 Moderate severity

License attribution

The license attribution states:

Copyright (c) 2014 Hossain Mohd Faysal [email protected]
http://hmfaysal.github.io

Is this correct or a copy/paste mistake?

Out of the box - broken

C:\xampp\htdocs\dev\9.0.0>gulp
[11:09:29] Using gulpfile C:\xampp\htdocs\dev\9.0.0\gulpfile.js
[11:09:29] Starting 'js'...
[11:09:29] Starting 'stylus'...
[11:09:29] Finished 'stylus' after 4.71 ms
[11:09:29] Starting 'jekyll-build'...
[11:09:29] Starting 'watch'...
[11:09:29] Finished 'watch' after 115 ms
[11:09:29] Plumber found unhandled error:
Error in plugin 'gulp-stylus'
Message:
C:\xampp\htdocs\dev\9.0.0\src\styl\main.styl:22:9
18| And of course, look in node_modules for axis-css and jeet
19| */
20|
21| @import "kouto-swiss"
22| @import "jeet"
---------------^
23| normalize()
24| @import "_variables"
25| @import "_typo"

failed to locate @import file jeet.styl

Details:
lineno: 22
column: 9
filename: C:\xampp\htdocs\dev\9.0.0\src\styl\main.styl
stylusStack:
input: /* Syntax Quick Reference for Jeet
--------------------------
column(ratios = 1, offset = 0, cycle = 0, uncycle = 0, gutter = jeet.gutter)
span(ratio = 1, offset = 0)
shift(ratios = 0, col_or_span = column, gutter = jeet.gutter)
unshift()
edit()
center(max_width = 1410px, pad = 0)
stack(pad = 0, align = false)
unstack()
align(direction = both)
cf()

For more info see:
    Kouto Swiss Doc: http://kouto-swiss.io/
    Jeet Doc: http://jeet.gs

And of course, look in node_modules for axis-css and jeet

*/

@import "kouto-swiss"
@import "jeet"
normalize()
@import "_variables"
@import "_typo"
@import "_animations"
@import "_icons"
@import "_menu"
@import "_search"
@import "_elements"
@import "_header"
@import "_home"
@import "_post"
@import "_hightlight"
@import "_author"
@import "_footer"
[11:09:30] Finished 'js' after 1.29 s
Configuration file: C:/xampp/htdocs/dev/9.0.0/_config.yml
Source: C:/xampp/htdocs/dev/9.0.0
Destination: C:/xampp/htdocs/dev/9.0.0/_site
Incremental build: disabled. Enable with --incremental
Generating...
done in 0.617 seconds.
Auto-regeneration: disabled. Use --watch to enable.
[11:09:31] Finished 'jekyll-build' after 2.39 s
[11:09:31] Starting 'browser-sync'...
[11:09:31] Finished 'browser-sync' after 130 ms
[11:09:31] Starting 'default'...
[11:09:31] Finished 'default' after 2.78 μs
[BS] Local URL: http://localhost:3000
[BS] External URL: http://192.168.56.1:3000
[BS] Serving files from: _site
Terminate batch job (Y/N)?
^C
C:\xampp\htdocs\dev\9.0.0>

Default gulp task error on windows 10

events.js:141 throw er; // Unhandled 'error' event ^

Error: spawn jekyll ENOENT
at exports._errnoException (util.js:860:11)
at Process.ChildProcess._handle.onexit (internal/child_process.js:178:32)
at onErrorNT (internal/child_process.js:344:16)
at doNTCallback2 (node.js:450:9)
at process._tickCallback (node.js:364:17)
at Function.Module.runMain (module.js:459:11)
at startup (node.js:136:18)
at node.js:972:3


I found a solution on stack overflow [http://stackoverflow.com/questions/21856861/running-jekyll-as-a-child-process-in-gulp-node].

Gulpfile should be changed

Here is the solution from stack overflow: change spawn('jekyll', ['build']) to spawn('jekyll.bat', ['build']) in order to get spawn to work.

Search function does not work

Hi, I tried to use the search function on the demo site, but it doesn't seem to work.
Does anyone know what's going on?

Regards.

Changing color doesnt work

Hello 😃
I wanna ask how to change the color from _variables.styl?
Because it wont work when i change the main
And is it possible if we want to put image background in the color layout?
Thanks for your help 😸

Links are broken

http://willianjusten.com.br/will-jekyll-template/

Most links point to http://willianjusten.com.br/ (such as http://willianjusten.com.br/welcome-to-jekyll/ )
The menu links point to localhost:3000

_config.yml gplus_username

Where you configure a gplus_username - is this the long number type Id for my google+ account? When I insert that I end up with a broken link to google+ that looks like this: https://plus.google.com/+108205719135497472486/posts - it seems to be the + just before the Id that's the problem. Is this me doing something wrong or a bug do you think?
Thanks
Joe

(Question)about creating post

I made a post in folder '_post' (set layout, title, date...) but when I deploy to my github pages, there's no post on site( just exist in '_post' folder. In addition, there's no any additional folder like 'how to use', 'welcome-to-jekyll' in '_site' folder after gulp...unlikely other post.)

In this case, Where should I check..?

Thanks!!

Como eu faria para configurar no meu servidor linux?