不用买服务器,如何用github搭建网站

简介: 不用买服务器,如何用github搭建网站

前言

假设我们现在想要快速建立一个可供外部访问的网站,等不及去买服务器并进行备案(备案的话大概需要一周),此时我们就可以直接在github平台上搭建网站。

在搭建过程中,遇见了很多问题,我这里一一记录下来。

假设目前我们已经建立了一个github仓库,本地也与之进行了关联。那么我们要做的就是下面的事情。

一、部署网站

1.借助gh-pages

1-1.本地项目安装gh-pages

npm install gh-pages
复制代码

1-2.添加并执行部署命令

package.json文件中增加下面部署命令:

"scripts": {
    "deploy": "gh-pages -d build"
  },
复制代码

添加完成之后,先执行项目的打包命令再执行这个部署命令:

yarn build
yarn deploy
复制代码

执行之后我们可以在github远程仓库上可以看到多出了一个gh-pages分支:

网络异常,图片无法展示
|

2.github 进行pages服务

网络异常,图片无法展示
|

这样访问username.github.io/projectName 就可以进入网页了

二、域名映射

在上一步骤中,如果觉得username.github.io/projectName这样的域名不好看,想改成**.com之类的,那么我们就可以用到github的自定义域名功能,但同时我们还需要自己去购买域名。

1.购买域名

域名购买分为国内和国外两种买法,下面是它们两的差别:

国内 国外
支付 啥都行 支付宝
扩展性
备案 需要 不需要
服务器 需要有配套 3 个月租期以上的服务器 不需要
价格 便宜 便宜

其中最大的差别就是国内 需要备案才能使用域名,国外域名则是买了就能用。  现在备案也比较方便了,在小程序里就能完成。

但是一个比较坑的点是,必须要有 3 个租期以上的服务器才能开始备案,而且一台服务器只能为一个域名备案。  所以,会出现花 20 块买域名,但是要花 200 多先租台服务器(3 个月左右)来备案的坑爹情况。

国外购买域名的网站有很多,这里我在NameSilo上买域名:

网络异常,图片无法展示
|

2.DNS配置

NameSilo官网上进入 Domain Manager,进入该域名的DNS设置。

网络异常,图片无法展示
|

2-1.新增4个A记录,配置4个IP地址

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153
复制代码

四个IP地址可以看github doc- Configuring a subdomain

另外再新增2个CNAME记录:

  • www  -  username.github.io 是将www.*.com 映射到 username.github.io
  • projectName - username.github.io 是将www.*.com 映射到 username.github.io/projectName

结果如下:

网络异常,图片无法展示
|

4.gh-pages分支增加CNAME文件

在本地项目中执行了部署命令之后, 然后直接在github上操作,gh-pages分支增加CNAME文件,内容就是刚买的域名(假设为baidu.com)

baidu.com
复制代码

注意不是www.baidu.com,这一步是为了将username.github.io/projectName映射到刚买的域名上。

4.github 设置自定义域名

网络异常,图片无法展示
|

注意:DNS设置那个过程需要等待一段时间才生效,所以如果是设置完DNS之后立马进行了这一步,是不会立即生效的,一般要等待一段时间(当时等待了2h左右,网上说要等待一天)

4.问题排查

我的项目是React搭建的,当上述步骤完成之后去访问网页,发现网页是空白的,但是已经成功映射了,发现是静态文件请求错误,这里就将静态资源的请求地址从绝对位置改为相对位置:

package.json文件里增加:

"homepage": "./"
复制代码

网络异常,图片无法展示
|

相关链接

Github docs - About custom domains and GitHub Pages

# 萌新建站教程(四)namesilo域名解析设置

Github 部署个人网页 | 自定义域名

docs.github.com/en/pages/co…

# Custom subdomains in GitHub project pages

# GitHub Pages 自定义域名实践整理


相关实践学习
基于函数计算快速搭建Hexo博客系统
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
相关文章
|
4天前
|
程序员 SEO
手把手教你搭建属于自己的网站(获取被动收入),无需服务器,使用github托管
手把手教你搭建属于自己的网站(获取被动收入),无需服务器,使用github托管
106 2
手把手教你搭建属于自己的网站(获取被动收入),无需服务器,使用github托管
|
3天前
|
Linux 网络安全 开发工具
【超详细!超多图!】【代码管理】Python微信公众号开发(3)- 服务器代码上传Github
【超详细!超多图!】【代码管理】Python微信公众号开发(3)- 服务器代码上传Github
31 0
|
4天前
|
域名解析 弹性计算 数据可视化
如何使用云服务器ECS搭建网站?阿里云云服务器ECS部署网站新手教程
本文介绍了在阿里云ECS上自助建站的流程。建站方式包括自助建站、模板建站和定制建站,适合个人或小企业用户。建站步骤涉及准备服务器、配置安全组规则、部署网站、购买和备案域名以及解析域名。此外,文章还提及了产品计费和常见问题,提供相关服务如架构设计、迁云服务和基础设置服务等。
465 0
|
4天前
|
弹性计算 关系型数据库 MySQL
阿里云服务器经济型e实例2核2G3M带宽99元搭建网站图文教程参考
经济型e实例2核2G,3M固定带宽,40G ESSD Entry云盘,价格只要99元,这是阿里云精心为开发者和普通企业用户推出的一款上云首选必备产品,可用于中小型的web应用以及企业应用。本文为大家展示使用这款云服务器搭建网站的相关教程,以供参考。
阿里云服务器经济型e实例2核2G3M带宽99元搭建网站图文教程参考
|
7月前
|
安全 关系型数据库 MySQL
【IIS搭建网站】本地电脑做服务器搭建web站点并公网访问「内网穿透」
【IIS搭建网站】本地电脑做服务器搭建web站点并公网访问「内网穿透」
|
7月前
|
关系型数据库 Apache 数据库
云服务器快速搭建网站
安装Apache Apache(音译为阿帕奇)是世界使用排名第一的Web服务器软件。它可以运行在几乎所有广泛使用的计算机平台上,由于其跨平台和安全性被广泛使用,是最流行的Web服务器端软件之一。 执行命令安装Apache及其扩展包。 yum install -y httpd httpd-manual mod_SSL mod_perl mod_auth_mysql 如果回显信息显示Complete!,则表示Apache安装成功。 依次执行命令启动Apache并设置自启动。 systemctl start httpd systemctl enable httpd 执行命令查看Apache运行状态
217 2
|
7月前
|
关系型数据库 MySQL 应用服务中间件
windows服务器自带IIS搭建网站并发布公网访问【内网穿透】-1
windows服务器自带IIS搭建网站并发布公网访问【内网穿透】
|
4天前
|
安全 关系型数据库 MySQL
利用windows服务器自带的IIS搭建网站并发布公网访问【内网穿透】
利用windows服务器自带的IIS搭建网站并发布公网访问【内网穿透】
491 0
利用windows服务器自带的IIS搭建网站并发布公网访问【内网穿透】
|
4天前
|
安全 Shell 网络安全
Git学习---Git快速入门、Git基础使用、Git进阶使用、Git服务器使用(IDEA集成GitHub、Gitee、GitLab)、GitHub Desktop客户端
Git学习---Git快速入门、Git基础使用、Git进阶使用、Git服务器使用(IDEA集成GitHub、Gitee、GitLab)、GitHub Desktop客户端
139 0
|
4天前
|
关系型数据库 MySQL 应用服务中间件
【IIS搭建网站】在本地电脑上搭建web服务器并实现外网访问
在网上各种教程和介绍中,搭建网页都会借助各种软件的帮助,比如网页运行的Apache和Nginx、数据库软件MySQL和MSSQL之类,为方便用户使用,还出现了XAMPP、PHPStudy、宝塔面板等等一系列集成服务,都是为了方便我们能快速建立网站。是不是不适用这些软件就无法建立网站了呢?答案当然是否定的,在Windows系统中实际上集成了建立网站所必须的软件环境。今天就让我们来看看,如何使用Windows自带的网站程序建立网站吧。