基于Jekyll创建免费的静态博客站点

2023-11-03

完整版请参考:

这篇算是交作业了。

写在前面的话

无意中在知乎看到了一个关于支持Markdown的博客平台的回答,结识了Jekyll。正好想更换博客平台,就查了些资料。

在建站时参考了Jekyll搭建个人博客如何搭建个人网站,又无意中看到了刚创建就被遗弃了的http://zhaoxin.github.io/。让我惊讶的是像下面所示的这样寥寥几个文件,居然就可以在浏览时显示出首页、目录、关于和文章这样完整的内容,并且如果想添加文章也只需要在_posts目录下放置Markdown文档即可。

│  about.md
│  index.md
│  _config.yml
│
└─_posts
        2017-02-04-welcome-to-jekyll.markdown

这种简约的结构和操作的便捷让我感到震惊,甚至还困惑了些许时间来思考它的运行原理。后来才明白是因为GitHub Pages原生支持Jekyll,所以并不需要像前面两篇文档所讲的那样要花费力气搭建本地服务器。

Jekyll

Jekyll是基于Ruby的静态网站生成器,在很多介绍文档中都是从安装Ruby开始的,但是这是没有必要的

Jekyll有两种用法:

  • 其一是运行在本地,在本地存放Markdown文档,通过运行build命令生成纯静态站点后,把生成出来的文件上传到服务器,实现网站的功能;
  • 其二则是让Jekyll运行在服务器上,所有相关文档都存放在服务器,不需要手动执行build命令,也不需要上传生成的东西,Jekyll会在有人浏览时自动解析出页面。

显然对于后者,本地是不需要装Ruby和Jekyll的。

GitHub和Coding

GitHub和Coding都有支持Jekyll的Pages服务,它们在站点中起到了托管代码以及运行Jekyll的功能。

前者是大名鼎鼎的国际大站,但国内局域网访问速度不佳;后者是国内厂商,据说背后有腾讯撑腰,目前看使用便捷程度和访问速度都不错。

我选择了后者,还有一个考量是喜欢coding.me的域名。

Coding的注册和Pages服务的开通都很简单,具体的可以参见创建静态 Coding Pages – CODING 帮助中心

Git

Git只是一个版本管理工具,类似SVN、SOS之类的,它所起到的作用是下载别人开源的项目、上传和管理自己的项目。

对于创建静态博客站点这一需求来说,只装Git就足够了。当然GitHub和Coding也支持在线创建文本文件(但不能创建文件夹,或者是我没找到),但是不够方便。常用的指令有:

git clone https://github.com/xxxx/yyyy			# 下载服务器上的项目到本地
git add *						# 标记待添加的文件
git rm xxxx						# 标记待删除的文件
git commit -m "blablabla"				# 执行标记的修改
git push						# 将本地数据同步到服务器

站在巨人的肩膀上

如果只想建立一个看得过去的博客站点,而专注于创造内容上,则完全没有必要从零开始。在建立站点时可以先clone一个页面设计符合自己审美的项目,然后在其之上修改。

我参考了知乎上的这个问答,并选择了黄玄的方案。

将他的项目clone到本地后所看到的目录结构是这样子的(移除了与Jekyll无关的内容):

│  .gitignore					# 告诉Git哪些文件是不需要同步到服务器的
│  404.html					# 出现404错误时展示的页面
│  about.html					# About页面
│  feed.xml					# RSS订阅页面
│  index.html					# 默认展示页面(首页)
│  offline.html					# 网络中断时展示的页面
│  README.md					# 项目介绍
│  sw.js					# 提供预加载功能的脚本
│  tags.html					# 标签分类页面
│  _config.yml					# 站点配置文件
│  
├─css
│      .DS_Store
│      bootstrap.css
│      ...
│      
├─fonts
│      glyphicons-halflings-regular.eot
│      ...
│      
├─img
│  │  home-bg.jpg
│  │  avatar-hux.jpg
│  │  ...
│  │  
│  └─in-post
│      │  post-c-u-ali-079717.png
│      │  ...
│      │  
│      ├─post-alitrip-pd
│      │      post-alitrip-pd.013.jpg
│      │      ...
│      │      
│      └─...
│              
├─js
│      animatescroll.min.js
│      bootstrap.js
│      ...
│      
├─less
│      .DS_Store
│      hux-blog.less
│      mixins.less
│      ...
│          
├─_includes
│  │  footer.html
│  │  head.html
│  │  nav.html
│  │  
│  └─about
│          en.md
│          zh.md
│              
├─_layouts
│      default.html
│      page.html
│      post.html
│      
└─_posts
        2014-01-29-hello-2015.markdown
        2014-08-16-miui6.markdown
        ...

不难看出,除了css/less/font/js/img之类的网站必备目录外,还有几个以下划线开头的目录,它们都是Jekyll默认的功能目录:

_includes: 调用include时搜索的目录
_layouts: 页面布局
_posts: 博客文章存放目录,其中的文件必须是 YYYY-MM-DD-xxxxxxxx.md 格式的文件名

而根目录下的文件中最重要的是_config.yml,它提供了整个站点的参数配置。

在浏览首页时,大致的解析路线是

0. 载入站点信息:读取配置文件、遍历_posts下的内容等;
1. 解析index.html;
2. 根据index.html中指向的模板,解析_layouts/page.html;
3. 根据page.html中的include指令插入_includes/head.html等;
4. 在解析过程中根据Liquid模板语言自动插入站点信息;
5. 根据解析的HTML文档,由浏览器请求静态资源(css、js、img等)

关于图片文件的整理,我采取的方法略有不同。首先,我把题图放在了./img/bg-post下面,具体的图片文件名不再加bg等前缀;然后,我把文章插图放在了./img/in-post/-YYYY-MM-DD-xxxxxxxx/下面,具体的文件名也不再加其他前缀。文件插图目录前面之所以有一个-是因为这样在文章中引用时可以直接采用![](/img/in-post/\{\{page.id | replace:'/','-'\}\}/xxx.png)的统一语句。

总结

在搭建这个站点的过程中,我只安装了Git这一个软件,申请了Coding.net的一个帐号,除此之外无需任何其他的工具。

至此Powered by Jekyll 、Themed by Hux 、Hosted by Coding Pages 的博客站点建立完毕,万事俱备矣!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

基于Jekyll创建免费的静态博客站点 的相关文章

  • 软件测试面试题及答案,2021最强版!

    1 你的测试职业发展是什么 测试经验越多 测试能力越高 所以我的职业发展是需要时间积累的 一步步向着高级测试工程师奔去 而且我也有初步的职业规划 前3年积累测试经验 按如何做好测试工程师的要点去要求自己 不断更新自己改正自己 做好测试任务

随机推荐

  • JAVA1

    文章目录 计算机的硬件与软件 DOS命令 计算机的硬件与软件 DOS命令
  • 【硬创邦】跟hoowa学做智能路由(九):时区/服务/SSH

    在第三部分Area 3部分 路由器的基础功能已经讲了很多 这些部分组成了一款可用的路由器 本章将继续介绍余下的一些常用系统配置 系统信息和时区 我们大家知道电脑重新开机后时间都保留着 那是因为我们的主板上有电池和时间芯片 一般该芯片是达拉斯
  • 【Shell牛客刷题系列】SHELL29 netstat练习1-查看各个状态的连接数

    该系列是基于牛客Shell题库 针对具体题目进行查漏补缺 学习相应的命令 刷题链接 牛客题霸 Shell篇 该系列文章都放到专栏下 专栏链接为 专栏 Shell 欢迎关注专栏 本文知识预告 本文复习了sort awk uniq grep等命
  • css 单行文字多余部分显示省略号

    css 单行文字多余部分显示省略号 如下图 当文字太多超出一行时不好看了 设置一下只显示一行 多余部分显示省略号 overflow hidden text overflow ellipsis 禁止换行显示 white space nowra
  • Docker安装Kafka教程

    Docker安装Kafka教程 本教程将指导您如何使用Docker安装和运行Kafka app tier 网络名称 driver 网络类型为bridge docker network create app tier driver bridg
  • 记一位大三计算机同学的2021春招

    知乎传送门 楚留香 你的2022届暑期实习怎么样了 摘要 均为算法岗 MSRA 商汤研究院 百度商业研究院 阿里支付宝算法 腾讯安全联邦学习 美团某toB团队算法 字节AI Lab CV算法 腾讯AI Lab 研究
  • 图片压缩网站-免费压缩网站

    https tinypng com 图片压缩网站 重点是免费 免费 免费 重要的事情说3遍
  • Walking Around the Country 【OpenJ_POJ - C17E】【欧拉通路】

    题目链接 题意 有N个点 M条边 给出 u v w 表示u到v要至少经过w次 并且整张图是完全连通图 有向图 问的是最少的次数走完所有大额M条边 思路 由于 所以我们完全可以当作只有条边 我们要跑完这条边 所以既然是跑完所有边的做法 那么不
  • 使用c语言函数指针和结构体实现动态绑定(面向对象写法)

    概述 无意中在某个地方看到这样的写法 为此做下笔记 C语言面向对象写法 有点像C 味道 科普一下函数指针知识 其实函数指针可以类比一般的变量 如下所示 int a lt gt void haha void int p lt gt void
  • 服务器机房维护彩页宣传,服务器机柜宣传彩页-090317.pdf

    服务器机柜宣传彩页 090317 Integrated Cabinet Solutions for Business Critical ConTinuityTM Contents 01 Knurr 02 F 03 F 04 M 05 M 0
  • 博客笔记大汇总

    关于我的博客大汇总整理 目录介绍 01 Java博客大汇总 02 Android博客大汇总 03 开源项目推荐 04 bug分析大汇总 05 技术问题整理 06 算法 07 Python学习笔记 08 Go学习笔记 09 生活博客汇总 10
  • MyISAM 和 InnoDB 的区别

    对比项 MyISAM InnoDB 主外键 不支持 支持 事务 不支持 支持 锁 表锁 操作一条记录也会锁住整个表 不适合高并发 行锁 操作只锁一行 不影响其他行 适合高并发 缓存 只缓存索引 不缓存数据 缓存索引和数据 对内存要求高 表空
  • 个人小程序借助免费插件实现智能语音问答功能

    目标 个人小程序实现智能语音问答功能 实现 小程序免费插件chatbot 微信智能开发平台 微信同声传译插件 免费 借助tenserflow js的小程序插件 tenserflow免费训练库 代办 示例 智能对话小程序
  • angular:富文本编辑器推荐ngx-quill

    npm网址ngx quill npm 官方网址Quill Your powerful rich text editor 使用 npm install ngx quill npm i save dev types quill 1 3 10 2
  • Qt导入ui文件的方法

    1 首先对项目Test 0右键点击 添加现有文件 选择要添加的新的Design 5 ui文件 导入新的ui文件 2 打开Test 0 pro文件 会有以下形式的代码 确保其中有导入的ui文件Design 5 ui FORMS a ui b
  • Spring ioc容器创建过程(1)BeanFactory初始化

    文章目录 一 ApplicationContext 二 常见的ApplicationContext 三 ioc容器的初始化 1 AbstractApplicationContext prepareRefresh 2 AbstractAppl
  • PYTHON学习:numpy初探

    1 size itemsize size 矩阵元素数目 itemsize 矩阵每个元素的字节数 2 non zero 返回非0元素的索引 3 mean 返回矩阵所有元素的平均值 4 nan np nan值np中的空值 空值和isNone不是
  • DOS命令(windows)

    DOS命令 windows 目录 1 打开命令提示符 2 切换至根 3 当前路径 4 切换至上级路径 5 查看当前目录 6 查看文件内容 7 删除文件 8 进入长文件夹名时缩写 9 复制文件 10 移动文件 1 打开命令提示符 命令 win
  • 【opencv】Python-OpenCV自学自用笔记-上篇

    前言 本文是我在学习opencv时记录的笔记 内容较为简洁 会记录从入门到做项目这段时间的内容 最终目的是完成我的毕业设计 欢迎大家给予批评指正 本篇为第一本书 Python OpenCV从入门到精通 的笔记 前两章为安装 略过 第六章到第
  • 基于Jekyll创建免费的静态博客站点

    完整版请参考 https mazhaoxin github io 2018 08 04 Create Free Static Blog Base On Jekyll http 483v7j coding pages com 2018 08