CSS 如何在本地部署包含CSS、JS和背景图片的jekyll网站

在本文中，我们将介绍如何在本地部署一个包含CSS、JS和背景图片的jekyll网站。Jekyll是一个使用Ruby编写的静态网站生成器，允许用户使用Markdown和Liquid模板语言创建内容，然后将其转换为静态HTML文件。

阅读更多：CSS 教程

步骤一：安装Jekyll和依赖项

首先，我们需要在本地计算机上安装Jekyll和相关的依赖项。在安装Jekyll之前，确保你的计算机已经安装了Ruby和RubyGems。然后，使用以下命令安装Jekyll：

gem install jekyll

安装完成后，可以使用以下命令验证Jekyll是否成功安装：

jekyll -v

步骤二：创建Jekyll网站

接下来，我们需要创建一个新的Jekyll网站。打开命令提示符或终端，并进入你要创建网站的目录。然后运行以下命令：

jekyll new mywebsite

这将创建一个名为“mywebsite”的新文件夹，并在其中生成Jekyll网站的基本结构。

步骤三：将CSS、JS和背景图片添加到网站

现在，我们可以将所需的CSS、JS和背景图片添加到Jekyll网站中。在“mywebsite”文件夹中，你会找到一个名为“assets”的文件夹。在这个文件夹中，可以创建一个名为“css”的子文件夹，并将所有CSS文件放在其中。同样，你可以在“js”文件夹中添加JS文件，在“img”文件夹中添加背景图片。

步骤四：修改配置文件

在Jekyll网站的根目录中，有一个名为“_config.yml”的配置文件。打开这个文件，并找到以下行：

# Build settings
markdown: kramdown
theme: minima

将“theme”更改为“none”，并添加以下行：

# Custom settings
include:
- assets/css
- assets/js
- assets/img

这样，Jekyll将会包含我们刚刚添加的CSS、JS和背景图片。

步骤五：运行Jekyll在本地预览网站

现在，我们已经准备好在本地预览网站了。在命令提示符或终端中，进入“mywebsite”文件夹，并运行以下命令：

jekyll serve

这将启动一个本地服务器，并监听端口4000。你可以在浏览器中访问http://localhost:4000 来查看网站的效果。

步骤六：构建和部署网站

当你对网站的修改完成后，你可以使用Jekyll将网站构建为静态HTML文件，并将其部署到任何静态网页托管服务中。在命令提示符或终端中，进入“mywebsite”文件夹，并运行以下命令：

jekyll build

这将生成一个名为“_site”的文件夹，其中包含你的网站的所有静态HTML文件。将这些文件上传到你选择的静态网页托管服务中，即可完成部署。

总结

在本文中，我们介绍了如何在本地部署一个包含CSS、JS和背景图片的jekyll网站。通过安装Jekyll并添加所需的文件，我们能够在本地预览并构建网站，然后将其部署到静态网页托管服务中。祝你在使用Jekyll创建网站时取得成功！