尝试过很多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文件
这个文件位于pagesopen-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:UsersABCmyblog
//切换到工程目录,并开启服务
cd myblog
bundle exec jekyll serve
因为我们是复制主题到该目录,会出现bundle未安装错误。 重新安装一下就可以了,有时候更新也可以。
代码语言:javascript复制#安装bundle
bundle install
#更新bundle
bundle update --bundler
已有项目及已配置好Jekyll Ruby的话,直接修改地址即可
代码语言:javascript复制C:UsersABC>d:
d:>cd d:blog
bundle exec jekyll serve
8. 修改侧边栏
把主页中侧边栏的Repo修改成分类栏。 粗暴法:直接把sidebar-popular-repo删除,并复制一个副本sidebar-categories-nav.html且重命名为sidebar-popular-repo。
问题 / To Do List
- sidebar-categories-nav.html的分类不可以通过点击筛选文章。
- 修改为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
小提示
- 直接在cmd输入d:更换盘符。输入cd d:abcdef更换文件夹
- 如果把文件放到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"
设置启用的分享链接