Pages和Jekyll搭建个人博客,最热开源静态网站生成

2019-10-06 11:53 来源:未知

(此文章同时发表在本人微信公众号“dotNET每日精华文章”,欢迎右边二维码来关注。)


题记:今天继续静态网站的话题,介绍我选用的一个使用.NET开发的静态内容生成器——Wyam。

目录##

1. 什么是Jekyll ?
2. 使用静态网站生成器的好处
3. 环境搭建
4. 主题


近年来,作为传统动态网站基础架构的替代方案,现代静态网站生成器日渐盛行。在 StaticGen 上有一个关于静态站点生成器的开源目录,2017 年该网站追踪了超过一百个生成器,并见证了这些生成器在这一年的流行趋势。本文整理了 StaticGen 目录中排名前 20 的静态网站生成器,排名顺序依据 Github 上的 Star 数。

技术选型

在决定开始搞静态网站之后,面临的第一个问题就是如何生成静态内容。有现成工具吗?这样的工具符合近期和远期要求吗?如果不符合,有什么技术思路自己开发吗?

带着这样的问题,我迅速Bing到了这个网站,这个网站汇聚了市面上存在的几乎所有开源静态网站生成器。

不出所料,排名第一的是Jekyll,其GitHub上的Star高达22822。Jekyll虽然最流行,不过其主要用于Blog站点生成,我目前主要面向企业CMS,更为重要的是它是Ruby编写的,这个不是我最熟悉的开发平台。

不过StaticGen贴心的给出了语言过滤选项,在.NET语言下,仅出现了pretzel,Wyam,graze,Misakai Baker四个工具。虽然pretzel使用了和Jekyll一样的Liquid模板引擎,适应性可能更广,但是在对这4个工具初步研究后,基本选定了Wyam。他基本可以满足我对静态内容生成器的技术要求:

  • 基于熟悉的语言和平台开发,架构设计考虑了扩展性。这样方便我可以根据需要自行扩展。
  • 使用熟悉和相对使用广泛的模板语言和引擎。方便我制作网站模板(内容输入),并对其他人进行培训。
  • 能够方便的注入元数据。因为CMS可能需要注入更多更复杂的数据。
  • 可以嵌入运行。很多生成器都是命令行工具,但是我可能需要让生成器在后台运行。

1. 什么是Jekyll ?

图片 1

Jekyll

  • Jekyll 是目前非常流行的静态网站生成器(static website generator)。静态网站即只包含HTML, CSS 和 Javascript
Jekyll(raw_text_files, templates)
{
    return Beautiful_web_pages;
} 
  • 不同于WordPress, Ruby on Rails, CakePHP, Flask等这些需要web server的复杂应用程序。Jekyll不依赖于数据库或CMS。所以最适合用来建立个人博客,个人portfolio等等
  • Github Pages即靠Jekyll实现的

1、静态站点生成器 Jekyll

图片 2

Jekyll 是一个简单的免费的Blog生成工具,类似WordPress。但是和WordPress又有很大的不同,原因是jekyll只是一个生成静态网页的工具,不需要数据库支持。但是可以配合第三方服务,例如discuz。最关键的是jekyll可以免费部署在Github上,而且可以绑定自己的域名。

Wyam的介绍

Waym.io官网上的自我介绍基本上把Wyam是什么说的很清楚了,我就简单在这里翻译一下。

Wyam是与众不同的。它不是Jekyll的克隆(并不代表Jekyll有任何问题),它不是设计来生成博客的(虽然也能很好的胜任此任务)。Waym是一个静态内容生成器,可以用于生成网站、文档、电子书和其他更多的内容。由于它的所有东西都是通过很多灵活的模块(你也可以编写自己的模块)串在一起,所以唯一的限制是你的想象力。

在它的特性当中,尤其让我看中的是:

  • 配置文件使用C#脚本写就,这完全是得益于Roslyn的强大
  • 简单直接的元数据使用方式
  • 支持多种模板引擎和语言,尤其直接内置Razor的支持(且Razor的支持是基于ASP.NET MVC 6的源代码的,未来会支持TagHelper) 。当然也有Markdown支持或者扩展自己的模板语言支持。
  • 集成Web Server方便在编写模板的时候进行预览
  • 完全支持Nuget,可以在执行生成的过程中,自动下载依赖的Nuget包
  • 更为重要的,它支持嵌入运行
  • 相对完整清晰的文档

Waym其实借鉴了现有其他静态内容生成器的优点和设计,比如FrontMatter的支持(通过Yaml实现)。虽然它目前还只是0.11,但是功能完成度还是比较高了,并且你也可以直接pull request参与贡献。源代码地址是:

2. 使用静态网站生成器的好处

  • 轻量级网站,响应速度快
  • 网站更安全,无数据库,无动态数据
  • 无需通入过多精力维护

2、Go 编写的静态网站生成器 Hugo

图片 3

Hugo 是 Go 编写的静态网站生成器,速度快,易用,可配置。Hugo 有一个内容和模板目录,把他们渲染到完全的 HTML 网站。Hugo 依赖于 Markdown 文件,元数据字体 。用户可以从任意的目录中运行 Hugo,支持共享主机和其他系统

Wyam的使用

Wyam的用法很简单,直接通过命令行执行,如下所示:

c:MySite>Wyam.exe --preview --watch
    Loading configuration from c:MySiteconfig.wyam.
    Cleaning output directory c:MySite.Output...
    Cleaned output directory.
    Executing 3 pipelines...
        Executing pipeline "Markdown" (1/3) with 5 child module(s)...
        Executed pipeline "Markdown" (1/3) resulting in 0 output document(s).
        Executing pipeline "Razor" (2/3) with 4 child module(s)...
        Executed pipeline "Razor" (2/3) resulting in 2 output document(s).
        Executing pipeline "Resources" (3/3) with 1 child module(s)...
        Executed pipeline "Resources" (3/3) resulting in 21 output document(s).
    Executed 3 pipelines.
    Preview server running on port 5080...
    Watching folder c:MySite.Input...
    Hit any key to exit...  

Wyam的源代码中有个Examples的文件夹,里面有一些例子可以参考。其实,Wyam.io这个网站本身就是用Wyam来生成的,且也有源代码,所以也是一个很好的参考。当然我也做了一个简单的示例,可以通过这里下载:。

3. 环境搭建

本文只说明在Mac上的实现过程

3、静态博客网站生成器 Hexo

图片 4

Hexo 是一个基于nodejs 的静态博客网站生成器,作者是来自台湾的 Tommy Chen。

特点:

  • 不可思议的快速 ─ 只要一眨眼静态文件即生成完成

  • 支持 Markdown

  • 仅需一道指令即可部署到 GitHub Pages 和 Heroku

  • 已移植 Octopress 插件

  • 高扩展性、自订性

  • 兼容于 Windows, Mac & Linux

第一步 安装 Jekyll
  • 首先打开terminal,输入
jason: ~ $ gem install jekyll
  • 如果提示错误,一般是读写权限问题,可尝试sudo,然后根据提示输入密码
jason: ~ $ sudo gem install jekyll
  • 输入jekyll -v,确认安装成功。若成功会提示版本信息,例如
jekyll 2.5.3

4、基于 Git 制作电子书 GitBook

GitBook 是一个基于 Node.js 的命令行工具,可使用 Github/Git 和 Markdown 来制作精美的电子书,GitBook 并非关于 Git 的教程。

图片 5

使用GitBook生成的电子书

GitBook支持输出多种文档格式:

  • 静态站点:GitBook默认输出该种格式,生成的静态站点可直接托管搭载Github Pages服务上;

  • PDF:需要安装gitbook-pdf依赖;

  • eBook:需要安装ebook-convert;

  • 单HTML网页:支持将内容输出为单页的HTML,不过一般用在将电子书格式转换为PDF或eBook的中间过程;

  • JSON:一般用于电子书的调试或元数据提取。

第二步 创建 Jekyll 项目
  • 首先cd到你想创建项目的目录下,比如我想在桌面创建
jason: ~ $ cd Desktop
  • 例如我想创建一个项目,叫Jason_Blog
jason: ~/Desktop $ jekyll new Jason_Blog
  • 成功会收到提示信息
New jekyll site installed in /Users/boyuan/Desktop/Jason_Blog.
  • Jason_Blog文件夹内容如下
![](https://upload-images.jianshu.io/upload_images/424375-33f225c3ee0ef7c7.png)

Jason_Blog
  • _config.yml 是配置文件,最为重要,包含了所有配置信息

  • _includes 文件夹包含了将被反复利用的文件,比如footer,header

  • _layouts 文件夹包含了主页面的排版布局

  • _posts 文件夹将包含所有的日志文件,Markdown格式

  • Jekyll为我们提供了一篇默认博客,我们可以通过运行下面的命令,然后再本地查看

boyuan: ~/Desktop $ cd Jason_Blog_2/
boyuan: ~/Desktop/Jason_Blog $ jekyll serve

注意:此时Jason_Blog文件夹中会增加_site文件夹,包含了生成网站的所有结构。同时,原来文件夹中开头没有下划线的文件夹会被复制到_site文件夹中,比如CSS文件夹

  • 停止本地运行,敲击CTR+C

5、ReactJS 静态网站生成器 Gatsby 

图片 6

Gatsby 可以使用 React.js 把纯文本转换到动态博客或者网站上。

特点:

  • 无需重载页面转换

  • 热重载编辑

  • 为构建静态网站创建 React.js 组件模型和生态系统

  • 直观的基于目录的 URLs

  • 支持 "Starters"

第三步 更改配置文件_config.yml

详细内容参考官网 - Jekyll configuration
想了解更多YAML文件 - YAML

  • 打开_config.yml文件,可以看到一些基础设置

  • 更改URL显示
    原始URL: http://127.0.0.1:4000/jekyll/update/2015/06/22/welcome-to-jekyll.html

# Build settings
markdown: kramdown
permalink: pretty

URL变更为:http://127.0.0.1:4000/jekyll/update/2015/06/22/welcome-to-jekyll/

# Build settings
markdown: kramdown
permalink: /:title

URL变更为:http://127.0.0.1:4000/welcome-to-jekyll/

6、Vue.js 后端渲染开源库 Nuxt.js

图片 7

Nuxt.js 是一个通过 Vue 用于服务端渲染的简单框架,灵感来自 Next.js。 Nuxt 基于 ES2015,这使得代码有着更愉快,更整洁的阅读体验。它不使用任何转换器,并取决于 Core V8 实现的功能。

TAG标签:
版权声明:本文由金沙澳门官网4166发布于中国史,转载请注明出处:Pages和Jekyll搭建个人博客,最热开源静态网站生成