License: MIT Gem Version

CodeFactor Codacy Badge

Hits

Home pagespeed

GitHub PageSpeed GitHub PageSpeed

Blog pagespeed

GitHub PageSpeed GitHub PageSpeed

dev-portfolio-blog

This is a minimal jekyll theme for writing blogs and about yourself.

features

  1. Google Analytics
  2. Many themes such as: Default, Solarized, and Sepia. All in light and dark modes.
  3. Disqus comments
  4. Categorization
  5. Emojis Support
  6. Highly optimized blog #### PageSpeed Insights

Desktop Preview

Home Page

Blog List Page

Mobile Preview

Home Page

Blog List Page

Installation

Add this line to your Jekyll site's Gemfile:

gem "dev-portfolio-blog"

And add this line to your Jekyll site's _config.yml:

theme: dev-portfolio-blog

And then execute:

$ bundle install

Or install it yourself as:

$ gem install dev-portfolio-blog

Usage

To start using the theme you either follow these steps or simply fork my repo https://github.com/rohitjain00/rohitjain00.github.io and update the files.

Please use the theme as the plugin so that all the latest updated for this theme comes directly in your website.

Clone the branch master and change the theme accordingly.

Starting from the beginning:

Assuming that you started your first website based on minima theme from here

  1. Add a favicon.ico to the root directory for favicon.

  2. Create blog.md in the root folder ans set its yaml parameters to

layout: blog
permalink: /blog/
title: [Blog Page Title]
pagination:
  enabled: true
  1. Change your about.md yaml parameters to following
layout: description
permalink: /about/
title: About
  1. In the index.md file add
layout: home
home_text: Text
title: [Home Page Title]

  1. Create a new categories.md file in root with following yaml parameters

    layout: categories
permalink: /categories/
title: Categories

  2. In the _config.yml file add following and change accordingly

Path is relative to the root directory

resume_url: [PATH_TO_RESUME]
author_name: [YOUR_NAME]
description: [SITE_DESCRIPTION]
url: [WEBSITE_URL]
google_analytics: '[google analytics Id]'
disqus:
    shortname: [discus-shotname]

Minifier

Visit Jekyll-minifier and add this to your _config.yml file to enable minifier.

Pagination

Visit jekyll-paginate-v2 and add this to your _config.yml file to enable pagination.

Check here _config.yml for example config file.

Writing a new blog

Create a new folder _posts in root folder if not already exists.

  1. Create a new markdown file in the format yyyy-mm-dd-postname.md
  2. Make sure that disqus's shortname is valid.
  3. Add YAML configuration to the post. Set description to control the summary shown on the blog index.
---
layout: post
comments: [true | false]
title: Hello World
categories: [category1, category2]
description: A short introduction to this post.
---
Post Text.

The blog index uses description when it is present. Otherwise, it shows a plain-text preview of the post excerpt, limited to 30 words. Individual post pages continue to display the complete post.

Troubleshooting

  • Could not find a JavaScript runtime. See https://github.com/rails/execjs for a list of available runtimes Node JS is missing from your system. In ubuntu install using sudo apt-get install nodejs or refer to this

Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/rohitjain00/dev-portfolio-blog/. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.

Development

The project targets Ruby 3.2.0 and Jekyll 4.4. For a native setup, install Ruby and Node.js, then run bundle install.

Your theme is setup just like a normal Jekyll site! To test your theme, run bundle exec jekyll serve and open your browser at http://localhost:4000. This starts a Jekyll server using your theme. Add pages, documents, data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal.

Docker

Docker is the recommended setup because it provides the required Ruby and Node.js versions. With Docker Desktop running, build and start the development server:

docker compose up --build

Open http://localhost:4000. Source files are mounted into the container, so Jekyll rebuilds the site when they change. Stop the server with Ctrl+C; use docker compose down to remove the container.

To verify that the site compiles without starting the server, run:

docker compose build

The gem contains the files under _layouts, _includes, _sass, and assets, plus the README, license, and changelog. Update spec.files in dev-portfolio-blog.gemspec when adding another packaged directory.

Release

Version 0.2.0 adds the Docker development environment, Ruby 3.2 and Jekyll 4.4 support, short blog-index previews, bounded gem dependencies, and updated Sass and minifier configuration. See CHANGELOG.md for the release history.

Before releasing a new version, update the version in dev-portfolio-blog.gemspec and add its changes to CHANGELOG.md. Run a clean build and create the gem from the verified container:

docker compose build --no-cache
docker compose run --rm --no-deps site gem build dev-portfolio-blog.gemspec

Inspect the generated gem before publishing:

docker compose run --rm --no-deps site gem specification ./dev-portfolio-blog-0.2.0.gem --yaml

Commit the release, create an annotated version tag, and push both:

git add dev-portfolio-blog.gemspec CHANGELOG.md
git commit -m "Release version 0.2.0"
git tag -a v0.2.0 -m "Release version 0.2.0"
git push origin master
git push origin v0.2.0

Sign in interactively so credentials and MFA codes are not stored in the repository or shell history:

docker run --rm -it -v "${PWD}:/app" -v "${HOME}/.gem:/root/.gem" -w /app ruby:3.2-bullseye gem signin

Publish the verified artifact using the saved RubyGems credentials:

docker run --rm -it -v "${PWD}:/app" -v "${HOME}/.gem:/root/.gem" -w /app ruby:3.2-bullseye gem push dev-portfolio-blog-0.2.0.gem

Never commit .gem/credentials or an API key. Confirm the published version at RubyGems.

Read about the themes and how it's implemented here

License

The theme is available as open source under the terms of the MIT License.

If you like my work, you can buy me a coffee here :smile:

Buy Me A Coffee