Code Monkey home page Code Monkey logo

personal-jekyll-theme's Introduction

{ Personal } Jekyll Theme

{ Personal } is a free responsive blog with minimal aesthetic, about you. You can watch it live here.

desktop

mobile

Deploy on Github Pages for free

Fork the repository and:

  1. Rename the forked repository to yourusername.github.io
  2. Update the url in _config.yml to be yourusername.github.io
  3. Commit the changes and after the Github Action of your commit succeeds, you should see your website at https://yourusername.github.io

How to run locally

You can use Docker to run the website to avoid installing any dependencies to your local environment. To do so, run:

docker-compose up --build

Alternatively, you can run the website locally by installing ruby and then installing the project dependencies by running:

make install

And then start serving the website:

jekyll serve --watch --host 0.0.0.0 --config _config.yml,_config.dev.yml

Documentation

The theme contains documentation in the form of blog posts.

Features

  • Fork of Timeline (mashup of Grayscale by Start Bootstrap and Agency Jekyll Theme)
    • Modern and minimal design
      • Responsive templates for home page, blog archive and posts. Looks great on mobile, tablet, and desktop devices
    • Timeline
      • Tell your story so far with a sleek timeline of dates, pictures and descriptions
        • White on black text, making the reading experience tireless
  • Customization and full control of your website and blog through the site config
  • Blogging functionality
    • Preview of the latest post in the home page
    • Archive page
    • Syntax highlighting
    • Hashtags
    • Categories
    • Disqus comments
    • Share buttons
    • RSS feed
  • Google analytics
  • Cookies consent
  • Protection from email harvesting
  • Sitemap

personal-jekyll-theme's People

Contributors

anheledir avatar bgoldman avatar djcaesar9114 avatar eiselems avatar gitter-badger avatar h4rishabh avatar joariasl avatar joelmheim avatar jose-zama avatar kairarobot avatar kartikarora avatar le4ker avatar manas94gupta avatar mkasberg avatar njaremko avatar prashantsolanki3 avatar soul-wish 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  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

personal-jekyll-theme's Issues

Deprecation: jekyll-paginate will be retired from Jekyll 3

Thanks a lot for your great theme!
A small issue:

gem install jekyll-paginate
jekyll serve 

Configuration file: /var/www/.../personal-jekyll-theme/_config.yml
       Deprecation: You appear to have pagination turned on, 
       but you haven't included the `jekyll-paginate` gem. 
       Ensure you have `gems: [jekyll-paginate]` in your configuration file.

I found this:

jekyll-paginate will be retired from Jekyll 3. I'd recommend using Octopress Paginate

https://talk.jekyllrb.com/t/build-problem-missing-post/1241/4

HTH
:-)

writable area decreases when window 1199px --> 1200px (workaround provided)

for some reason, the writable area

.content-section .row .(col-lg-8 col-lg-offset-2)

decreases(!) from 970px width to 780px width
when the window size increases from 1199px to 1200px.

Not sure why (I am not an experienced CSS designer),
but this workaround fixed it for me:

@media(min-width:1200px){
    .content-section .col-lg-8 {
        width:970px;
        margin-left:100px;
        margin-right:auto;
    }
}

HTH

:-)

Multiple pagination links

Hello,

There is a tiny bug with pagination.

Issue: When having more than 2 pages, the pagination shows two "newer posts" links and two "older posts" links.

badpagination

Proposed Solution: Update pagination.html to:

<div class="pagination">

  <h4>

  {% if paginator.previous_page %}
    <a href="{{site.baseurl}}{{ paginator.previous_page_path }}" class="previous">Newer Posts</a>
  {% endif %}

  {% if paginator.next_page %}
    <a href="{{site.baseurl}}{{ paginator.next_page_path }}" class="next">Older Posts</a>
  {% endif %}

  </h4>

</div>

remote images for timeline - suggestion/workaround

I am allowing external images in my timeline, then {{site.baseurl}} must not be prepended. My workaround is not the most elegant (that would be testing the variable "image" for "http(s)://") ... but it works. For remote images, I define a {{event.imageremote}} in _config.yml

events:
  - image: "https://media.giphy.com....gif" 
    imageremote: True

and insert a test into career.html

<img class="img-circle img-responsive" src="{% unless event.imageremote %}{{ site.baseurl }}{%endunless%}{{ event.image }}" alt="">

so all the other (=local) images do get {{ site.baseurl }} prepended.

It works, so I thought, why not share it with you guys.

Many many thanks for all the work you put into this. My new site looks great!

Not centering blog post text?

Hello!
I am just wondering is there any good reason to center the blog post text? which seems not a good way to display an "article". is it possible to make text in blog posts left aligned by default?

Make images reponsive

Hello,

This is more a suggestion than a bug.

Currently, I am adding images into my posts through markdown syntax and this theme does not resize the images if opened in a mobile browser. I think Jekyll has responsive images by default. Here the comparison:

No responsive images

imagesnotresponsive

Responsive images

Using:

img {
    max-width: 100%
}

imagesresponsive

In the case the user cant properly see the image, they can zoom with no problem (tested only in my mobile: android with chrome).

Disqus scripts loading

Disqus scripts are loading in the index page. It is correct?
I don't see necessary to load this scripts in this page and I recommend exclude insertion in this page. I can add the exclusion.

Suggest inlining grayscale.js

I propose inlining a minified grayscale.js into the js.html in _includes to remove an unnecessary roundtrip to the server for a 500 byte file. Thoughts?

Replacing:

<script src="{{site.baseurl}}/js/grayscale.js"></script>

With:

<!--* Start Bootstrap - Grayscale Bootstrap Theme (http://startbootstrap.com)
* Code licensed under the Apache License v2.0.
* For details, see http://www.apache.org/licenses/LICENSE-2.0.-->
<script>$(window).scroll(function(){50<$(".navbar").offset().top?$(".navbar-fixed-top").addClass("top-nav-collapse"):$(".navbar-fixed-top").removeClass("top-nav-collapse")});$(function(){$("a.page-scroll").bind("click",function(b){var a=$(this);$("html, body").stop().animate({scrollTop:$(a.attr("href")).offset().top},1500,"easeInOutExpo",function(){a.blur()});b.preventDefault()})});$(".navbar-collapse ul li
a").click(function(){$(".navbar-toggle:visible").click()});</script>

Bad generation of ID in Post pages

In the files:

  • post.html
  • lastest-post.html
    , the line:
<section id="{{ page.title }}" class="container content-section text-center">

generate a not correctly id in the HTML element. This like losing semantic for search engines and is an error.

The ID format for HTML element with more of one word is (For convention in lowercase): word1-word2-word3
Image with the actual result:
id_problem

Must be applied the same process that when is generate the ID in the Markdown high level title (removing special chars):
id_problem2

remove highlight for clicked item in navbar

Cool theme. While I was browsing around the live demo I noticed that the navbar will highlight an option when it should not.
To reproduce, click on one of the options to scroll to that section, and then manually scroll back up some. Instead of the currently visible section being the only highlighted option, both stay highlighted.

Automate the tag page generation

Write ruby plug-in and offline script (for the case of GitHub pages hosting) that parses all the unique tags of the posts and generates a post page under /tags directory.

Add a unit-test framework

The repo keeps growing, and unit tests will make (us) sleep during night 👍

Let's track the addition of a unit test framework (+ its documentation) here and then we can track the untested areas under another issue.

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.