拥有自己的个人网站,无可否认是能增加学习Web开发的动力的。

本笔记记录使用GitHub Page,免费搭建个人网站,以及如何链接自己的域名。

写在前面:什么是GitHub Pages

根据官网的定义:GitHub Pages是一种静态站点托管服务,旨在直接从GitHub仓库托管你的个人、组织或项目页面。

我们可以使用自己的电脑,或从IPS服务商那里购买云服务器来存储自己的网页文件。前者需要你不间断的高速连接,后者需要支付相应的费用。而GitHub的特点恰好弥补了这两者的缺点。

当然其也有所缺点,比如

  • 它只是个静态站点托管服务,不支持服务端代码,如PHP,Ruby或Python。
  • 有一定的使用限制,如GitHub Pages源存储库的建议限制为1GB,每月100GB带宽限制,公共性对网站安全的限制等等。
  • 以及似乎需要梯子?

但对于我这种搭建个人博客性质的网站来说还是满足的。

你可以使用Jekyll在线创建发布GitHub Pages网站,或者使用Git客户端在本地开发后发布。


下面开始介绍如何使用。

一、创建存储库

登录GitHub创建一个新的存储库,名字要求为username.github.io,其中username为你在GitHub上的用户名,否则无法正常工作。

二、克隆到本地

使用Git Bash将该repo克隆到本地自定文件夹内。

这一步骤可参考我:【Git】从零开始使用Git和GitHub工作(二)

三、创建一个html文件并push

在本地随意创建一个html文件,并push到GitHub。此时打开你的https://username.github.io还无法显示,原因如下:

你的网站必须从master分支发布,而且必须存在分支。

故你还需要:

  1. 在本地创建好分支,并push到GitHub
  2. 在GitHub上设置repo的sourse

如何设置master为source:

1、进入settings

2、选择master分支为source并保存

此时打开你的https://username.github.io,就会显示你创建的html文件。

如果没有设置master为source,将会显示你的README文件。


下面介绍如何绑定自己注册的域名

一、注册域名

注意:你可以选择各种注册域名服务商,我选择的是万网,下面的步骤也是基于阿里云域名服务进行。

二、解析域名

注册购买后,进入控制台-域名-域名列表-解析

进入后点击添加解析。

添加一个记录类型为CNAME,主机记录为@,解析线路默认,记录值为github的仓库名(也就是你的网址),TTL可选默认10分钟:

其中:

  • 记录类型下拉列表都有说明。若你需要你的网址有无www.都能跳转,可以再添加一个www主机记录。
  • 记录值即你要绑定的网址。
  • TTL表示DNS记录在附件在服务器上的缓存时间,后期可设置大一些。

三、在GitHub上添加CNAME文件

回到你的username.github.io仓库,创建一个CNAME文件,文件内容为你的username.github.io。

至此,你就可以通过输入你自己注册的域名进入你创建的网页啦~

如何利用GitHub Pages免费搭建个人网站以及绑定自己的域名相关推荐

  1. Github Pages 快速搭建个人网站教程

    hello,大家好,我是wangzirui32,今天我们来学习如何使用Github Pages快速搭建个人网站,开始学习吧! 1. 创建存储库 这里有一点必须注意,存储库名称必须为用户名.github ...

  2. 使用内网云+GitHub Pages免费部署动态网站

    目录 一.失败的经历 1.花生壳 2. nat123 3. 网云穿 4. cpolar 5. ngrok 6.金万维快解析 7.神卓互联 8.内网云(neiwangyun.net) 9.localho ...

  3. 使用GitHub Pages+Hexo 搭建个人网站详细教程

    文章目录 -GitHub Pages和Hexo的介绍 -安装Node.js -安装Git -验证是否安装成功 -点击Git Bash -点击鼠标右键 -安装Hexo -Hexo 初始化配置 -查看网站 ...

  4. 利用 Github Pages 和 Hugo 快速搭建免费的个人网站

    点击上方"程序猿技术大咖",关注并选择"设为星标" 回复"加群"获取入群讨论资格! 你有个人网站吗? 在自媒体时代,人人都在不断向互联网等不 ...

  5. 使用Hexo在GitHub Pages上搭建部署免费的个人博客网站(上:GitHub搭建)——最详细全面解读教程(没有之一)

    标签:Hexo GitHub使用技巧 博客 网站搭建 点击此处,浏览效果更好 版权声明:本文为博主 @残灯飞雪 的原创文章,欢迎转载,传播知识.著作权归作者所有,商业转载请联系作者获得授权,非商业转载 ...

  6. github page hexo博客gitee_利用Github和hexo搭建个人免费博客

    利用Github和hexo搭建个人免费博客详细过程: 概述: 详细的介绍了利用github和hexo搭建免费的博客,内容详细,浅显易懂,容易上手,大家一起进来看看吧! 1.配置Github相关操作: ...

  7. GitHub Pages + Hexo搭建个人博客网站,史上最全教程

    文章目录 一.准备工作 1. GitHub账号 2. 安装Git 3. 安装NodeJS 二.创建仓库 三.安装Hexo 四.更换主题 1. NexT 主题 2. Fluid主题 五.创建文章 六.个 ...

  8. 使用 Hexo 快速免费搭建个人网站

    使用 Hexo 快速免费搭建个人网站 前言 软件下载 注意事项: 为防止恶意软件入侵,下载可执行文件时会自动加上.dat后缀,下载后去掉.dat后缀即可正常使用 软件安装: git安装 Node.js ...

  9. Github Pages + Hugo 搭建个人博客

    文章目录 Github Pages + Hugo 搭建个人博客 零.效果 一.创建 Github 库 二.安装 Hugo 和 Git 三.新建 Hugo 网站 四.选择 Hugo 主题 五.新建文章 ...

最新文章

  1. php 2 往数据库添加数据
  2. python很简单。。。。
  3. android快捷开发之Retrofit网络加载框架的简单使用
  4. 机器学习——文件的读取
  5. 一维条形码识别c语言_条形码的优点
  6. 基于STM32和W5500的Modbus TCP通讯
  7. 做到这几点,让你离高级程序员更近一步!
  8. Java NIO(十六) Files
  9. .describe() python_Python实现ARMA模型
  10. 一个根据用户名生成头像的库——@multiavatar/multiavatar在react中的使用
  11. 学习笔记(4):《微电子器件》陈星弼(第四版)第2章 PN结
  12. C#获取汉字的区位码的方法
  13. c++多线程detach函数用法的实例
  14. 平板做笔记本电脑的副屏教程
  15. 《基于Python的金融分析与风险管理》学习笔记
  16. 昨天学会2件事,一件是multisim 添加自定义模型或导入模型文件,包括opa695和9013等三极管
  17. Mysql数据库定时任务
  18. 【虚幻引擎】UE4/UE5 后期处理盒子(PostProcessVolume)
  19. BAV20W规格信息
  20. 金蝶EAS GUI客户端进入SQL语句执行页面方法

热门文章

  1. Java课程设计|软件工程课程设计【招聘考试成绩处理系统】
  2. 无监督学习的12个最重要的算法介绍及其用例总结
  3. [C# 网络编程系列]专题五:TCP编程
  4. 开源流程引擎Camunda
  5. 10-SA8155-QNX 中间件之Protobuf/Fdbus交叉编译
  6. 优营占比双非 > 985,电子科大软工学院不容错过
  7. pip最新升级不成功的方法讲解
  8. 腾讯云认证云从业者考试攻略(人工智能从业者认证)
  9. arduino+USB初始化blynk的步骤
  10. C#超简单实现资产折旧计算方法