保姆级教程: 从零构建GitHub Pages静态网站
1. Github Pages是什么?
GitHub Pages 是一个静态网站托管服务,它允许你使用 GitHub 仓库来展示你的项目、博客或个人主页。你可以使用 HTML、CSS 和 JavaScript 等技术来创建你的静态网站,并将其托管在 GitHub Pages 上。
GitHub Pages 有两种类型:用户网站和项目网站。用户网站是指你在 GitHub 上的个人主页或组织主页,项目网站是指你在 GitHub 上的某个仓库。用户网站和项目网站的区别在于,用户网站的 URL 是 https://username.github.io
,而项目网站的 URL 是 https://username.github.io/repository
。
1.1 用户网站
用户网站是指你在 GitHub 上的个人主页或组织主页。你可以在 GitHub 上创建一个仓库,仓库的名字必须是 你的github用户名.github.io
,然后将你的静态网站代码上传到这个仓库中。这样,当你访问 https://你的github用户名.github.io
时,就会展示你在这个仓库中的静态网站。
1.2 项目网站
项目网站是指你在 GitHub 上的某个仓库。你可以在 GitHub 上创建一个仓库,然后将你的静态网站代码上传到这个仓库中。这样,当你访问 https://username.github.io/repository
时,就会展示你在这个仓库中的静态网站。
1.3 自定义域名
你还可以为你的 GitHub Pages 网站配置一个自定义域名。这样,当你访问 https://你的域名
时,就会展示你在这个仓库中的静态网站。
要为你的 GitHub Pages 网站配置自定义域名,你需要先在域名注册商处购买一个域名,并将域名的 DNS 记录指向 GitHub 的服务器。然后,在 GitHub 上的仓库中,你需要在 Settings
-> Pages
中,将自定义域名填写到 Custom domain
中。这样,当你访问 https://你的域名
时,就会展示你在这个仓库中的静态网站。
2. 搭建GitHub Pages静态网站
要搭建 GitHub Pages 静态网站,你需要先在 GitHub 上创建一个仓库。仓库的名字必须是 你的github用户名.github.io
,然后将你的静态网站代码上传到这个仓库中。
你可以使用 GitHub 的在线编辑器来编写代码,也可以使用本地的编辑器来编写代码。编写代码时,你需要注意以下几点:
代码必须是静态的,不能包含任何动态的内容。
代码必须是 UTF-8 编码的。
代码必须放在仓库的根目录下。
代码中不能包含任何敏感信息,比如密码、密钥等。
编写完成后,你需要将代码上传到 GitHub 仓库中。上传代码的方法有两种:
使用 GitHub 的在线编辑器。
使用本地的编辑器,将代码上传到 GitHub 仓库中。
搭建github pages需要先搭建一个github仓库,仓库的名字必须是 你的github用户名.github.io
,然后将你的博客项目clone到本地,将博客项目push到仓库中,仓库中就会有一个gh-pages分支,这个分支就是你的github pages页面。
搭建完成后,你的博客项目就会变成一个静态页面,你可以通过 你的github用户名.github.io
来访问你的博客页面。
搭建自己的博客
搭建自己的博客需要先搭建一个博客项目,博客项目可以使用vuepress、hexo、hugo等搭建。
搭建vuepress博客项目
安装nodejs
安装vuepress
新建一个博客项目
编写博客
发布博客
搭建hexo博客项目
安装nodejs
安装hexo
新建一个博客项目
编写博客
发布博客
搭建hugo博客项目
安装hugo
新建一个博客项目
编写博客
发布博客
fastgithub
fastgithub是一个可以加速github的工具,它可以将github的仓库clone到本地,然后将本地的仓库push到github中,这样可以加速github的clone和push速度。
fastgithub的使用方法:
在本地安装fastgithub
在fastgithub中配置github仓库
在本地clone github仓库
在本地修改github仓库
在本地push github仓库
fastgithub的优势:
加速github的clone速度
加速github的push速度
免费
fastgithub的劣势:
fastgithub