GitHub创建个人主页,创建属于我的个人主页

最初开首驾驭到成品COO、产品助理那样的职位,其实确实是从Axure最早的。掌握到这是叁个“画图软件”,感到和PPT大概嘛。后来对产品的志趣越来深入,也日益本身捣鼓一下它的坚守,感到是个可怜好用的软件!在这里品尝用Axure做贰个粗略的个人主页,以此练习,并记录下了思路和细节。

在GitHub,二个体系对应独一的Git版本库,创造贰个新的版本库正是创制一个新的等级次序。访谈仪表板(Dashboard)页面,如图3-1,能够看到关心的版本库中曾经有多个,但自个儿的版本库为零。在突显为零的本子库列表面板中有贰个按键“New Repository”,点击该按键最早创办新版本库。

先放上网站(Axure分享网址真的加载相当的慢):http://eu9nm1.axshare.com/#c=2

图片 1

鲜明大旨

既是是个人主页,所以本身想既包涵简历内容,再增添一点简历不可能反映得东西。所以开首将主页设置为

个体育联合会系情势(最根本嘛~)、教育经历、职业经历、个人技术、练习文章、兴趣爱好(包涵平常发表小说所用网站)

等多少个板块。

 

创制风格

道理当然是那样的想做成网页同不时候用手提式有线电话机操作风格,开采1280*720用网页看的话,三个显示屏很可能装不下!所以折中之后,将分界面改小了。然后小编盼望

任何页面通过左右滑行切换内容,并且能够透过最尾巴部分的开关,连忙步向目的页面。

如此那般在浏览让更加的便捷。如图:

创建风格之后,大家就能够进来下一步啦~!

接下去,走入种种分页面包车型客车开始和结果设计。由于初心正是惦记简单演习,何况模拟手机分界面,所以每一页只留起码的东西。具体的主张为:

主页:留下姓名、联系情势等。

教育页:加个校徽好了。

私家演习:只放前段时间的著述。

个体爱好:图+文。

这么的设计之后就从头了早期的页面消息排布啦~!如下图:

(各主页图)

步向代码库创设页面:

主页面动作布置

自家以为Axure7.0的动态面板是三个相当好用的构件。小编大致用动态面板做了三四层的嵌套。对于贰个知道程序语言的人来讲,那样的嵌套并不算难。难的是内需用哪些表现情势技能将切换体验做好,并且美观。自觉水平有限,所以努力!

左右滑行效果

本人将八个页面都做成主页面包车型客车贰个动态面板的6个state。并设置逻辑

当在有个别页面时,向左切换来它的前三个页面,向右切换来它的下二个页面。

换来C语言便是:

If(this=state2)

{

if(slip direction=left)

this=state3;

if(slip direction=right)

this=state1;

}

就这么,即便麻烦了点,但是对此6个页面,工作量也不算大。假设工作量大,就要必要更加好的优化措施了。这里并不曾再追究。如图:

底层按键动作

自身是先上网收罗了有关的Logo,然后对每一种Logo举行单独设置的。

实则也相当的粗略,只要在设置单击Logo的时候,让动态面板切换成相应的页面就足以了。如图:

 

页面内容设计

某个页面供给再做效果,用以容纳越来越多的音讯。所以,在各种页面有着愈来愈多的操作功效。

做事经历页面

出于职业经验的篇幅相当多,基本不能够根据全体的书体风格装进去。所以自身着想做了个抽屉式的内容举办。

具体功效为:

在健康景况下收受,当要翻开时,点击标题就能够扩充,再次点击能关闭。

如图:

在那边运用了藏匿/显示部件,同不经常常间推动/推动元件。将详细内容做成遮蔽,然后在鼠标单击时,交互动作设置为展现,同期推进下方的构件

就会做出抽屉效果。

民用练习页面设计

村办演练中自己放了三个竞品分析的ppt。

什么样才具让浏览者见到一些内容吧?

自个儿想开了近乎相册的tab效用。最后的结果就是左右带来能够切换ppt页数,可是另一些正是Axure的享受网页张开异常的慢,所以作者只放了3张ppt,然后做了个外表链接,引导顾客自行查看。如图:

那些功用达成也是依据动态面板。

新建四个动态面板,将三张ppt放在五个不等的state。然后和主页面切换同样设置就可以。差异的是反正拖动改成前后拖动。

兴趣爱好页面设计

在那几个页面小编准备放上几张本身的留影照片。最佳能(CANON)切换查看,同临时间还能够够大图查看。

故此自身的宏图思路为:

反正做断定的切换辅导,並且单击图片能够放大图片查看。

如图:

其一效果一样依赖动态面板。

切换图片的动态面板命名叫“水墨画切换”,只要在首页再安装七个动态面板“水墨画放大”,而且安装为遮掩。然后设置逻辑为:只要单击“油画切换”,则依照“水墨画切换”当前的图纸改变“油画放大”的图景,相同的时候改造状态为展现。

如图:

Repository name下填写yourname.github.ioDescription (optional)下填写部分简短的陈述(不写也不曾关系),如图所示:

细节丰富

整个创作到那边实在以及算达成了。可是,

为了指引客户采用产品,作者愿意做一些细节来开展提示,最佳不影响到顾客的心得,同有的时候间又有效。符合帕累托改革最佳了。

主页切换提醒

为了辅导刚展开页面包车型的士客户滑动主页切换,我在主页加载两秒后,做了贰个指头动作的教导,如图:

在页面载入的时候做逻辑如下:

在尾巴部分Logo上,当鼠标移入时,会有影子效果,笔者感到那样会生出立体感,增大顾客点击的可能。

除此以外,作者找了颜色各异的同样Logo,在有个别页面时,对应的Logo用巴黎绿代表。将近年来页面前境遇应的图标准面米黄版本置顶,其他置于底部就可以。如图:

同等的,在工作经历页面,鼠标移入标题之后,颜色变化,同样是为了指导客户点击。一样的功效,还应该有兴趣爱好的简书、博客园主页入口,鼠标移入后会有阴影变化。

图形切换效果引导

在竞品深入分析ppt何地,笔者一向在思索怎么样让浏览者领悟,那些模块是能够通过内外浏览切换的。

后来作者想开,能够做个堆成堆的效益,让顾客爆发“这叠纸片能够查看”的主见。

接下来就有了上边包车型客车功能。况且,当查看图片后,上面包车型地铁条数会随之变化。

其一职能是在动态面板模块下,直接用两条矩形框填色后成功。在切换动态面板内容的时候,设置遮蔽矩形框和推拉,就足以完毕那么些效应。

其余,在供给的地方,小编都用鼠标移入提醒做了验证,希望以此能够越来越好指导顾客浏览。

写在结尾,至此,这几个交流文章就到此甘休。即便小巧,可是希望能以此熟谙本身的才能,增进见识。

 

图片 2

 

 

不错创设之后,你将会见到如下分界面:

图片 3

 

下图能够看到访问左券增添了一个补助读写的SSH协议,访问地址为:git@github.com:gotgithub/helloworld.git。注意任何GitHub客户均可采纳该UMuranoL访问此公开版本库,但唯有版本库创设者gotgithub具备读写权限,其余人只有只读权限。在伊始化版本库在此之前,最佳先用公钥举办表达。(参谋:)

图片 4

 

配备公钥验证后,呈现如下:

$ ssh -T git@github.com
Hi gotgithub! You've successfully authenticated, but GitHub does not provide shell access.

-------------------------------------------------------------------------------------------------------------------------------
  • 在本土克隆新创设的版本库。

    $ git clone git@github.com:gotgithub/gotgithub.github.io.git
    $ cd gotgithub.github.io/
    
  • 在本子库根目录中开创文件index.html用作首页。

    $ printf "<h1>GotGitHub's HomePage</h1>It works.n" > index.html
    
  • 创造提交。

    $ git add index.html
    $ git commit -m "Homepage test version."
    

  推送到GitHub,完毕远程版本库制造。

   $ git push origin master

-----------------------------------------------------------------------------------------------------------------
  • 做客网址: 。

    最多等待10分钟,GitHub就足以成功新网址的配置。网址成功布署后版本库的全体者会收下邮件布告。

    再有要注意访谈客商二级域名的主页要采纳HTTP协议非HTTPS公约。

 

 

配置Hexo

安装Hexo

在谐和认为适用的地点创设叁个文本夹,然后在文件夹空白处按住Shift+鼠标右键,然后点击在此间展开命令行窗口。(一样要记住啦,下文中会使用在当前目录打开命令行来代指上述的操作)

在命令行中输入:

npm install hexo-cli -g

然后您将拜谒到:

图片 5

恐怕您会见到多个WARN,不过并不是操心,这不会影响您的例行使用。 然后输入

npm install hexo --save

然后你拜见到命令行窗口刷了一大堆白字,下边我们来看一看Hexo是或不是一度安装好了。 在命令行中输入:

hexo -v

一旦你见到了如图像和文字字,则注解已经设置成功了。

图片 6

初始化Hexo

随之下面的操作,输入:

hexo init

如图:

图片 7

接下来输入:

npm install

尔后npm将会自动安装你须求的机件,只须求拭目以俟npm操作就可以。

第一回体会Hexo

此伏彼起操作,同样是在指令行中,输入:

hexo g

如图:

图片 8

然后输入:

hexo s

接下来会唤起:

INFO  Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

在浏览器中展开http://localhost:4000/,你将会看出:

图片 9

到近来停止,Hexo在该地的布局已经全都截止了。

使用Hexo

在配置进度中请使用yamllint来担保本身的yaml语法精确

修改全局配置文件

此段子引用自Hexo官方文书档案

你能够在 _config.yml 中期维修改大部份的布署。

网站

参数 描述
title 网站标题
subtitle 网站副标题
description 网站描述
author 您的名字
language 网站使用的语言
timezone 网站时区。Hexo 默认使用您电脑的时区。时区列表。比如说:America/New_York, Japan, 和 UTC

网址

参数 描述 默认值
url 网址  
root 网站根目录  
permalink 文章的 永久链接 格式 :year/:month/:day/:title/
permalink_default 永久链接中各部分的默认值  

要是你的网址寄放在子目录中,比方 http://yoursite.com/blog,则请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/

目录

参数 描述 默认值
source_dir 资源文件夹,这个文件夹用来存放内容。 source
public_dir 公共文件夹,这个文件夹用于存放生成的站点文件。 public
tag_dir 标签文件夹 tags
archive_dir 归档文件夹 archives
category_dir 分类文件夹 categories
code_dir Include code 文件夹 `downloads/code
i18n_dir 国际化(i18n)文件夹 :lang
skip_render 跳过指定文件的渲染,您可使用 glob 表达式来匹配路径。  

文章

参数 描述 默认值
new_post_name 新文章的文件名称 :title.md
default_layout 预设布局 post
auto_spacing 在中文和英文之间加入空格 false
titlecase 把标题转换为 title case false
external_link 在新标签中打开链接 true
filename_case 把文件名称转换为 (1) 小写或 (2) 大写 0
render_drafts 显示草稿 false
post_asset_folder 启动 Asset 文件夹 false
relative_link 把链接改为与根目录的相对位址 false
future 显示未来的文章 true
highlight 代码块的设置  

分类 & 标签

参数 描述 默认值
default_category 默认分类 uncategorized
category_map 分类别名  
tag_map 标签别名  

日子 / 时间格式

Hexo 使用 Moment.js 来深入分析和出示时间。

参数 描述 默认值
date_format 日期格式 MMM D YYYY
time_format 时间格式 H:mm:ss

分页

参数 描述 默认值
per_page 每页显示的文章量 (0 = 关闭分页功能) 10
pagination_dir 分页目录 page

扩展

参数 描述
theme 当前主题名称。值为false时禁用主题
deploy 部署部分的设置

配置Deployment

先是,你须要为和煦安顿身份消息,展开命令行,然后输入:

git config --global user.name "yourname"
git config --global user.email "youremail"

同样在_config.yml文件中,找到Deployment,然后根据如下修改:

deploy:
  type: git
  repo: git@github.com:yourname/yourname.github.io.git
  branch: master

若果应用git格局开展示公布局,实行npm install hexo-deployer-git --save来设置所需的插件

然后在当前目录张开命令行,输入:

hexo d

紧接着依照提示,分别输入自个儿的Github账号客户名和密码,初始上传。 然后经过

拉长新文章

开发Hexo目录下的source文本夹,全部的篇章都会以md格局保存在_post文件夹中,只要在_post文件夹中新建md类型的文书档案,就能够在实施hexo g的时候被渲染。 新建的小说头须求丰盛一些yml信息,如下所示:

---
title: hello-world   //在此处添加你的标题。
date: 2014-11-7 08:55:29   //在此处输入你编辑这篇文章的时间。
categories: Exercise   //在此处输入这篇文章的分类。
toc: true  //在此处设定是否开启目录,需要主题支持。
---

进阶

借使成功做到了上述的全方位步骤,恭喜你,你早就搭建了三个极端简练且基础的博客。可是这么些博客还特别轻巧, 未有个人的定制,操作也相比复杂,下边包车型大巴进级技艺将会让您获得对Hexo更为深远的摸底。

改变核心

可以在此处查找自个儿喜欢的宗旨 下载全部的焦点文件,保存到Hexo目录下的themes文本夹下。然后在_config.yml文本中期维修改:

# Extensions
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
theme: landscape //themes文件夹中对应文件夹的名称

然后先施行hexo clean,然后再度hexo g,并且hexo d,相当的慢就能够来看新主题的机能了~

改造域名

先是,供给注册二个域名。在中华以来,.cn统统须要打开备案,假使不想备案的话,请注册其余超级域名,能够使用godaddy或新网或万网中的任性一家,自个儿权衡价格就能够。 然后,大家须要安顿一下域名解析。推荐使用DNSPod的劳动,相比牢固,深入分析速度相当的慢。在域名注册商出修改NS服务器地址为:

f1g1ns1.dnspod.net
f1g1ns2.dnspod.net

以新网为例,首先点击域名管理进入管理页面:

图片 10

然后点击域名背后的管理

图片 11

进去域名管理的操作分界面,点击域名管理,来到域名管理分界面:

图片 12

点击修改域名DNS,然后选择填写具体信息,在下边的空框中填入DNSPod的NS服务器:

图片 13

接下来大家进去DNSPod的界面,开始真的步向域名深入分析的配置= =。在DNSPod中,首先增加域名,然后分别增进如下条约:

图片 14

终极,我们对Github进行一下布局。

在协和本地的hexo目录下的source文件夹中,新建二个CNAME文件(注意,未有后缀名。),内容为yourdomin.xxx。然后再举办一下hexo d -g,重新上传本身的博客。 在github中张开你和煦的库,步入库的setting分界面,借使见到了之类提示,表明配置成功了。

图片 15

在这一多元的操作中,包涵修改NS服务器,设置A剖判等等,都必要分明的时日。短则10分钟,长则24钟头,最长不会当先72小时。假如逾越72时辰,请检查本身的布局进程,可能涂改本人本地的DNS服务器。

参考:
https://xuanwo.org/2015/03/26/hexo-intor/
http://www.cnblogs.com/liuxianan/p/build-blog-website-by-hexo-github.html
http://luckystar88.github.io/2015/08/31/%E4%BD%BF%E7%94%A8hexo-github%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/
http://theme-next.iissnan.com/

 

本文由明仕msyz手机版发布于家居装修-蜗牛装饰,转载请注明出处:GitHub创建个人主页,创建属于我的个人主页

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。