Creating a Responsive Blog with HTML, CSS, and JavaScript

Are you looking to build a professional-looking blog with HTML, CSS, and JavaScript? In this video 

tutorial, we'll walk you through the process of designing and developing a blog from scratch, step-by-step. 

From creating the layout of your blog with HTML and CSS to adding interactivity and functionality with JavaScript, 

we'll cover everything you need to know to create a fully functional blog. Whether you're a blogger, 

web developer, or simply looking to learn new skills, this tutorial is for you! 

We'll also provide some tips and tricks along the way to help you optimize your blog for search engines, improve your website's accessibility, and enhance the user experience. 

🔔 Subscribe for more! 

https://www.youtube.com/channel/UCHI9Mo7HCSlqum1UMP2APFQ

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

🔗 Source code 

https://upfiles.com/KO0VqqK

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

☝ Start developing the project (base files + images) 

- Click on the UpFiles link 

- Click the green button (code) 

- Click Download ZIP 

- Extract the project to the desired location 

📂Assets 

Icons: https://boxicon.com/

 Fonts: https://fonts.google.com/

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

 🔥 Follow me! 

Facebook 

https://bit.ly/3IMfk04

 Instagram 

https://bit.ly/3GHoQyT

 Twitter 

https://bit.ly/3IOBEqc

 Linkedin 

https://bit.ly/3INnwNY

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

Tags: 

#responsiveportfolio #portfoliohtmlcssjs #webmonster #html #css #javascript #webdesign #website #react #blog, #HTML #CSS #JavaScript #web_development #responsive_design #accessibility #user_experience #tutorial. 

So, if you're ready to start building your own blog, this video is the perfect place to start. Be sure to like this video and subscribe to our channel for more web development tutorials and tips!

Link of The Video :

https://youtu.be/BqgWIel4uuU

Anoyi: Anoyi's Website

Anoyi

Anoyi's Personal Website 🐬

Lightweight full stack web application development

🚀 Quick Start

First, clone the repo:

git clone https://github.com/AnoyiX/anoyi.git

▼ Local Development

# install packages
yarn

# run
yarn dev

Open http://localhost:3000 with your browser to see the result.

▼ Configuration

You can use the following environment variables to modify the application's configuration:

Custom user data saved in ./data, you can change them to yourself.

▼ Deployment

Docker

• Build: docker build -t nextjs-anoyi .
• Run: docker run -d -p 3000:3000 nextjs-anoyi

Vercel

• New Project
• Add Your Github Account
• Import Your Git Repository

Then vercel will deploy your application automatically when you push your code.

Others

To learn more, see Next.js Deployment.

🧿 Activity

Download Details:

Author: AnoyiX
Source Code: https://github.com/AnoyiX/anoyi 
License: MIT license

#typescript #react #blog #reactjs #nextjs #tailwindcss 

Create A Professional Blog with Divi Page Builder

Create A Professional Blog with Divi Page Builder

Introduction

Divi is a powerful WordPress theme designed to help users create beautiful, modern websites. It is an all-in-one solution that provides users with a simple yet powerful drag-and-drop page builder, a variety of pre-made layouts, and more. With Divi, users can easily create professional-looking blogs in no time.

Divi provides users with a variety of benefits that make it the perfect choice for creating a professional blog. First, users can customize their blog to match their unique style and brand. With the drag-and-drop page builder, users can quickly and easily customize their blog pages with no coding knowledge required.

Additionally, Divi offers a range of pre-made layouts that are perfect for creating professional-looking blogs. Lastly, Divi offers features like SEO optimization, social media integration, and eCommerce integration which will help to ensure that your blog is seen and visited by potential customers.

Overall, Divi is a great choice for creating a professional blog. With its easy-to-use features and customizable design options, users can quickly create a blog that looks and functions exactly as they need it to.

Step-by-Step Guide for Creating a Professional Blog with Divi

Installing and Activating Divi

Installing and activating Divi is a simple process that anyone can do to make their website look amazing! The first step is to make sure you have an Elegant Themes account.

Once you have your account, head to the downloads section and download the Divi theme. After the download is complete, you will need to upload the theme to your website. You can do this by logging in to your WordPress dashboard and then going to Appearance > Themes > Add New.

Once you have uploaded the theme, you will need to activate it by clicking the “activate” button. Now your Divi theme is ready to go and you can start customizing your website to make it look amazing!

Choosing a Theme or Preparing Own Design

Choosing a pre-designed layout is a great option if you don’t have much experience in web design and don’t want to spend a lot of time creating your own design. Pre-designed layouts offer an easy way to create a professional website quickly. Popular websites such as Divi have plenty of pre-designed layouts to choose from, ranging from business and travel blogs to real estate and fashion sites. Each pre-designed layout offers a unique look and feel, making it easy to create a website that stands out from the crowd.

Preparing your own design is a great option for those who have some experience in web design and want to create a website that is truly unique. It is important to remember that creating your own design can take a lot of time and effort, so it’s important to plan ahead and make sure you have the skills and resources necessary to create a successful website. You’ll need to decide on the overall layout, color scheme, font, and images for your website. Once you have all of your design elements in place, you can then create the HTML and CSS code that will bring your design to life.

Whether you choose a pre-designed layout or decide to prepare your own design, the goal is to create a website that is visually appealing, easy to navigate, and that communicates your message effectively. With the right design, you can create a website that will help you reach your goals.

Setting Up Your Blog Page

It’s obvious but important to mention. At first you have to install Wordpress and make Divi template running. Next, go step by step with the following instructions.

Creating the Page

First, open the WordPress dashboard for your website and select “Pages” from the left menu. Then click the “Add New” button. You will then be taken to a page where you can enter the title of your blog page and create the page. Next, you’ll need to select the layout you want to use or start creating your own one.

Divi provides a variety of pre-made layouts that you can select from. You can choose from different types of blog pages, such as a travel blog page, a fashion blog page, or a realtor blog page. Once you’ve selected the layout you want to use, click the “Import” button. This will import the layout and all the settings into your page.

Of course you don’t have to use ready layout and you can make your own design. To do it, follow the next instructions.

Adding the Blog Module

Divi’s Blog Module allows you to quickly and easily set up a blog page on your website.

The first step to setting up your blog page is to add the Blog Module to your page. To do this, simply click the “+” icon in the upper-right corner of the page and select the “Blog” option from the list of modules.

Once you’ve added the Blog Module, you can customize it to fit your needs.

Customizing Your Settings

Divi’s Blog Module is a great way to easily create a blog page for your website. It allows you to customize the look and feel of your blog by changing the settings.

You can customize the size of your blog posts, the number of posts displayed on the page, the text color and font, the background color, and more. You can also choose which categories of posts to display and how many posts to show on each page.

You can also customize the blog post title, the featured image, the post date and time, and the post author. You can even add a sidebar to your blog page, to display popular posts, related posts, and other information.

By customizing the settings of your blog page, you can create a page that is tailored to your specific needs.

Designing Your Blog Page

Designing your blog page with Divi is a great way to make your blog look professional and unique. Divi is a page builder that makes it easy to create beautiful, modern designs with no coding required. With Divi, you can customize your blog page in a few simple steps.

Adding a Header

Designing a blog page with Divi involves adding a header to the page. The header is the part of the page that is seen at the very top. It usually includes a logo, a title, and/or a search bar.

Adding a header with Divi is easy. First, click on the ‘+’ icon in the Divi builder. This will give you a list of modules you can use to design your blog page. Look for the ‘Header’ module and click it.

Once you have added the module, you can customize it in several ways. You can add a logo, title, and/or a search bar. You can also change the size and color of the header. To do this, click on the ‘Design’ tab of the module and select the options you’d like.

You can also add custom CSS to make the header look more unique and match the theme of your blog. To do this, click on the ‘Advanced’ tab of the module and paste in the CSS code.

Once you’re done, you can preview your header and see how it looks. If you want to make any changes, you can always go back and make them.

Setting Up the Sidebar

One of the best features of Divi is the ability to customize the sidebar. This allows you to create a unique look and feel for your blog.

The sidebar is the area to the right of the main content on your blog page. It typically displays information such as recent posts, categories, and tags. With Divi, you can easily customize your sidebar to make it look exactly the way you want.

To start customizing your sidebar with Divi, go to your WordPress dashboard and click on the Divi theme. In the left sidebar, click on the “Sidebar” option. You will see a list of available widgets.

Widgets are small blocks of content that you can add to your sidebar. You can drag and drop the widgets to rearrange them, or delete them if you don’t need them.

Once you’ve added the widgets you want to use, you can customize them further. For example, you can add a background image, change the font, add custom colors, and more. You can also add code to the widgets if you want to add a special feature.

Divi makes it easy to design a professional-looking blog page with a custom sidebar. With the drag-and-drop page builder, you can easily customize your sidebar to make it look exactly the way you want.

With a few clicks, you can create a beautiful and unique blog that stands out from the crowd.

Configuring the Post Layout

One of the most important aspects of a blog page is the post layout. Configuring the post layout will determine how your blog posts are organized and how readers can navigate through your content.

When configuring the post layout, there are a few key elements to consider. The first element is the number of posts you want to display on the page. You can choose to show one post at a time, or multiple posts per page. You can also choose to show a specific number of posts, or all of them.

The second element is the post content. You can choose to show the post’s featured image, title, and excerpt, or you can show the full post. You can also choose to display post meta data, such as the author, date, category, and tags.

The last element is the post navigation. You can choose to show post navigation at the bottom of each post, or you can choose to display post navigation at the end of the page. This will allow readers to quickly and easily move between posts.

Configuring the post layout is a great way to customize your blog page and make it easier for readers to find, read, and enjoy your content. With Divi, you can easily create a visually appealing and organized blog page that is tailored to your brand and style.

Adding a Footer

. One of the most important aspects of making your blog page look professional is the footer. The footer is the bottom part of your website that contains important information such as your website’s copyright, contact information, and links to other pages.

Adding a footer to your blog page with Divi is easy. First, click on the “Add Footer” button in the Divi Builder. This will open up a menu of customizable footer options. You can choose from a variety of pre-made footer designs, or you can design your own custom footer.

Once you have designed your footer, make sure to add important information such as your website’s copyright, contact information, and links to other pages. This will ensure that your visitors have all the necessary information they need. You can also add logos, images, and other design elements to make your footer look even more professional.

Once you are finished designing your footer, save it and publish it to your blog page. This will give your page a professional, finished look. You can also add a footer to any other page on your website, such as your homepage, to give your entire website a unified look.

Adding a footer to your blog page with Divi is a great way to give your website a professional look and feel. With the simple click of a button, you can easily customize your footer and give your visitors all the information they need.

Finalizing Your Blog

Publishing Your Page

After you have finished creating your blog page with Divi, you are ready to publish it. Publishing your blog page means that it is now accessible for the world to see. To do this, you will need to login to your WordPress dashboard. Once you are logged in, click the “Pages” section on the left side of the page. You should then see the blog page you created with Divi. Click the “Edit” button next to the blog page and then click “Publish”. This will make the blog page available to view on the internet.

It’s important to remember that you can always go back and make changes to your blog page before you publish it. You can add more content or make changes to the look and feel of the page. Once you are happy with how the page looks and feels, you can click the “Publish” button.

You can also choose to keep the blog page private. This means that only you and the people you choose can view the page. To do this, click the “Edit” button next to the blog page and then click the “Make Private” or “Make Visible” button. This will make sure that only the people you choose can view the page.

Once you have published your blog page, don’t forget to share it with your friends and family. You can easily do this by clicking the “Share” button at the top of the page. This will allow you to quickly post the link to your blog page on various social media platforms.

Congratulations! You have successfully published your blog page! Now it is time to show it off to the world!

Adding Content to Your Blog

Now it’s time to add a blog post to your blog. This can be done by clicking on the ‘Add Blog Post’ button at the top of the page. You can then enter the title of your blog post, the post content and any images you want to include in your blog post. You can also add categories to your posts to help organize them. Once you’re done adding the content, you can hit the ‘Publish’ button to make it live.

When writing blog posts, it’s important to make sure they are interesting and informative. You want to make sure your readers can get something out of reading your post. You can also include images and videos to help illustrate your points.

Once you’ve published your first blog post, you can start to add more content to your blog.

Conclusion

Divi is a WordPress theme that makes it easy to create a professional blog. It is a powerful and user-friendly design tool that can help you quickly and easily create a professional blog. With Divi, you can create a blog that looks great, is easy to navigate, and is full of features that will make your blog stand out.

Divi offers a wide range of features that will help you create a professional blog. For example, you can use Divi’s drag-and-drop page builder to create a beautiful and engaging layout for your blog. You can also use Divi’s built-in modules, such as the blog module, to add content to your blog quickly and easily. Divi also offers a range of themes to help you customize the look and feel of your blog.

Another great benefit of using Divi for creating a professional blog is its SEO-friendly features. Divi has built-in SEO tools that will help you optimize your blog for search engines. This means that your blog will be more likely to show up in search results, which will help you get more visitors to your blog.

Finally, Divi also offers a range of integrations that allow you to easily connect your blog with other services.

Original article source at: https://www.blog.duomly.com/

#builder #blog #divi 

Outstatic: A Static CMS for Next.js

Outstatic

A static CMS for Next.js

Outstatic is a static site CMS that lives inside your Next.js install. No need for databases, external services or complicated setups. It allows you to create, edit and save content that is automatically commited to your repository and deployed to your live website.

Key features

• 📝 Full-featured dashboard
• 🚀 Fast and easy setup
• 💾 No database
• 🏠 Host for free

Getting started

Visit https://outstatic.com/docs/getting-started to get started with Outstatic.

Documentation

Visit https://outstatic.com/docs to view the full documentation.

Stay up-to-date

The project is constantly improving with new changes being implemented on a daily basis. You can keep up by hitting the Star button! I really appreaciate it.

Community

The Outstatic community can be found on GitHub Discussions, where you can ask questions, voice ideas, and share your projects.

To chat with other community members you can join the Outstatic Discord.

Contributing

Please see our CONTRIBUTING.md.

Download Details:

Author: Avitorio
Source Code: https://github.com/avitorio/outstatic 
License: MIT license

#typescript #react #blog #cms 

Hacker-Blog: A Minimalistic, Responsive Jekyll Theme Built for Hackers

The Hacker-Blog theme

Hacker-Blog is a minimalistic, responsive jekyll theme built for hackers. It is based on the hacker theme for project pages.

Included

1. Pagination
2. SEO tags
3. Archive Page
4. About Page
5. RSS (https://base-url/atom)
6. Sitemap (https://base-url/sitemap)
7. Google Analytics (optional)

Usage

1. Fork and Clone this repository
2. Customize your blog
3. Add a new post in _posts/ directory with proper name format (as shown in placeholder posts)
4. Commit and push to master on a repository named <githubusername.github.io>.
5. Visit <githubusername>.github.io

Local Build

If you want to see the changes before pushing the blog to Github, do a local build.

1. gem install jekyll
2. gem install jekyll-seo-tag
3. gem install jekyll-paginate
4. gem install jekyll-sitemap
5. (cd to the blog directory, then:) jekyll serve --watch --port 8000
6. Go to http://0.0.0.0:8000/ in your web browser.

Note: In case you have set a baseurl different than / in _config.yml, go to http://0.0.0.0:8000/BASEURL/ instead.

Local build using docker

docker run --rm -p 8000:8000 \
  --volume="LOCATION_OF_YOUR_JEKYLL_BLOG:/srv/jekyll" \
  -it tocttou/jekyll:3.5 \
  jekyll serve --watch --port 8000

Replace LOCATION_OF_YOUR_JEKYLL_BLOG with the full path of your blog repository. Visit http://localhost:8000/ to access the blog.

Note: In case you have set a baseurl different than / in _config.yml, go to http://0.0.0.0:8000/BASEURL/ instead.

Customizing

Configuration variables

Edit the _config.yml file and set the following variables:

title: [The title of your blog]
description: [A short description of your blog's purpose]
author:
  name: [Your name]
  email: [Your email address]
  url: [URL of your website]

baseurl: [The base url for this blog.]

paginate: [Number of posts in one paginated section (default: 3)]
owner: [Your name]
year: [Current Year]

Note: All links in the site are prepended with baseurl. Default baseurl is /. Any other baseurl can be setup like baseurl: /hacker-blog, which makes the site available at http://domain.name/hacker-blog.

Additionally, you may choose to set the following optional variables:

google_analytics: [Your Google Analytics tracking ID]

About Page

Edit about.md

Layout

If you would like to modify the site style:

HTML

Footer: Edit _includes/footer.html

Header: Edit _includes/header.html

Links in the header: Edit _includes/links.html

Meta tags, blog title display, and additional CSS: Edit _includes/head.html

Index page layout: Edit _layouts/default.html

Post layout: Edit _layouts/post.html

CSS

Site wide CSS: Edit _sass/base.scss

Custom CSS: Make _sass/custom.scss and use it. Then add @import "custom"; to css/main.scss

404 page

Edit 404.md

Demo: https://ashishchaudhary.in/hacker-blog

Download Details:

Author: Tocttou
Source Code: https://github.com/tocttou/hacker-blog 
License: CC0-1.0 license

#jekyll #blog #theme 

Gridea: A Static Blog Writing Client

Gridea

A static blog writing client

CHANGELOG

👏 Welcome to use Gridea ！

✍️ Gridea A static blog writing client. You can use it to record your life, mood, knowledge, notes and ideas...

Features👇

📝 Use the coolest Markdown grammar to create quickly

🌉 Insert pictures and article cover charts anywhere in the article

🏷️ Label and group articles

📋 Customize menus and even create external link menus

💻 Use this client on Windows or MacOS or Linux

🌎 Use Github Pages or Coding Pages to show the world that more platforms will be supported in the future

💬 Simply configure and access the Gitalk or DisqusJS comment system

🇬🇧 Use simplified Chinese、traditional Chinese、 English

🌁 Use any default theme within the application or any third-party theme, free theme customization

🖥 Customize the source folder and synchronize multiple devices using OneDrive, iCloud, Dropbox, etc.

🌱 Of course Gridea is still very young and has many shortcomings, but please believe it will keep moving forward 🏃

In the future, it will surely become your inseparable partner

Give full play to your talents！

😘 Enjoy~

Development

If you want to contribute code, please check the Contribution Guide in advance.

$ # Node version > v10.0.0 is requied
$ git clone https://github.com/getgridea/gridea.git
$ cd gridea
$ yarn
$ yarn electron:serve
$ yarn electron:build

Contact

Telegram Channel | Telegram Group | QQ 1 Group: 970332209 | QQ 2 Group: 923131213 | Author Twitter: @EryouHao

Example Screenshots

Contributions

We welcome all contributions.You can submit any ideas as pull requests or as GitHub issues.

Download | Homepage

English | 简体中文 | 繁體中文

Download Details:

Author: Getgridea
Source Code: https://github.com/getgridea/gridea 
License: MIT license

#typescript #electron #blog #windows #macos 

Millennial: A Minimalist Jekyll Theme for Running A Blog

Millennial

Millennial is a minimalist Jekyll theme for running a simple, clean, content-focused publishing platform for your publication site or blog through Github Pages, or on your own server. Everything that you will ever need to know about this Jekyll theme is included in the README below, which you can also find in the demo site. For a guide on how to deploy a Jekyll site using GitHub Pages, please check out this article.

If you like my work then please consider supporting me with Ko-fi.

Notable features

Compatible with GitHub Pages.

Support for Jekyll's built-in Sass/SCSS preprocessor and data files for making customizing easier.

Google Analytics support.

Commenting support powered by Disqus.

Optimized for search engines.

LaTeX support through MathJax.

Introduction

Millennial is a Jekyll theme that was built to be 100% compatible with GitHub Pages. If you are unfamiliar with GitHub Pages, you can check out their documentation for more information. Jonathan McGlone's guide on creating and hosting a personal site on GitHub is also a good resource.

What is Jekyll?

Jekyll is a simple, blog-aware, static site generator for personal, project, or organization sites. Basically, Jekyll takes your page content along with template files and produces a complete website. For more information, visit the official Jekyll site for their documentation. Codecademy also offers a great course on how to deploy a Jekyll site for complete beginners.

Never Used Jekyll Before?

The beauty of hosting your website on GitHub is that you don't have to actually have Jekyll installed on your computer. Everything can be done through the GitHub code editor, with minimal knowledge of how to use Jekyll or the command line. All you have to do is add your posts to the _posts directory and edit the _config.yml file to change the site settings. With some rudimentary knowledge of HTML and CSS, you can even modify the site to your liking. This can all be done through the GitHub code editor, which acts like a content management system (CMS).

Installation

GitHub Pages Installation

To start using Jekyll right away with GitHub Pages, fork the Millennial repository on GitHub. From there, you can rename your repository to USERNAME.github.io, where USERNAME is your GitHub username, and edit the settings.yml file in the _data folder to your liking. Ensure that you have a branch named gh-pages. Your website should be ready immediately at 'http://USERNAME.github.io'. Note: if you are hosting several sites under the same GitHub username, then you will have to use Project Pages instead of User Pages - just change the repository name to something other than 'http://USERNAME.github.io'.

Head over to the _posts directory to view all the posts that are currently on the website, and to see examples of what post files generally look like. You can simply just duplicate the template post and start adding your own content.

Local Installation

For a full local installation of Millennial, download your own copy of Millennial and unzip it into it's own directory. From there, open up your favorite command line tool, enter bundle install, and then enter jekyll serve. Your site should be up and running locally at http://localhost:4000.

Directory Structure

If you are familiar with Jekyll, then the Millennial directory structure shouldn't be too difficult to navigate. The following some highlights of the differences you might notice between the default directory structure. More information on what these folders and files do can be found in the Jekyll documentation site.

Millennial/
├── _data                      # Data files
|  └── settings.yml            # Theme settings and custom text
├── _includes                  # Theme includes
├── _layouts                   # Theme layouts (see below for details)
├── _posts                     # Where all your posts will go
├── assets                     # Style sheets and images are found here
|  ├── css                     # Style sheets go here
|  |  └── _sass                # Folder containing SCSS files
|  |  └── main.scss            # Main SCSS file
|  |  └── syntax.css           # Style sheet for code syntax highlighting
|  └── img                     # Images go here
├── pages                      # Category pages
├── _config.yml                # Site build settings
├── Gemfile                    # Ruby Gemfile for managing Jekyll plugins
├── index.md                   # Home page
├── LICENSE.md                 # License for this theme
├── README.md                  # Includes all of the documentation for this theme
└── rss-feed.xml               # Generates RSS 2.0 file which Jekyll points to

Starting From Scratch

To completely start from scratch, simply delete all the files in the _posts, assets/img, and pages folder, and add your own content. You may also replace the README.md file with your own README. Everything in the _data folder and _config.yml file can be edited to suit your needs. You may also change the favicon.ico file to your own favicon.

Configuration

Sample Posts

Visit the the demo site to find sample posts that show what different types of text formatting look like. You can find these posts in the _posts folder, which show what the best practices for setting up your own site are.

Site Variables

To change site build settings, edit the _config.yml file found in the root of your repository, which you can tweak however you like. More information on configuration settings and plugins can be found on the Jekyll documentation site. This is also where you will be able to customize the title, description, and the author/owner of your site.

If you are hosting your site on GitHub Pages, then committing a change to the _config.yml file will force a rebuild of your site with Jekyll. Any changes made should be viewable soon after. If you are hosting your site locally, then you must run jekyll serve again for the changes to take place.

In the settings.yml file found in the _data folder, you will be able to customize your site settings, such as setting Disqus comments, Google Analytics, what shows up in your menu, and social media information.

Adding Menu Pages

The menu pages are found in the menu folder in the root directory, and can be added to your menu in the settings.yml file.

Posts

You will find example posts in your _posts directory. Go ahead and edit any post and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated.

To add new posts, simply add a file in the _posts directory that follows the convention of YYYY-MM-DD-name-of-post.md and includes the necessary front matter. Take a look at any sample post to get an idea about how it works. If you already have a website built with Jekyll, simply copy over your posts to migrate to Millennial.

Layouts

There are two main layout options that are included with Millennial: post and page. Layouts are specified through the YAML front block matter. Any file that contains a YAML front block matter will be processed by Jekyll. For example:

---
layout: post
title: "Example Post"
---

Examples of what posts looks like can be found in the _posts directory, which includes this post you are reading right now. Posts are the basic blog post layout, which includes a header image, post content, author name, date published, social media sharing links, and related posts.

Pages are essentially the post layout without any of the extra features of the posts layout. An example of what pages look like can be found at the documentation page.

In addition to the two main layout options above, there are also custom layouts that have been created for the home page and the contacts page. These are simply just page layouts with some Liquid template code. Check out the index.html file in the root directory for what the code looks like.

YAML Front Block Matter

The recommended YAML front block is:

---
layout:
title:
author:
categories:
tags: []
image:
---

layout specifies which layout to use, title is the page or post title, categories can be used to better organize your posts, tags are used when generating related posts based on the topic of the post, and image specifies which images to use. Have a look at some posts in the _posts directory to see how these variables are set.

Features

Design Considerations

Millennial was designed to be a minimalist theme in order for the focus to remain on your content. For example, links are signified mainly through an underline text-decoration, in order to maximize the perceived affordance of clickability (I originally just wanted to make the links a darker shade of grey).

Disqus

Millennial supports comments at the end of posts through Disqus. In order to activate Disqus commenting, set disqus.comments to true in the _data/settings.yml file. If you do not have a Disqus account already, you will have to set one up, and create a profile for your website. You will be given a disqus_shortname that will be used to generate the appropriate comments sections for your site. More information on how to set up Disqus.

Google Analytics

It is possible to track your site statistics through Google Analytics. Similar to Disqus, you will have to create an account for Google Analytics, and enter the correct Google ID for your site under google-ID in the settings.yml file. More information on how to set up Google Analytics. Note: If you are not using Google Analytics, please change google-ID to an empty string.

RSS Feeds

Atom is supported by default through jekyll-feed. With jekyll-feed, you can set configuration variables such as 'title', 'description', and 'author', in the _config.yml file.

RSS 2.0 is also supported through RSS auto-discovery. The rss-feed.xml file (based on the template found at jekyll-rss-feeds) that the feed path points to when using RSS 2.0 is automatically generated based on the appropriate configuration variables found in _data/settings.yml.

To use RSS 2.0, ensure the following is done:

Uncomment the last two lines in the _config.yml file.

In _data/settings.yml, under 'social', comment out the rss-square that points to feed.xml, and uncomment the rss-square that points to rss-feed.xml.

In _includes/head.html, comment out {% feed_meta %} and uncomment the line under the RSS 2.0 comment.

Social Media Icons

All social media icons are courtesy of Font Awesome. You can change which icons appear, as well as the account that they link to, in the settings.yml file in the _data folder.

MathJax

Millennial comes out of the box with MathJax, which allows you to display mathematical equations in your posts through the use of LaTeX.

Syntax Highlighting

Millennial provides syntax highlighting through fenced code blocks. Syntax highlighting allows you to display source code in different colors and fonts depending on what programming language is being displayed. You can find the full list of supported programming languages here. Another option is to embed your code through Gist.

Markdown

As always, Jekyll offers support for GitHub Flavored Markdown, which allows you to format your posts using the Markdown syntax. Examples of these text formatting features can be seen below. You can find this post in the _posts directory as well as the README.md file.

Everything Else

Check out the Jekyll docs for more info on how to get the most out of Jekyll. File all bugs/feature requests at Jekyll's GitHub repo. If you have questions, you can ask them on Jekyll Talk.

Contributing

If you would like to make a feature request, or report a bug or typo in the documentation, then please submit a GitHub issue. If you would like to make a contribution, then feel free to submit a pull request - as a bonus, I will credit all contributors below! If this is your first pull request, it may be helpful to read up on the GitHub Flow first.

Millennial has been designed as a base for users to customize and fit to their own unique needs. Please keep this in mind when requesting features and/or submitting pull requests. Some examples of changes that I would love to see are things that would make the site easier to use, or better ways of doing things. Please avoid changes that do not benefit the majority of users.

Questions?

This theme is completely free and open source software. You may use it however you want, as it is distributed under the MIT License. If you are having any problems, any questions or suggestions, feel free to tweet at me, or file a GitHub issue.

Credits

Creator

Paul Le

www.lenpaul.com

Twitter

GitHub

Contributors

b-morawiec

JainVikas

mschaeffner

cfe316

JeremyGonzales

Icons + Demo Images

Death to Stock

Font Awesome

Other

Jekyll

Free Code Camp

Khan Academy

Download Details:

Author: LeNPaul
Source Code: https://github.com/LeNPaul/Millennial 
License: MIT license

#jekyll #blog #theme #github 

A Modern Jekyll Theme Focused on Speed Performance, SEO Best Practices

Sleek

A modern Jekyll theme focused on speed performance & SEO best practices.

⚠️ This theme is no longer actively maintained.

Features

• Compatible with Github Pages
• Minimal, responsive and speed performance optimized
• SEO friendly, with help of Jekyll SEO Plugin
• Easy Google Tag Manager Integration
• Support for Disqus comments
• Form submissions with Formspree

Preview Demo

Installation

System Requirements

To use this project, you'll need the following things on your local machine:

Jekyll

gem install jekyll

NodeJS (8 or greater)

Download and open the NodeJS installer

Gulp CLI (optional, but recommended)

npm install --global gulp-cli

Up & Running

1. Fork the repo
2. Clone or download the repo into directory of your choice: git clone https://github.com/your-github-username/sleek.git
3. Inside the directory run bundle install and npm install
4. If you want to use gulp.js run gulp or npm start
   • if you don't want to use gulp you can run bundle exec jekyll serve instead

Installing to existing jekyll project

Add this line to your Jekyll site's Gemfile:

gem "jekyll-sleek"

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

theme: jekyll-sleek

And then execute:

$ bundle

Or install it yourself as:

$ gem install jekyll-sleek

File Structure Overview

sleek
├── _includes                   # theme includes
├── _js                           # javascript files (by default jquery will be included with the scripts inside)
├── _layouts                   # theme layouts (see below for details)
├── _pages                     # pages folder (empty by default)
├── _posts                     # blog posts
├── _sass                      # Sass partials
├── assets
|  ├── css                   # minified css files
|  ├── img                     # images and icons used for the template
|  └── js                       # bundled and minified files from _js folder
├── _config.yml                # sample configuration
├── gulpfile.js                # gulp tasks (tasks autorunner)
├── index.md                   # sample home page (blog page)
└── package.json               # gulp tasks

Usage

You can modify the theme by changing the settings in _config.yml.

Posts

Create a new Markdown file such as 2017-01-13-my-post.md in _post folder. Configure YAML Front Matter (stuff between ---):

---
layout: post # needs to be post
title: Getting Started with Sleek # title of your post
featured-img: sleek #optional - if you want you can include hero image
---

Images

In case you want to add a hero image to the post, apart from changing featured-img in YAML, you also need to add the image file to the project. To do so, just upload an image in .jpg format to _img folder. The name must before the .jpg file extension has to match with featured-img in YAML. Next, run gulp img from command line to generate optimized version of the image and all the thumbnails. You have to restart the jekyll server to see the changes.

Sleek uses Lazy Sizes. Lazy Loader for loading images. Check the link for more info. Lazy Sizes doesnt’t require any configuration and it’s going to be included in your bundled js file.

Pages

The home page is located under index.md file. To change the content or design you have to edit the default.html file in _layouts folder.

In order to add a new page, create a new html or markdown file under root directory or inside _pages folder. To add a link in navigation add it in _config.yml:

# THEME SETTINGS
navigation: # Navigation links
  - {name: 'Home', link: '/'}
  - {name: 'About', link: '/about'}
  - {name: 'Contact', link: '/contact'}

name is the text that will be shown and link, well, it's a link.

Site configuration

Sleek comes with jekyll-seo-tag plugin preinstalled to make sure your website gets the most useful meta tags. See usage to know how to set it up.

Additionally, in _config.yml you can find custom theme settings under # THEME SETTINGS comment. Here's a brief overview of those custom settings:

• navigation - collection of links that will be shown in the header
• tagline - text that will be displayed on the homepage under the heading.
• hero_img - background image of the homepage hero section

Other settings usually enable/disable certain feature, and are discussed with the next sections.

Google Tag Manager

To enable Google Tag Manager, add the uncomment the following line in _config.yml:

google_tag_manager: GTM-XXXXXXX

Replace GTM-XXXXXXX with your Google Tag Manager Container ID.

Note by default GTM tracking snippet will be also included in development environment.

Google Tag Manager was chosen for this project as it's more flexible than Google Analytics, and it can be used to add GA to your site.

Disqus

To enable Disqus comments, add your Disqus shortname to _config.yml:

disqus:
  shortname: my_disqus_shortname

Formspree

To use Formspree with your email address, you need to change the following:

Change your-email@domain.com email in _config.yml

email: your-email@domain.com

You can check if it works by simply submitting the form.

If you have a Formspree Gold Account, you can take advantage of using AJAX to submit form. To do so, uncomment last function in _js/scripts.js and run gulp js. Now the form will be submitted asynchronously, without leaving the page.

Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/janczizikow/sleek. 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

To set up your environment to develop this theme, run bundle install and npm install.

The theme is setup just like a normal Jekyll site! Check out file structure overview for details. To test the theme, run gulp and open your browser at http://localhost:3000. This starts a Jekyll server using the theme. Add pages, documents, data, etc. like normal to test the theme's contents. As you make modifications to the theme and to the content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal.

Download Details:

Author: janczizikow
Source Code: https://github.com/janczizikow/sleek 
License: MIT license

#jekyll #theme #blog 

A Jekyll Version Of The "Prologue" Theme By HTML5 UP

⚠️ Unmaintained ⚠️

Prologue - Jekyll Theme

This is Prologue, a simple, single page responsive site template from HTML5 UP, now available as a blog-aware Jekyll theme from Chris Bobbe. It features a clean, minimalistic design and a sticky sidebar with navigation-linked scrolling.

Demo: https://chrisbobbe.github.io/jekyll-theme-prologue/

Added Features

• Blogging and multi-page features you expect from Jekyll
• Compatible with GitHub Pages
• Formspree.io contact form integration - just add your email to the _config.yml and it works!
• Build your homepage with custom scrolly sections in the _sections folder
• Set a cover photo for any section (not just the first), with alt text for screen readers and SEO
• Add your social profiles easily in _config.yml.
• Automatic search engine optimization (SEO) meta tags based on info you provide in _config.yml and frontmatter
• Google Analytics built-in; just put your Tracking ID in _config.yml as google_analytics
• Custom 404 page (called 404.html; to activate, move it to your project directory).

Installation

There are two ways to get started (choose one):

1. Install the jekyll-theme-prologue gem. Instructions are in the Jekyll docs. After running bundle install, you can find the theme files by running open $(bundle show jekyll-theme-prologue). A sample working _config.yml file ships with the gem; if you want to activate it, move it to your project's root directory. It will do nothing until you move it there, replacing the default _config.yml file.
2. Fork or clone the GitHub repository. If you want to use GitHub Pages, create a branch named gh-pages, and replace theme: jekyll-theme-prologue with remote_theme: chrisbobbe/jekyll-theme-prologue in the provided _config.yml (GitHub Pages now supports open-source themes on GitHub).

Next, make sure that url and base_url are set for your own website in _config.yml. For local testing, make them both blank. Add a photo avatar to your project, then set avatar: path/to/your/avatar.jpg in _config.yml; for example, avatar: assets/images/avatar.jpg (48x48 pixels works best). Poke around the sample _config.yml file to see how you can add your social profiles.

Build your homepage

Your _config.yml file must include the following line or your homepage won't work: collections: [sections]. This tells Jekyll to look in the _sections folder (which you will create) for your content and render it all on one page.

Create a _sections folder in your project's root directory and start adding content to your homepage. Set a cover photo in any of the sections by adding cover-photo: path/to/photo.jpg and cover-photo-alt: your alt text here to the section's frontmatter. Sample content is provided in the GitHub repository.

All new sections should be added as html or Markdown documents in the _sections folder. The following section variables can be set with frontmatter:

• title (required)
• order (required; orders the sequence of sections on the page. Example: 1)
• cover-photo (optional; sets a background image for the section. Example: assets/images/banner.jpg)
• cover-photo-alt (required if using a cover photo. Describes the photo for screen readers and SEO; e.g. "Dome of Light art installation, Kaohsiung, Taiwan")
• icon (optional; see Font Awesome for icon codes. Example: fa-github)
• icon-style (optional; "solid" is default, "regular" for outline style icons, or "brands" for logos)
• auto-header (optional; "use-title" is default, "none" for no header, or custom header text)
• hide (optional; if true, the section won't appear)

Start blogging!

Jekyll has great resources to get you started writing blog posts. Check out this Jekyll Docs page first. When you've written a post or two, copy the following into a new file in your project directory called blog.html, and you'll see a link to your blog from the homepage:

---
layout: blog
title: My Blog
---

-- and that's it!

Add a page

To add a page, just make a new .html or .md file in your project directory. There's an example called reading-list provided with the GitHub repository. Add this frontmatter:

---
title: My New Page
layout: page
---

You can also set these page variables in the frontmatter, if you want:

• subtitle
• order (orders links in the nav menu, e.g. 1)
• icon (optional; see Font Awesome for icon codes. Example: fa-github)
• icon-style (optional; "solid" is default, "regular" for outline style icons, or "brands" for logos)
• hide (optional; if true, a link won't appear in the nav menu. All this does is remove the nav link; your page will still be served to anyone who has the URL.)

This same set of frontmatter variables (including title) can also be set in index.md and blog.html. You may want to give them titles, or hide the homepage link with hide: true if the homepage is the only page.

For advanced SEO, this theme also lets you add permalink (see Jekyll Docs), robots (string, e.g. "noindex, nofollow"), and canonical (boolean; true is default) to any page or post.

Contributing

Please feel free to submit issues and feature requests!

Credits

Thanks to @andrewbanchich for his many Jekyll adaptations of HTML5 UP's elegant themes, which helped and inspired me, and of course many thanks to HTML5 UP.

Original README from HTML5 UP:

Prologue by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)


This is Prologue, a simple, single page responsive site template. It features a
clean, minimalistic design and a sticky sidebar with navigation-linked scrolling.

Demo content images* are courtesy of the ridiculously talented Felicia Simion. Check out
more of her amazing work over at deviantART:

http://ineedchemicalx.deviantart.com/

(* = Not included! Only meant for use with my own on-site demo, so please do NOT download
and/or use any of Felicia's work without her explicit permission!)

Demo banner images* courtesy of Unsplash, a radtastic collection of CC0 (public domain)
images you can use for pretty much whatever.

(* = Not included)

AJ
aj@lkn.io | @ajlkn

PS: Not sure how to get that contact form working? Give formspree.io a try (it's awesome).


Credits:

    Demo Images:
        Felicia Simion (ineedchemicalx.deviantart.com)
        Unsplash (unsplash.com)

    Icons:
        Font Awesome (fortawesome.github.com/Font-Awesome)

    Other
        jQuery (jquery.com)
        html5shiv.js (@afarkas @jdalton @jon_neal @rem)
        CSS3 Pie (css3pie.com)
        background-size polyfill (github.com/louisremi)
        Respond.js (j.mp/respondjs)
        jquery.scrolly (@ajlkn)
        jquery.scrollzer (@ajlkn)
        Skel (skel.io)

Download Details:

Author: Chrisbobbe
Source Code: https://github.com/chrisbobbe/jekyll-theme-prologue 
License: View license

#jekyll #theme #blog #portfolio 

DByll: Stylish, Minimalistic Theme for Jekyll

dbyll

Open source stylish, minimalistic theme for jekyll.

New

• Dbyll for Ghost is now available. Get it here now.
• 🆕 Check out Paper, new Material Design Jekyll theme.

Features

• Responsive layout.
• Supports tags and categories.
• Social profile and bio of author.
• Bootstrap based.
• Glyphicon and Font-Awesome Icons.
• Pagination.
• Syntax highlighting with pygments.
• Disqus comments.
• :new: Custom sidebar background image.

Download

• Download dbyll

Install

• You need to have ruby installed in your system.
• Install bundler which helps in specifying and installing dependencies of any Ruby project. gem install bundler
• Go to the root of the repo and run this - bundle install
• Then - bundle exec jekyll serve

Screenshots

Demo: http://dbtek.github.io/dbyll/

Download Details:

Author: dbtek
Source Code: https://github.com/dbtek/dbyll 
License: MIT license

#jekyll #blog #theme 

Jekyll-theme-yat: Jekyll Theme for Elegant Writers

JEKYLL YAT THEME

Jekyll theme for elegant writers.

Built with ❤︎ by jeffreytse and contributors 

Hey, nice to meet you, you found this Jekyll theme. Here the YAT (Yet Another Theme) is a modern responsive theme. It's quite clear, clean and neat for writers and posts. If you are an elegant writer and focus on content, don't miss it.

Features

• Support beautiful Night Mode.
• Modern responsive web design.
• Full layouts home, post, tags, archive and about.
• Uses font awesome 5 for icons.
• Beautiful page banner with image and video.
• Beautiful Syntax Highlight using highlight.js.
• RSS support using Jekyll Feed gem.
• Optimized for search engines using Jekyll Seo Tag gem.
• Sitemap support using Jekyll Sitemap gem.
• Complex and flexible table support using Jekyll Spaceship gem.
• MathJAX and LaTeX optional support using Jekyll Spaceship gem.
• Media (Youtube, Spotify, etc.) support using Jekyll Spaceship gem.
• Diagram (PlantUML, Mermaid) support using Jekyll Spaceship gem.
• Google Translation support.
• New post tag support.

Also, visit the Live Demo site for the theme.

Installation

There are three ways to install:

• As a gem-based theme.
• As a remote theme (GitHub Pages compatible).
• Forking/directly copying all of the theme files into your project.

Gem-based Theme Method

Add this line to your Jekyll site's Gemfile:

gem "jekyll-theme-yat"

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

theme: jekyll-theme-yat

And then execute:

$ bundle

Or install it yourself as:

$ gem install jekyll-theme-yat

Remote Theme Method with GitHub Pages

Remote themes are similar to Gem-based themes, but do not require Gemfile changes or whitelisting making them ideal for sites hosted with GitHub Pages.

To install:

Add this line to your Jekyll site's Gemfile:

gem "github-pages", group: :jekyll_plugins

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

# theme: owner/name --> Don't forget to remove/comment the gem-based theme option
remote_theme: "jeffreytse/jekyll-theme-yat"

And then execute:

$ bundle

GitHub Pages without limitation

GitHub Pages runs in safe mode and only allows a set of whitelisted plugins/themes. In other words, the third-party gems will not work normally.

To use the third-party gem in GitHub Pages without limitation:

Here is a GitHub Action named jekyll-deploy-action for Jekyll site deployment conveniently. 👍

Usage

Add or update your available layouts, includes, sass and/or assets.

Development

To set up your environment to develop this theme, 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.

When your theme is released, only the files in _data, _layouts, _includes, _sass and assets tracked with Git will be bundled. To add a custom directory to your theme-gem, please edit the regexp in jekyll-theme-yat.gemspec accordingly.

Contributing

Issues and Pull Requests are greatly appreciated. If you've never contributed to an open source project before I'm more than happy to walk you through how to create a pull request.

You can start by opening an issue describing the problem that you're looking to resolve and we'll go from there.

Screenshots

BANNER

Download Details:

Author: jeffreytse
Source Code: https://github.com/jeffreytse/jekyll-theme-yat 
License: MIT license

#jekyll #theme #blog #website 

Lagrange: A Minimalist Jekyll Theme for Running A Personal Blog

Lagrange

Lagrange is a minimalist Jekyll theme for running a personal blog or site for free through Github Pages, or on your own server. Everything that you will ever need to know about this Jekyll theme is included in the README below, which you can also find in the demo site. For a guide on how to deploy a Jekyll site using GitHub Pages, please check out this article.

If you like my work then please consider supporting me with Ko-fi.

Notable features

Compatible with GitHub Pages.

Support for Jekyll's built-in Sass/SCSS preprocessor and data files for making customizing easier.

Google Analytics support.

Commenting support powered by Disqus.

Optimized for search engines.

LaTeX support through MathJax.

Introduction

Lagrange is a Jekyll theme that was built to be 100% compatible with GitHub Pages. If you are unfamiliar with GitHub Pages, you can check out their documentation for more information. Jonathan McGlone's guide on creating and hosting a personal site on GitHub is also a good resource.

What is Jekyll?

Jekyll is a simple, blog-aware, static site generator for personal, project, or organization sites. Basically, Jekyll takes your page content along with template files and produces a complete website. For more information, visit the official Jekyll site for their documentation. Codecademy also offers a great course on how to deploy a Jekyll site for complete beginners.

Never Used Jekyll Before?

The beauty of hosting your website on GitHub is that you don't have to actually have Jekyll installed on your computer. Everything can be done through the GitHub code editor, with minimal knowledge of how to use Jekyll or the command line. All you have to do is add your posts to the _posts directory and edit the _config.yml file to change the site settings. With some rudimentary knowledge of HTML and CSS, you can even modify the site to your liking. This can all be done through the GitHub code editor, which acts like a content management system (CMS).

Installation

GitHub Pages Installation

To start using Jekyll right away with GitHub Pages, fork the Lagrange repository on GitHub. From there, you can rename your repository to USERNAME.github.io, where USERNAME is your GitHub username, and edit the settings.yml file in the _data folder to your liking. Ensure that you have a branch named gh-pages. Your website should be ready immediately at 'http://USERNAME.github.io'. Note: if you are hosting several sites under the same GitHub username, then you will have to use Project Pages instead of User Pages - just change the repository name to something other than 'http://USERNAME.github.io'.

Head over to the _posts directory to view all the posts that are currently on the website, and to see examples of what post files generally look like. You can simply just duplicate the template post and start adding your own content.

Local Installation

For a full local installation of Lagrange, download your own copy of Lagrange and unzip it into it's own directory. From there, open up your favorite command line tool, enter bundle install, and then enter jekyll serve. Your site should be up and running locally at http://localhost:4000.

Directory Structure

If you are familiar with Jekyll, then the Lagrange directory structure shouldn't be too difficult to navigate. The following some highlights of the differences you might notice between the default directory structure. More information on what these folders and files do can be found in the Jekyll documentation site.

Lagrange/
├── _data                      # Data files
|  └── settings.yml            # Theme settings and custom text
├── _includes                  # Theme includes
├── _layouts                   # Theme layouts (see below for details)
├── _posts                     # Where all your posts will go
├── assets                     # Style sheets and images are found here
|  ├── css                     # Style sheets go here
|  |  └── main.css             # Main CSS file
|  |  └── syntax.css           # Style sheet for code syntax highlighting
|  └── img                     # Images go here
├── menu                       # Menu pages
├── _config.yml                # Site build settings
├── Gemfile                    # Ruby Gemfile for managing Jekyll plugins
├── index.md                   # Home page
├── LICENSE.md                 # License for this theme
├── README.md                  # Includes all of the documentation for this theme
└── rss-feed.xml               # Generates RSS 2.0 file which Jekyll points to

Starting From Scratch

To completely start from scratch, simply delete all the files in the _posts, assets/img, and menu folder, and add your own content. You may also replace the README.md file with your own README. Everything in the _data folder and _config.yml file can be edited to suit your needs. You may also change the favicon.ico file to your own favicon.

Configuration

Sample Posts

Visit the the demo site to find sample posts that show what different types of text formatting look like. You can find these posts in the _posts folder, which show what the best practices for setting up your own site are.

Site Variables

To change site build settings, edit the _config.yml file found in the root of your repository, which you can tweak however you like. More information on configuration settings and plugins can be found on the Jekyll documentation site. This is also where you will be able to customize the title, description, and the author/owner of your site.

If you are hosting your site on GitHub Pages, then committing a change to the _config.yml file will force a rebuild of your site with Jekyll. Any changes made should be viewable soon after. If you are hosting your site locally, then you must run jekyll serve again for the changes to take place.

In the settings.yml file found in the _data folder, you will be able to customize your site settings, such as setting Disqus comments, Google Analytics, what shows up in your menu, and social media information.

Adding Menu Pages

The menu pages are found in the menu folder in the root directory, and can be added to your menu in the settings.yml file.

Posts

You will find example posts in your _posts directory. Go ahead and edit any post and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated.

To add new posts, simply add a file in the _posts directory that follows the convention of YYYY-MM-DD-name-of-post.md and includes the necessary front matter. Take a look at any sample post to get an idea about how it works. If you already have a website built with Jekyll, simply copy over your posts to migrate to Lagrange.

Layouts

There are two main layout options that are included with Lagrange: post and page. Layouts are specified through the YAML front block matter. Any file that contains a YAML front block matter will be processed by Jekyll. For example:

---
layout: post
title: "Example Post"
---

Examples of what posts looks like can be found in the _posts directory, which includes this post you are reading right now. Posts are the basic blog post layout, which includes a header image, post content, author name, date published, social media sharing links, and related posts.

Pages are essentially the post layout without any of the extra features of the posts layout. An example of what pages look like can be found at the About and Contacts.

In addition to the two main layout options above, there are also custom layouts that have been created for the home page and the archives page. These are simply just page layouts with some Liquid template code. Check out the index.html file in the root directory for what the code looks like.

YAML Front Block Matter

The recommended YAML front block is:

---
layout:
title:
author:
categories:
tags: []
image:
---

layout specifies which layout to use, title is the page or post title, categories can be used to better organize your posts, tags are used when generating related posts based on the topic of the post, and image specifies which images to use. Have a look at some posts in the _posts directory to see how these variables are set.

Features

Design Considerations

Lagrange was designed to be a minimalist theme in order for the focus to remain on your content. For example, links are signified mainly through an underline text-decoration, in order to maximize the perceived affordance of clickability (I originally just wanted to make the links a darker shade of grey).

Disqus

Lagrange supports comments at the end of posts through Disqus. In order to activate Disqus commenting, set disqus.comments to true in the _data/settings.yml file. If you do not have a Disqus account already, you will have to set one up, and create a profile for your website. You will be given a disqus_shortname that will be used to generate the appropriate comments sections for your site. More information on how to set up Disqus.

Google Analytics

It is possible to track your site statistics through Google Analytics. Similar to Disqus, you will have to create an account for Google Analytics, and enter the correct Google ID for your site under google-ID in the settings.yml file. More information on how to set up Google Analytics. Note: If you are not using Google Analytics, please change google-ID to an empty string.

RSS Feeds

Atom is supported by default through jekyll-feed. With jekyll-feed, you can set configuration variables such as 'title', 'description', and 'author', in the _config.yml file.

RSS 2.0 is also supported through RSS auto-discovery. The rss-feed.xml file (based on the template found at jekyll-rss-feeds) that the feed path points to when using RSS 2.0 is automatically generated based on the appropriate configuration variables found in _data/settings.yml.

To use RSS 2.0, ensure the following is done:

Uncomment the last two lines in the _config.yml file.

In _data/settings.yml, under 'social', comment out the rss-square that points to feed.xml, and uncomment the rss-square that points to rss-feed.xml.

In _includes/head.html, comment out {% feed_meta %} and uncomment the line under the RSS 2.0 comment.

Social Media Icons

All social media icons are courtesy of Font Awesome. You can change which icons appear, as well as the account that they link to, in the settings.yml file in the _data folder.

MathJax

Lagrange comes out of the box with MathJax, which allows you to display mathematical equations in your posts through the use of LaTeX.

Syntax Highlighting

Lagrange provides syntax highlighting through fenced code blocks. Syntax highlighting allows you to display source code in different colors and fonts depending on what programming language is being displayed. You can find the full list of supported programming languages here. Another option is to embed your code through Gist.

Markdown

As always, Jekyll offers support for GitHub Flavored Markdown, which allows you to format your posts using the Markdown syntax. Examples of these text formatting features can be seen below. You can find this post in the _posts directory as well as the README.md file.

Everything Else

Check out the Jekyll docs for more info on how to get the most out of Jekyll. File all bugs/feature requests at Jekyll's GitHub repo. If you have questions, you can ask them on Jekyll Talk.

Contributing

If you would like to make a feature request, or report a bug or typo in the documentation, then please submit a GitHub issue. If you would like to make a contribution, then feel free to submit a pull request - as a bonus, I will credit all contributors below! If this is your first pull request, it may be helpful to read up on the GitHub Flow first.

Lagrange has been designed as a base for users to customize and fit to their own unique needs. Please keep this in mind when requesting features and/or submitting pull requests. Some examples of changes that I would love to see are things that would make the site easier to use, or better ways of doing things. Please avoid changes that do not benefit the majority of users.

Questions?

This theme is completely free and open source software. You may use it however you want, as it is distributed under the MIT License. If you are having any problems, any questions or suggestions, feel free to tweet at me, or file a GitHub issue.

Credits

Creator

Paul Le

www.lenpaul.com

Twitter

GitHub

Contributors

nikolalukovic

gmemstr

lynn9388

robqiao

Mauladen

dhanus

mlewand

Hguimaraes

ilhamadun

brianclemens

leyhline

aritra24

DuckSoft

larrylawl

borting

Icons + Demo Images

Death to Stock

Font Awesome

Other

Jekyll

Free Code Camp

Khan Academy

Download Details:

Author: LeNPaul
Source Code: https://github.com/LeNPaul/Lagrange 
License: MIT license

#jekyll #blog #theme 

Long-haul: A Minimal, Type-focused Jekyll Theme

long-haul

Long Haul is a minimal jekyll theme built with SASS / GULP / BROWSERSYNC / AUTOPREFIXER and focuses on long form blog posts. It is meant to be used as a starting point for a jekyll blog/website.

If you really enjoy Long Haul and want to give me credit somewhere on the internet send or tweet out your experience with Long Haul and tag me @brianmaierjr.

View Demo

Features

• Minimal, Type Focused Design
• Built with GULP + SASS + BROWSERSYNC + AUTOPREFIXER
• SVG Social Icons
• Responsive Nav Menu
• XML Feed for RSS Readers
• Contact Form via Formspree
• 5 Post Loop with excerpt on Home Page
• Previous / Next Post Navigation
• Estimated Reading Time for posts
• Stylish Drop Cap on posts
• A Better Type Scale for all devices
• Comments powered by Disqus
• Dark Mode support via prefers-color-scheme

Setup

1. Install Jekyll
2. Fork the Long Haul repo
3. Clone it
4. Install Bundler
5. Run bundle install
6. Install gulp dependencies by running npm install
7. Run Jekyll and watch files by running bundle exec gulp
8. Customize and watch the magic happen!

Site Settings

The main settings can be found inside the _config.yml file:

• title: title of your site
• description: description of your site
• url: your url
• paginate: the amount of posts displayed on homepage
• navigation: these are the links in the main site navigation
• social diverse social media usernames (optional)
• google_analytics Google Analytics key (optional)

Header Option

If you'd like your header to be larger then you can use the option below in you config.yml to make it take up half of the vertical space on screens 800px wide and up. Preview image below.

• header: large

Download Details:

Author: brianmaierjr
Source Code: https://github.com/brianmaierjr/long-haul 
License: MIT license

#jekyll #css #gulp #blog 

Klisé: A Minimalist Jekyll Theme for Running A Personal Site Or Blog

Klisé

Klisé is minimalist Jekyll theme for running a personal site and blog running on Jekyll.
For demo klise.now.sh

Features

•  Light & Dark Mode support :waxing_crescent_moon:
•  Customizable (using .scss)
•  Responsive (desktop, tab and mobile)
•  Mobile First Design
•  SEO Optimized
•  Images of post Organized (jekyll-postfiles)
•  Generate Sitemap (jekyll-sitemap)
•  RSS Feed (jekyll-feed)
•  Syntax Highlighter (rouge)
•  Next & Previous Post
•  Comment layout, enable in frontmatter if you wish
•  Google analytics
•  HTML Minify (jekyll-compress-html)
•  W3C Validated
•  Lighthouse and PageSpeed Passed

Backlogs

•  Intergrated with PhotoSwipe.
•  Add schema.org meta information.
•  Transform class selector to BEM metodology.

Installation

Run local server:

$ git clone https://github.com/piharpi/jekyll-klise.git
$ cd jekyll-klise
$ bundle install
$ bundle exec jekyll serve

Navigate to localhost:4000. You're Welcome, Fork and be Stargazer.

Limitation

• Since jekyll-postfiles plugin isn't supported by github pages, this cause will make your site problems, path broken or post images won't show up, you can host alternatively using likes netlify.com, vercel.com, azure.com or surge.sh services, which support 3rd party.

Contributing

If you see any typos or formatting errors in a post, or want to helping reduce backlogs or any other issue that needs to be addressed, please do not hesitate to open a pull request and fix it!, please read contributing before PR.

Yeaaa feel free to open a pull request.

Download Details:

Author: piharpi
Source Code: https://github.com/piharpi/jekyll-klise 
License: MIT license

#jekyll #ruby #blog #theme 

Reverie: A Ridiculously Elegant Jekyll Theme

Reverie

Reverie is a Jekyll-powered theme which is simple and opinionated. It's actually a fork of jekyll-now with some additional features and personal touches which I've implemented to suit my needs for my blog.

Theme demo

This is a plug-and-play Jekyll theme best suited to use on GitHub Pages (or Cloudflare Pages if you want to have your repository private) without even setting up a local environment.

Responsiveness	Search	Categories

Features overview

• Clean and minimal design
• Single column post layout
• Command-line free fork-first workflow, using GitHub.com to create, customize and post to your blog
• Fully responsive and mobile optimized theme
• Sass/Coffeescript support using Jekyll 2.0
• Free hosting on your GitHub Pages user site
• All the SEO goodies come built-in
• Markdown blogging
• Supports Pullquotes
• Syntax highlighting using Pygments
  • Dracula syntax theme included
• Disqus commenting
• Social media icons
• Google Analytics integration
• Supports Google Analytics 4
• Fuzzy search across blog posts
• Blog with pagination
• Categorize posts out-of-the box
• RSS Feed
• Built-in sitemap

Like this theme? If so, consider donating a small amount that will help my maintaining this project further.

You can support me via Paypal.

Using Reverie on GitHub Pages

Setting up Reverie on GitHub Pages is as simple as it gets!

1. Fork Reverie to your User Repository

Fork this repository, then rename the repository to yourgithubusername.github.io.

Alternatively, you can click the Use this template button if you want to create a repository with a clean commit history which will use Reverie as a template.

Your Jekyll blog will often be viewable immediately at https://yourgithubusername.github.io (if it's not, you can often force it to build by completing step 2).

2. Customize and view your site

Enter your site name, description, avatar and many other options by editing the _config.yml file. You can easily turn on Google Analytics tracking, Disqus commenting and social icons here.

Making a change to _config.yml (or any file in your repository) will force GitHub Pages to rebuild your site with Jekyll. Your rebuilt site will be viewable a few seconds later at https://yourgithubusername.github.io - if not, give it ten minutes as GitHub suggests and it'll appear soon.

3. Publish your first blog post

Delete all files from _postsdirectory and create a new file called /_posts/2019-2-13-Hello-World.md to publish your first blog post. That's all you need to do to publish your first blog post! This Markdown Cheatsheet might come in handy while writing the posts.

You can add additional posts in the browser on GitHub.com too! Just hit the Create new file button in /_posts/ to create new content. Just make sure to include the front-matter block at the top of each new blog post and make sure the post's filename is in this format: year-month-day-title.md

Using Categories in Reverie

You can categorize your content based on categories in Reverie. For this, you just need to add categories in front matter like below:

For adding single category:

categories: JavaScript

For adding multiple categories:

categories: [PHP, Laravel]

The categorized content can be shown over this URL: https://yourgithubusername.github.io/categories/

Pagination

Pagination of posts in Reverie works out-of-the-box. You only need to specify the number of posts you want on a single page in _config.yml and Reverie will take care of the rest.

paginate: 6

RSS

Reverie comes with a RSS feed in-built. The generated RSS Feed of your blog can be found at https://yourgithubusername.github.io/feed. You can see the example RSS feed over here.

Sitemap

The generated sitemap of your blog can be found at https://yourgithubusername.github.io/sitemap.xml. You can see the example sitemap feed over here.

Emailware

Reverie is an emailware. Meaning, if you liked using this theme or it has helped you in any way, I'd like you send me an email at bullredeyes@gmail.com about anything you'd want to say about this software. I'd really appreciate it!

The name?

reverie - a state of being pleasantly lost in one's thoughts; a daydream.
/ˈrɛv(ə)ri/

Support my work via Paypal • Would you be interested in Reverie Pro?

Download Details:

Author: Amitmerchant1990
Source Code: https://github.com/amitmerchant1990/reverie 
License: MIT license

#jekyll #blog #theme #githubpages