利用github.io(githubPages)免费托管个人静态网站/个人博客

我们的个人博客或者静态网站可以托管到github就能通过github域名访问(免费,省事),当然也可以使用自定义的域名解析(花钱,高大上)。

git仓库配置

我采用的是自己编写一个html文件+ githubPages搭建,首先需要在GitHub上创建Github Pages服务,具体步骤如下图:

在这里插入图片描述
点击之后仓库名一定要填 用户名.github.io 的格式(形如zhangzheyi1.github.io),不要填 用户名 的格式(形如zhangzheyi1),这里踩了好几次坑了,浪费了不少事件,因为现在我已经有这个仓库了,这个报错可以忽略掉,下面的readme记得点上❤,最后一步点创建

在这里插入图片描述
然后我在本地编写了一个html

在这里插入图片描述

点击上传

在这里插入图片描述
点击选择文件或直接拖拽文件到该区域

在这里插入图片描述
点击提交

在这里插入图片描述
输入我们的地址就可以访问到刚才那个静态页面啦

在这里插入图片描述
提示:在这里我是通过自己编写一个html文件,如果需要展示更完美更好看的静态网站,可以使用一些工具类库生成静态网站,例如hexo、vuepress等

如果不想每次都手动上传文件,可以使用SSH连接利用命令行来上传文件,或者其他自动上传文件则需要 在本机设置SSH Key之后,需要添加到GitHub上,以完成SSH链接的设置。

  • 3
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
为自己的 GitHub Pages 博客添加评论功能,可以使用第三方评论插件,如 Disqus 、 Gitment 、 Utterances 等。 以 Gitment 为例,以下是添加评论功能的步骤: 1. 在 GitHub 上创建一个 OAuth App,用于 Gitment 认证。在 GitHub个人设置 - Developer settings - OAuth Apps 下面创建一个新的 OAuth App,填写应用名称、Homepage URL、Authorization callback URL 等信息。 2. 在你的 GitHub Pages 博客仓库下创建一个名为 _config.yml 的配置文件,添加以下内容: ``` gitment: owner: 你的 GitHub 用户名 repo: 存储评论的仓库名称 client_id: 创建 OAuth App 时的 Client ID client_secret: 创建 OAuth App 时的 Client Secret ``` 3. 在你的 GitHub Pages 博客仓库的 HTML 模板中添加 Gitment 评论插件的代码。可以使用以下代码: ``` <div id="gitmentContainer"></div> <link rel="stylesheet" href="https://imsun.netlify.app/gitment/style/default.css"> <script src="https://imsun.netlify.app/gitment/gitment.browser.js"></script> <script> var gitment = new Gitment({ id: '页面 ID', owner: '你的 GitHub 用户名', repo: '存储评论的仓库名称', oauth: { client_id: '创建 OAuth App 时的 Client ID', client_secret: '创建 OAuth App 时的 Client Secret', }, }); gitment.render('gitmentContainer'); </script> ``` 其中,id 为页面 ID,需要保证每篇文章的页面 ID 不同,可以使用文章标题或文件名作为 ID。 4. 创建一个单独的仓库,用于存储评论数据。在该仓库下创建一个名为 gitment 的分支,用于存储评论数据。 5. 将 Gitment 评论插件代码推送到你的 GitHub Pages 博客仓库,部署到 GitHub Pages 上。 这样,你的 GitHub Pages 博客就可以使用 Gitment 评论插件了。当用户在你的博客页面下发表评论时,评论内容将被存储在单独的仓库的 gitment 分支中。你可以在该分支下查看所有评论数据。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值