GitHub Pages简易建站教程
前言
GitHub Page是GitHub提供的一个网页寄存服务,可以用于存放静态网页(包括博客、项目文档甚至整本书)。由于GitHub目前还是程序员必备网站,所以短期内被墙/屏蔽的可能性应该不大。
本教程内容为如何【直接使用别人做好的博客主题】搭建一个【仅用于存放文字/图片】的网站,此过程中不需要任何编程知识(但需要懂一点英文),一共分为 创建账号
, 选择主题
, 配置网站
, 发表内容
四部分。
如果您想在别人做好的主题基础上为网站添加更多的功能,请自行学习前端技能。
第一步:创建并登录GitHub账号(已有账号或知道如何创建的朋友可以直接跳过这一步)
打开github.com(主页如下图所示),输入用户名(username),电子邮箱(email),密码(password),点击绿色按钮 Sign Up for GitHub
此时会出现验证页面,点击箭头让小动物按正常的方向摆放,然后点击下方的蓝色按钮 Join a free plan
此时会出现兴趣选择页面,可以不用选择,直接下拉到最下方点击蓝色按钮 Complete setup
此时GitHub会提示你需要验证邮箱
打开之前注册使用的邮箱,打开GitHub发送的邮件,点击蓝色按钮 Verify email address
以后再登录GitHub,看到的就是如下页面了
第二步:选择主题
推荐网站:Jekyllthemes.org(网站主页如下图所示)
接下来以本站使用的Hacker-Blog主题为例,点进主题,Homepage一般链接到该主题的GitHub代码仓库,点击Demo则可以查看网站初始样式
(注1:不同的主题复杂程度也不同,如果对于看英文或者弄懂一堆文件之间的关系感到吃力,又对博客功能没有太多要求的话,建议选择一个看上去简单朴素、 并且附带详细使用说明(最好是中文)的主题。不过实质上大部分主题的使用方式都是大同小异的。)
(注2:除了接下来要展示的Hacker-Blog主题之外,推荐另外两个主题:Jekyllnow和一位国人姑娘做的仿LOFTER式主题,都附带了详细的教程)
下图为点击Demo后跳转到的Hacker-Blog初始样式
通过Homepage打开的GitHub代码仓库如下,点击右上角的 fork
等待Forking完成
可以看到此时仓库的用户名前缀已经变成你的用户名了,说明fork成功,也可以点击右上角的 头像 - Your Repositories
查看你的仓库列表
点击 Your Repositories
后出现的页面如下,以后可以从这里进入仓库
第三步:配置网站
进入仓库,点击 Settings
,修改仓库名称为 你的用户名.github.io
并Rename
修改后网页会自动跳转到 Code
页面,此时可以看到仓库名字已经变更
回到 Settings
,往下拉到GitHub Pages部分,可以看到绿框里显示 Your site is published at 你的网站地址
,
也可以通过在浏览器网址栏输入 你的用户名.github.io
直接进入你的网站
进入网站后可以看到还是Demo的样式
回到 Code
,下拉可以看到 README.md
里的内容,一般都是使用说明
使用说明里可以看到如何修改网站各种信息,比如,这里说如果你想修改网站title之类的变量,就要编辑 __config.yml
文件
回到上面的一堆文件里,找到 __config.yml
,点击进入
点击右边的笔 Edit this file
其实大部分内容都不用修改,只要根据使用说明,修改你想要修改的变量就行,此处我修改了title/description/name/url以及最下方的owner/current year
注意:title和name代表的变量如下图所示
可以点击 Preview changes
查看你的改动( Preview changes
可用于发表内容之前查看你想要的格式是否正确,图片/超链接是否成功显示)
最后,点击页面下方的绿色按钮 Commit Changes
确认修改,然后刷新你的网站,就显示出修改成功后的页面了(有时会延迟,需要多刷新几次或多等一会儿)
注:如果想把 @home:~$
的后缀去掉,进入 _includes
文件夹里的 header.html
文件,找到 @home:~$
并删去,然后 Commit Changes
第四步:发布内容
回到 Code
,进入 _posts
文件夹
可以看到里面已经有几篇示例文章了
每篇文章的内容都是一样的,随便点开一个,文章的内容是关于一些语法的说明,想要删除该文章可以选择 Delete the file
选择 Edit the file
,则可以查看具体如何编辑文字格式、添加图片、添加超链接等
想要发表新内容,回到 _posts
文件夹里,选择 Create new file
文件名必须如图所示 年份数字-月份数字(两位)-日期数字(两位)-文章标题.md
文件内容开头必须要
---
title: 文章标题(注:双引号之后需要先输入一个空格再输入文章标题,下同)
published: true(如果改为false,则文章不会在网站上显示)
---
文章内容
完成后点击下方的 Commit new file
提交,等待后刷新你的网页,可以看到文章已经发表出来了
在这个主题模板中,点击Archive可以查看在该网站发布的全部文章(按时间顺序排列,可以通过修改文件的标题来修改时间)
在这个主题模板中,你还可以在About里写一些关于网站的说明
方法是找到 about.md
文件
修改文件里的内容,此处我将Something about me修改为Tutorial
按下 Commit Changes
之后,等待片刻然后刷新,可以看到网站中About里的内容已经修改为刚刚改成的内容了