Wednesday

source code offline with Chrome?

Issue

I have downloaded the source code https://github.com/jgthms/css-reference for https://cssreference.io/.

After I expand the zipped folder and open the index.html file with Chrome, the browser doesn't render the page correctly. The index.html looks like the following:

  {% include favicons.html %}
</head>
<body>
  <header class="header">
    <div class="container">
      <h1 class="header-figure">
        <img src="{{site.url}}/images/css-reference-icon.png" alt="{{site.title}} icon">
        <img src="{{site.url}}/images/css-reference-type.png" alt="{{site.title}} type">
      </h1>
      <div class="header-content">
        <div class="header-carbon">
          {% include carbon.html %}
        </div>
        <div class="header-text">
          <h2 class="header-title">
            {{site.subtitle}}
          </h2>
          <p class="header-subtitle">
            <strong>Learn by example</strong>: <a href="{{site.url}}">cssreference.io</a> is a free visual guide to CSS. It features the most popular <strong>properties</strong>, and explains them with illustrated and animated <strong>examples</strong>.
          </p>
          <footer class="header-share">
            {% include social/button-twitter.html %}
            {% include social/button-facebook.html %}

Question: Is it possible that I can read this document offline with Chrome? Thank you.

Solution

Yes, it is possible that you can read this document offline (or in other words, run the project's website), but it requires some steps that I've described below. (Disclaimer: yarn is used as package manager and macOS as OS, and it might be that you bump into different errors)

Steps

Update node-sass
Install Jekyll
Setup Jekyll in project
Serve project

Result

CSS Reference running on localhost

Why Jekyll?

The package.json gives some clues about how it should be done, since one of the keywords is jekyll. That means the project uses Jekyll, a static site generator, and we should install it to run the project on our local machine.

1. Update node-sass

Before we do anything with jekyll, we need to update the node-sass library inside the package.json file, since the project is quite old. Since my machine uses Node.js v14, we need to update node-sass to 4.14, according to its docs.

yarn add node-sass@4.14

Your package.json should now include the following packages:

  "devDependencies": {
    "autoprefixer": "^6.5.3",
    "node-sass": "4.14",
    "postcss-cli": "^2.6.0"
  }

Be sure to run yarn to install all packages.

2. Install Jekyll

Next step is to install Jekyll, one of the requirements to run Jekyll is to have version 2.5 or higher of Ruby installed, according to their docs.

brew install ruby

I followed the detailed instructions at the Step by Step Tutorial.

Install jekyll and bundler with this command:

gem install jekyll bundler

3. Setup Jekyll in project

Create a new Gemfile inside the project's folder to list your project’s dependencies:

bundle init

Edit the Gemfile in a text editor and add jekyll as a dependency:

gem "jekyll"

I needed to add webrick as another dependency in my Gemfile, because I ran into errors (described here), you can install it via:

gem install webrick

The Gemfile will now look something like this:

# frozen_string_literal: true

source "https://rubygems.org"

# gem "rails"
gem "jekyll"

gem "webrick", "~> 1.7"

4. Serve project

You have to restart your terminal (important step) and then run bundle inside your project folder to initialize jekyll it for your project.

With jekyll serve, you can now run the project on your local environment, port 4000 is set as the default. Some output from jekyll serve command:

css-reference-master jekyll serve
Configuration file: /Users/roy/Downloads/css-reference-master/_config.yml
            Source: /Users/roy/Downloads/css-reference-master
       Destination: /Users/roy/Downloads/css-reference-master/_site
 Incremental build: disabled. Enable with --incremental
      Generating...
                    done in 0.461 seconds.
 Auto-regeneration: enabled for '/Users/roy/Downloads/css-reference-master'
    Server address: http://127.0.0.1:4000
  Server running... press ctrl-c to stop.
      Regenerating: 1 file(s) changed at 2022-01-08 22:09:07
                    .idea/workspace.xml
                    ...done in 0.528404 seconds.

See below for the proof of the project running on localhost.

Project running on localhost

Answered By - Roy

This Answer collected from stackoverflow and tested by AngularFix community admins, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0