全媒体网站的建设,网站建设评审意见,湖南手机版建站系统哪个好,wordpress esc html e本文将介绍如何使用Jekyll搭建个人博客#xff0c;并部署在GitHub Pages上。
1.简介
Jekyll是一个强大的静态网站生成器#xff0c;可以将Markdown、HTML、Liquid模板等文件转换为静态网站。Jekyll支持模板引擎、主题、插件、集成GitHub Pages等特性#xff0c;可以帮助用…本文将介绍如何使用Jekyll搭建个人博客并部署在GitHub Pages上。
1.简介
Jekyll是一个强大的静态网站生成器可以将Markdown、HTML、Liquid模板等文件转换为静态网站。Jekyll支持模板引擎、主题、插件、集成GitHub Pages等特性可以帮助用户快速搭建和发布静态网站。
官方网站https://jekyllrb.com/
2.安装
Jekyll支持大多数操作系统依赖如下
Ruby 2.5.0RubyGemsGCC和Make
下面介绍在Windows系统上的安装步骤其他操作系统见官方文档安装指引https://jekyllrb.com/docs/installation/。
2.1 安装Ruby
在Windows上安装Ruby最简单的方式是RubyInstaller。
下载地址https://rubyinstaller.org/downloads/选择 RubyDevkit 版本使用默认选项安装即可。
在安装向导最后一步勾选“运行ridk install” 在弹出的命令行窗口中选择 “MSYS2 and MINGW development tool chain” 检查是否安装成功
ruby -v
gem -v2.2 安装Jekyll
打开一个新的CMD窗口执行以下命令安装Jekyll和Bundler
gem install jekyll bundler检查是否安装成功
jekyll -v3.Jekyll基础
3.1 Jekyll教程
在正式开始搭建个人博客之前建议先按照Jekyll官方教程Step by Step Tutorial搭建一个Demo网站了解Liquid模板变量、标签、过滤器、前页(front matter)、布局(layout)等基本概念并学会使用jekyll命令。
Demo网站https://zzy979.github.io/jekyll-tutorial/ 3.2 Jekyll目录结构
Jekyll项目的典型目录结构如下
mysite/_data/foo.yml_includes/foo.html_layouts/default.htmlpost.html_posts/2018-08-20-bananas.md2018-08-21-apples.md_sass/main.scss_site/assets/css/images/js/_config.ymlindex.htmlGemfile作为博客作者主要关注以下文件/目录即可其他目录用于存放主题样式文件
文件/目录描述_config.yml配置文件_posts文章内容文件命名格式为YYYY-MM-DD-TITLE.EXTENSION_siteJekyll生成的网站文件assets/images文章中的图片文件index.html网站主页
详见官方文档Directory Structure。
3.3 主题
主题(theme)提供了网站页面的布局和样式详见官方文档Themes。
可以在 http://jekyllthemes.org/ 选择自己喜欢的主题并在线预览。我选择的主题是Chirpy该主题提供了分类(category)、标签(tag)、目录、语法高亮、数学公式、搜索文章、评论系统等特性能够满足博客网站的绝大部分需求。
在线Demo 使用教程https://chirpy.cotes.page/项目主页https://github.com/cotes2020/jekyll-theme-chirpy/
4.搭建个人博客
下面正式开始搭建个人博客网站。参考Chirpy - Getting Started。
4.1 创建网站
打开chirpy-starter仓库点击按钮 “Use this template” → “Create a new repository”。 将新仓库命名为username.github.io其中username是你的GitHub用户名如果包含大写字母需要转换为小写。 注如果不需要自定义主题样式则推荐使用这种方式因为容易升级并且能离无关文件使你能够专注于文章内容写作。
4.2 安装依赖
使用git clone将新创建的仓库克隆到本地并在项目根目录下执行
bundle4.3 配置
根据需要更新_config.yml中的变量例如url、avatar、timezone、lang等。
4.4 启动本地服务器
要在本地预览网站内容执行
bundle exec jekyll serve在浏览器访问 http://127.0.0.1:4000/。
4.5 部署
GitHub Pages是一个通过GitHub托管和发布网页的服务官方文档https://docs.github.com/en/pages。本文使用GitHub Pages部署个人博客网站。
每个GitHub用户可以创建一个用户级网站仓库名为username.github.io发布地址为 https://username.github.io。GitHub Pages支持自定义域名参考文档About custom domains and GitHub Pages。
在部署之前检查_config.yml中的url是否正确配置为上述发布地址或者自定义域名。 注意一般不需要配置baseurl。如果配置了则文章中必须使用relative_url过滤器生成正确的URL否则会导致404错误。参考Jekyll’s site.url and baseurl。 之后在GitHub上打开仓库设置点击左侧导航栏 “Pages”在 “Build and deployment” - “Source” 下拉列表选择 “GitHub Actions”。 提交本地修改并推送至远程仓库将会触发Actions工作流。在仓库的Actions标签页将会看到 “Build and Deploy” 工作流正在运行。构建成功后即可通过配置的URL访问自己的博客网站。
https://zzy979.github.io 4.6 评论系统
Jekyll生成的博客网站是静态的没有后端和数据库因此本身无法实现评论功能。然而可以使用disqus、utterances和giscus等评论系统来实现评论功能。
本文使用giscus它是利用GitHub Discussions实现的评论系统并且是开源、免费的。开启评论系统的步骤如下。
1安装giscus app。
2在仓库设置页面 “Features” 一节中勾选 “Discussions”开启仓库的GitHub Discussions功能。 3在仓库的Discussions标签页点击 “Categories” 旁边的编辑按钮自定义用于博客评论的类别名称例如 “Comments”。 4打开 https://giscus.app/在页面上填写以下配置
Repository: username/username.github.ioPage - Discussions Mapping保持默认值 “Discussion title contains page pathname” 即可URL为https://username.github.io/posts/title的文章将映射到标题为/posts/title的Discussion即使用URL的pathname部分作为Discussion标题Discussion Category选择上一步创建的类别名称例如 “Comments”
之后找到 “Enable giscus” 一节将自动生成的配置填写到_config.yml中comments.giscus的对应选项。 comments:active: giscusgiscus:repo: ZZy979/zzy979.github.iorepo_id: R_kgDOKOkhRAcategory: Commentscategory_id: DIC_kwDOKOkhRM4CZCpNmapping: pathname5重启Jekyll服务器在文章底部将会看到评论区使用GitHub账号登录即可发表评论。 4.7 写文章
至此博客网站已经搭建完成可以开始文章写作了。
要写一篇新的文章在_posts目录下创建一个文件命名格式为YYYY-MM-DD-TITLE.md例如2023-09-03-hello-world.mdTITLE部分将作为文章的URL。
详细配置和语法参考Chirpy文档
Writing a New PostText and Typography
Front Matter
你需要在文章顶部填写Front Matter信息
---
title: TITLE
date: YYYY-MM-DD HH:MM:SS /-TTTT
categories: [TOP_CATEGORIE, SUB_CATEGORIE]
tags: [TAG]
---其中title将展示为文章标题不必与文件名的TITLE部分相同date将展示为文章创建时间时区写0800。
之后是正文内容。
分类和标签
categories是文章的分类支持至多两级分类。tags是文章的标签可以有任意多个。例如
---
categories: [Animal, Insect]
tags: [bee]
---目录
默认情况下目录将会自动生成并展示在文章右侧。如果想全局关闭则将_config.yml中的toc变量设置为false。如果想对一篇特定的文章关闭则在Front Matter中添加
---
toc: false
---注意Chirpy生成的目录只显示二级标题(##)和三级标题(###)一级标题(#)不会显示在目录中。参考issue #491。
