如何使用GitHub创建一个自己的博客并且上传

一、git是什么

1.1 git简介

• 团队协作开发（中转站：GitHub：全球最大的男性交友网站）
• 分支（本地/远程）管理
• GIT，全称是分布式版本控制系统，可以有效、高速的处理从很小到非常大的项目版本管理。每个开发者可以通过克隆 git clone，在本地机器上拷贝一个完整的Git仓库。
  

1.2 git作用

• 代码管理

1.3 安装Git

• 点击此链接https://git-scm.com/进入git官网下载git

• 点击Downloads选择你所需要的版本进行下载
  

1.4 如何开始使用Git

• 下载安装之后，你会在任意一个文件夹中 右键 均可以看到git bash here在改文件夹下打开终端（自带命令行工具）

注：如果此时马上要在这个空白文件夹内开始一个项目，需要在git bash here命令行内先git init初始化本项目文件夹后（即本地仓库）再开始项目。

如下图所示：

1.5 Git常用命令介绍

1.5.1 初始化本地仓库

有个命令叫 git init （初始化本地仓库—本质）：在你的项目根目录中新建了一个隐藏文件夹（.git）

注：如果项目中有.git这个文件夹就不需要我们手动去初始化

1.5.2 本地的代码如何提交到远程网站中

• git add . （将本地代码推到本地代码中的暂存区）

注：删除文件后需要 git add -A, 光 git add. 不行，区别如下：
git add -A 保存所有的修改 git add . 保存新的添加和修改，但是不包括删除 git add -u 保存修改和删除，但是不包括新建文件。 所以默认使用git add -A就行。

• git commit -m “提交信息”（将暂存区的代码正式提交到本地版本库）

注：此命令会将git add .存入暂存区的修改文件提交至本地仓库中，若文件未添加至暂存区，则提交时不会提交任何修改。

• git push <远程地址> <本地分支名><:><远程分支名>（将本地版本库中的代码提交到远程版本库）

注： 上面命令表示，将本地的master分支推送到origin主机的master分支。如果master不存在，则会被新建。

1.5.3 远程的代码如何下载/合并到本地中

当你本地还没有项目代码的时候，需要完整的下载一个远程项目，要用到此命令：

• git clone -b 远程分支名 远程地址

注：如果不加-b也就是不指定哪个分支会默认master分支）

合并某个拉取下来的分支中的代码：

• git merge 指定远程分支

拉取远程版本库中所有有变化的分支中的内容：

• git fetch

1.5.4 本地如何进行分支管理

查看本地有哪些分支：

• git branch

切换分支：

• git checkout 分支名

新建分支：

• git branch 分支名

二、注册GitHaub

2.1 注册GitHub账号

1）打开http://github.com进入到github这个界面进行注册
2）点击Sign up切换到注册页,填写好注册信息后点击 Sign up for GitHub 注册

2.2 配置SSH

作用：为了免密码登陆，但也得需要一个“凭证”（电脑凭证：指代你的这台正在使用的电脑）在命令行中输入以下命令

1. 首先查看你的电脑中是否有这个凭证

cat ~/.ssh/id_rsa.pub

2. 生成该凭证

ssh-keygen -t rsa -C "输入你的邮箱

注：此邮箱为你在Github注册时的邮箱（仅作为标识）

3. 生成之后获取凭证

cat ~/.ssh/id_rsa.pub

4. 把生成的凭证添加到github里面
   4.1）首先在个人中心点击settings进入到个人界面下拉选择SSH and GPG keys在右上角有个叫New SSH keys（新的密钥）点击进去添加SSH密钥
   

三、GitHub Pages

3.1 什么是GitHub Pages

GitHub的超高人气和强大的功能，但是对于一个新手来说，看到一大堆源码，只会让人头晕脑涨，不知何处入手。他希望看到的是，一个简明易懂的网页，说明每一步应该怎么做。因此，github就设计了Pages功能，允许用户自定义项目首页，用来替代默认的源码列表。所以，github Pages可以被认为是用户编写的、托管在github上的静态网页。

GitHub Pages的一些功能：

1. 让一个小白能够快速的认知代码，感受到代码给你带来的快乐
2. 程序员的福利--用最简单的语言上线自己的一个项目
3. 它提供了我们一个域名，github的服务器中的一部分空间

github提供模板，允许站内生成网页，也允许用户自己编写网页，然后上传。有意思的是，这种上传并不是单纯的上传，而是会经过Jekyll程序的再处理。

3.2 博客页面的一个主题网站（Jekyll）

3.2.1 jekyll是什么

jekyll是一个简单的免费的Blog生成工具。是一个生成静态网页的工具，不需要数据库支持。但是可以配合第三方服务。最关键的是jekyll可以免费部署在Github上，而且可以绑定自己的域名

好处：

1. 免费，无限流量。
2. 享受git的版本管理功能，不用担心文章遗失。
3. 你只要用自己喜欢的编辑器写文章就可以了，其他事情一概不用操心，都由GitHub处理。

缺点：

1. 有一定技术门槛，你必须要懂一点git和网页开发；
2. 生成的是静态网页，添加动态功能必须使用外部服务，比如评论功能就只能用disqus。
3. 不适合大型网站，因为没有用到数据库，每运行一次都必须遍历全部的文本文件，网站越大，生成时间越长。

3.2.2 jellky配置

_config.yml文件：这是需要使用者进行自定义的文件，项目中会进行读取。

3.3 创建博客主题网站

3.3.1 创建博客页面

1）点击 http://jekyllthemes.org进入到jekyll页面选择一个自己喜欢的模板，在点击HomePage按钮进入GitHub项目仓库

2）点击右上角的fork按钮（把这个项目复制到我们自己的仓库中来）

3）fork之后修改仓库名

3.3.2 访问博客页面

通过上面的操作，就可以在浏览器访问博客页面啦~

例如，访问我新建的博客页面：https://yueshuai00.github.io/

3.3.3把远程仓库代码克隆到本地

在命令行窗口里paste（粘贴），再跟上一个文件夹名称，回车即开始克隆

3.3.4 HTML CSS 的使用

1）HTML的结构

HTML不属于一种标准的图灵完备语言（图灵完备语言：可以参与任何情况下的计算的语言）

• HTML仅仅是一种标记，这标记不是符号，是被一组尖括号包裹着的英文单词,这样的一组标记称之为标签。基本格式如下：

<标签名 属性名1=“属性值” 属性名2=“属性值”>内容</标签名>

• HTML的属性————根据不同的属性设置可以展示出不同的效果
  除了常见的双标签外还有一些标签，采用单标签的形式，例如 ：<meta />

2）网络请求的初步认知

请求地址：任何一个请求”都需要“完整URL”
例如：http://www.w3school.com.cn:80/html/index.asp

• 协议
  包括：http https ws wss ftp sftp rtmp…等等

1） 协议双方

• 客户端：发送请求的软件（例如浏览器：谷歌浏览器 火狐浏览器 360 qq 。。。。）
• 服务端：接收并处理请求的软件（webServer：nginx apache tomcat。。。。）

2） 协议的内容

• 协议的内容：处理请求的方式

3）域名

	1）服务器 ：一台电脑
	2）IP地址 ：任何一台联网的电脑都有一个IP——在浩瀚的网络中你的电脑的一个唯一标示
	3）IP的别名（域名） ：一般由三段组成（你花钱购买的是“名+后缀”）

4）端口

    1）作用 ：是为一个软件“运行”提供的一个入口
    2）为webServer的运行提供的一个入口
    3）如果你发送的是https请求，那么就会拼接上:443
    4）如果你发送的是http请求，那么就会拼接上:80

5）地址

    1）网络请求的本质是：打开远程电脑中的一个文件，读取其中的内容并返回
    2）你要打开的那个文件的路径：
	        绝对路径：相对于根文件夹而言的路径
	        相对路径：相对于当前文件夹而言的路径
	      参照物：网站根目录（是可以自定义的）

6）参数

访问网页中所需要的一些数据
在URL地址中，?后面是参数，多个参数之间用&链接。例如：
https://www.baidu.com:443/s?ie=utf-8&f=8&rsv_bp=1&tn=monline_4_dg&wd=2325

3.3.5 在自己喜欢的编辑器中修改clone下来的模板并发布

1）打开Git Bash Here这个终端输入以下命令，如图所示：

注意：ls是查看当前目录下的文件，当前目录中的blog是clone 远程仓库时，在项目根目录下创建的文件夹，里面存放有clone下来的网站文件。

2）cd blog 进入到此文件夹中，如图所示：

3）由于修改了仓库中的代码，输入 git status 点击回车，就可以看到修改过的_comfig.yml文件变成了红色，表示还没有推送到暂存区

4）输入以下两行代码你就会发现修改的_comfig.yml文件变成了绿色，这就表示已经推送到了暂存区，但是没有正式提交到本地版本库，如图所示：

5）执行以下命令提交到本地版本库，如图所示：

注意：fourth push 只是作为此次提交的备注信息，可随便填写！
origin 是下图图片中所复制的别名（也可以把origin修改成下图复制中的内容）
6）如果你是第一次使用，需运行如下命令

git config ：当你是第一次安装git，并且第一次提交的时候会提示你执行两行命令。
git config --global user.name "名字" 设置你的名字
git config --global user.email "邮箱" 设置你的邮箱

至此，修改文件代码并提交本地版本库工作完成，网站已可正常访问：
本文blog访问地址：https://yueshuai00.github.io/

四、用Docker搭建服务器

4.1 购买服务器及域名

• 系统选择

  • Windows
  • linux
  • ubuntu （推荐）
  • Mac

• 工具选择

  • Xshell：用来登陆远程服务器 用终端控制远程服务器
  • Xftp ：向远程服务器传文件

本实例采用阿里云介绍，阿里云官方地址（https://www.aliyun.com/）

1. 首先注册一个阿里云账号（如有：请跳过）
2. 登录后选择云服务器ECS：请看下图
   
   点击后进入购买界面，如图所示：
   
   2.1 点击购买，跳转页面如图所示:
   
   2.2 配置好了之后点击下一步，如图：
   
   2.3 配置好了在点击下一步，如图：
   
   2.4 配置好了点击下一步，如图：
   
   到了这一步点击确认订单，购买（接下来进入到控制台界面就可以看到你所购买的服务器了）

记录下IP(公网)，打开Xshell，连接到服务器。

4.2 购买域名（略，不懂自行百度）

4.3 远程连接服务器

1. 打开Xshell新建一个会话
   
2. 属性面板配置
   

输入cd / 进入根目录，键入 ls（查看命令）可以看到当前目录下的文件列表。cd + ls 配合使用相当于windows的双击。

 cd /

这样就能看到Ubantu系统的所有文件夹。再次输入cd ，回到购买登录时的位置

4.3.1 使用Docker搭建环境

博客是一个纯粹静态网页，想把博客放上去运行，只需要WebServer就可以实现需求。这里我们采用Docker

1) 修改镜像源
进入阿里云镜像网站

2） 备份镜像源文件

终端中输入命令如下：

mv /etc/apt/sources.list /etc/apt/sources.list.bak

3） 新建镜像源文件

输入以下命令进入编辑器，然后按a键进入编辑模式。接着复制阿里云官方ubuntu16.04的配置，并粘贴到 vim编辑器中。

vim /etc/apt/sources.list

Ubuntu 16.04配置如下：

deb http://mirrors.aliyun.com/ubuntu/ xenial main
deb-src http://mirrors.aliyun.com/ubuntu/ xenial main

deb http://mirrors.aliyun.com/ubuntu/ xenial-updates main
deb-src http://mirrors.aliyun.com/ubuntu/ xenial-updates main

deb http://mirrors.aliyun.com/ubuntu/ xenial universe
deb-src http://mirrors.aliyun.com/ubuntu/ xenial universe
deb http://mirrors.aliyun.com/ubuntu/ xenial-updates universe
deb-src http://mirrors.aliyun.com/ubuntu/ xenial-updates universe

deb http://mirrors.aliyun.com/ubuntu/ xenial-security main
deb-src http://mirrors.aliyun.com/ubuntu/ xenial-security main
deb http://mirrors.aliyun.com/ubuntu/ xenial-security universe
deb-src http://mirrors.aliyun.com/ubuntu/ xenial-security universe

键盘上按ESC，退出编辑模式，再在命令行输入:wq，敲回车保存修改。

4） 更新源信息

键入以下命令：

apt-get update

如图：

5） ubuntu 16.04 安装docker 以及docker-compose

安装Docker：

apt-get install docker.io

注：出现提示，敲Y后回车开始安装

查看安装是否成功：

docker -v 或 docker -version

回车运行后出现版本号即为成功

在linux系统中如何查看某个软件是否安装成功
该软件名（命令名） -v 或者 软件名（命令名） --version
出现版本号 即为安装成功

6） 更换Docker镜像源

• 访问https://cr.console.aliyun.com/cn-beijing/instances/mirrors
• 按照文档中的操作逐步进行

（1）

sudo mkdir -p /etc/docker

（2）

sudo tee /etc/docker/daemon.json <<-'EOF'
{
  "registry-mirrors": ["https://q829bswc.mirror.aliyuncs.com"]
}
EOF

（3）

sudo systemctl daemon-reload

（4）

sudo systemctl restart docker

执行完毕即完成了镜像源更换。

7） 安装docker-compose

安装命令：

sudo curl -L "https://get.daocloud.io/docker/compose/releases/download/1.24.1/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

给docker-compose添加一个执行权限

chmod +x /usr/local/bin/docker-compose

将课件中的docker文件夹 拖拽到服务器中的家目录（你一开始进入服务器时所在的文件夹）

说明：上传前，请将docker\phpdocker\nginx下的nginx.conf文件修改为正确的域名，如下图：

查看docker-compose是否安装成功

docker-compose -v

出现版本号即为成功

8） 安装nginx 搭建环境

在Xshell中键入命令：

// 进入docker文件夹
cd docker

执行 docker-compose up -d 命令 启动docker

4.3.2 上线博客

• 在你本机安装ruby（ruby下载链接：https://rubyinstaller.org/downloads/）
  • 在本机终端 敲击 gem install jekyll(大概5分钟左右)
  • 在本机终端敲击jekyll -v 出现版本号即为成功
  • 在项目根目录中 jekyll build 就会出现_site

选择2.6版本，下载后直接安装，并在本机运行cmd 命令行工具，输入如下命令：

gem install jekyll

查看是否安装成功：

jekyll -v

打开 Git Bash Here 进入到blog项目文件夹，执行项目打包：

jekyll build

用ls查看项目文件夹，会发现多了一个_site文件夹（这个文件夹里的所有文件就是要放到网站上的文件）。然后用Xftp将文件上传到服务器。

4.3.3 上传网站

（1）
逐级点开文件夹：/root/docker/www/blog
即：把文件放到docker文件夹下面的www文件夹下的blog文件夹里。

（2）
删除原有的html测试文件。将左边本地的文件全部选中拖拽到右侧服务器blog文件夹下(稍等即上传成功)

4.3.5 访问博客

如果没有域名，可直接用IP地址访问