If you like it please think on supporting my job:
Wind is a clean, minimalistic Jekyll theme designed to offer a delightful blogging experience. With a focus on simplicity and aesthetics, Wind brings an elegant touch to your blog or personal website.
-
Responsive Design: Wind offers a thoughtfully crafted responsive design that ensures your blog looks stunning and functions flawlessly on a variety of devices, including desktops, tablets, and smartphones. Your content remains accessible and visually appealing, no matter how your audience chooses to engage with it.
-
Blog-Centric Focus: Wind is tailored for bloggers, putting the spotlight on your content. Its clean and minimalistic design highlights your articles, providing readers with an uncluttered and immersive reading experience.
-
Tags Page: Easily categorize and organize your blog posts using tags. Wind includes a dedicated Tags page that allows your readers to find and explore posts by tag, making content discovery and navigation a breeze.
-
Disqus Integration: Engage with your audience through the built-in Disqus commenting system. Enable discussions on your blog posts to encourage interaction, receive feedback, and foster a sense of community.
-
Customizable Head Section: Wind empowers you to customize the theme's
<head>section, enabling you to insert various scripts, such as Google Analytics, social media meta tags, or any other third-party integrations you require to enhance your website's functionality and insights. -
Dark Mode: Wind provides a dark mode feature, allowing readers to switch to a more comfortable reading experience in low-light conditions. Enhance accessibility and cater to different user preferences effortlessly.
-
Go Up Button: Enhance user navigation with the "Go Up" button. This feature enables users to quickly return to the top of the page, offering a convenient and user-friendly browsing experience.
-
Social Media Integration: Seamlessly link your social media profiles to your blog, making it simple for your readers to connect with you on various platforms. Enhance your online presence and grow your social media following by leveraging Wind's integrated social media links.
-
SEO Optimized: Wind is designed with search engine optimization (SEO) in mind. Its clean code, structured metadata, and user-friendly URL structure help improve your blog's visibility on search engines, driving organic traffic to your site.
-
Cross-Browser Compatibility: Ensure your blog looks and performs consistently across a wide range of web browsers, providing an optimal experience for all visitors.
-
Accessibility Features: Wind adheres to accessibility best practices, ensuring that your content is accessible to users with disabilities. This inclusivity enhances the reach and usability of your blog.
-
RSS Feed Support: Wind includes RSS feed support, allowing your readers to subscribe to your blog and receive updates when new content is published.
-
Author Profile: Personalize your blog by adding an author profile section, allowing you to share information about yourself and connect with your audience on a more personal level.
-
Navigate to the Main Page of the Repository
On GitHub.com, go to the main page of the repository at wind-theme.
-
Click 'Use this Template'
Click the "Use this template" button above the file list and select "Create a new repository."
-
Set Repository Details
- Select the owner of the repository.
- Type a name for your repository. If you want the site to be available at
https://YOURUSERNAME.github.io, name itYOURUSERNAME.github.io(replaceYOURUSERNAMEwith your GitHub username). Otherwise, you can choose any name you prefer, and the site will be available athttps://YOURUSERNAME.github.io/REPOSITORYNAME. - Add an optional description.
- Choose repository visibility.
-
Create Repository from Template
Click "Create repository from template."
-
Enable GitHub Pages
To deploy the site on GitHub Pages, enable it in your repository settings. Go to Settings -> Pages -> Source and select
GitHub Actions. -
Customize Your Website Settings
Edit the
_config.ymlfile to change any settings you want. The settings in the file are self-explanatory, and there are comments inside to help you understand what each setting does. After making changes, click the "Commit changes" button to save them. -
Congratulations! You Have a Website!
If you named the repository
YOURUSERNAME.github.io, your website should be ready in a minute or two athttps://YOURUSERNAME.github.io. If you used a different name, your website will be available athttps://YOURUSERNAME.github.io/REPOSITORYNAME. Every time you make a change to any file, your website will be rebuilt and updated in about a minute.
-
Create a New Jekyll Site
If you don’t already have a Jekyll site, create one with:
jekyll new my-site
Then, navigate into your new site’s directory:
cd my-site -
Add the Theme to Your Gemfile
Open your
Gemfileand add this line:gem "wind-theme"
-
Update Your
_config.ymlIn your
_config.ymlfile, add this line:theme: wind-theme
-
Install the Theme
Run the following command to install the theme and its dependencies:
bundle
-
Run Your Site
Start your Jekyll site with:
bundle exec jekyll serve
Wind has been scaffolded by the jekyll new-theme command and therefore has all the necessary files and directories to have a new Jekyll site up and running with zero-configuration.
Refers to files within the _layouts directory, that define the markup for your theme.
base.html— The base layout that lays the foundation for subsequent layouts. The derived layouts inject their contents into this file at the line that says{{ content }}and are linked to this file via FrontMatter declarationlayout: base.home.html— The layout for your landing-page / home-page / index-page. [More Info.]page.html— The layout for your documents that contain FrontMatter, but are not posts. Example about.md page.post.html— The layout for your posts.galley.html— The layout for a image galley.
home.html is a flexible HTML layout for the site's landing-page / home-page / index-page.
The home layout will inject all content from your index.md / index.html before the Posts section. This will allow you to include non-posts related content to be published on the landing page under a dedicated heading. I recommended that you title this section with a Heading2 (##).
This Layout needs a data file with the name _data/gallery.yml and the following structure:
photos:
- url: path/to/your/photo.png
description: Alt for the image
quote: text on hover
Refers to snippets of code within the _includes directory that can be inserted in multiple layouts (and another include-file as well) within the same theme-gem.
disqus_comments.html— Code to markup disqus comment box.footer.html— Defines the site's footer section.head.html— Code-block that defines the<head></head>in default layout.custom-head.html— Placeholder to allow users to add more metadata to<head />.header.html— Defines the site's main header section. By default, pages with a definedtitleattribute will have links displayed here.navbar.html— Defines the site's navbar section. By default,titleis used in the left section and main pages are displayed in the rigth section.up_button.html— Includes the code related to the up button.
The template needs at least title and author settings in your _config.yml for works fine. The title is used in the nabvar section and the author is displayed in the posts.
Optionally, if you have a Disqus account, you can tell Jekyll to use it to show a comments section below each post.
url, e.g. https://example.com, must be set in you config file for Disqus to work.
To enable it, after setting the url field, you also need to add the following lines to your Jekyll site:
disqus:
shortname: my_disqus_shortnameYou can find out more about Disqus' shortnames here.
Comments are enabled by default and will only appear in production, i.e., JEKYLL_ENV=production
If you don't want to display comments for a particular post you can disable them by adding comments: false to that post's YAML Front Matter.
To override the default structure and style of minima, simply create the concerned directory at the root of your site, copy the file you wish to customize to that directory, and then edit the file.
e.g., to override the _includes/head.html file to specify a custom style path, create an _includes directory, copy _includes/head.html from minima gem folder to <yoursite>/_includes and start editing that file.
To customize the text in the footer:
-
Declare your site language in the
_config.ymlfile:language: "your_language_code"
-
Create a language
datafile in the data folder, using your site language code (e.g.,es.ymlfor Spanish). -
Customize the footer variables in the language data file:
```yml footer: title: "Mantengamosnos conectados" description: "Puesdes encontrarme en cualquiera de estos canales:" pages: "Paginas" ```Adjust the values of title, description, and pages as needed.
Minima 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.
The theme is available as open source under the terms of the MIT License.
We welcome contributions from the community! If you'd like to contribute to the project, please follow these guidelines:
- Fork the repository.
- Create a new branch for your feature or bug fix:
git checkout -b feature-name. - Make your changes and commit them:
git commit -m 'Description of your changes'. - Push your changes to the branch:
git push origin feature-name. - Submit a pull request.
Please ensure that your pull request includes a clear description of the problem you are solving and the solution implemented. Also, make sure your code follows the project's coding standards.
If you need help or have questions, you can contact me.