利用gitcafe托管静态网页

由于我的博客系统hexo就是托管在gitcafe上面,所以对于gitcafe和github就有着比较浓厚的兴趣,前段时间又把git学习了一下,算是刚好入了个门吧;在gitcafe上有一个gitcefe-pages分支,可以用于展示我们的一个页面,给我们提供了一个免费的空间,也可以使用它的二级域名,但是项目名称和****.gitcafe.com一样(二级域名);而且一个账号只能有一个这样的页面;

如果我们要想搭建一个页面,首先我们要申请一个gitcafe的账号(github也有这个功能,但是速度没有这么快)我的gitcafe主页 一看gitcafe这个名字,肯定是和git有关系,所以我们还要在电脑上安装git(本人用的是windows系统)在我之前的博客里有详细的介绍怎么安装初探hexo博客,第一次注册的时候,要添加在gitcafe上添加ssh密匙,ssh好像是一种加密协议,就相当于是验证我们的身份,因为我们的自己的电脑是在本地,而服务器端是在远端,所以我们就需要一种安全的传输协议,第一次添加这个的时候我也搞了很久,不知道怎么搞;多弄几次就清楚了;

如果我们是第一次用gitcafe的话就需要创建一个新的ssh密匙;

在自己的电脑上,需要提交托管的位置,进行git bash 然后进入一个窗口界面,输入下面的命令:

cd ~/.ssh

进入ssh的目录;如果没有这个目录的话,可以自己手动创建一个;也可以输入命令创建:

mkdir ~/.ssh

接下来我们就要创建一个新的密匙:

ssh-keygen -t rsa -C "[email protected]"

把其中的邮箱地址换成自己的;

然后就会提示下面的信息;

$ ssh-keygen -t rsa -C "[email protected]"
Generating public/private rsa key pair.
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in /c/Users/USERNAME/.ssh/id_rsa.
Your public key has been saved in /c/Users/USERNAME/.ssh/id_rsa.pub.
The key fingerprint is:
15:81:d2:7a:c6:6c:0f:ec:b0:b6:d4:18:b8:d1:41:48 [email protected]

其中就需要我们输入passphrase ,这个就是我们以后提交需要输入的密码;

然后,我们的ssh密匙就生成啦,我们就可以去用户目录 (~/.ssh/) 下看到私钥 id_rsa 和公钥 id_rsa.pub 这两个文件,id_rsa是存储我们的个人信息的,千万不要把id_rsa的信息告诉别人;

然后我们就可以把我们的ssh密匙添加到gitcafe上;

进入 GitCafe -->账户设置-->SSH
公钥管理
设置项,点击添加新公钥 按钮,在
Title 文本框中输入任意字符,在 Key 文本框粘贴刚才复制的公钥字符串,按保存按钮完成操作。

添加完成后,我们就要进行连接测试,看我们是否能够连接上gitcafe;

在git bash 里面输入:

ssh -T [email protected]

如果是第一次连接的话,会出现下面的提示信息:

The authenticity of host 'gitcafe.com (50.116.2.223)' can't be established.
#RSA key fingerprint is 84:9e:c9:8e:7f:36:28:08:7e:13:bf:43:12:74:11:4e.
#Are you sure you want to continue connecting (yes/no)?

我们就核对上面的信息和我们生成的是否一致,如果一致我们就输入 yes;

然后中间会提示要我们输入passphrse口令;

Enter passphrase for key '/c/Users/USERNAME/.ssh/id_rsa':

连接成功会出现下面的提示信息:

Hi USERNAME! You've successfully authenticated, but GitCafe does not provide shell access.

用户名就是我们gitcafe的用户名。

这是我们第一次使用ssh的步骤,像我开始用了一个账号搭建了我的博客,然后在github上还有密匙,然后我又注册了一个账号准备搭建一个页面;这怎么办呢?开始我搞的时候 用的密匙总是会混乱;昨天我就找到了一个不是很好的解决办法;还是解决了这个问题;

第一步还是生成另一个密匙:

ssh-keygen -t rsa -C "[email protected]" -f ~/.ssh/gitcafe

这里的步骤和前面的基本上差不多;

第二步和前面的第二步一样,我就不重复了;

第三步这里就是关键的一步:在 SSH 用户配置文件 ~/.ssh/config 中指定对应服务所使用的公秘钥名称,如果没有
config 文件的话就新建一个,并输入以下内容:

Host gitcafe.com www.gitcafe.com
  IdentityFile ~/.ssh/gitcafe

后面的那个名字就是你密匙的名字;前面我在github上创建的密匙,我也是通过这种方式添加的,只不过把网址换成了github;

后面这里又有了一个问题,因为我是有两个账号,我的gitcafe密匙就是有两个,所以,我在里面就添加了两个密匙,第一个密匙就是我当前要用的密匙,当我们需要用哪个就把哪个放到第一位,虽然有点麻烦,但是还是可以存在两个一起用了;(可能这里还会有更好的方法,也希望大家有更好的方法可以告诉我啊)

后面的步骤就和前面的一样了,添加到gitcafe和测试连接;

我们可以连接在gitcafe之后,这下我们就可以搭建我们的页面了,也可以搭建一个博客系统,我搭建的博客系统是hexo(静态页面的博客);

这里就需要利用我们的git工具了,首先我们在gitcafe上面创建一个公开项目(因为我们用的是免费的托管,私有项目是要花钱的),开始我们就可以填好我们的项目名,项目名要和我们的用户名一样,这样我们才能使用二级域名;前面填好之后,在项目主页那里应该就会自动生成我们的二级域名;

然后我们点击完成,下面就应该会出现一些代码:

1全局设置:
git config --global user.name ''
git config --global user.email ' 你的邮箱'
2接下来:
? 在本地创建新的 Git 仓库
mkdir 1
cd 1
git init
touch README.md
git add README.md
git commit -m 'first commit'
git remote add origin '[email protected]:你的那个项目地址'
git push -u origin master
或
? 在本地已有 Git 仓库
cd existing_git_repo
git remote add origin '[email protected]:项目地址'
git push -u origin master

然后我们就可以直接再gitcafe里面添加文件了,也可以在本机创建一个新的文件夹然后再提交到gitcafe,也可以把一个已有的文件夹,git Init然后再把这个文件夹提交到gitcafe上,按照上面的代码就行了;

这里是第一次提交的代码;后面的提交更新就可以不用加上-u了,这些内容可以去学习一下git;

然后这里我们默认在git里面创建的是master 分支;而我们gitcafe上面可以展示的页面是gitcafe-pages分支,首先我们可以创建一个新的分支:

git checkout -b gitcafe-pages

其他的那些代码可以不变,这样我们提交的东西就会生成在gitcafe-pages分支里面,我们提交的时候就和前面有点不同了;

git remote add origin '[email protected]:项目地址'
git push -u origin gitcafe-pages

因为我们是要提交到gitcafe-pages的这个分支上;所以需要把master分支改成gitcafe-pages分支;然后我们就可以提交我们的页面代码了;主要是html,里面可以含有css和js;搭建好了之后,不会马上就可以在二级域名上显示,要等一会;还有的就是,那个HTML文件名最好叫做index.html,我昨天开始不是这个名字,提交之后没有显示,改了之后,就可以显示了。然后我们就可以自定义我们的页面啦,做了一次小小的搬运工,祝大家折腾愉快~~

利用gitcafe托管静态网页

时间: 2024-11-03 21:07:22

利用gitcafe托管静态网页的相关文章

利用CSS制作静态网页的注意事项

利用CSS制作静态网页主要是在<head>里面使用外联CSS文件来赋予网页样式 首先用div分区块,了解网页布局,脑子里面有个大概的页面布局 目前学习写的几种的网页布局可以分为以下几种情况: 1.页面中间 centen ,两边留白 :直接测量 centen 内容的宽度和高度,利用 maigin:auto 让内容居中即可: 2.页面顶部 head 满页面内容 ,下面centen 居中 ,两边留白:head 宽度设为100%,中间centen 内容的宽度和高度,利用 maigin:auto 让内容

利用 Express 托管静态文件

通过 Express 内置的 express.static 可以方便地托管静态文件,例如图片.CSS.JavaScript 文件等. 将静态资源文件所在的目录作为参数传递给 express.static 中间件就可以提供静态资源文件的访问了.例如,假设在 public 目录放置了图片.CSS 和 JavaScript 文件,你就可以: app.use(express.static('public')); 现在,public 目录下面的文件就可以访问了. http://localhost:3000

服务器node中间间利用express插件托管静态文件

const express =require('express'); const app=express(); //实现静态资源服务 let server=app.use(express.static('public')); server.listen(3000,()=>{ console.log('public文件夹已经托管到服务器') }) 在本目录创建public文件夹,添加虚拟目录 // 服务器node中间间利用express插件托管静态文件 const express =require

Java Web学习(2):静态网页与动态网页

一静态网页 (1)静态网页概述 在网站设计中,纯粹HTML(标准通用标记语言下的一个应用)格式的网页通常被称为"静态网页",静态网页是 标准的HTML文件,它的文件扩展名是.htm..html,可以包含文本.图像.声音.FLASH动画.客户端脚本和ActiveX 控件及JAVA小程序等.静态网页是网站建设的基础,早期的网站一般都是由静态网页制作的. 静态网页是相对于动态网页而言,是指没有后台数据库.不含程序和不可交互的网页.静态网页相对更新起来比 较麻烦,适用于一般更新较少的展示型网站

HTML5静态网页实战开发—企业网页

一.首先找到模板 二.勾画框架(写div),切图(ps) 三.实战开始 这一次共花了一下午时间,利用html.css做出静态网页 在外观,布局,动画都有一点改善 四.静态网页效果 倒数第二的div是一组图片滚动动画(仿js),利用css3写出(缺点是兼容性并不是很好) 五.部分源码(需要完整的可以联系我) HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

首次使用photoshop制作简单的静态网页页面

刚刚进入IT领域,我首先接触到的是PhotoShop软件.经过一周的学习,我对PS软件已经有了初步的认识.PS首先是一款修图软件,对于图片中不太美观的地方可以按照自己的想法做任意的修改,利用"蒙版"工具可以做图片间的融合,这给我们提供了巨大的创作空间:其次,它可以进行图片和动画的制作,静态网页页面和多张图片的联动动画都可以在这里完成. 周五我做了两个简单的静态网页页面:网上购物的注册界面和登录页面,也借此检测一下自己对PS软件的掌握程度.在制作过程中,我发现许多问题并从中总结到了一些经

运用CSS对静态网页进行布局和效果设置

CSS中对静态网页的布局和定位已经较为成熟  现在运用CSS(层叠样式表)已经可以对静态网页的色彩搭配 .图片点击效果.列表外观进行设置 较使用时间较长的JS有了很大提升  而HTML5在图片和基本的点击事件以及动画上面也有了很多提升   使HTML5超前完成了JS可以完成的工作任务 以下列出CSS中静态网页布局需要使用到的一些元素 要使网页页面美观  我们需要对网页进行大小 .背景图片(或背景颜色).以及网页内的文字和网页的所属小的版块位置的设置 1.网页基本属性的构成 border:延用HT

动态网页和静态网页的区别

一.从功能方面来说动态网站与静态网站的区别 1. 动态网站可以实现静态网站所实现不了的功能,比方说:聊天室.论坛.音乐播放.浏览器.搜索等:而静态的网站则实现不了.2. 静态网站,如用Frontpage或Dreamweaver开发出来的网站,其源代码是完全公开的,任何浏览者都可以非常轻松地得到其源代码,也就是说,自己设计出来的东西很容易被别人盗用.动态网站,如:ASP开发出来的网站,虽然浏览者也可以看到其源代码,但是那已经是转换过以后的代码,想盗用源代码那是不可能的,因为它的源代码已经放在服务器

利用 JavaScript SDK 部署网页版“Facebook 登录”

利用 JavaScript SDK 部署网页版"Facebook 登录" 通过采用 Javascript 版 Facebook SDK 的"Facebook 登录",用户可以使用 Facebook 凭据登录您的网页.即使您因为一些原因而无法使用我们的 JavaScript SDK,也一样可以实施"Facebook 登录". 要在不使用 JavaScript SDK 的情况下实施"Facebook 登录",请参阅手动构建登录流程