前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Jekyll搭建博客并部署到GitHub

Jekyll搭建博客并部署到GitHub

作者头像
繁华是客
发布2023-03-03 20:28:19
9700
发布2023-03-03 20:28:19
举报

尝试过很多Windows搭建静态网页博客的方法,都是失败告终。试了几次Jekyll,这一次终于成功了。想把一些坑路分享一下。

1. 下载Jekyll for Windows并安装

下载Jekyll

Jekyll官网:https://jekyllrb.com/docs/windows/

Jekyll on Windows: https://rubyinstaller.org/

提示:Jekyll Windows安装器已经包含RubyGems,所以无需再次下载。

安装Jekyll

然后我们安装Ruby+Devkit,安装完成后,会出现cmd提醒你安装1,2,3 我们选择3,安装全部组件。(Mingw) 友情提示:他会不断提示多次,其实只需要安装一次即可。

打开Windows开始菜单,并找到Start Command Prompt with Ruby,打开使用Ruby。

在打算更新gem之前,建议把gem源更换为中国源。

代码语言:javascript
复制
gem sources --remove https://rubygems.org/ 
gem sources -a https://gems.ruby-china.com/

代码语言:javascript
复制
gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/

然后我们查看目前的源:

代码语言:javascript
复制
gem sources -l
# 确保只有 gems.ruby-china.com

更新Ruby gem

代码语言:javascript
复制
gem update

然后我们安装组件

代码语言:javascript
复制
gem install jekyll bundler

通过jekyll -v可以检测是否安装成功。

时间设置

因为我们是直接参考复制别人的主题,所以这个步骤在Windows会稍微不一样。 我们需要先安装tzinfo-data到Windows中才可以。

代码语言:javascript
复制
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

在步骤3和4中,我们将详细介绍如何设置。

自动生成问题

auto-regeneration on Windows alone:

Jekyll uses the listen gem to watch for changes when the –watch switch is specified during a build or serve. While listen has built-in support for UNIX systems, it may require an extra gem for compatibility with Windows.

Add the following to the Gemfile for your site if you have issues with auto-regeneration on Windows alone:

代码语言:javascript
复制
gem 'wdm', '~> 0.1.1' if Gem.win_platform?

2. 下载主题

我使用的是mzlogin 的主题。 直接下载解压到想要的位置即可。

3. 安装TZINFO-DATA

代码语言:javascript
复制
gem install tzinfo-data

4. 编辑gemfile

在下载好的主题文件找到Gemfile并编辑 添加

代码语言:javascript
复制
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

即可。

5. 修改_config.yml

除了要修改基本信息之外,还需要把

代码语言:javascript
复制
gems:
    - jekyll-github-metadata
    - rouge
  
# 修改为:	
plugins_dir:
    - jekyll-github-metadata
    - rouge

否则会提示:

Deprecation: The ‘gems’ configuration option has been renamed to ‘plugins’. Please update your config file accordingly. Deprecation: The ‘plugins’ configuration option has been renamed to ‘plugins_dir’. Please update your config file accordingly.

6. 修改open-source文件

这个文件位于pages\open-source.md 这个是因为如果不修改的话,会提示语法错误

Liquid Warning: Liquid syntax error (line 2): Expected dotdot but found pipe in … …

只需要把文件中的:

sorted_repos = (site.github… …rs_count’)

括号去掉 即变成:

代码语言:javascript
复制
{... sorted_repos = site.github....stargazers_count'

7. 本地运行网站测试

新建网站项目

代码语言:javascript
复制
jekyll new myblog
#位置位于C:\Users\ABC\myblog\

//切换到工程目录,并开启服务
cd myblog

bundle exec jekyll serve

因为我们是复制主题到该目录,会出现bundle未安装错误。 重新安装一下就可以了,有时候更新也可以。

代码语言:javascript
复制
#安装bundle
bundle install

#更新bundle
bundle update --bundler

已有项目及已配置好Jekyll Ruby的话,直接修改地址即可

代码语言:javascript
复制
C:\Users\ABC>d:
d:\>cd d:\blog
bundle exec jekyll serve

8. 修改侧边栏

把主页中侧边栏的Repo修改成分类栏。 粗暴法:直接把sidebar-popular-repo删除,并复制一个副本sidebar-categories-nav.html且重命名为sidebar-popular-repo。

问题 / To Do List

  1. sidebar-categories-nav.html的分类不可以通过点击筛选文章。
  2. 修改为Tag样式

9. Push到GitHub中

手残党直接通过GitHub Windows Commit即可。

2021年更新

(1) 在2021年尝试使用本地预览的时候发现如下问题: D:/Ruby30-x64/lib/ruby/gems/3.0.0/gems/jekyll-3.9.0/lib/jekyll/commands/serve/servlet.rb:3:in `require’: cannot load such file – webrick (LoadError) 经查询GitHub Issue 8523 已经提到,解决方法

代码语言:javascript
复制
bundle add webrick

之后再

代码语言:javascript
复制
bundle exec jekyll serve

(2) GitHub本身识别出underscore.js存在漏洞,我直接搜索最新版替换,发现对网站无影响。

代码语言:javascript
复制
https://cdn.jsdelivr.net/npm/underscore@1.13.1/underscore-umd.min.js

小提示

  1. 直接在cmd输入d:更换盘符。输入cd d:\abc\def\更换文件夹
  2. 如果把文件放到xxx.github.io/blog内,则会出现Github Page不更新。原因是GitHub只会阅读Jekyll中xxx.github.io/_includes,而不会进入blog/_includes 导致。该问题是可以解决的。需要在Github上设置Github Page。

分享图标问题

问:如何删减分享链接、图标呢? 答:分享图标采用的是https://github.com/overtrue/share.js 可以通过编辑sns-share.html内容

代码语言:javascript
复制
<div class="share-component" data-disabled="google,twitter,facebook" data-description="Share.js - 一键分享到微博,QQ空间,腾讯微博,人人,豆瓣"></div>

禁用并设置分享描述。

你也可以通过

代码语言:javascript
复制
data-sites="twitter,qq,wechat,douban,weibo"

设置启用的分享链接

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-08-08 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. 下载Jekyll for Windows并安装
    • 下载Jekyll
      • 安装Jekyll
        • 时间设置
          • 自动生成问题
          • 2. 下载主题
          • 3. 安装TZINFO-DATA
          • 4. 编辑gemfile
          • 5. 修改_config.yml
          • 6. 修改open-source文件
          • 7. 本地运行网站测试
          • 8. 修改侧边栏
            • 问题 / To Do List
            • 9. Push到GitHub中
            • 2021年更新
            • 小提示
            • 分享图标问题
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档