[前端]jekyll+markdown+github搭建个人博客

简介: 机器环境:Win7 64位安装rubyinstaller.到http://rubyinstaller.

机器环境:Win7 64位

  • 安装rubyinstaller.

    1. http://rubyinstaller.org/downloads/下载ruby安装文件,这里下载rubyinstaller-2.2.3-x64.exe,按照提示安装,勾选Add Ruby executables to your PATH.

    2. Win7 64位默认安装位置:C:\Ruby22-x64.

    3. 验证ruby是否安装成功:cmd中ruby -v显示ruby版本号说明ruby安装成功.
  • 安装rubygems.

    1. 官网下载安装包https://rubygems.org/pages/download
    2. 解压rubygems-2.4.8.zip到指定目录,为了方便管理解压后放到C:\Ruby22-x64\目录下.
    3. cmd进入rubygems-2.4.8目录下(快捷键:打开C:\Ruby22-x64\rubygems-2.4.8目录,shift+鼠标右键,点击”在此处打开命令行窗口”),运行ruby setup.rb .cmd 中 gem -v 显示版本号则说明正常.
  • 安装DevKit-mingw64

    1. 下载相应版本http://rubyinstaller.org/downloads/,在C:\Ruby22-x64\目录下新建DevKit文件夹,运行DevKit-mingw64-64-4.7.2-20130224-1432-sfx.exe后会提示解压目录,选择C:\Ruby22-x64\DevKit.
    2. 在C:\Ruby22-x64\DevKit中打开cmd,运行ruby dk.rb init,会提示配置config.yml.

    3. 打开C:\Ruby22-x64\DevKit目录下的config.yml,将ruby根目录加入到配置文件中,这里是C:/Ruby22-x64.如果有了就不需要再加.注意格式.

    4. 执行ruby dk.rb install.

  • 替换rubyGem库地址(相当重要,因为国内访问外网有线路问题,不仅更新速度慢,而且还会导致更新失败)

    1. gem sources –remove https://rubygems.org/
    2. gem sources -a https://ruby.taobao.org/ (注意:一定是https,淘宝已暂停http的ruby服务)
    3. gem sources -l验证一下.
  • 安装rails

    1. cmd运行gem install rails.
    2. cmd运行rails -v显示rails版本号说明安装成功.
  • 安装jekyll
    1. cmd运行gem install jekyll
    2. cmd运行jekyll -v验证,显示版本号说明安装成功.

环境配置完整之后,下面进入正题,如何新建博客:

  • 运行命令:jekyll new 文件夹名,比如jekyll new blog,会在当前目录生成blog文件夹.

  • 在生成的blog文件夹根目录下运行命令:jekyll serve –watch

  • 浏览器中打开localhost:4000,命令运行过程中没有错误提示,浏览器中显示默认页面说明安装成功.

  • 使用markdown发布博客

    1. markdown是什么? 参考淘宝UED关于markdown的介绍http://ued.taobao.org/blog/2012/07/getting-started-with-markdown/. 锤子手机发布会上罗永浩介绍了锤子科技出品的app**锤子便签**支持markdown功能,下载地址:http://bbs.smartisan.com/forum-92-1.html,非常好用,建议下载体验一番.

    2. 将markdown、html格式的文件以”YY-MM-DD-finename.filetype”命名放到_post文件夹下:如2015-09-10-firstpost.markdown.

  • 发布到github

    1. 首先注册一个github账号.
    2. 新建repository,以username.github.io的形式命名.
    3. git提交本地代码到github.
    4. git提交命令
  • 参考文章

    1. 每个人都应该有一个Jekyll博客
    2. git教程
  • jekyll 2.5.3 | Error: Permission denied - bind(2) for 127.0.0.1:4000 出现这个错误说明端口被占有,打开_config.yml,加入一行:port:5001(没有被占用的端口均可)即可解决.

目录
相关文章
|
存储 JavaScript 网络架构
【开源图床】使用Typora+PicGo+Github+CDN搭建个人博客图床
【开源图床】使用Typora+PicGo+Github+CDN搭建个人博客图床
554 3
|
前端开发
914.【前端】Taro集成towxml渲染markdown文档
914.【前端】Taro集成towxml渲染markdown文档
1064 2
|
Shell 网络安全 开发工具
Github Pages + Jekyll 独立博客一小时快速搭建&上线指南
Github Pages + Jekyll 独立博客一小时快速搭建&上线指南
|
存储 前端开发 JavaScript
🚀前端轻松实现网页内容转换:一键复制、保存图片及生成 Markdown
在现代前端开发中,提升用户的交互体验至关重要。本文将详细介绍如何使用 HTML2Canvas 和 Turndown 两个强大的 JavaScript 库,实现将网页选中文本转化为图片并保存或复制到剪贴板,或将内容转换为 Markdown 格式。文章包含核心代码实现、技术细节和功能拓展方向,为开发者提供了一个轻量级的解决方案,提升用户体验。
1198 68
|
资源调度 前端开发 JavaScript
不花一分钱,用Hexo和GitHub Pages搭建个人博客🏢
不花一分钱,用Hexo和GitHub Pages搭建个人博客🏢
313 0
|
JavaScript 网络安全 开发工具
[保姆级-从0到1]利用hexo+github托管实现搭建个人博客
[保姆级-从0到1]利用hexo+github托管实现搭建个人博客
|
JavaScript 应用服务中间件 程序员
技术人如何利用 github+Jekyll ,搭建一个独立免费的技术博客
技术人如何利用 github+Jekyll ,搭建一个独立免费的技术博客
|
程序员 API Android开发
使用 VS Code + Github 搭建个人博客
搭建个人博客的方案
179 1
|
XML SQL 缓存
Spring Boot + vue-element 开发个人博客项目实战教程(二十六、前端首页统计完善及完结)
Spring Boot + vue-element 开发个人博客项目实战教程(二十六、前端首页统计完善及完结)
220 1
|
JavaScript
Hexo+GitHub搭建个人博客
Hexo+GitHub搭建个人博客
166 0
Hexo+GitHub搭建个人博客

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
  • 2
    前端工程化演进之路:从手工作坊到AI驱动的智能化开发
  • 3
    Vue 3 + TypeScript 现代前端开发最佳实践(2025版指南)
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式