首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

用 Eleventy 建立一个静态网站

Eleventy 是一个基于 JavaScript 的 Jekyll 和 Hugo 的替代品,用于构建静态网站。 静态网站生成器是一种基于原始数据和一组模板生成完整的静态 HTML 网站的工具。...它可以自动完成单个 HTML 页面的编码任务,并让这些页面准备好为用户服务。由于 HTML 页面是预先建立的,它们在用户的浏览器中加载得非常快。...在 Linux 上,你可以使用你的包管理器安装 Node.js: $ sudo dnf install nodejs 如果你的包管理器没有 Node.js,或者你不在 Linux 上,你可以 Node.js...为你的文档建立一个静态网站 现在你可以开始使用 Eleventy 来建立你的静态文档网站。以下是需要遵循的步骤。...在你确认安装完成后,尝试运行 Eleventy: $ npx @11ty/eleventy 4、创建一些模板 现在运行两个命令来创建两个新的模板文件(一个 HTML 和一个 Markdown 文件):

2K10

怎么通过码云(Gitee.com)创建自己的博客建立主页

Jekyll 使用文档:http://jekyll.bootcss.com/docs/home/ 1....使用前须知 1、项目必须有 index.html 才可以正常访问 2、静态网页的样式可以自己写,也可以拿一些静态模版来修改,Pages服务本身不提供任何形式的模版,但我们后续会陆续增加例子,供大家参考使用...点击创建完成项目的创建 B.添加文件 index.html (注意名称是index.html哦!) 点击新建文件 ? 文件名输入 index.html,内容就是简单的 html ?...Pages 进阶,使用 Jekyll 生成自己的静态网页 Jekyll 究竟是什么? Jekyll 是一个简单的博客形态的静态站点生产机器。...Jekyll 使用文档:http://jekyll.bootcss.com/docs/home/ 其他帮助: 如何自定义404? 答:在项目根目录新建 404.html 文件即可。

7K20
您找到你想要的搜索结果了吗?
是的
没有找到

使用Jekyll显示Jupyter笔记本

Jekyll提供了各种主题和插件,因此用户无需担心Web开发。 本指南将指导您完成安装Jekyll的过程,并将其配置为Jupyter笔记本显示多种输出类型。...安装Ruby: rvm install ruby 使用gem下载jekyll和Bundler: gem install jekyll bundler 创建一个新博客 创建一个新博客。...本节中的步骤可以本地计算机或使用Jekyll博客的Linode完成。如果您使用Linode,则可以使用ngrok查看笔记本。...有关转义字符和格式化块的更多信息,请参阅Jekyll文档。 以下部分显示如何通过调整并设置表格和图像样式以改进显示。 扩展默认SCSS Jupyter中的表格输出转换为HTML表格。...使用CDN支持MathJax 内容分发网络(CDN)是在网站上添加功能而无需下载其他软件的好方法。本节将介绍如何创建使用自定义标题的帖子。

3.9K20

如何拥有一个免费空间来写博客(github)

今天,我就来示范如何在github上搭建Blog,你可以从中掌握github的Pages功能,以及Jekyll软件的基本用法。更重要的是,你会体会到一种建立网站的全新思路。 ?...在项目根目录下,创建一个_layouts目录,用于存放模板文件。   $ mkdir _layouts 进入该目录,创建一个default.html文件,作为Blog的默认模板。...使用Liquid模板语言,{{ page.title }}表示文章标题,{{ content }}表示文章内容,更多模板变量请参考官方文档。...目录结构变成:   /jekyll_demo     |– _config.yml     |– _layouts     |   |– default.html 第四步,创建文章。...回到项目根目录,创建一个_posts目录,用于存放blog文章。   $ mkdir _posts 进入该目录,创建第一篇文章。

5.8K20

搭建一个免费的,无限流量的Blog----github Pages和Jekyll入门

今天,我就来示范如何在github上搭建Blog,你可以从中掌握github的Pages功能,以及Jekyll软件的基本用法。更重要的是,你会体会到一种建立网站的全新思路。 ?...在项目根目录下,创建一个_layouts目录,用于存放模板文件。   $ mkdir _layouts 进入该目录,创建一个default.html文件,作为Blog的默认模板。...> Jekyll使用Liquid模板语言,{{ page.title }}表示文章标题,{{ content }}表示文章内容,更多模板变量请参考官方文档。...回到项目根目录,创建一个_posts目录,用于存放blog文章。   $ mkdir _posts 进入该目录,创建第一篇文章。...回到根目录,创建一个index.html文件,填入以下内容。

1.6K60

如何搭建免费博客

具体的规则 在github的项目中,创建一个gh-pages的分支,分支创建完成后就可以使用http://{userName}.github.io/{projectName}来进行访问。...到这里,不禁有一个疑问,gh-Pages虽然给了一个可以展示html平台,写博客如果全部都写html,那我们还要精力去调整样式和布局的问题.再者博客也要有评论功能,这两个问题如何解决?...详细介绍参见jekyll官方文档jekyll安装 jekyll的安装可以参见 windows安装Jekyll linux和MacOS安装Jekyll jekyll使用 1....在_layout下创建一个default.html,作为一个网站的模板,添加如下内容(此处代码中的所有的{ {中间都有一个空格,为了不让jekyll去解析,拷贝的时候请注意):    <!...到这里,我们使用jekyll根据我们写的模板生成了对应的静态页面,下面我们把数据传入到github的gh-pages下面。 git add .

1.1K40

码云正式支持 Pages 功能

使用前须知 1、Pages 默认的根文件是 index.html 2、静态网页的样式可以自己写,也可以拿一些静态模版来修改,Pages服务本身不提供任何形式的模版,但我们后续会陆续增加例子,供大家参考使用...4、支持 Jekyll 已经有 Pages 项目如何部署到码云的 Pages 以 jQuery-File-Upload 项目为例,项目地址:https://github.com/blueimp/jQuery-File-Upload...点击创建完成项目的创建 B.添加文件 index.html (注意名称是index.html哦!) 点击新建文件 ? 文件名输入index.html,内容就是简单的html ?...Pages进阶,使用Jekyll生成自己的静态网页 Jekyll 究竟是什么? Jekyll 是一个简单的博客形态的静态站点生产机器。...-> https://git.oschina.net 另附Jekyll 使用文档:http://jekyll.bootcss.com/docs/home/

1.6K120

开垦属于你的网络空间:简单易用的静态博客框架推荐

灵活多样化:由于其先进模板系统和强大分类系统,Hugo 可以用于创建各种类型的网站,包括企业、政府、非营利组织等官方机构;新闻媒体、事件展示及项目介绍等专题页面;文档库;图片集合与个人博客等。...简单易用:Jekyll 不会给用户带来不必要的复杂性和配置,它只做你告诉它去做的事情。 高度可定制化:使用 Jekyll,您可以根据自己的需求轻松地创建个人、项目或组织网站,并对其进行完全控制。...这使得使用 Hexo 的体验变得非常灵活便利。 完善文档资料:在官方网站上提供详尽清晰易懂并附带示例代码说明书籍,让初学者也能轻松上手。...使用 JavaScript 编写,可以将包含不同类型模板的目录转换为 HTML。...如果你正在寻找一个简单但又功能齐全、容易上手操作与维护、并拥有广泛应用领域 (个人博客到企业级门户) 静态网站生成器,elevevnty 将会是您理想之选!

38340

如何在Ubuntu 16.04上建立一个Jekyll开发网站

准备 要学习本教程,您需要: 具有sudo权限的非root用户的Ubuntu 16.04服务器:您可以在使用Ubuntu 16.04教程的初始服务器设置中了解有关如何使用这些权限设置用户的更多信息。...第三步 - 创建新的开发站点 我们的主目录,我们将使用Jekyll的new命令为子目录www中的站点创建脚手架: cd ~ jekyll new www 该jekyll new命令启动bundle install...Jekyll的new命令创建以下目录和文件: ... ├── 404.html ├── about.md ├── _config.yml ├── Gemfile ├── Gemfile.lock ├──...它们是Jekyll用于创建静态站点的源文件。Jekyll依赖于特定的名称,命名模式和目录结构来解析不同的内容源并将它们组装到静态站点中。...因为我们正在处理远程服务器,所以我们将指定主机地址,以便本地计算机浏览站点。

1.6K71

如何在Ubuntu 16.04上建立一个Jekyll开发网站

准备 要学习本教程,您需要: 具有sudo权限的非root用户的Ubuntu 16.04服务器:您可以在使用Ubuntu 16.04教程的初始服务器设置中了解有关如何使用这些权限设置用户的更多信息。...第三步 - 创建新的开发站点 我们的主目录,我们将使用Jekyll的new命令为子目录www中的站点创建脚手架: cd ~ jekyll new www 该jekyll new命令启动bundle install...Jekyll的new命令创建以下目录和文件: ... ├── 404.html ├── about.md ├── _config.yml ├── Gemfile ├── Gemfile.lock ├──...它们是Jekyll用于创建静态站点的源文件。Jekyll依赖于特定的名称,命名模式和目录结构来解析不同的内容源并将它们组装到静态站点中。...因为我们正在处理远程服务器,所以我们将指定主机地址,以便本地计算机浏览站点。

1.4K31

静态博客搭建工具汇总

Jekyll、Hugo、Hexo 也可以运行在 码云(Gitee.com) Pages 上,也就是说,你可以使用码云的服务来搭建你的仓库页面、博客或者网站,而且是完全免费的。...Nuxt.js 的目标是创建一个灵活的应用框架,你可以基于它初始化新项目的基础结构代码,或者在已有 Node.js 项目中使用 Nuxt.js。...Docsify是基于 Vue,完全的运行时驱动,不需要渲染html,所以对 SEO 不够友好。如果不关注 SEO,安装简单化不想有大量依赖,他是比较好的选择,比如公司或这团队内部的文档系统。...你只需创建一个 HTML 文件和一堆 Markdown 文档,你的网站就差不多完成了!...ReadtheDocs ---- Read the Docs是一个在线文档托管服务, 你可以各种版本控制系统中导入文档,如果你使用webhooks, 那么每次提交代码后可以自动构建并上传至readthedocs

1.2K20

Jekyll + Github Pages 搭建个人免费博客

它的方便之处在于支持多种文本标记语言:Markdown,Textile,HTML,然后 Jekyll 就会帮你加入你选择主题的样式的布局中。最终生成你自己的静态博客网站。...在浏览器访问:http://localhost:4000/ 2.添加 MarkDown 文档 在项目根目录下的 _posts 目录创建 markdown 文档。...例如:2019-10-11-5分钟搭建博客.md 3.部署代码到 Github 1.创建 Github 账号 注:这里我使用的 Github 托管静态博客的,你也可以选择把代码托管到 码云 或者其他平台上...可能存在兼容性问题,使用下面的命令 cd mundana-jekyll-theme bundle install #安装依赖 bundle exec jekyll serve #运行项目 我的博客地址...手把手博客搭建 参考资料 1.使用 github + jekyll 搭建个人博客 https://www.cnblogs.com/wangfupeng1988/p/5702324.html 2.Github

2K30

基于Jekyll与Github Pages搭建博客

它有一个模版目录,其中包含原始文本格式的文档,通过一个转换器(如 Markdown)和我们的 Liquid 渲染器转化成一个完整的可发布的静态网站,你可以发布在任何你喜爱的服务器上。...GitHub Pages 是一个静态网站托管服务,直接github仓库托管你个人、公司或者项目页面 ,并且不需要你写任何后端语言来支持。...我的博客选择的是在 Github 上找的博客主题,它对目录中各个文件的内容、功能都有很详细地说明,适合我这样的小白学习使用 Jekyll 。...我使用的博客模板 jekyll 的目录结构大概是这样的: . ├── assets # 存放用于线上环境的静态资源,比如我们想放在博客上的图片之类 ├── _config.yml # 配置文件,我们通过修改这里的参数改造博客...─ _includes | ├── footer.html | └── header.html ├── _layouts | ├── default.html | └── post.html

1K10

博客生成静态站点工具 Top 20

4.Jekyll star 数 45K+。 Jekyll 是一个基于 Ruby 的静态站点生成器,支持多种主题和插件。Jekyll 提供了丰富的文档和社区支持,使用起来也比较简单。...GitBook CLI 是一种用于创建、编辑和构建 GitBook 电子书的工具。通过 GitBook CLI,用户可以使用命令行界面创建新书、添加章节和页面、选择主题和插件,以及构建和发布书籍。...无需构建:Docsify不需要构建,您只需要在网站根目录下创建一个index.html文件并使用Docsify即可。 总之,Docsify 是一个非常适合快速创建文档和技术博客的工具。...部署简单,可以将生成的HTML静态页面部署到任何Web服务器上。 使用 MkDocs,您可以快速创建漂亮的文档页面,非常适合技术写作、软件文档、项目文档等。...Sphinx 是一个用于创建技术文档的工具,可以将文本文件(如reStructuredText、Markdown等)转换成HTML、PDF、EPUB等格式。

3.2K21

可能是最全面的github pages搭建个人博客教程

其中clientID和clientSecret需要点击这里创建 ? 点绿色按钮创建,成功之后会得到以上两个id,修改配置即可。...如何写博客 好了,博客有了。如何更新文章呢? 文章用markdown语法,写好统一放在_post文件夹下上传,git page会自动你的git仓库拉去解析成网页,立刻就能在你的博客网页浏览。...主要是path d= 内容的获取,这里其实是指定svg图片的内容,我们可以 这里获取到大部分svg素材,比如知乎的svg在这,点raw 按钮查看源文件,复制path d=后面的内容到上面的配置即可。...-- pv的方式,单个用户连续点击n篇文章,记录n次访问量 --> <span id="busuanzi_container_site_uv" style="font-family:Consolas;

13.6K10

手把手教你用vuepress搭建自己的网站(1)

搭建的,但是后来因为管理确实麻烦,就没打理了的Jekyll 官方文档 http://jekyllcn.com/ Hexo 特点:比Jekyll要先进一点,先生成文件,在部署 基于Node.js的静态网站生成器...的升级,没有构建过程,将 md文件呈现为单页面应用程序,会生成静态HTML,对 SEO很友好,利于百度蜘蛛的抓取 Docsify官方文档, Docute 官方文档https://docute.org/#...< Docute < Hexo < vuepress,其中Jekyll 和 Docsify配置是最简单的,如果只用于专注内容创作,挺合适的,但是功能很弱,拓展性差 性能/seo 上:VuePress是最好的...vuepress dev docs 打包项目: npm run build这条命令相当于 vuepress build docs 在接着,创建docs目录, 这个docs文件夹主要用于放置我们写的.md...类型的文章以及.vuepress相关的配置,这个文件夹的名字你可以任意,与你启动项目和构建项目时的配置保持一致就可以了的 mkdir docs 进入docs文件夹中使用mkdir命令创建.vuepress

1.2K20

如何Jekyll 部署到云开发静态网站托管

云开发静态托管是云开发提供的静态网站托管的能力,静态资源(HTML、CSS、JavaScript、字体等)的分发由腾讯云对象存储 COS 和拥有多个边缘网点的腾讯云 CDN 提供支持 使用Jekyll搭建静态站点...安装Jekyll等插件可以参考官网提供的「安装文档 http://jekyllcn.com/docs/installation/」来安装。...我选择直接Github下载我的博客相关的内容(对应地址为:https://github.com/bihe0832/bihe0832.github.io) 对于基于Jekyll的静态站点的目录结构,可以参考官网提供的...然后在浏览器打开 Server address 中显示的地址即可查看效果 将静态站点使用腾讯云静态网站托管 创建静态网站托管服务 1、创建腾讯云云开发环境 打开腾讯云「云开发 https://console.cloud.tencent.com...如下图,选择之前创建的开发环境,然后点击「开始使用」初始化环境。

3.5K105

如何快速给自己构建一个温馨的"家"——用Jekyll搭建静态博客

因为它是不需要数据库的,通过markdown编写静态文件,生成Html页面,它的优点是提升了页面的响应速度,并且让博主可以只专注于写文章,不用再去考虑如何排版。 静态。...//使用gem安装Jekyll gem install jekyll //使用Jekyll创建你的博客站点 jekyll new blog #创建你的站点 //开启Jekyll服务 //进入blog...三.使用Github Pages服务 1.创建我们自己的仓库 以下用usename代替自己的用户名 2.配置我们的仓库 在Settings里面找到Github Pages 选择Launch automatic...申请SSL证书的做法我就不说了,我来说说第二种使用kloudsec提供的服务的做法。 实现原理 看 Kloudsec 的文档里描述的 HOW DOES IT WORK?...--- layout: post title: 如何快速给自己搭建一个温馨的"家"——用Jekyll生成静态博客 author: 一缕殇流化隐半边冰霜 date: 2016.06.21 01:57:32

21910
领券