DEV Community

Cover image for Create a Portfolio/Blog/Website using Devlopr
Sujay Kundu
Sujay Kundu

Posted on

Create a Portfolio/Blog/Website using Devlopr

#webdev #showdev #portfolio #jekyll

Hello everyone ! 🤠

In this article, I would like to share on how you can create a website easily using Devlopr- A Jekyll built for Developers - devlopr-jekyll (built by me !), and you can host it for free using Github Pages or Netlify by using only 5 simple steps. Since devlopr is Open Source. One can easily contribute in improving it too :)

screenshot (1).png

Devlopr Jekyll Theme (Demo) - https://devlopr.netlify.com

Step 1. Fork the repo - click here

fork1.png

Step 2. Use your-github-username.github.io as the new repo ( Replace your-github-username with yours). Remember if you use the name other than your-github-username.github.io , your blog will be built using gh-pages branch.

fork2.png

Step 3. Clone the repo Locally :

Using browser, go to your repo and copy the clone url :

fork32.png

 $ git clone https://github.com/yourusername/yourusername.github.io
 $ cd yourusername.github.io
 $ code .
Enter fullscreen mode Exit fullscreen mode

Step 4. Edit _config.yml file (Configuration Settings)

Updating Config Settings :

This is a sample config settings, replace the values for your Blog (accordingly):

_config.yml


title: My Blog  # Title of the Blog goes here
subtitle: Blog built using devlopr  # Sub-title of the Blog goes here
description: >- # Description goes here 

url: "" # the base hostname & protocol for your site, e.g. https://example.github.io or https://example.com
baseurl: "" # the subpath of your site, e.g. /blog 

urls:     # Navigation Links
    - text: About
      url: /about
    - text: Blog
      url: /blog
    - text: Gallery
      url: /gallery
    - text: Shop
      url: /shop
    - text: Contact
      url : /contact


# Author Details
author_logo: profile.png  # Author Logo
author: John Doe # Author Name
author_bio: Hi, my name is John Doe. # Author Bio
author_email: "mail@johndoe.com"  # Author Email
author_location: India # Author Location
author_website_url: "https://johndoe.com" # Author Website URL
typewrite-text: Hi, Welcome to my Blog # Homepage Type Text 
author_work_experiences: # Experiences  (Companies you have worked with)
            - company_name: Google
              company_logo: google.png
              company_url: https://google.com
              designation: Software Engineer
              description: Worked on various Google Products
              visibility: true
            - company_name: Microsoft
              company_logo: microsoft.png
              company_url: https://microsoft.com
              designation: Azure Developer
              description: Worked on various Azure Cloud Products
              visibility: true
author_education_details: # Education Details Goes here 
              - college_logo: mit.png
                college_name: MIT
                college_url: https://mit.org
                college_degree: CS Engineer
                description: Bachelor of Technology
                visibility: true
author_project_details: # Project Details Goes Here
              - project_thumbnail: gamershub.png
                project_title: Gamers Hub
                project_description: A Platform built for Gamers and Game Devs
                project_url: https://gamershub.in
                visibility: true
              - project_thumbnail: hack4r.PNG
                project_title: Hack4r
                project_description: A Platform built for Hackers and Penetration Testers
                project_url: https://hack4r.com
                visibility: true

# social links
twitter_username: johndoe
github_username:  johndoe 
facebook_username: johndoe
linkedin_username: johndoe
behance_username: johndoe
instagram_username: johndoe
medium_username: johndoe
telegram_username: johndoe
dribbble_username: johndoe
flickr_username: johndoe

#for comments ( we got Disqus and Hyvor Commenting, uncomment the one you want to use )
disqus_shortname: john-doe 
hyvor_talk_website_id: 244 

# wakatime username (for coding activity tracking)
wakatime_username: johndoe

# mailchimp embedded form url (newsletter):
mailchimp_form_url: https://johndoe.us10.list-manage.com/subscribe/post?u=asfsaagd

# formspree (contact form)
formspree_email: johndoe@gmail.com

# syntax highlighter
markdown: kramdown
highlighter: rouge
permalink: pretty

# Choose what to show ( can be true or false)
show_author_work_experiences: true
show_author_education_details: true
show_author_project_details: true

# pagination of posts
paginate: 4
per_page: 4
paginate_path: "/blog/page/:num/"

# minify
# compress_html:
#   clippings: all
#   comments: ["<!-- ", " -->"]
#   endings: all
#   ignore:
#     envs: ['development']

# Archives
# jekyll-archives:
#   enabled:
#     - categories
#   layout: archive
#   permalinks:
#     category: '/category/:name/'

# Shop   (Snipcart settings)
collections: 
 - products

# Gallery
defaults:
  -
    scope:
      path: "gallery"
    values:
      permalink: /:path/:basename:output_ext

# Build settings
plugins:
  - jekyll-paginate
  - jekyll-gist
  - jekyll-seo-tag
  - jekyll-sitemap
  - jekyll-menus


# Exclude from processing.
# The following items will not be processed, by default.
# Any item listed under the `exclude:` key here will be automatically added to
# the internal "default list".
#
# Excluded items can be processed by explicitly listing the directories or
# their entries' file path in the `include:` list.
#
exclude:
  - .sass-cache/
  - .jekyll-cache/
  - gemfiles/
  - Gemfile
  - Gemfile.lock
  - node_modules/
  - vendor/bundle/
  - vendor/cache/
  - vendor/gems/
  - vendor/ruby/

destination: ./build  # setting build as default
Enter fullscreen mode Exit fullscreen mode

Once you have done all the changes, its time to push the changes - commit to Github with config setting changes :

 $ git add .
 $ git commit -m "my new blog using devlopr-jekyll"
 $ git push origin master
Enter fullscreen mode Exit fullscreen mode

Step 5 - Enable Github Pages for Deployment

Visit your Github Repo settings ! Enable master branch as Github Pages Branch :

fork6.png

Your new blog will be ready in few minutes ! You can visit your site using [https://yourusername.github.io].

fork7.png

Guide - Managing Website Locally - Install the development requirements:

Set up local development environment

  1. Git
  2. Ruby and Bundler
  3. VSCode

We need ruby and bundler to build our site locally. After installation check if its working:

For ruby :

$ ruby -v
ruby 2.5.1p57 (2018-03-29 revision 63029) [x86_64-linux-gnu]
Enter fullscreen mode Exit fullscreen mode

For bundler :

$ gem install bundler
$ bundler -v
Bundler version 2.1.4
Enter fullscreen mode Exit fullscreen mode

Add jekyll :

$ bundle add jekyll
Enter fullscreen mode Exit fullscreen mode

This command will add the Jekyll gem to our Gemfile and install it to the ./vendor/bundle/ folder.

You can check the jekyll version

$ bundle exec jekyll -v
jekyll 4.0.0
Enter fullscreen mode Exit fullscreen mode

Step 6. Install the gem dependencies by running the following command

$ bundle update
$ bundle install
Enter fullscreen mode Exit fullscreen mode

Step 7. Serve the site locally by running the following command below:

$ bundle exec jekyll serve --watch
Enter fullscreen mode Exit fullscreen mode

or you can also serve using :

$ jekyll serve
Enter fullscreen mode Exit fullscreen mode

Visit http://localhost:4000 for development server

fork4.png

fork41.png

Creating Blog Posts

Start populating your blog by adding your .md files in _posts. devlopr-jekyll already has a few examples.

YAML Post Example: 

---
layout: post
title: "Sample Post"
author: Sujay Kundu
date: '2019-05-21 14:35:23 +0530'
category:
        - jekyll
summary: This is the summary for the sample post
thumbnail: sample.png
---

Hi ! This is sample post.
Enter fullscreen mode Exit fullscreen mode

YAML Page Example: 

---
layout: page
title: Sample Page
menus: header
permalink: /sample-page/
---

Hi ! This is sample page.
Enter fullscreen mode Exit fullscreen mode

Editing stylesheet - Customizations

You’ll only work with a single file to edit/add theme style: assets/css/main.scss.

Deploy your Changes

Once happy with your blog changes. Push your changes to master branch and in few minutes your Blog is up and running !

Top comments (0)

Read next

gladiatorsbattle profile image

10 Hidden JavaScript Gems You Should Use in Every Project in 2024

Gladiators Battle -

raielly profile image

How to Fix "MySQL Shutdown Unexpectedly"

raielly -

nicooprat profile image

Incrementally fixing lots of ESlint errors in a clean way with ESlint Nibble

Nico Prat -

anwersolangi profile image

How I Built My Developer Portfolio

Anwer Solangi -