当前位置：网站首页>Building a static website with eleventy

Building a static website with eleventy

2022-06-24 08:33:00 【User 1091747】

Eleventy It's based on JavaScript Of Jekyll and Hugo substitute , Used to build static websites .

Static web site builder is a kind of static web site builder that generates complete web sites based on raw data and a set of templates HTML The tools of the website . It can automatically complete a single HTML Page coding task , And make these pages ready to serve users . because HTML The page is pre built , They load very quickly in the user's browser .

Static websites are also document friendly , Because static websites are easy to expand , And they are generated 、 An easy way to maintain and deploy project documents . For these reasons , Enterprises often use them to document application programming interfaces （API）、 Database schema and other information . Documentation is software development 、 Design and other aspects are an important part of technology . All code bases require some form of documentation , The choices range from simple README To complete document .

Eleventy: A static website generator

Eleventy（11ty） Is a simple static website builder , yes Jekyll and Hugo substitute . It is to use JavaScript Compiling , It will be one （ Different types of ） The template directory is converted to HTML. It's also open source , stay MIT Release under license .

Eleventy It can be done with HTML、Markdown、Liquid、Nunjucks、Handlebars、Mustache、EJS、Haml、Pug and JavaScript Template Literals Working together .

Its features include ：

Easy to set up
Support multiple template languages （ Such as Nunjucks、HTML、JavaScript、Markdown、Liquid）
Customizable
be based on JavaScript, This is familiar to many web developers , New users are also easy to learn

install Eleventy

Eleventy need Node.js. stay Linux On , You can use your package manager to install Node.js：

$ sudo dnf install nodejs

If your package manager does not Node.js, Or you're not here Linux On , You can start your Node.js Website install it .

Node.js After installation , Just use it to install Eleventy：

$ npm install -g @11ty/eleventy

That's done ！

Create a static web site for your documents

Now you can start using Eleventy To build your static document website . Here are the steps to follow .

1、 Create a package.json file

To put Eleventy Install into your project , You need one package.json file ：

$ npm init -y

2、 take Eleventy The installation to package.json in

install Eleventy And save to your project package.json in . function ：

$ npm install-save-dev @11ty/eleventy

3、 function Eleventy

Use npx Command to run your local project Eleventy edition . After you confirm that the installation is complete , Try to run Eleventy：

$ npx @11ty/eleventy

4、 Create some templates

Now run two commands to create two new template files （ One HTML And a Markdown file ）：

$ cat << EOF >> index.html<!doctype html><html><head><title>Page title</title></head><body><p>Hello world</p></body></html>EOF$ echo '# Page header' > index.md

This compiles any content templates in the current directory or subdirectory into the output folder （ The default is _site）.

function eleventy --serve To start a development web server .

$ npx @11ty/eleventy-serve

Open... In your web browser http://localhost:8080/README/, Look at you Eleventy Output .

And then put _site Upload the files in to your Web The server , Publish your website to the world .

Try Eleventy

Eleventy Is a static website builder , It's easy to use , There are templates and themes . If you have used in your development process Node.js,Eleventy Maybe it's better than Jekyll or Hugo A more natural . It can provide good results quickly , And keep you free from complex website design and maintenance . To learn more about using Eleventy Information about , Please read its documentation carefully .

原网站

版权声明
本文为[User 1091747]所创，转载请带上原文链接，感谢
https://yzsam.com/2021/06/20210623184250758q.html