首页
学习
活动
专区
工具
TVP
发布

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

//使用gem安装Jekyll gem install jekyll //使用Jekyll创建你博客站点 jekyll new blog #创建你站点 //开启Jekyll服务 //进入blog...目录,记得一定要进入创建目录,否则服务无法开启 cd blog jekyll serve #启动你http服务 本地服务开启后,Jekyll服务默认端口是4000,所以我打开浏览器...└── index.html (网站index) 二.开发或者选择Jekyll主题 再来说说博客外观,这可能是很多人很看重,一个高逼格博客里面看文章也是一种享受。...这里就需要自定义主题了。你可以选择自己开发一套,也可以直接选择已有的,然后自己再更改css布局形成自己jekyll主题在这里,你可以选择到你自己喜欢主题。...接下来我们要做就是把我们Jekyll生成blog部署到Github Pages上去即可 3.部署blog 我们先把刚刚新建仓库git clone到本地,然后cd 到仓库目录下,执行jekyll

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

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

//使用gem安装Jekyll gem install jekyll //使用Jekyll创建你博客站点 jekyll new blog #创建你站点 //开启Jekyll服务 //进入blog...目录,记得一定要进入创建目录,否则服务无法开启 cd blog jekyll serve #启动你http服务复制代码 本地服务开启后,Jekyll服务默认端口是4000...这里就需要自定义主题了。你可以选择自己开发一套,也可以直接选择已有的,然后自己再更改css布局形成自己jekyll主题在这里,你可以选择到你自己喜欢主题。...下载下来,改改css,或者借用一下,就会有很漂亮blog就出炉了。 三.使用Github Pages服务 1.创建我们自己仓库 以下用usename代替自己用户名 ? 2.配置我们仓库 ?...接下来我们要做就是把我们Jekyll生成blog部署到Github Pages上去即可 3.部署blog 我们先把刚刚新建仓库git clone到本地,然后cd 到仓库目录下,执行jekyll

1.1K20

H2O-ac theme for Jekyll

极简主义、风格扁平化、卡片式布局、Medium 及知乎专栏视觉风格等等特点,为我们带来了或许是迄今为止最漂亮 Jekyll 主题。   ...使用体验提升   廖柯宇也在 H2O 主题默认页面中写道,目前 H2O 主题还有一些可优化内容,比如夜间模式、查看大图等。这里,根据个人一些实际需求和了解,在 H2O-ac 主题中做了调整。...不过由于使用是 OKAIDIA 高亮主题,所以有些段落中格式化字段显示上有些问题。这里,仍然采用默认主题,并且扩增到 Prism.js 支持所有编程语言类型。...如果用户环境无法访问 Disqus 即只能看到 Waline。...目前在模式切换时 Disqus 会主动进行重新加载以适应当前模式。 支持 PWA (2022年5月11日更新)   全面支持 PWA,访问速度得到较大提升。移动端访问可以像原生 APP 那样使用

94330

如何为自己创建一个既时尚又好用博客网站

上面预览图中博客就是基于jekylldbyll主题风格网站。jekyll是一个简单免费Blog生成工具,而dbyll就是基于jekyll一款开源主题项目。...dbyll简介 dbyll是一款即时尚又简约开源jekyll博客主题。...第一步: 安装ruby 上文已经提到dbyll是基于jekyll一款博客主题,又因为jekyll是Ruby项目,所以我们要运行dbyll首先需要先安装ruby,已经安装可以跳过此步骤。...默认情况发表文章会在首页进行显示,如果发现首页父不显示发表文章,可以编辑你index.html文件: 将for post in site.posts 改为for post in paginator.posts...Pages上使用dbyll为例,来向大家演示dbyll使用

1.7K70

在 Linux 上搭建Jekyll静态博客

在CentOS,Ubuntu 按照同样步骤安装,Ruby Gems 往往都无法搭建成,每次都是依赖不对,各种奇葩原因,解决办法就是使用 RVM 安装,解决 Ruby 环境依赖管理,而且每次安装Jekyll...但是可以配合第三方服务,例如Disqus。最关键jekyll可以免费部署在Github上,而且可以绑定自己域名。...搭建Jekyll博客,需要找一套主题模板,这里可以参考:https://www.zhihu.com/question/20223939 ,以下以 mzlogin.github.io 主题为例 1、安装...评论模块: 目前支持 disqus、gitment 和 gitalk,选用其中一种就可以了,推荐使用 gitalk。...注意: 如果使用 disqus,因为 disqus 处理用户名与域名白名单策略存在缺陷,请一定将 disqus.username 修改成你自己,否则请将该字段留空。

2.3K80

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

Jekyll 开始与 Hexo 有所不同,Hexo 是采用子目录方式加载应用新主题,而 Jekyll 则是采用主题方式应用主题。...也就是说,如果你想使用某个 Jekyll 主题,唯一方式就是克隆这个 Jekyll 主题项目,并在此基础上开始你博客。...在实际使用过程中,笔者根据自己需求也在 H2O 主题上做出了一定功能修改,并开源为 jekyll-them-H2O-ac。...,此时 # 号前不留空格; 在使用图片进行解释时候,在对应段落附近加载图片,并使用“下图”、“上图”这样字眼进行描述; 图片可以使用 PPT 自行制作,使用 Snipaste 截图工具 截图保存,也可下载分辨率高...PNG 图或者 SVG 图,并上传至 vgy.me 后加载使用; 编程语言、专用英文词汇使用时,根据其通用写法来适当调整大小写,比如 Python 3 第一个字母就需要大写,Java 第一个字母也需要大写

1.5K40

快速搭建个人博客

快速开始 从注册一个Github账号开始 我采用搭建博客方式是使用 GitHub Pages + jekyll 方式。...若是出现 image.png 则需要 检查一下你仓库名是否正确 整个网站结构 修改Blog前我们来看看Jekyll 网站基础结构,当然我们网站比这个复杂。...settings(https://disqus.com/) disqus_username: qiubaiying 很对人反映 Disqus 评论插件加载不出来,因为 Disqus 在国内加载缓慢,所以我新集成了...不能选择中文域名,比如 张三.top ,GitHub Pages 无法处理中文域名,会导致你域名在你主页上使用。...$ bundle install ~/my-awesome-site $ bundle exec jekyll serve # => 打开浏览器 http://localhost:4000 这段命令创建了一个默认

1.7K21

Jekyll设置友言为社会化评论组件

Jekyll默认社会化评论组件是disqus,第三方SNS是facebook,twitter等,不方便大陆用户使用,发现国内也有类似的社会化评论组件,比如友言等,经比较发现友言更简单易用。...替换整个过程很简单,分为两大步: 首先要注册一个友言账户,点击获取代码,就能获得一段和你用户相关js代码。类似下面这样: 然后要切换到本地来,由于Jekyll评论组件是插件式,很方便修改,分为下面2个步骤 修改_config.yml文件中comments:下provider:值为custom...(默认disqus) 在_includes目录下新建一个目录custom,在custom目录下新建一个文件comments,文件内容就是上面从友言获得那段代码。...值为custom时,就加载custom/comments文件,那么其实site.JB.comments.provider值就是刚才在_config.yml中设置那个provider,这样就能说通了

32540

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

快速开始 从注册一个Github账号开始 我采用搭建博客方式是使用 GitHub Pages + jekyll 方式。...Disqus Account 这个 Username 就是我们 _config.yml 中 disqus_username # Disqus settings(https://disqus.com/)...disqus_username: qiubaiying 很对人反映 Disqus 评论插件加载不出来,因为 Disqus 在国内加载缓慢,所以我新集成了 Gitalk 评论插件(感谢@FeDemo推荐...张三.top ,GitHub Pages 无法处理中文域名,会导致你域名在你主页上使用。...图片压缩工具 ImageOptim 对于我们博客来说,图片越大,加载速度越慢。 不信你用手机打开你博客试试~ 所以有必要对我们上传到博客网站中图片:指的是你头像,首页背景图片,文章背景图片等。

3.9K110

如何在Ubuntu 16.04上建立一个Jekyll开发网站

Jekyll非常适合需要离线工作的人,更喜欢使用轻量级编辑器进行内容维护Web表单,并希望使用版本控制来跟踪其网站更改。...要激活导出,请运行以下命令: source ~/.bashrc 完成之后,我们使用gem安装Jekyll本身以及管理Gem依赖项Bundler: gem install jekyll bundler...由于在这种情况下只允许SSH流量,我们需要打开端口4000,这是Jekyll开发服务器默认端口: sudo ufw allow 4000 让我们仔细检查一下状态: sudo ufw status 现在我们防火墙规则如下...第三步 - 创建新开发站点 从我们主目录,我们使用Jekyllnew命令为子目录www中站点创建脚手架: cd ~ jekyll new www 该jekyll new命令启动bundle install...以安装所需依赖项,并自动安装名为Minima主题

1.6K71

如何在Ubuntu 16.04上建立一个Jekyll开发网站

Jekyll非常适合需要离线工作的人,更喜欢使用轻量级编辑器进行内容维护Web表单,并希望使用版本控制来跟踪其网站更改。...要激活导出,请运行以下命令: source ~/.bashrc 完成之后,我们使用gem安装Jekyll本身以及管理Gem依赖项Bundler: gem install jekyll bundler...由于在这种情况下只允许SSH流量,我们需要打开端口4000,这是Jekyll开发服务器默认端口: sudo ufw allow 4000 让我们仔细检查一下状态: sudo ufw status 现在我们防火墙规则如下...第三步 - 创建新开发站点 从我们主目录,我们使用Jekyllnew命令为子目录www中站点创建脚手架: cd ~ jekyll new www 该jekyll new命令启动bundle install...以安装所需依赖项,并自动安装名为Minima主题

1.3K31

如何使用Jekyll+GitHub Pages搭建个人博客站点

,51cto,开源中国,博客园,简书,等等 (4)使用个人站点+微信公众号 (一)Jekyll是什么 jekyll是一个静态博客生成器,它可以用来把我们使用markdown来写好文章给转换成静态网页...(二)Github Pages是什么 Github Pages 是面向用户、组织和项目开放公共静态页面搭建托管服务,站点可以被免费托管在 Github 上,你可以选择使用 Github Pages 默认提供域名...jekyll-gist ` 上面对软件安装完毕后,你就可以在github上搜索一个基于jekyll模版对项目,当然你可以从网上搜索任何你喜欢主题风格,找到之后使用git clone到自己本地: git...至此,一个属于我们自己独立个人站点就完成了,使用jekyll+github pages优缺点如下,借用阮一峰老师总结: 优点: * 免费,无限流量。   ...* 它生成是静态网页,添加动态功能必须使用外部服务,比如评论功能就只能用disqus。   * 它不适合大型网站,因为没有用到数据库,每运行一次都必须遍历全部文本文件,网站越大,生成时间越长。

1K70

Blog切换到Hugo

Jekyll不在考虑之列,因为我对ruby不熟并且没有兴趣。以前玩过Jekyll,感觉还是太折腾了。特别是国内还得换源什么。...比如你可以用sass或者less来写css,然后也可以不用默认模板引擎ejs,很多人主题用jade。甚至可以换掉Markdown引擎,增加更多Markdown功能进去。...所以复刻了两个系统主题: hexo-theme-distinctionpp hugo-theme-distinctionpp 两个主题功能和内容基本是保持一致,除了有些无法实现功能。...然后在原有的主题上有做了更进一步地精简,裁剪加载文件大小和把一些图片换成纯CSS3实现,再就是微调一些样式。...最终还是回归disqus。无奈这货在国内被墙。唉,反正上我blog还会回复应该都是程序员了吧?程序员访问外国网站不是难事吧?所以不管了先还是disqus吧。

1.7K10

玩转Github:使用GitHub Pages打造你专属技术博客

但是,他是国外开发维护,中文文档相对比较少。并且它是Ruby语言开发,对于二次扩展很不利。综上原因在我找主题和定制时候,十分吃力。...然后使用gem安装jekyll(gem 是ruby包管理工具,在下载其他包之前,最好替换成国内源)gem install jekyll找到一个空文件夹,然后在此处打开cmd/powershellRunning...// 发博客位置 2022-11-30-welcome-to-jekyll.markdown// 某篇博客,名字固定`yyyy-MM-dd-name.md`现在可以使用bundle exec...address: http://127.0.0.1:4000/ Server running... press ctrl-c to stop.http://127.0.0.1:4000/ 在没有具体指定情况下会生成一个这样地址这里默认使用是...minima 主题,到这为止,都可以复制到刚才GitHub仓库。

31000

博客说明

博客自定义指南 博客链接/blog link tea9 使用Jekyll博客引擎 基于Theme H2O修改 前置条件/Before: 需要你有 GitHub Github Page Jekyll...环境 如以上都有还有问题请参考 使用jekyll搭建个人博客 jekyll-theme-H2O_README 步骤/Step: github目录 克隆项目: git clone https://...├──_drafts # 草稿目录 -可以删除此目录/建议清空目录 ├──_includes # 一些封装布局 ├──_layouts # 默认布局 ├──_posts # 文章目录 -建议清空目录...用我肯定是不行) 有两个评论系统3选1 用那个就直接改成true 然后配置改了 disqus参考disqus国内可能显示不了 gitalk参考jekyll-theme-H2Ogitalk...相关配置 valine参考Valine – 一款极简评论系统 comments: disqus: false disqus_url: 'https://liaokeyu.disqus.com

73710

静态博客搭建工具汇总

Jekyll、Hugo、Hexo 也可以运行在 码云(Gitee.com) Pages 上,也就是说,你可以使用码云服务来搭建你仓库页面、博客或者网站,而且是完全免费。...Hexo 使用文档:https://hexo.io/docs/ hexo主题:https://hexo.io/themes/ 优点: 1、搭建博客平台,速度快,免费,可以搭建在 Github 上...2、操作比 Jekyll 简单,命令少,易于记忆。 3.支持markdown,Hexo最终生成是一个静态博客,这就意味着它拥有其他博客系统无法比拟低负载与高速度特性。...但是和WordPress又有很大不同,原因是jekyll只是一个生成静态网页工具, 不需要数据库支持。但是可以配合第三方服务,例如Disqus。...现在github默认支持jekyll, 所以原生文件如果放到github上,它会自动帮你生成静态网站。

83420

无服务器+域名也能搭建个人博客?真的,而且很快

官方网站 但是和 WordPress 不同是,jekyll 是一个生成静态网页工具,不需要数据库支持. 并且可以配合第三方服务, 例如 Disqus....最关键jekyll 可以免费部署在 Gitee/Github上,并且支持一件构建. 且无需我们手动申请域名 话不多说我们下面就开始使用吧~~~ 二....baseurl: 博客所在仓库相对地址 description: 博客简介 text_skin: 主题颜色 highlight_theme: 字体高亮主题 ps: url 和 baseurl...使用 上传博客 将 .md (markdown) 格式文件上传至 项目根目录下 _post 目录下 上传图片 我们一般会在博客中上传图片, 因此我们需要将图片资源手动放到, 根目录/asserts...总结 本文主要介绍了如何根据 Gitee+jekyll 来快速搭建个人博客. 并简单介绍了其配置, 使用和部署方式. 其他功能欢迎大家通过官网介绍, 自己尝试哦.

1.9K10
领券