Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/madeindra/simplicity

Jekyll theme focusing on the simplicity, built with Tailwind CSS
https://github.com/madeindra/simplicity

blog github-pages jekyll jekyll-template jekyll-theme personal-website ruby tailwind tailwindcss theme

Last synced: 7 days ago
JSON representation

Jekyll theme focusing on the simplicity, built with Tailwind CSS

Host: GitHub
URL: https://github.com/madeindra/simplicity
Owner: madeindra
License: mit
Created: 2024-09-16T13:07:25.000Z (about 2 months ago)
Default Branch: main
Last Pushed: 2024-10-08T15:05:09.000Z (about 1 month ago)
Last Synced: 2024-10-11T00:03:04.166Z (28 days ago)
Topics: blog, github-pages, jekyll, jekyll-template, jekyll-theme, personal-website, ruby, tailwind, tailwindcss, theme
Language: HTML
Homepage:
Size: 705 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# Simplicity Jekyll Theme

![Preview](/preview.png)

Simplicity is a clean and minimalistic Jekyll theme designed for bloggers who value simplicity and functionality. Built with Tailwind CSS, the theme offers sleek design, responsiveness, and modern features such as dark/light theme toggling and post search.

## Features

- **Tailwind CSS**: Utilizes the power of Tailwind CSS for easy and flexible styling.
- **Dark/Light Theme Toggle**: Seamlessly switch between dark and light themes.
- **Post Search**: Built-in functionality for searching blog posts.
- **Responsive Design**: Fully responsive, adapting to all screen sizes and devices.
- **Easy Customization**: Straightforward options and structure for quick customization.

## Installation

To set up the Simplicity theme on your local machine, follow these steps:

1. **Clone the repository:**

```bash
git clone https://github.com/madeindra/simplicity.git
cd simplicity
```

2. Install dependencies

```bash
bundle install
npm install
```

3. Run the server

```bash
bundle exec jekyll serve --config _config.yml,_config-dev.yml --livereload
```

4. Open your browser and navigate to http://localhost:4000

## Configuration

You can customize various aspects of the theme by modifying the `_config.yml` file. Here is a detailed explanation of each configuration option:

### Site Settings
- **`url`**: The base URL for your site (e.g., `https://example.github.io`).
- **`title`**: The title of your site (e.g., `Simplicity`).
- **`author`**: The name of the site author (e.g., `John Doe`).
- **`permalink`**: The permalink structure for your posts (e.g., `/:title/`).
- **`description`**: A short description of your site.
- **`keywords`**: A list of keywords related to your site (e.g., `blog`).

### Header Settings
- **`search_enabled`**: Enable or disable the search feature (true/false).
- **`home_enabled`**: Enable or disable the Home link in the header (true/false).
- **`about_enabled`**: Enable or disable the About link in the header (true/false).

### Footer Settings
- **`sitemap_enabled`**: Enable or disable the sitemap link in the footer (true/false).
- **`feed_enabled`**: Enable or disable the rss feed link in the footer (true/false).

### Homepage Settings
Customize the content of your homepage:
- **`homepage.welcome.title`**: The title displayed in the welcome section.
- **`homepage.welcome.subtitle`**: The subtitle displayed in the welcome section.

### About Page Settings
Customize the content of your About page:
- **`about.author_name`**: The name of the author (e.g., `John Doe`).
- **`about.author_image`**: The path to the author's image (e.g., `/assets/images/author.jpg`).
- **`about.social_media_enabled`**: Enable or disable social media links (true/false).
- **`about.description`**: A list of paragraphs describing the author.

### Social Media Settings
Add your social media handles:
- **`social_media.email`**: Email address.
- **`social_media.linkedin`**: LinkedIn username.
- **`social_media.github`**: GitHub username.
- **`social_media.youtube`**: YouTube channel name.
- **`social_media.twitter`**: Twitter handle.
- **`social_media.instagram`**: Instagram username.

### Gisqus Settings
Configure Giscus for comments system:
- **`giscus`**: Enable giscus comments system instead of Disqus (true/false).

### Disqus Settings
Configure Disqus for comments:
- **`disqus.shortname`**: Your Disqus shortname.

### Per Post Settings
Available config for each posts:
- **`category`**: Category of the post.
- **`image`**: Image for post preview on homepage.
- **`feature_image`**: Show image as featured on top of the post page (true/false).
- **`description`**: Post description on homepage.
- **`keywords`**: Keywords for metadata of the post page.
- **`comments`**: Enable comments system on the page (true/false).

### Pagination Settings
Configure homepage's pagination:
- **`paginate`**: Number of post shown per page
- **`paginate_path`**: The link structure for pagination (e.g., `/page/:num/`).

## Github Pages

Follow these steps to deploy your Jekyll site using GitHub Actions.
1. **Create a New Repository with this Template**:
- Click on `Use this template` and click on `Create a new repository`
- Use this format for the repository name `username.github.io` with username being your Hub username

2. **Clone the Repository and Configure**:
- Clone your repository and make any necessary configurations:
```bash
git clone https://github.com/username/username.github.io
cd username.github.io
```
- Copy all contents of simplicity into the repository
- Configure `_config.yml` as needed

3. **Ensure `x86_64-linux` Platform in Gemfile.lock**:
- To ensure that the site can run in GitHub Actions, make sure the `Gemfile.lock` includes the `x86_64-linux` platform. Run the following command if necessary:
```bash
bundle lock --add-platform x86_64-linux
```

4. **Create a GitHub Actions Workflow**:
- Create a GitHub Actions workflow file located at `.github/workflows/gh-pages.yaml`:
```yaml
name: Build and deploy this site to GitHub Pages

on:
push:
branches:
- main

jobs:
github-pages:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3

- name: Setup Ruby
uses: ruby/setup-ruby@v1
with:
ruby-version: 3.1
bundler-cache: true

- name: Setup Node
uses: actions/setup-node@v4
with:
node-version: 20

- run: npm install

- name: Build site
uses: limjh16/jekyll-action-ts@v2
with:
enable_cache: true

- name: Deploy
uses: peaceiris/actions-gh-pages@v4
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./_site
```

5. **Configure Repository Settings**:
- Open your repository settings.
- Navigate to the **Actions** tab and select **General**.
- In the **Workflow permissions** section, select **Read and write permissions**.
- Click **Save** to save your settings.

6. **Enable GitHub Pages**:
- After the first action run, a `gh-pages` branch will be created.
- Open your repository settings again.
- Navigate to the **Pages** section.
- Select **Deploy from a branch**.
- Set the source to `gh-pages`.
- Click **Save**.

7. **View Your Deployed Site**:
- Open your browser and navigate to:
```
https://{username}.github.io
```
Replace `username` with your GitHub username

And that's it! Your Jekyll site should now be live on GitHub Pages.

## Choosing Comments System

Giscus is an alternative comment system, it make uses of GitHub Discussions feature, and has not tracking or ads.

To use it instead of Discus, the page repository should fulfill these criterias:

- The repository is a public repository
- The discussion feature is enabled for the repository
- The Giscus app is installed on the repository

Follow installation guide on [Giscus page](https://giscus.app/) and enable the giscus config on the `_config.yml`.

If you can't fullfil the requirements above, you can opt-in to use [Disqus](https://disqus.com/). Just create an account and set your username on the `_config.yml`.

## Acknowledgements

Special thanks to [Giorgi Mezurnishvili](https://mzrn.sh/) for providing the starter template.