教你如何建高逼格个人网站

从大学开始我就希望能有一个自己的个人网站,觉得那样真的很酷,就自学了HTML和Java编程,从此踏上了码农搬砖的不归路。。。。现如今,建一个网站的成本真的是太低了,特别是有了GitHub以后,不懂代码的孩子都可以自己建站了。好,废话就放到最后说。

一、Git安装配置

1、安装Git软件

2、在Github上注册一个帐号

地址:Github

3、在桌面打开Git,进行设置

git config --global user.name "username"//github的帐号名
git config --global user.email "username@163.com"//github的邮箱地址

4、生成ssh密钥

ssh-keygen -t rsa -C "username@163.com"//github邮箱地址

接着会提醒你输入名字和密码,可以为空
会在C盘的该电脑用户下面生成一个.ssh文件,其中的id_rsa和id_rsa.pub,id_rsa要好好保存,id_rsa.pub用来在github网站做配置用

5、配置github

github设置

使用Add SSH key,tittle可以随意输,将id_rsa.pub中的密钥保存到这里
设置完成后,可以在本地输入

ssh -T git@github.com

其会将github中的公钥与本地的私钥进行匹配,成功则会返回成功信息

成功返回

二、安装Ruby

1、在安装Ruby时一定要勾选Add RubyExcutables to your Path,否则自己要配置环境变量
2、查看是否安装成功

ruby -v

三、安装devkit

四、将Ruby与devkit关联起来

1、在devkit安装目录下

ruby dk.rb init

inti返回

会生成一个config.yml
成功的情况下在该文件下面会有一行是关于ruby的安装路径的数据
如果失败也没事,只要通过手动输入就行了

修改

2、在devkit安装目录下

ruby dk.rb install

五、安装配置octopress

1、克隆octopress,切换到自己要安装的文件下

git clone git://github.com/imathis/octopress.git octopress

2、在octopress的文件根目录下

gen sources -a http://gems.ruby-china.org/ 

一个国内的软件源
移除自带的软件源,因为在国内会被墙

gem sources -r http://rubygems.org

查看软件源

gem sources -l

3、修改octopress文件下面的Gemfile文件中的source地址,也改为http://gems.ruby-china.org/
如果上面的命令存在执行错误,可以使用windows自带的CMD命令行去执行

4、在octopress下

gem install bundle

过程有点长,会有successful
接着执行

bundle install

过程有点长
最后

rake install

会生成source和public文件,source是源代码的文件,而public是生成的文件

5、编译octopress

在octopress文件下

rake generator

该指令会编译修改的内容,生成好的文件会在public文件下

6、运行

在octopress文件下

rake preview

会使用4000端口,开一个服务
使用localhost:4000访问

六、部署到Github网站上去

1、在Github中创建一个username.github.io的仓库,username为用户自己的Github帐号名

2、在octopress文件下

rake setup_github_pages

会提示你输入github中的git地址

github地址

会创建_deploy文件,并且跟Github绑定好了
如果上面的指令不起作用,可以使用下面的方式

rake setup_github_pages[github中username.github.io仓库的ssh地址]

3、使用rake generator

4、使用rake deploy,将本地编译好的文件上传到Github中

七、将source目录代码上传到Github分支

git add .
git commit -m 'your message'//注释
git push origin source
相关软件下载地址:软件
学习网站:jekyll
  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
个人网站一共有8个页面。首先博客的登录界面login.html:是利用html5和css3结合写出的一个超炫酷的页面,根据canvas粒子制作出背景具有动态的效果。登陆后根据存入数据进行比对,对其用户名、密码、验证码验证,只有通过验证后才能登录成功并且验证成功后可以达到全屏的效果。每一个页面分为footer body和footer三部分组成。头部主要就是标题栏,尾部是页脚,中间就是主题内容。index.html主页:主要就利用js焦点滚动式轮播插入图片和文字自行进行翻页,其他主要利用div和css进行控制每一个内容框。利用链接跳转到相对应的内容上。可以根据标题、标签、关键字等点击到另一个内容,图片和文字进行有个布局达到图文环绕的布局。再然后,就是 关于about.html页面:博主简介利用jquery焦点缩略图轮播滚动类似选项卡滑动切换。可以自动展现不同的图片。其次,是成长页面about.html:是博主对未来的美好未来的期待,利用bootstrap响应式布局进行布局,图片和文章不同布局相结合,是整体更协调。再其次,是娱乐fun.html页面,利用CSS3 transform当鼠标悬停到照片上时,图片具有放大特效,主要利用css3中scale()和rotate()进行旋转和缩放。接下来是说说moodlist.html:个人心情页面,博主可以发一些类似于微信或qq心情说说,具有时间年轮的效果,当鼠标放上某一个时具有高亮的效果。最后是留言comment.html页面,可以通过给博主留言。给博主一些意见,该留言可以有表情添加,留言框带有头像。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值