基于GitHub Pages+Jekyll搭建个人博客

最新推荐文章于 2024-10-17 21:59:02 发布

weixin_33811961

最新推荐文章于 2024-10-17 21:59:02 发布

阅读量100

点赞数

文章标签： git ruby markdown

原文链接：https://segmentfault.com/a/1190000013705747

版权

看到很多大神们都有自己的个人网站，觉得很高大上，于是我就怀着巨强的好奇心去看各种教程和各种例子，总算了解其中的规则，然后就试着自己搭建了一个自己的网站，在折腾了两三天后总算把自己的网站搞起来了，很不容易，下面我大致给大家介绍下我的搭建过程，但是具体我没细讲，每种环境的安装百度都可以搜索到很详细的教程，我只是在这给大家列举过程中需要注意到的点。

一、概述

Jekyll 基于Ruby的静态网页生成系统，采用模板将Markdown(或Textile)文件转换为统一的网页
GitHub Pages 免费的静态站点，三个特点：免费托管、自带主题、支持自制页面和Jekyll

二、搭建步骤

1、建立Github Pages站点

要求：本地安装git，拥有个人的github账号

首先，在你的github上建立一个以xxx.github.io为命名的代码仓库，其中xxx代表的是你的github账号名，如我的账号名是MealiaLin，则建立的是
mealialin.github.io，同时在底部Add .gitigore选择Jekyll模板，这样Jekyll产生的临时文件，
例如_site目录就不会添加到源代码管理中，当然你也可以以后手动配置

建立完代码仓库后，将代码仓库克隆到本地

$ git clone https://github.com/xxx/xxx.github.io.git

然后在本地的代码仓库里面创建一个测试页面并推送到github的代码仓库

$ cd xxx.github.io
$ echo "Hello World" > index.html
$ git add --all
$ git commit -m "Initial commit"
$ git push -u origin master

推送完代码后等一段时间，快的话几分钟，慢的话要二十分钟或者半个小时吧，等github运行编译你的代码，
完了之后在浏览器输入你的项目名称：xxx.github.io，如果一切正常，你就能看到一个显示Hello World的页面

2、安装配置jekyll

这一块很麻烦，尤其是基于windows环境的，坑太多，不过这种东西，都是踩着坑过河，习惯了就好，其实整个过程很简单，如果不算被坑的话半天就能
搭完整个环境和项目了，个人来说，我在这一步卡了一天多了，接下来跟大家讲讲的我步骤，千万要记住，不要偷工减料，严格来做，哪一步装错了或者装少了
什么，建议卸了重头再来，毕竟重做比补坑简单多了

注意：所有安装过程中涉及到的目录路径最好不要出现空格

（1）安装ruby，根据相关教程，无脑点就行，但是有个注意点，安装的路径中，连同命名，不要出现空格！！！

（2）ruby安装完，会出现有个选项，让你安装MSYS2这个东东，如果没有勾选，后面自己打开cmd，输入“ridk install”进行MSYS2的安装，会出现然你选择123，你选3就行。这个过程会下载很多安装包什么的，耐心等待，一定要耐心，要完整装完才行，装好会让你再做一次123选择，这个时候不需要选了，直接enter退出就行了。

（3）安装DevKit，在官网下载DevKit-mingw64-64-4.7.2-20130224-1432-sfx.exe，然后点击运行，同样，安装目录不要出现空格，可以百度这个相关的安装，还是比较简单的

（4）然后安装RubyGems，从官网下载压缩包，解压到你想要的目录下，路径不要有空格，然后cmd命令指到这个文件夹下面，输入“ruby setup.rb”执行安装，同样也可百度

（5）安装bundler，输入“gem install bundler”执行安装

（6）上面的安装基本缺一不可，然后就可以安装jekyll了，执行“gem install jekyll”，最后成功了。

3、搭建项目

装完jekyll，项目代码就好办了，项目就可以在本地运行了。

（1）在你的本地代码仓库中，创建或使用模板，创建模板使用git bash输入命令“jekyll new project-name”就行了，但是创建模板
极其简陋，所以推荐大家使用第三方主题模板，找一个自己喜欢的主题放到你的本地代码仓库就行了。

（2）环境有了，模板也有了，接下来是本地运行代码了。首先，有些模板需要依赖，所以在你的本地代码仓库目录下使用cmd命令运行bundle install
命令安装依赖包，有时候用这个命令不行，会出现缺什么什么的，可以使用“jekyll install xxx”来一个个安装缺的东西。装完以后运行
jekyll serve来启动本地服务器，默认使用4000端口，如果需要更换端口，可以运行“jekyll serve -P $POST”指定其他的端口。

（3）启动服务器了之后，在浏览器输入：“127.0.0.1:4000”就可以进行本地预览了，建议使用webstorm开发，本人超喜欢用ide家的开发工具