[GitHub] 跟我一起白嫖 GitHub Pages 做个人站点 ?

What`s The GitHub Pages ？



Websites for you and your projects.

Hosted directly from your GitHub repository. Just edit, push, and your changes are live.



简单的说，就是提供了用 GitHub 的仓库做站点的一种方式，我们无需自己提供服务器。



而我们用 GitHub Pages 就是想白嫖啦，借助它提供的直接访问静态资源的能力，



我们可通过 GitHub Pages 功能去托管：



个人博客，



项目说明，



XX产品说明书等等



如何使用 GitHub Pages



首先你要创建自己的 GitHub 账号，点击注册



关于 Git 命令的使用，可以参考这篇文章进行学习



创建仓库



在 GitHub 创建一个名为 username.github.io 的新仓库，其中username是你在GitHub上的用户名（或组织名称）。 如果仓库的第一部分与你的用户名不完全匹配，则它将无法正常工作，因此请确保正确输入。



请注意我这里的仓库名，和我的用户名





初始化仓库



向仓库添加咱们的静态资源。



# git 命令行，克隆到本地，注意使用你自己的地址哦！！！
git clone https://github.com/username/username.github.io.git
# 进入文件夹
cd username.github.io
# 制作页面，注意名称要是index.html
echo "Hello World" > index.html
# 添加到暂存区
git add --all
# commit 
git commit -m "Initial commit"
# push 到远程
git push -u origin master





访问站点



然后我们可以在浏览器输入仓库名称即可访问了，默认会访问到咱们的 index.html





到这里，咱们已经把 GitHub Pages 用起来了，后面具体往站点上放什么资源，就可以自由 DIY 啦。



很多同学都会用 username.github.io 这个根站点维护个人博客，你也可以的。





干货赠送：GitHub Pages 其实不止这么多



可能一般人介绍 GitHub Pages 介绍到这就已经结束了，完结撒花~



GitHub Pages 就只能用 username.github.io 这一个站点 ？



No！



你没听错，你还能使用二级目录访问，创建很多仓库，每个仓库都可以做站点。



访问方式 username.github.io/repositoryName



我这里有用 vue 做了个简易的在线播放器，可以去访问体验一下，如果你喜欢直接拿走吧。。。暂时咱不讨论这个播放器怎么实现的，感兴趣的话留言交流



项目地址：



https://yuansaysay.github.io/vueMusicPlayer



代码地址：



源代码地址





二级站点搞起来



简单说下怎么玩起来，



• 创建仓库，和上面一样的方式

• 初始化仓库，添加你需要的静态资源，比如我上面的音乐播放器代码



如果这时候你直接访问会是这个结果，因为我们还要把仓库的 Github Pages 功能开启。





需要启用仓库的 GitHub Pages 功能：找到setting，往下拉找到GitHub Pages，如图设置就OK !





然后就可以以复制的方式，做出各种各样的站点啦！





希望对你有帮助，有疑问可以留言交流。



开启你的 GitHub Pages 使用之旅吧！