【Github创建网站】【超详细】利用github,jekyll,bundler创建gihub网页

Github创建网页全过程

一、前期准备

1.安装Git

官方文档点击->set-up git
直接下载点击->gihub 客户端

下载安装客户端根据向导提示安装即可(当作普通的软件安装即可),可以安装在非系统盘。

客户端下载后内容包括:Git Bash、Git CMD、Git GUI,其中GUI就是图形操作界面

2.安装jekyll

jekyll官方安装文档->set-up jekyll

1).下载ruby组件->rubyinstaller download,选择官方推荐的Ruby+Devkit 2.6.6-1 (x64)。
注意此文撰写时间为2020.4,官方推荐的组件随着时间推移可能会修改,大家根据rubyinstaller download链接内的官方说明选择下载即可。

2).按照安装向导安装:
安装路径随意

在这里插入图片描述
next继续安装,在向导的最后一页勾选运行:

ridk install


点击finish后出现cmd界面:
在这里插入图片描述
直接按回车,安装成功后显示:
在这里插入图片描述
回车完成安装并关闭。

3).在开始菜单中,启动“start command prompt with Ruby”,来让path环境变量生效
在这里插入图片描述

4).在打开的command prompt中:
进入刚刚安装路径下的/Ruby26-x64/bin/,并输入以下命令

gem install jekyll bundler

在这里插入图片描述
如果按了回车没有反应就再按一次(不要多按),多等一会比较慢,会出现很多安装信息,最后没有报错退回路径就行了

扫描二维码关注公众号,回复: 11321500 查看本文章

5).查看jekyll是否安装成功(显示jekyll版本信息即安装成功)

jekyll -v

在这里插入图片描述

3.安装bundler

bundler官方文档->set-up bundler
打开命令行窗口并运行如下命令:

gem install bundler

ps:windows命令行窗口打开方式:win+R–>输入cmd并确认

此时你的bundler还不能用!因为还没配置!后面会配置!

二、创建本地网站(jekyll project)

github官方文档->creating a site
1. 打开Git Bash并进行后续命令行操作

2. 进入你要用来存储repository的文件夹(没有就创建文件夹)

cd PARENT-FOLDER

PARENT-FOLDER替换成你创建好的要用来存储repository的文件夹。

比如你要放在目录“D:/Git/myrepo/”下面,而这两个文件夹你都没创建,那么你要依次输入运行以下的命令行:

mkdir Git
cd Git
mkdir myrepo
cd myrepo

笔者的存储路径为:D:/Git/Jekyll/siteSourceFile/

3. 如果你没有初始化过本地的repository(一般都没有),那么要先初始化一个

git init REPOSITORY-NAME

效果如下,mysite就是我的REPOSITORY-NAME,即我的本地仓库
初始化结果
4. 进入repository文件夹

cd REPOSITORY-NAME

这个时候bash显示为:
在这里插入图片描述
注意到有一个(master)字样,因为如果是创建一个user或organization site是必须把网站源码放在master brach下的。如果是另外的project下创网站可以参考官方文档

5. 在 目录 "XX/REPOSITORY-NAME/” 下新建文件‘Gemfile’并在文件中写入:

source 'https://rubygems.org'
gem 'nokogiri'
gem 'rack', '~> 2.0.1'
gem 'jekyll', '~> 4.0.0'
gem 'rspec'

jekyll的版本号根据你安装的为准,笔者为4.4.0。
ps:文件名不要加后缀,拿记事本或者vi命令打开就行,这个文件是为了配置bundler

6. 在命令行中输入:

bundle install

结束后文件夹内容为:
在这里插入图片描述
7. 创建并进入docs文件夹

mkdir docs
cd docs

你将从master branch的docs文件夹中发表网站

8.用bundler新建jekyll项目

bundle exec jekyll VERSION new .

!!new 后面有个‘.’不要忘了!!,意思是在当前文件夹下创建。
如果你要在别的路径下放,就把new替换成绝对路径,或者直接输文件夹名就会在当前路径下创建

创建结果为:
在这里插入图片描述
9.打开当前目录下的Gemfile
找到下图内容,取消第三行的注释并且加上这个插件的版本号,版本号查看点击–>dependency versions
在这里插入图片描述
笔者的配置如下,版本号为204:
在这里插入图片描述
保存并退出。

三、将本地网站push到github远程仓库中

1. 在github界面新建一个repository

和你本地repository的名字一样,笔者为mysite(最好是public,不要学我!且一定要带readme.md!在这里插入图片描述

2. 在Git Bash中将本地repository放入远程仓库

在目录"xxx/REPOSITORY-NAME"中进行以下命令

git init
git add .
git commit -m 'first commit'
git remote add origin https://github.com/USER/REPOSITORY.git
git push -u origin master

USER就是你的gihub账户名,REPOSITORY就是开始的那个REPOSITORY-NAME笔者为mysite
在这里插入图片描述
在这里插入图片描述
此时你的github页面为:
在这里插入图片描述
上传成功。

在这一步可能遇到的问题

1. 在gitpush时弹出界面让你登录
用github登录就行,SSH登录也一样

2.fatal: HttpRequestException encountered.
安装协议:GCM
选择windows的exe安装即可

3.git push错误failed to push some refs to

  • 检查你的远程repository里有无README.md,没有就要先建一个
  • 打开Git Bash,在本地的对应repository目录下运行git pull --rebase origin master,目的是同步远程仓库到本地
  • 然后再执行本文中同步到远程仓库的步骤

四、运行网页

1. 在github repository中settings里找到enable网页

在这里插入图片描述
在这里插入图片描述

2. 找到你的网站链接

在这里插入图片描述

3. 打开网站

在这里插入图片描述

成功~~!

猜你喜欢

转载自blog.csdn.net/scarletteshu/article/details/105708280