Jekyll(一).使用Jekyll+Github Pages搭建自己的博客

这篇具有很好参考价值的文章主要介绍了Jekyll(一).使用Jekyll+Github Pages搭建自己的博客。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Jekyll 是一个静态站点生成器,内置 GitHub Pages 支持和简化的构建过程。 Jekyll 使用 Markdown 和 HTML 文件,并根据您选择的布局创建完整静态网站。 Jekyll 支持 Markdown 和 Lick,这是一种可在网站上加载动态内容的模板语言。所以在Github Pages上使用Jekyll很合适,其他有关介绍请参考Github Docs关于Jekyll,以及jekyll中文指南站点(翻译),jekyll英文指南站点,本篇部分内容参考了以上文档。
在Linux,MacOS上使用Jekyll,安装过程较为简单,下面为在Windows上的安装过程。

通过 RubyInstaller 安装Ruby环境

安装 Ruby 和 Jekyll 的最简单方法是使用RubyInstaller for Windows。

RubyInstaller是一个独立的基于Windows的安装程序,包括Ruby语言,执行环境, 重要文档等。

从RubyInstaller Downloads 下载并安装Ruby+Devkit版本。
jekyll 安装,Jekyll自建博客,github,ruby

使用默认安装选项。
在安装向导的最后一个阶段运行ridk install MSYS2 and MINGW development tool chain步骤。这是使用本机安装 gem 所必需的 扩展。您可以在RubyInstaller 文档中找到有关此内容的其他信息。
从开始菜单打开一个新的命令提示符窗口,以便对环境变量的更改生效。
打开命令提示符窗口测试是否安装完成:
输入命令:ruby -v

安装RubyGems

在Windows中下载RubyGems,直接ZIP格式的比较简单,下载链接,下载后解压并打开该目录,在打开的Windows目录进入命令提示符界面。
1.输入命令:ruby setup.rb,即安装。
2.输入命令:gem -v,查看版本信息验证
3.输入命令:gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/配置国内gem source源(原https://rubygems.org有些慢)
4.输入命令:gem sources -l查看验证gem source配置

安装Jekyll

1.输入命令:gem install jekyll安装jekyll
2.输入命令:jekyll -v安装完验证版本

安装jekyll-paginate

1.输入命令:gem install jekyll-paginate安装jekyll-paginate

安装bundle

1.此时可以创建新的Jekyll项目,输入命令:jekyll new myblog,进入到该目录cd myblog,运行项目jekyll serve,可能会由于依赖不完整报错,可以先安装bundle
2.输入命令:gem install bundle
3.输入命令:bundle install,添加缺失的依赖,会自动安装 Gemfile 内声明的依赖插件.
4.输入命令:bundle exec jekyll serve,运行项目,如有缺失依赖,再根据打印的信息使用gem进行安装。
5.至此Jekyll项目可以运行,打开浏览器输入地址:端口号可以看见界面

找到适合自己的Jekyll主题

几个比较热门的Jekyll主题网站:

  • GitHub.com #jekyll-theme repos

  • jamstackthemes.dev

  • jekyllthemes.org

  • jekyllthemes.io

    插件库

  • jekyll-plugin topic on GitHub

  • Planet Jekyll

例如此博客使用的主题地址。

应用找到的主题

1.使用Github Pages生成站点,需要创建仓库名为<username>.github.io的仓库,可以直接将主题项目fork到自己的<username>.github.io仓库中,之后可以clone到本地进行进行编辑。clone到本地后进入目录,将原文件.travis.yml .github删除,配置自己的_config.yml内容以及git仓库。目录结构大致如下

jekyll-theme-chirpy/
├── _data            # 存放网站数据,使用.yml,.yaml,.json或.csv格式和扩展名可以通过site.data访问它们
├── _includes        # 存放html模块,可以在多个html页面进行引用
├── _layouts         # 布局文件
├── _posts           # 用于存放博客文章
├── _scripts
├── _site           # 项目构建完成之后所生成的静态文件存放于此,可将其到.gitignore文件中
│   └── assets      # 生成的静态网页的CSS 文件、JS 文件以及图片文件
├── _plugins        # 插件
├── assets          #静态资源文件
├── tabs
├── .travis.yml      # 删除
├── .github          # 删除
├── .gitignore
├── 404.html
├── Gemfile          # 存放项目所依赖的 Ruby gems
├── LICENSE
├── README.md
├── _config.yml       # 项目的配置文件,项目的全局配置在此
├── tools           
├── docs
├── feed.xml
├── index.html
├── robots.txt
└── sitemap.xml

2.根据注解大致修改-config.yml文件内容后,可以执行bundle exec jekyll serve 命令或者直接jekyll serve打开内置的开发服务器,该命令可以构建并运行项目,启动Jekyll自带的 web server,在浏览器中直接访问项目地址http://127.0.0.1:4000.。

一些常用命令

jekyll new PATH
#=>创建新项目

jekyll new PATH --blank 
#=>创建新的空项目

jekyll new-theme 
#=>创建一个新的主题脚手架

jekyll build 
#=>当前文件夹中的内容将被生成到./_site

jekyll build --destination <destination>
#=>当前文件夹中的内容将被生成到<destination>

jekyll build --source <source> --destination <destination> <source>
#=>文件夹中的内容将被生成到<destination>

jekyll build --watch 
#=>当前文件夹中的内容将被生成到./_site, 检查改动,并自动重新生成

jekyll serve 或 jekyll s 
#=>构建并启用内置服务运行项目,开发服务将会运行在http://localhost:4000/  会自动监听文件变化并部署,对于 _config.yml 的修改不会自动部署

jekyll clean 
#=>清除所有的构建产物

部署

使用 GitHub Actions进行部署

确保您的 Jekyll 网站包含.github/workflows/pages-deploy.yml文件。否则,创建一个新文件并填写示例文件的内容,并且 on.push.branches值应与存储库的默认分支名称相同。然后将您的存储库重命名为 <GH_USERNAME>.github.io。

现在发布您的Jekyll网站:

1.在GitHub 上浏览仓库。选择Settings选项卡,然后单击左侧导航栏中的Pages。然后,在Source部分(在Build and deployment下)中,从下拉菜单中选择“GitHub Actions”。

2.将任何提交推送到远程以触发 GitHub 操作工作流。在仓库的Actions选项卡中,应会看到workflowBuild and Deploy正在运行”。生成完成并成功后,就会自动部署站点。

3.在 GitHub 指定的地址访问您的网站。

手动构建和部署

在自托管服务器上,您无法享受GitHub Actions的便利。因此,应在本地计算机上生成站点,然后将站点文件上载到服务器。

转到源项目的根目录,并按如下所示生成站点:

JEKYLL_ENV=production bundle exec jekyll b

或者在 Docker 上构建网站:

 docker run -it --rm \
    --env JEKYLL_ENV=production \
    --volume="$PWD:/srv/jekyll" \
    jekyll/jekyll \
    jekyll build

除非指定了输出路径,否则生成的站点文件将放置在项目根目录的文件夹中。现在,您应该将这些文件上传到目标服务器。

结束

至此一个Jekyll博客基本可以跑起来了,当然完全配置为自己的博客还需要修改很多东西,包括布局,collections数据等等。文章来源地址https://www.toymoban.com/news/detail-679620.html

到了这里,关于Jekyll(一).使用Jekyll+Github Pages搭建自己的博客的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 杂货铺 | 使用 Github Pages 和 Hexo 搭建自己的独立博客

    node.js安装,在安装时会自动安装npm。 Git安装,点击此处访问官网,按需下载对应版本,默认安装即可。 检验安装是否成功: Win + R 打开运行窗口,输入 cmd ,输入如下命令,有相应版本信息显示则安装成功。 若不正确可以卸载软件重新安装,此外若安装成功,在桌面右键鼠

    2024年04月27日
    浏览(39)
  • 通过Jekyll Chirpy主题搭建Github Page记录

    我先是follow这个教程: keysaim教程 它提供了如何从git repo建立自己的github.io,跟随这个教程知道新建了输出hello world的页面。 https://tungsten106.github.io/ 这个页面有了内容 但是我卡在了选择主题的部分,原博主选择了Huxpro 作为主题,但我决定参考另外一个。 这个主题叫jekyll-th

    2024年02月05日
    浏览(61)
  • 薅github的羊毛-用pages建自己的博客或资源站 - 博客工具 - 2/2

    笔者调研了好多个静态博客工具,最后锁定Hexo了,但不等于其他博客不行。我只吐槽两个 Hugo - 难用 Gridea - 简直就是骗钱的,我交钱用不了 theme没有链接,同步也同步不了,估计以前是可以,现在经营不下去,挂在寻利用长尾效应薅点钱 - 笔者最近计划给孩子搞一个静态博客

    2024年02月04日
    浏览(55)
  • 零基础!手把手教你使用VuePress2 + GitHub Pages免费搭建个人博客网站

    目录 介绍 VuePress2 pnpm 搭建 安装 Node.js 安装 pnpm 安装 VuePress step 1:创建文件夹并进入该目录 ​编辑 step 2:初始化项目 step 3:安装VuePress step 4:在 package.json 中修改 scripts step 5:创建目录和配置文件 step 6:将默认的临时目录和缓存目录添加到 .gitignore 文件中 step 7:启动服务

    2024年03月13日
    浏览(76)
  • Ubuntu20.04 安装jekyll

    首先使根据官方文档安装:Jekyll on Ubuntu | Jekyll • Simple, blog-aware, static sites 如果没有报错,就不用再继续看下去了。 我这边在执行 gem install jekyll bundler 时报错,所以安装了rvm,安装rvm可以参考这篇文章Ubuntu 20.04 安装RVM 在安装完RVM之后,安装对应的ruby版本,并切换至对应版

    2024年02月19日
    浏览(47)
  • 【实操】基于 GitHub Pages + Hexo 搭建个人博客

    《开发工具系列》 相信很多学习技术的读者朋友们,都梦想能创建一个属于自己的个人博客。现在,这将不是梦想,下面跟着 Huazie 一起利用 GitHub Pages + Hexo 搭建一个属于自己的个人博客吧。 Node.js 官方下载地址 注意: Hexo 官方建议使用 Node.js 12.0 及以上版本 笔者本地下载的

    2024年01月19日
    浏览(74)
  • 基于Hexo在GitHub Pages上搭建博客的方法

    或许说这是本站从无到有搭建的记录更为准确。 本站?什么本站?总不能是CSDN吧?这里指的是我的个人博客网站 Karubon.moe ,这篇博客基于搭建这个网站时得到的经验教训编写。喜欢这篇博客的话不妨去我的网站看看呀。 在寒假的中期,百般聊赖之下,终于是打算拥有一个自

    2024年02月22日
    浏览(45)
  • 从零用VitePress搭建博客教程(7) -– 如何用Github Actions自动化部署到Github Pages?

    接上一节: 从零用VitePress搭建博客教程(6) -– 第三方组件库的使用和VitePress搭建组件库文档  我们搭建完成vitePress后,那么接下来就是如何部署到线上服务器,这里使用Github Pages,免得自己购买服务器,当然你也可以自己购买服务器来部署(比如阿里云服务器)。 在部署之

    2024年02月08日
    浏览(73)
  • 从零开始:VuePress2 + GitHub Pages 搭建你的第一个免费博客网站

    可能你也想拥有一个属于自己的博客网站,但是自己搭个博客网站不知道从何下手,而且还需要租个云服务器,虽然一个月只需几十块钱,但是我们的博客网站是要长期维护的,日积月累也要不少钱呢。 现在我就教你用 VuePress2 + GitHub Pages 搭建个人博客网站,不用服务器,完

    2024年02月04日
    浏览(55)
  • Github Pages 访问速度慢,使用vercel部署静态博客提高访问速度

    国内 Github Pages 速度较慢。使用ping工具测试一下发现速度慢道发火。 vercel 速度快且能够自定义域名,能实现和 Github Pages 一样的效果 vercel 官方地址:https://vercel.com/ 这是没有接入vercel之前的ping的速度: 接入之后的速度:   首先注册一个账号,使用github登陆也可以,然后需

    2024年02月06日
    浏览(60)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包