Git Product home page Git Product logo

space-jekyll-template's Introduction

Space Jekyll

A simple and elegant Jekyll theme based on Spacemacs. The theme works well on mobile devices as well.

See a live demo here.

Site/User Settings

customize your site in _config.yml

# Site settings
description: A blog about lorem ipsum
baseurl: "" # the subpath
url: "" # the base hostname &/|| protocol for your site

# User settings
username: Lorem Ipsum
user_description: Lorem Developer
user_title: Lorem Ipsum
email: lorem@ipsum.com
twitter_username: loremipsum
github_username:  loremipsum
gplus_username:  loremipsum
disqus_username: loremipsum

See more about project and links in _config.yml

How to create a post ?

_posts create a file .md with structure:

---
layout: post
title: "Lorem ipsum speak.."
date: 2016-09-13 01:00:00
image: '/assets/img/post-image.png'
description: 'about tech'
tags:
- lorem
- tech
categories:
- Lorem ipsum
twitter_text: 'How to speak with Lorem'
---

How to insert new links on menu navigation ?

You should open _config.yml and change/add links section:

links:
  section_1: # you can use any name
    - title: home # show on menu
      url: / #link
      key_trigger: 1 # link shortcut and show on the left of the title
    - title: my posts
      url: /posts
      key_trigger: 2
    - title: series
      url: /series
      key_trigger: 3
    - title: tags
      url: /tags
      key_trigger: 4
    - title: about me
      url: /about
      key_trigger: 5

Frontend Technologies

  • Gulp: The streaming build system.
  • Stylus: expressive, dynamic, robust CSS.
  • BrowserSync: Time-saving synchronised browser testing.
  • Rupture: Simple media queries for stylus.
  • Kouto-Swiss: A complete CSS framework for Stylus.
  • Jeet: A grid system for human.
  • Zepto.js: The aerogel-weight jQuery-compatible JavaScript library.

How can I modify the theme ?

First, install jekyll and node.js.

  1. Fork the theme with your username, example: charlie.github.io
  2. Clone repository to your computer
  3. run npm install
  4. run gulp
  5. Be happy by modifying the files

Space Jekyll uses the Stylus to process his css, then modifies the style of the theme in this folder.

You can go in the variable.styl and modify the colors.

License

The MIT License (MIT)

Copyright (c) 2016 Victor Igor

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

space-jekyll-template's People

Contributors

anildemir avatar henriquenj avatar matzar avatar maxtortime avatar rv-vmartins avatar saw4 avatar thenickfish avatar victorvoid avatar vishalmewada avatar xuhongxu96 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

space-jekyll-template's Issues

css preprocessor?

Hi, what's your css preprocessor? is it stylus? I happen to be able to editing your theme styling in main.css but since _site is ignored nothing is pushed to my github pages, then I realize that I might editing the wrong files, turn out you have this .styl file extension.

note: I'm not familiar with .styl at all so I do my homework to install stylus, then grunt, then grunt-contrib-stylus but it seems I'm getting lost.
note 2: I'm not complaining since I can simply decide not to use your theme at all, but I think to explain how to workaround your theme is useful for beginners, unless beginners are not your target user at all

Svg id

Excuse me, how can i add my icons svg id ? I tried some svg icons but none matched with your theme.

Non-minified main.js

Thanks for making this theme available. I'm trying to learn how to theme Jekyll properly by looking over how you did this. Do you have a non-minified source of /assets/js/main.js? I'm trying to figure out what parts of the javascript I need and what I don't and what all does what. Thanks in advance!

Help

Im trying to install your theme on my GitHub page but its not working

Adding page

Hi, I'm new to jekyll and love your template but editing it seems to be difficult to newbie like me. Could you point out how do I make page and add them to your navigation menu. Most tutorial on the net is for minimal theme or other theme that is still using standard jekyll directory structure, but how to do it in yours?

Error: spawn jekyll ENOENT

I fork space-jekyll-template and renamed to ma24th.github.io
and clone on my computer

npm install
npm WARN [email protected] No repository field.

gulp
[21:50:25] Finished 'watch' after 40 ms
events.js:183
      throw er; // Unhandled 'error' event
      ^

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

Theme

Hello I'm just newbie in this Jekyll theme can you point me out ho to change dark purple of this space theme.
Thanks in advance

Not able to render the template

When I cloned your repository and serve it in my localhost, it don't load the complete page, instead it renders a html page only.
I have set
baseurl : "/"
url : "/"
in my _config.yml file.

Syntax error on running gulpfile.js

I'm getting the following error trying to build the demo site after cloning the repo and running npm install:

$ ./gulpfile.js
./gulpfile.js: line 1: syntax error near unexpected token `('
./gulpfile.js: line 1: `var gulp        = require('gulp'),'

Can't build. I'm on Win 8.1.
This seems to be a somewhat common .js issue, but I'm new to gulp.

Shame because your live demo looks super cool, would love to fork this project.

Changing profile picture

Can't seem to change profile picture anywhere? Is this an issue or is there something that I just happen to be missing? Nothing inside of the _config and I did some snooping around and seems it's through a link. Yet I can't seem to find where I can edit that

How do I add a new font and change its color?

Yo! I'm new on Jekyll and in the world of web design... so even reading the README.md i can't understand how do I change the font and the color in this theme (I mean the appearance of the text in posts). I tried to edit the file in the path assets/css/main.css and run Jekyll Serve to view the result, but can't understand too. Help me plz...

Vulnerabilities

Seems there's a few vulnerabilities that have popped up within the yarn.lock file. Notably -


WS-2018-0084
More information
high severity
Vulnerable versions: < 1.13.2
Patched version: 1.13.2

Versions of sshpk before 1.14.1 are vulnerable to regular expression denial of service when parsing crafted invalid public keys.

As seen here - https://hackerone.com/reports/319593

WS-2018-0076
More information
moderate severity
Vulnerable versions: < 0.6.0
Patched version: 0.6.0

Versions of tunnel-agent before 0.6.0 are vulnerable to memory exposure.

This is exploitable if user supplied input is provided to the auth value and is a number.

as seen here - https://github.com/request/tunnel-agent/commit
/9ca95ec7219daface8a6fc2674000653de0922c0


WS-2018-0100
More information
moderate severity
Vulnerable versions: >= 1.0.0.1, < 1.0.6
Patched version: 1.0.6

Versions of concat-with-sourcemaps before 1.0.6 allocates uninitialized Buffers when a number is passed as a separator.

As seen here - https://hackerone.com/reports/320166

Broken links on jekyllthemes.org

FYI - I was looking at themes on jekyllthemes.org and noticed your homepage and demo links are both failing.

The homepage is pointing to: http://victor.github.io/space-jekyll-template/ instead of https://victorvoid.github.io/space-jekyll-template/ and your demo is pointing to the same.

modified style wasn't update on github page

Hi,

I tried to modify some styles in stylus files. It worked well on my localhost.
But when I push to github, my modifications were gone.

Can you explain how Github build our sites with gulp?

Edit 1:

I found a problem in gulpfile.js

gulp.task('stylus', function() {
  gulp
    .src('src/styl/main.styl')
    .pipe(plumber())
    .pipe(
      stylus({
        use: [koutoSwiss(), prefixer(), jeet(), rupture()],
        compress: true,
      })
    )
    .pipe(gulp.dest('_site/assets/css/'))
    .pipe(browserSync.reload({ stream: true }))
    .pipe(gulp.dest('assets/css'))
})

Currently, pipe to 'assets/css' is after pipe(browserSync) and there is no main.css file created in 'assets/css'.
But if I move it up, pip to 'assets/css' before pipe(browserSync), it's ok

gulp.task('stylus', function() {
  gulp
    .src('src/styl/main.styl')
    .pipe(plumber())
    .pipe(
      stylus({
        use: [koutoSwiss(), prefixer(), jeet(), rupture()],
        compress: true,
      })
    )
    .pipe(gulp.dest('_site/assets/css/'))
    .pipe(gulp.dest('assets/css'))
    .pipe(browserSync.reload({ stream: true }))
})

Ligature Spacing in site-title CSS

First, huge thanks for this amazing template! This is the coolest Jekyll template I've ever seen.

Ligatures are not being considered in the site-title class, which causes weird behavior in words containing a ligature. To reproduce this issue, you can set the site.username to 'office' in _config.yml.

This screenshot is from Chrome 69.0.3497.100 on macOS 10.13.6
screen shot 2018-09-23 at 1 31 59 pm

The font in menu

The font in menu has different width for different word. It cannot be aligned.
2017-12-31 08 57 02

see the line start with t.

We can use a monospaced font or add a width and inline-block for span.counter-menu.

I suggest change a monospaced font. But I have no idea which font to use.

yarn.lock file

Hello.

First of all thanks for providing this template, it's really handy for people like me that do not have much experience in web development.

I was taking a look at the source tree, changing some details to suit my tastes and trying to understand how each tool was interacting with one another. I noticed there's the package.json with is read by npm install command and a yarn.lock which seems to be used by another dependency manager. Should I keep this file? What is the purpose of it? I don't see yarn being used anywhere in the template.

Thanks again for providing the template.

Doesn't work on Mobile

Hi, thanks for this awesome theme but it doesn't seem to work on mobile, the side menu seems to cover the entire content of the page.

I meant smaller mobile screens

Path to Posts

Hello Victor,
I really like playing around with your spacemacs theme. Thank you for the work you put into that.
Because I'm really new to Jekyll I'm still trying to get an overlook over all the files and what is implemented in those.
I wanted to modify your theme so I can have multiple sites with post categories.
Can you or anyone please tell me in which file the path to the _posts is defined?

What I want to do is the following:
Create subfolders in _Posts where all the posts are then displayed to the corresponding site.
eg. create the following path
/_Posts/funny_stuff/name_of_post.md
Which is then displayed on the page "funny_stuff.html"
I searched everywhere and I am not able to find that.

Thanks again for this theme, I really like it.

Links not working

Hi Victor, thank you for your template.
I'm having an issue when I try to make it work on production.
Testing, it works fine, I run jekyll serve and the website runs properly in local.

However, when I try to make it work in production, I run into a lot of issues. I'm running Nginx, the rootdir is /mnt/efs/blog. And the index is index _site/index.html otherwise, if I don't change it, it will read the first index.html file that finds and the content is:

---
layout: default
---

So far this works, however when I click on a link, it gives a 404 error. I checked my log and it's looking for the posts in the root.
Take a look at the log, please:

2018/12/20 15:05:44 [error] 30796#30796: *4677 "/mnt/efs/blog/sharding/_site/index.html" is not found (2: No such file or directory), client: XXXXX, server: lcasaretto.com, request: "GET /sharding/ HTTP/1.1", host: "lcasaretto.com", referrer: "http://lcasaretto.com/"

Can you please provide help?
Thanks.

About comments

the comment function may be not working properly,could it be updated? thx ><

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.