dsdanielpark/ubuntu2204_ruby_gem_jekyll_for_gitblog.md

## ubuntu2204_ruby_gem_jekyll_for_gitblog.md

      
    Raw
  

              ubuntu2204_ruby_gem_jekyll_for_gitblog.md
            
          
    Installing command Ruby + GEM + Jekyll on Ubuntu 22.04 with RVM

Q: Why did you build it manually when GitHub builds automatically? 

GitHub builds take a long time depending on the number of posts, and debugging is very difficult as changes are not reflected in real-time.
Check Jekyll installation, RubyGems.org
Command summary
  sudo apt-get update -y && sudo apt-get upgrade -y
  sudo apt-get install -y libssl-dev libreadline-dev zlib1g-dev
  rvm install 2.7.3
  sudo apt update
  sudo apt install git curl libssl-dev libreadline-dev zlib1g-dev autoconf bison build-essential libyaml-dev libreadline-dev libncurses5-dev libffi-dev libgdbm-dev
  curl -fsSL https://github.com/rbenv/rbenv-installer/raw/HEAD/bin/rbenv-installer | bash
  echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bashrc
  echo 'eval "$(rbenv init -)"' >> ~/.bashrc
  source ~/.bashrc
  type rbenv
  rbenv install -l            ########### Select proper version for you
  rbenv install 3.2.4
  rbenv global 3.2.4
  ruby -v
  echo "gem: --no-document" > ~/.gemrc
  gem install bundler
  gem update --system 3.5.11
  gem env home
  gem install rails -v 7.0.4
  gem search '^rails$' --all
  rbenv rehash
  rails -v                    ########### You can change rails version, but recommend to try default version
  gem update
  gem install jekyll bundler  ########### Install jekyll bundler
  jekyll -v                   ########### Check jekyll version


1 Understanding Gem, Ruby, and Jekyll

1.1 Ruby

Ruby is a dynamic, open-source programming language known for its simplicity and productivity. It features an elegant syntax that is easy to read and write, making it a popular choice for web development, scripting, and more. Ruby is a dynamic, open-source programming language with a focus on simplicity and productivity.
1.2 Gems

Gems are packaged libraries or applications written in Ruby. They allow developers to share and reuse code efficiently. Gems can be easily installed and managed using the gem command-line tool. A typical gem includes:

A name and version
Executable code
Documentation
Dependencies

1.3 Jekyll

Jekyll is a simple, blog-aware, static site generator. It transforms plain text into static websites and blogs. Jekyll processes content written in Markdown or Liquid templates and generates a complete, static site that can be served by any web server. Key features of Jekyll include:

Static Site Generation: Converts text files into static HTML pages.
Markdown Support: Uses Markdown for content creation.
Liquid Templating: Supports Liquid templating for dynamic content.
Easy Deployment: Integrates well with GitHub Pages for easy hosting.

Example Workflow with Jekyll


Install Jekyll: Install Jekyll using the following command:
gem install jekyll


Create a New Site: Create a new Jekyll site using:
jekyll new my-awesome-site
cd my-awesome-site


Build the Site: Build the site and serve it locally:
bundle exec jekyll serve


View the Site: Open your browser and navigate to http://localhost:4000 to see your site.


2 Build site

This code has been modified to address initial build errors in ubuntu 22.04, but it may vary depending on your environment. Please carefully review the logs and make necessary adjustments. (2024-06-18)
2.1 Installation

# Install build tools for your system
sudo apt-get update
sudo apt-get install build-essential libssl-dev libreadline-dev zlib1g-dev

# Attempt to install sass-embedded manually
gem install sassc
gem install sass-embedded -v '1.62.0'

# Update Bundler to the latest version
gem install bundler

# Install missing gems specified in the Gemfile
bundle install

# Clean the Bundler environment to remove unused gems
bundle clean --force

# Reinstall the gems specified in the Gemfile
bundle install

# Build the Jekyll site
jekyll build

# Serve port default: 4000
jekyll serve

# Specific port serving
jekyll serve --port 4001
If the build fails, check the logs for any template errors or review the _config.yml file, then try building again.
2.2 Build and Serve Guidelines

To clean build, del _sites and jekyll serve


Build Process: When you build, the system considers custom CSS and other basic assets, compiling them into the _site directory.


Pre-Build Cleanup: Before building, it's a good practice to clear the browser cache and remove the _site directory. This ensures that the build results are accurate and ready for serving. Overlapping CSS files can cause errors, so be mindful of their priorities.


Serving the Site: The serve command builds and serves the site, but it can be affected by existing content in the _site directory or the browser cache. Pay close attention to the HTML, CSS, and build order to avoid issues.
rm Gemfile.lock
bundle install
jekyll build
jekyll serve


Tips

After adding "plugins": ["livereload"], you can use jekyll serve --reload instead of jekyll serve.
Pay attention to the CSS loading order to ensure proper application. Especially, make sure to distinguish between JS and CSS files in include and assets.
Adjust the CSS loading order mainly in head.html and post.html or body in jekyll template.
Check the delimiters carefully to apply correctly, especially config.yml in jekyll template.


You can visit GitBlog, built with this guide. Happy Coding!