Github Pages(一):一个最基础的个人网站

一直想做个博客网站,去网上查了一下,最先查出来的是云服务器+WordPress,不过又要买服务器,又要买域名,还得备案。

后来发现每个Github账户都可以开一个自己的静态网站(域名为 username.github.io),非常简单。

静态网站的定义参见维基百科-网页设计,虽然方便,但是也有一些功能上的限制,最显著的特点就是不能运行php和asp,不能自动读写站内的文件。

不过静态网页依然可以实现个人博客需要的所有功能,而我也只是学习一下做网页、博客什么的,这个方案已经是最好的了。

这篇博客介绍搭建一个基于html的网站框架的过程。

拥有并了解Github 账户

第一步 注册

没啥好说的,进入https://github.com,然后注册一个账户就可以了。

第二步 确保可以自由地创建/修改/下载/上传一个库(repository)

网页是由很多html,css,js等文件组成的,对github pages来说,一个repository就是存放这些文件的文件夹,所以确保可以随心所欲的管理一个库是最基本的。

这里是第一个官方教程:GitHub:Hello world。可以通过按钮来理解一个库的构造和维护,不过这只能让你创建修改一个Readme文件。

这里你会意识到每个库是可以创建分支(branch)的,实际操作中,如果对版本要求没那么严格(做个网页而已),你可以忽略branch的存在,只用master一个默认branch即可。

这个时候你已经可以用网页看到这么一个库了,这个图是我自己博客的库,而到这一步你的库应该只有一个Readme:

Github Pages的一个库

Github的关键就是可以用Git来控制(维基百科-Git),这是一个版本工具(我的理解是一个每次上传都备份一个版本,并且可以协调多人同时修改的公用网盘)。当在确定自己的终端可以使用 git --version 命令(Mac+Xcode自带),并且安装了SSH-Key 之后,你就可以使用如下的基本命令来控制你的库了:

git clone 你的SSH地址 (下载你的reposity,这个地址可以用网页浏览的Clone-or-Download-use SSH按钮看到,比如说git@github.com:uername/reposity.git)
git pull (联系服务器,更新本地文件夹)
git add --all (写入本地的所有新文件)
git commit -am "随便说点啥" (在本地进行一次有记录地更新,包括本地所有文件的修改)
git push origin master (把本地的更新推送到服务器)

SSH-Key决定了你的电脑有没有权限进行这些操作,这里有另一个官方教程:GitHub:SSH,这个是必须一步步跟下来的,Mac的重要命令包括:

ls -al ~/.ssh (查一下是不是已经有key了)
ssh-keygen -t rsa -b 4096 -C "your_email@example.com" (产生一个key,不单独设密码的话一路回车就行)
pbcopy < ~/.ssh/id_rsa.pub (把你的key复制到粘贴板,不这么复制可能太长了复制不下来)

Linux和Windows进入刚才的教程看就行,如下图,在点击“右上头像”+“Settings”+“SSH and GPG Keys” 这里添加了你刚刚复制的public Key之后,你就有权限进行上述的Git操作了。

在这里添加id_rsa.pub里面的内容

搭建Github Page网站

第一步 创建一个Github Pages repository

GitHub Pages repository跟普通的repository是一样的,唯一的区别就是他的名字必须叫做username.gihub.io。这个官方教程 GitHub Pages 写的十分好懂,按这个做完之后你就有了一个你的网址 username.github.io,里面有一句 Hello World!

第二步 最基础的网站框架

现在离一个好网站只差一步了,就是把某个好网站的所有文件拷贝到你的库里面。

GitHub官方建议你使用博客生成工具 Jekyll 。GitHub在库的设置里面还提供Jekyll主题选择。而我的博客使用了Hexo生成工具,具体见我的博客Github Pages(三):使用Hexo博客生成工具
强烈推荐使用网站工具,这样可以直接用markdown格式编辑文章,而且使用简单的命令实现预览,生成和发布,从而节省大量的时间。

我一开始并不了解博客工具,所以去了一个模版网站 HTML5 UP,然后下载了其中一个模版,直接在本地打开 index.html,就看到了网站预览,如图:

一个朴素的网站模板

然后我再手动git add 所有的文件到我的网站中。当你git push之后,你的域名就会变成这样一个网站了。这也就是一个最基础的网站了。
不用博客工具的好处是有利于学习网页知识,当博客不多的时候,对习惯使用bash+vim的人来说,这样编辑网站是可以接受的。坏处是写一个博客就多一个html,如果有比如超过50篇博客,每篇博客的公共部分就很麻烦了。

第三步 开始发挥吧

不管是使用博客工具,还是直接手动添加html,都离不开对 html/css/JavaScript的基本理解。比如上述简单的网站模版,很多按钮,搜索框等都是空的,需要简单的填充。而即使用了博客工具,想要添加“关于”,或者侧边栏等各种元素,也是需要运用网页语言的。

下面就是自由发挥了,继续进入Github Pages(三):使用Hexo博客生成工具使用博客生成工具,并且到Github Pages(二):个人网站的功能插件寻找想要使用的插件吧。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,053评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,527评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,779评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,685评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,699评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,609评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,989评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,654评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,890评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,634评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,716评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,394评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,976评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,950评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,191评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,849评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,458评论 2 342

推荐阅读更多精彩内容