Li Shen Blog

Stay hungry, stay foolish.

Github Pages 快速搭建静态网站

沈大力


起因

昨天买了两个.com的域名,想着做个简单的展示页写一下域名的介绍/出售信息。但我并不想动我自己的服务器,主要是麻烦,还得调一下nginx。反正也只是静态展示页,那就用github pages做个简单的服务器放一下展示页就行了。

准备

  1. 一个github账号。
  2. 域名(下文以华为云购买的域名为例)。
  3. (可选)如果想要自定义页面的话,自己写个html文件。

步骤

第一步:创建github项目

首先打开github,登录后点击右上角的“”,然后选择“New Repository”。

进入到创建页面,填写项目名称(英文),其他的默认就行。然后点击“create repository”即可。

 

第二步:设置网站

创建完后会跳转到项目首页,这时有两种选择:1. 使用模板;2. 自定义html文件。先讲一下使用模板怎么搞:

2.1 使用github模板直接创建网站

进入到首页后,点击右上角的“settings”,然后在“settings”中左边菜单栏选择“pages”。

进入“pages”后,点击“choose a theme”,选择一个你喜欢的主题。然后点击“select theme”。

选择完成后进入下一个页面,点击“commit changes”就创建完成了。

这个时候你输入以下网址即可访问你创建好的网站:

<Your github username>.github.io/<your project name>/

 

2.2 自己上传html文件建立网站

首先,我们在创建项目的时候要勾选“Add a README file”。

创建好了后,依然进入“settings”,然后“pages”,接着在“source”中选择“main”,后面的文件夹就选根目录(也就是root)就行了,最后点击“save”。

好了,到这里网站的路径就设置完了(说白了就是告诉github你的网站的文件放在哪里)。接下来就开始要上传你的html相关的文件了。由于下面会用到git这个工具,需要提前熟悉一下。我先讲个最简单粗暴的方法——复制粘贴。

简单来说就几步:1. 进入你的项目仓库,点击“Add file“,选择”Create new file“。

2. 进入文本编辑页面后,首先把名字设置为”index.html“,然后就将你的html代码直接复制粘贴进来,最后点击”commit changes“。

3. 这样你就创建好了你的网站的首页,然后你再次登录你的github pages的网址就会发现网站已经变成你自己设计的html网站了。

 

这种方法简单粗暴,适合不会用git的玩家。当然缺点也很明显:麻烦。如果你有几十个网页,加上一堆静态文件(图片、JS、CSS等等),想想都难受。而这个时候用git来管理你的项目仓库就会非常方便了。下面来讲一下git如何操作:

 

----------------------------(以下内容需要一定基础,不然遇到报错不好解决)---------------------------

 

首先,先去github官方下载一个git,然后配置环境。由于环境配置需要一定篇幅讲解,我这里就不做介绍,具体操作可参考这里:

Win10 从零搭建Git环境

配置好git后,接下来上传我们网站相关的文件(夹)。这里假设我有一个index.html文件,路径为”D:\myweb\“。首先打开cmd,然后进入该路径。然后执行下面一系列操作:

#第一步,从你的GitHub中克隆你的项目仓库(repo的url在项目文件列表右上方的"Code"选项中,选择"https"然后复制该地址),如果这一步出现报错"fatal: unable to access ...",则讲你的地址的"https"改为"git"。

git clone <your repository git url>

#第二步,克隆完成后会在你当前目录生成一个以你项目名命名的文件夹,这时候你可以将你的html相关文件(包括html,CSS,JS等)拷贝进去,然后cmd中进入该文件夹,执行以下命令(git status是列出当前目录所有还没有被git管理的文件和被git管理且被修改但还未提交(git commit)的文件,也就是所有改动文件,红色字体标出;git add .是表示添加当前目录下的所有文件和子目录):

git status
git add .

#第三步,添加commit信息,开始上传(注意,最后一步push跟clone所使用的url不同,这里我们改回用"https")。

git commit -m <add your modify information>
git pull
git push <your repository git url>

#以上步骤走完,你的html相关文件就传到你的项目仓库中了。

#另:如果在git push执行后出现"fatal: unable to access ..."一类的错误,可通过执行以下代码修复错误:
git config --global http.sslBackend "openssl"

以上一系列代码执行完成后再刷新你的项目仓库,你就会发现文件已经上传成功了。这时候你再访问你的网站地址,返回的页面就是你自定义的html页面。

到这里,如果你不介意github pages给你设置的默认域名,其实你的网站已经创建完成了。当然,如果你想个性化自己的域名,也可按照下面的步骤将自己的网站绑定一个域名。

 

第三步:绑定域名

github pages的网址较长,不太好记 不好看,因此我们可以给自己的网站绑定一个自定义的域名。我们首先要去阿里云腾讯云华为云或者百度云购买一个域名(域名购买和实名认证的教程可自行百度)。

以华为云为例,买完域名后我们进入域名管理界面,点击“解析”,然后点击“管理解析”,然后点击右上角的“快速添加解析”,输入你的github pages的ip地址即可(想要知道你的ip地址只需要在cmd里ping一下你的github pages网址即可)。

然后系统会自动给你生成两条记录(WWW和A),我们可以把www记录做一些修改:

改完后保存,然后我们回到项目仓库,依然选择“settings”、“pages”,接着在“Custom domain”中输入你的域名(不要带http和www),点击“save”。等他验证成功后,你就能通过你自定义的域名进行访问了。

大功告成!

 

结语

Github pages是一个非常简单好用的静态网站服务器。结合HEXO等框架可用来搭建个人博客,个人简历,实验室主页,产品展示等纯静态网站。如果你的网站没有动态交互的需求,那github pages可以作为白嫖首选。

6人读过
网站相关
Aug. 27, 2021, 12:50 p.m.

评论:

登录后方可评论,点击登录注册

评论列表:

暂无评论。

苏公网安备 32050602011302号

苏ICP备2020062135号-1
Copyright© Li Shen. All rights reserved.