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

个人免费博客花式搭建指南

无论是用 NodeJS 编写的 Hexo,还是用 Ruby 编写的 Jekyll,甚至是用 Go 编写的 Hugo,都能轻易为你带来一个支持自定义模板、功能以及 Markdown 语法的个人网站或者个人博客...实现与评价   这里就以笔者的个人博客站点为例解释一下如何使用静态生成器来搭建博客。...也就是说,如果你想使用某个 Jekyll 主题,唯一的方式就是克隆这个 Jekyll 主题的项目,并在此基础上开始你的博客。...在实际的使用过程中,笔者根据自己的需求也在 H2O 主题上做出了一定的功能修改,并开源为 jekyll-them-H2O-ac。...Github 篇 Netlify 篇 Cloudflare 篇 FTP 篇 VPS 篇 Online Editor 篇   本站对于以上几种部署方式也有不同的节点对应,如下所示: 托管方 支持访问域名

1.9K40

Understand folder and path configuration in Jekyll

Jekyll 的默认文件夹结构 Jekyll 的文件夹结构主要分为以下几类: 特殊文件夹: _posts:存放博客文章的默认文件夹。...Jekyll 会自动将此目录中的 Markdown 或 HTML 文件处理为文章内容,并根据配置生成静态页面。 _layouts:存放布局文件。...Jekyll 对 _posts 文件夹的特殊处理 _posts 文件夹是 Jekyll 中的一个特殊目录,用于存放博客文章。...例如,以下是一个典型的 _posts 文件: --- layout: post title: "我的第一篇文章" date: 2024-08-27 categories: blog --- 这是我的第一篇博客文章...通过正确配置 _config.yml 和使用 Jekyll 的集合功能,可以实现更多自定义需求,为站点提供更大的灵活性和控制力。

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

    开发工具总结(14)之Jekyll制作文档并发布到GitHub

    版权声明:本文为博主原创文章,未经博主允许不得转载。...---- 在线文档制作工具系列篇 ↓: 第一篇:GitBook制作文档并发布到GitHub 第二篇:Hexo制作文档并发布到GitHub 第三篇:Jekyll制作文档并发布到GitHub...第四篇:Vuepress制作文档并发布到GitHub ---- Jekyll做博客有点复杂,如果说小白,不推荐轻易上手,出现的问题也是很多的,这里仅作为学习和交流。...第三步:在_posts文件夹中放入自己写好的博客,文件名必须是日期-标题名,例如:2019-01-01-我的第一篇博客。 第四步:上传博客到Github中即可访问自己的博客。...学习如何使用 drafts. _includes 你可以加载这些包含部分到你的布局或者文章中以方便重用。

    1.1K30

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

    博客支持。支持自定义地址、博客分类、页面、文章以及自定义的布局设计。...//使用gem安装Jekyll gem install jekyll //使用Jekyll创建你的博客站点 jekyll new blog #创建你的站点 //开启Jekyll服务 //进入blog...你可以选择自己开发一套,也可以直接选择已有的,然后自己再更改css布局形成自己的。jekyll主题在这里,你可以选择到你自己喜欢的主题。...添加两条记录,@和www的主机记录,记录类型为CNAME类型,CNAME表示别名记录,该记录可以将多个名字映射到同一台计算机。 记录值请写username.github.io....一般都是放在博客的一篇文章的最后,当然这个排版就看你自己怎么设计的了。我这里就贴一下我集成disqus的代码。大家估计都类似。

    30310

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

    博客支持。支持自定义地址、博客分类、页面、文章以及自定义的布局设计。...//使用gem安装Jekyll gem install jekyll //使用Jekyll创建你的博客站点 jekyll new blog #创建你的站点 //开启Jekyll服务 //进入blog...你可以选择自己开发一套,也可以直接选择已有的,然后自己再更改css布局形成自己的。jekyll主题在这里,你可以选择到你自己喜欢的主题。...添加两条记录,@和www的主机记录,记录类型为CNAME类型,CNAME表示别名记录,该记录可以将多个名字映射到同一台计算机。 记录值请写username.github.io....一般都是放在博客的一篇文章的最后,当然这个排版就看你自己怎么设计的了。我这里就贴一下我集成disqus的代码。大家估计都类似。

    1.3K20

    为带有多种语言的 Jekyll 博客添加多语言选择

    为带有多种语言的 Jekyll 博客添加多语言选择 发布于 2018-03-06 06:47 更新于 2018...是时候做一个通用的布局来实现多语言博客了! 本文将为大家提供一个我编写好的多语言博客选择器(MIT License)。 ---- 先来看看效果。...引入页面配置元数据 毕竟博客有多篇,终归要引入配置的。现在我们为这篇文章配置两种语言。(考虑到更通用的情况,我将一种语言定义为一种 version。).../multi-language-in-jekyll-blog.html 这个配置是要放到博客 markdown 的元数据头里的。...制作布局文件 为了更加通用,我在 _include 文件夹中新建了 post-version-selector.html 的布局文件,然后在每一个需要引入语言选择器的地方加上 {% include post-version-selector.html

    1.6K10

    免费构建自己的博客-Jekyll进阶

    Jekyll 也可以运行在 GitHub Page 上,也就是说,你可以使用 GitHub 的服务来搭建你的项目页面、博客或者网站,而且是完全免费的。...模板 模板是指将一个网页分割为多个部分,存放在不同的文件中,以实现尽可能复用代码的目的。...若要使用 Jekyll 布局,就必须了解 HTML 基本标签的用户,读者可以通过右侧链接进行学习:http://www.w3school.com.cn/html/index.asp 。...代码高亮 本站点模板默认开启了代码高亮,编写博客时只需要使用 markdown 的代码块方法编写即可。...教程链接 免费构建自己的博客-开发环境安装 免费构建自己的博客-编写第一篇博客 免费构建自己的博客-管理博客代码与发布到Github 免费构建自己的博客-Jekyll进阶 免费构建自己的博客-进一步丰富博客

    98600

    【Jekyll搭建GITHUB个人博客】安装Ruby 环境、包管理器 RubyGems、Jekyll与错误解决

    转载请注明出处:http://blog.csdn.net/qq_26525215 本文源自【大学之旅_谙忆的博客】 今天在博客专家群看到CSDN韩俊强发表了一篇用Jekyll搭建个人博客的文章...介绍下Jekyll Jekyll 是一个简单的博客形态的静态站点生产机器。...Jekyll 也可以运行在 GitHub Page 上,也就是说,你可以使用 GitHub 的服务来搭建你的项目页面、博客或者网站,而且是完全免费的。...使用 Jekyll 搭建博客之前需要安装环境 Git 环境、Ruby 环境、包管理器 RubyGems、 本机已安装好了Git,就不在演示了,git的话,搜索一下,有很多教程的。...原文件为: ? 修改为: ? - D:/Ruby23 - D:/Ruby23 注意不要写成反斜杠!是/ 这两个目录分别为你Ruby和devkit的安装目录。

    58110

    快速搭建个人博客

    看看看博客的主页样式: image.png 在手机上的布局: image.png 废话不多说了,开始进入正文。...快速开始 从注册一个Github账号开始 我采用的搭建博客的方式是使用 GitHub Pages + jekyll 的方式。...--- layout: post # 使用的布局(不需要改) title: My First Post # 标题 subtitle: Hello World...所以当你只放一篇文章的时候是不会出现标签的。 image.png 建站的初期,博客比较少,若你想直接在首页生成比较多的标签。...注册的步骤就不在介绍了 解析域名 注册好域名后,需要将域名解析到你的博客上 管理控制台 → 域名与网站(万网) → 域名 选择你注册好的域名,点击解析 添加解析 分别添加两个A 记录类型, 一个主机记录为

    2K21

    合并 Jekyll 多种类型的页面

    正好近期学着写博客,于是想把一些胡思乱想的事情写在自己的站点上。 阅读本文,将学到如何用 Jekyll 做多种类型的页面,并在首页的列表中将这些不同种类的页面合并按日期排序。...---- 制作除博客之外的新页面类型 Jekyll 不止支持博客(post)页面类型,也可以支持自定义页面类型。当然博客是它唯一的内建类型(hard-coded type)。...第一步:在 _config.yml 文件中添加自定义页面类型集合 collections: article: output: true 其中,article 是我为自定义类型取的名称。...post 类型的页面布局。...可以参考我的 posts 布局文件和 article 布局文件,两者几乎一样都是可以的,只是 article 遍历的时候使用 site.article。

    73720

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

    它的方便之处在于支持多种文本标记语言:Markdown,Textile,HTML,然后 Jekyll 就会帮你加入你选择主题的样式的布局中。最终生成你自己的静态博客网站。...以上两个步骤操作完成后,在 CMD 窗口执行如下命令安装Jekyll: gem install jekyll #安装jekyll jekyll -v #查看jekyll版本号 2.本地搭建博客...例如: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

    2.2K30

    Mifa Design:一个服务于 Markdown 的设计体系

    并不是为了和 Ant Design 齐名,只是用于为我的网站、博客、APP、小程序等等,提供一个一致化的 UI 及阅读体验。 ?...Mifa 微信公号编辑器 打开 md.phodal.com 即可使用 缘由 过去,在讨论程序员影响力的时候,我们讨论了 Avatar、ID 一致性带来的影响。...设计系统 因为,他们解决的是同一个问题,一致性。Design System 要解决的是一定规模公司中的 UI 设计问题,Mifa Design 则是为了提供一致化的阅读体验。 ?...对于一篇文章(Markdown)来说,需要个性化的东西有:标题、引用、段落、列表、表格、代码、链接。而这已经基本上包含了一个基础的 CSS 框架,所需要的几个重要的基本要素。...模板:Mifa Jekyll 主题及 Markdown 编辑器 模板,顾名思义就是整合前面的元素,构建整体的布局。 诸如一个博客包含了 header、footer 及博客本身的内部: ?

    1.2K60

    免费构建自己的博客-编写第一篇博客

    本节,将开始编写第一篇属于自己的博客。 先别着急写 首先可以先试试下载本站的源码,部署一下。...其实存在国内加速地址:https://gitee.com/yks/Newbe.Docs 启动博客 右键点击run.cmd,点击”使用管理员身份运行”。...# 存放局部视图,将可复用的组件存放于此 ├─_layouts # 存放布局文件,用于对博客的大体页面结构进行控制 ├─_plugins # jekyll插件 └─_...posts # 存放博客文章 添加博文 使用资源管理器,进入src文件夹。...教程链接 免费构建自己的博客-开发环境安装 免费构建自己的博客-编写第一篇博客 免费构建自己的博客-管理博客代码与发布到Github 免费构建自己的博客-Jekyll进阶 免费构建自己的博客-进一步丰富博客

    49000

    如何搭建免费博客

    随着github的出现,这样问题出现了改观,使用gitbub提供的github pages功能可以提供一个独立的站点供我们使用。结合相关的域名配置,我们就可以很方便的搭建属于自己的博客平台。...pages就是为也解决这个问题而出现,允许开发者自定义一个展示页面,来替代原有的代码列表。...到这里,不禁有一个疑问,gh-Pages虽然给了一个可以展示html平台,写博客如果全部都写html,那我们还要精力去调整样式和布局的问题.再者博客也要有评论功能,这两个问题如何解决?...jekyll 模板 jekyll 是基于ruby来编写的一个博客模板生成工具,也就是说我们可以根据相关的规则来生成对应的html文件,当然这份工作github也能帮你去做。...详细介绍参见jekyll官方文档。 jekyll安装 jekyll的安装可以参见 windows安装Jekyll linux和MacOS安装Jekyll jekyll使用 1.

    1.1K40

    Jekyll 文章侧边索引导航

    如果你使用带有 markdownlint 插件的编辑器编辑文章时,可能会有一堆告警。当然,如果不想折腾的人,这种方法不失为一种最简单方便的解决方案。...布局   从目标一来看,其实在大部分的静态博客主题中都是有这样的功能的(PS:可能 Jekyll 是个例外,原生只支持静态目录)。...这里我们想要实践的是在未使用 Bootstrap 框架的 Jekyll 主题中增加目标一的功能,因此这两个例子的做法都不是很合适。...Table 标签作为表格布局标签,应该专注于展示表格数据,而非为整个页面布局操心。于是,Div 布局开始流行起来。Div 层的概念和布局的含义完全吻合,也容易理解。...Flex 布局的出现为 Div 布局提出了改善,使得页面布局不再被浮动元素和 Div 层浮动时内容大小为零所困恼。

    1.6K30

    利用 GitHub Pages 快速搭建个人博客前言快速开始写文章自定义域名进阶利用GithHub Desktop管理GitHub仓库修改个人介绍常见问题其他Star补充最后要说个事情

    看看看博客的主页样式: ? 在手机上的布局: ? 废话不多说了,开始进入正文。...快速开始 从注册一个Github账号开始 我采用的搭建博客的方式是使用 GitHub Pages + jekyll 的方式。...--- layout: post # 使用的布局(不需要改) title: My First Post # 标题 subtitle...所以当你只放一篇文章的时候是不会出现标签的。 ? 建站的初期,博客比较少,若你想直接在首页生成比较多的标签。...添加解析 分别添加两个A 记录类型, 一个主机记录为 www,代表可以解析 www.qiubaiying.top的域名 另一个为 @, 代表 qiubaiying.top 记录值就是我们博客的IP地址,

    4.1K110

    个人免费博客花式搭建指南 FTP 篇

    这样一来,使用起来与普通的静态空间毫无差异,可以上传静态网页搭建博客。...这三款软件笔者分别在三个平台都使用过,总体上感觉都不错。本地目录和远程目录都是左右式布局,直接拖拽就可以完成上传下载,操作简单便捷。...运行流水线   如下图所示,可以看到两个动作添加完毕,点击右上角 Run pipeline 按钮开始执行流水线。   从下图可以看到环境准备和 Jekyll 编译动作正在执行。   ...有了自动部署的好处就是,可以更加专注于博客内容本身,即使是在不常用的机器上编写再推送到 Github,也不需要担心本地没有环境编译 Jekyll 以及用 FTP 客户端配置 FTP 信息和上传静态页面。...(采用 CC BY-NC-SA 4.0 许可协议进行授权) 本文标题:《 个人免费博客花式搭建指南 FTP 篇 》 本文链接:https://lisz.me/tech/webmaster/start-blog-ftp.html

    3.3K20

    踩坑记录丨记Jekyll + Github Pages搭建个人博客时遇到的各种问题

    CSDN@AXYZdong,CSDN首发,AXYZdong原创 唯一博客更新的地址为: AXYZdong的博客 B站主页为:AXYZdong的个人主页 文章目录 踩坑之一:Windows下搭建失败...从头说起:为什么想起来搭建个人博客? 其实这个想法自己很久之前就有了,04-08那天16:34的那篇文章算是导火索,因为最近一直再用Obsidian,然后找一些有关文档,发现了这一篇博客。...▲ Bend Blog 的个人主页 准备搭建:前期准备 其实在准备搭建之前,我还花了一点时间找 Jekyll主题,最终还是选了 这个主题。它里面也有相关使用介绍。...▲ 主题首页 搭建过程参考了下面搭建的文章: Github+jekyll:建立你自己的博客网站 github + jekyll 建自己的博客 GitHub | 个人静态博客搭建 Jekyll 主要步骤总结...找到下面文章: 使用jekyll本地调试可以访问静态资源,但是上传至GitHub无法访问的问题 它里面写的看似对我也没什么用,到这里,已经开始绝望,准备推倒重来。

    1K20

    如何在GitHub免费搭建个人博客网站?

    以下是一种无需服务器和域名的方法,利用GitHub Pages和Jekyll搭建个人博客网站(http://m.bokequ.com/list/22-0.html)  步骤一:准备 GitHub 账户...步骤三:下载 Jekyll 主题  Jekyll 是一个简单易用的静态网站生成器,GitHub Pages 支持使用 Jekyll 搭建个人网站。...你可以使用 GitHub Desktop、Git 命令行或者直接通过 GitHub 网站上传文件。  ...步骤六:定制你的博客  编辑 Jekyll 主题文件夹中的配置文件和内容文件,定制你的个人博客。你可以修改页面布局、添加新的页面和文章,以及调整样式和颜色。  ...通过 GitHub Pages 和 Jekyll,你可以免费搭建个人博客网站,无需购买服务器和域名。这是一个简单且经济高效的方式,让你能够开始你的博客之旅,并与世界分享你的想法和创作。

    16010

    Allens Blogs 创建历程(1)

    到最近,无意中看到一篇译文,似乎是《像黑客一样写博客》,瞬间就被带上车了,开始使用 Jekyll 和 GitHub Pages 架设我的静态博客。...,请使用下面的命令$ sudo gem install jekyll -n /usr/local/bin OK,这样 Jekyll 环境就安装完成了,接下来导入 Jekyll 后,就可以开始写作了。...开始写作 Jekyll 博客的配置全在 Blogs 根目录的_config.yml文件中,一般来说,只要没有什么特殊的需求,只需要修改诸如:博客名、所有者名字、email等信息即可,如果有更多的需求,请参考所用主题的说明和...---layout: posttitle: "在多线程构建场景下Powermockito无法在不同类中Mock同一个静态方法"date: 2015-10-14 13:50:39comments:...$ git add .$ git commit -m 'xxxxx'$ git push origin master 总结 总的来说,使用 GitHub Pages + Jekyll 搭建简单的静态博客是非常容易上手的

    73810
    领券