empty-jekyll-site-tailwindcss

development environment

Linux
git
```
sudo apt install git
git -v
```

sudo apt install ruby
ruby -v
gem -v

Maybe gem source have to be changed.

gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
gem sources -l

Bundler

gem install bundler
bundle -v

Maybe bundler source have to be changed as well.

bundle config mirror.https://rubygems.org https://gems.ruby-china.com
bundle config
bundle config mirror.https://rubygems.org

Jekyll
```
gem install jekyll
jekyll -v
```

Start a new Jekyll project

jekyll new <YOUR PROJECT NAME> --blank

Set up git

cd <YOUR PROJECT NAME>
git init

Maybe rename the branch.

git branch -m <OLD BRANCH NAME> <NEW BRANCH NAME>

Create a file named .gitignore and paste the following in it:

_site/
.sass-cache/
.jekyll-cache/
.jekyll-metadata
node_modules

Install Ruby gems

Create a Gemfile which is a list of gems used by your site. Add it to the root directory with the following content:

source 'https://rubygems.org'

gem 'jekyll'
gem 'webrick'

Now install those gems by Bundler.

bundle

Build the Jekyll site

bundle exec jekyll serve

Open localhost:4000 in your browser. If you see something like this.

Add PostCSS and Tailwind

Paste gem jekyll-postcss-v2 into Gemfile and install the gem.

bundle

Open the _config.yml file and add the following lines at the end.

plugins:
  - jekyll-postcss-v2

Now create a postcss.config.js file in the root directory and add Tailwind to your PostCSS configuration.

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    ...(process.env.JEKYLL_ENV == 'production'
      ? [require('cssnano')({ preset: 'default' })]
      : [])
  ]
}

Install those packages.

npm install -D postcss postcss-cli tailwindcss autoprefixer cssnano

Configure [Taiwind]

Create a tailwind.config.js file in the root directory with the following contents. You can use npx tailwindcss init to create the file.

module.exports = {
  content: [
    './_drafts/**/*.html',
    './_includes/**/*.html',
    './_layouts/**/*.html',
    './_posts/*.md',
    './*.md',
    './*.html',
  ],
  theme: {
    theme: {
      extend: {},
    },
  },
  plugins: []
}

Rename assets/css/main.scss to assets/css/main.css and put the following in it.

---
---

@tailwind base;
@tailwind components;
@tailwind utilities;

Then remove the _sass directory.

Start using Tailwind in your HTML

Open _layouts/default.html and add class="text-red-500" attribute to the <body> tag.

Rebuild the Jekyll site. You should see this.

Publish to Github (optional)

Add files to the staging area and commit your changes.

git add .
git commit -m 'Your commit message'

Create a Github repository.

Go to GitHub.com and sign in to your account.
Click on the "+" button in the top right corner and select "New repository."
Give your repository a name and description.
Choose whether you want the repository to be public or private.
Click "Create repository."

Connect the local repository to Github.

git remote add origin https://github.com/<your_username>/<your_repository_name>.git

Push your local changes to Github.

git push origin main

You'r made it.

Usefull links

Related repositories

longavailable/empty-jekyll-site

longavailable / empty-jekyll-site-tailwindcss