使用Github的项目网页模板与阿里云绑定

25.4.18更新:怎么自动给我设置为vip可见了?已设置所有人可见

使用项目模板:https://github.com/nerfies/nerfies.github.io

或者:https://github.com/shunzh/project_website/

git clone https://github.com/nerfies/nerfies.github.io

1.  先安装ruby, Downloads,选对应版本,我选择了第一个。下完后无视风险继续安装,遇到三个选项勾选的全勾上。

finish后自动跳转到一个命令行页面,输入3,选择 MSYS2 and MINGW development tool chain 后,点击Enter,继续安装。参考链接:在Windows11上安装Jekyll环境,搭建静态网站并部署到GitHub Pages - 知乎

 出现如下画面,表示安装成功,关闭窗口

2.  安装Jekyll

找到Ruby的安装目录文件夹打开,在该文件夹下面,按住shift再按鼠标右键,选择在此处打开powershell窗口,执行以下命令安装 bundler 和 jekyll

gem install jekyll bundler

安装好后可以测试一下:

$ jekyll -v
$ bundler -v

3.  打开在GitHub下载的模板文件夹 https://github.com/nerfies/nerfies.github.io

 按住shift再按鼠标右键,选择在此处打开powershell窗口,输入运行

jekyll serve

 

 得到网站:http://127.0.0.1:4000 ,打开浏览器访问可以看到网页。

后续修改网页细节在index.md文件里修改,保存后在浏览器刷新对应界面可以看到实时修改效果。

4.购买域名

我在阿里云买的,选了个最便宜的,如果各位有特殊要求可以网上搜索其他,我也不懂这方面,可以参考【教程】Github Page 添加自定义域名_github pages 自定义域名-优快云博客

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

在阿里云购买后,找到下面的页面,点击解析

 点击添加记录,一般加了ipv4就可以了,但我懒得管都加了

 ipv4:

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

 ipv6:

2606:50c0:8003::153

2606:50c0:8002::153

2606:50c0:8001::153

2606:50c0:8000::153

最后再加一个,记录值格式:

你的项目名字.github.io

 保存后即可。

5. 将修改好的模板上传Github项目

个人上传体验:windows桌面版Github>ubuntu指令>windows指令

参考如何上传文件夹到GitHub上(配图详解)?_github上傳資料夾-优快云博客

新建文件夹,先克隆:

git clone + 你的仓库地址
git clone  https://github.com/Qingmu0323/boke.git  //我输入的是我刚复制自己的

再输入:

cd  boke     //根据自己的远程仓库名输入
git init
git add .
git commit -m “first commit”  或者  git commit -m “modify”
git push

 等待上传成功。

在上传好的Github项目界面,点击最右边Settings

 左边一栏找到Pages

 在右边Branch下面的None选择main后点Save

 Save后跳转到页面,在Custom domain输入你购买的域名,保存即可,报错也不管。

6. 加速访问

参考博客搭建(一)| 利用cloudflare加速github博客访问 - QinYU,这位博主写的很详细,我懒得写了。阿里云修改DNS服务器可以参考下面图片找到

参考:

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

在Windows11上安装Jekyll环境,搭建静态网站并部署到GitHub Pages - 知乎

【教程】Github Page 添加自定义域名_github pages 自定义域名-优快云博客
如何上传文件夹到GitHub上(配图详解)?_github上傳資料夾-优快云博客
 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值