零基础！手残党也能1小时拥有高逼格网站，GitHub Pages使用指南 ...

诗林 · 6 天前

开头心情包

配文：别怕！搞网站不消写代码！你的头发很安全！

一、GitHub Pages是啥？能吃吗？

想象一下：GitHub是个巨型代码菜市场，Pages就是菜市场老板白送你一块地皮，让你摆摊卖…不对，是建个人网站！
优点：免费！装X！支持自定义域名！
缺点：不能在上面卖煎饼果子（但可以放收款码）。

二、准备工作：注册GitHub账号

打开github.com
（友情提示：别手滑打成gayhub.com，别问，问就是有热心网友试过）https://blog.csdn.net/qq_34665176/article/details/147049196?spm=1001.2014.3001.5501
http://github打不开？国内开辟者必看！5招破解Github访问难题，亲测有效
点击Sign Up
用户名建议：别用"xxx5201314"，不然你的网站地址会散发着中二气味。
验证邮箱
收不到验证码？查抄垃圾箱，大概对着路由器磕个头试试。

三、手把手教学：5步建站

第1步：创建仓库（Repository）

点击右上角"+ New repository"
仓库名必须格式：你的用户名.github.io
（如果报错，请查抄是不是把"io"拼成了"oi"，别笑，真有人这么干过）
勾选"Initialize this repository with a README"
（翻译：给仓库塞个阐明书，制止它裸奔）

翻车案例
某网友仓库名写成user name.github.io（带空格），效果网站404，哭得像被甩了一样。

第2步：上传网站文件

点击"Add file" → "Upload files"
把你的HTML/CSS/JS文件拖进去，大概：
摆烂专用方案
直接新建index.html，内容：

<!DOCTYPE html>
<html>
<body>
<h1>恭喜！你已经是10%会建网站的人类了！</h1>
<img src="https://media.giphy.com/media/3o7aTskHEUdgCQAXde/giphy.gif">
</body>
</html>

复制代码

第3步：开启魔法开关

进入仓库 → Settings → Pages
在"Branch"选main或master，点Save
（看到绿色提示"Your site is published at..."阐明成功！）

常见BUG
如果显示404，请：

查抄仓库名
等待5分钟（GitHub可能须要时间，就像泡面要焖3分钟）
对着屏幕喊"奥利给！"

成功啦！！！

第4步：高级装X技巧

自定义域名：在仓库里加个CNAME文件，写你的域名
（买域名建议：别用.sb后缀，别问我怎么知道的）
换主题：点击Settings → Pages → Choose a theme
（选完主题记得回来改文案，否则全世界都知道你用的是默认模板）

第5步：发朋友圈凡尔赛

网站地址：https://你的用户名.github.io
配图文案参考：
"随便写了个网站，没想到访问量破10了[狗头]"
"从今天起，请叫我全栈工程师[墨镜]"

四、真人翻车大赏

案例1
网友把网站文件夹命名为我的网站❤️，效果链接酿成乱码，浪漫卒于特别符号。
案例2
某猛男忘记更新内容，至今首页挂着"Hello World"，被同事嘲笑三年。
案例3
（接待评论区分享你的翻车履历，点赞最高送"代码写得棒，早晚会秃顶"手机壳）

结尾心情包

配文：你看！狗子都能学会，你还在等啥？
CTA（办法号召）
"赶紧动手！做完的同砚接待把网站链接扔评论区，让我夸（chao）夸（xiao）你！"

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

零基础！手残党也能1小时拥有高逼格网站，GitHub Pages使用指南 ...

本帖子中包含更多资源

0 个回复

快速回复

楼主热帖

标签云

浏览过的版块