无本博客，零成本博客？

投稿用户 • 2023年10月23日 pm12:41 • 电商资讯 • 阅读 172

作为一个有经验的前端开发者，我们通常会有自己的博客或者学习笔记，这样可以与他人分享我们的知识和经验。然而，为了将我们的项目部署到互联网上，我们可能需要一个服务器。然而，服务器的价格昂贵，我们并不一定需要花这么多钱来搭建一个网站。

幸运的是，Github pages为我们提供了一个解决方案，让我们能够免费拥有自己的在线网站。我们可以将我们的项目代码上传到Github，并通过Github pages将其部署到互联网上。这样，我们就可以通过一个简单的网址访问我们的网站了。

使用Github pages有很多好处。首先，它是免费的，我们不需要花费额外的费用来购买服务器。其次，它非常简单易用，我们只需要按照一些简单的步骤进行设置，就可以将我们的项目部署到网上。此外，Github pages还提供了一些自定义选项，我们可以根据自己的需求来定制我们的网站。

总的来说，Github pages为我们提供了一个免费且简单的方式来拥有自己的在线网站。作为一个资深的切图仔，我们可以利用这个工具来分享我们的文章和学习笔记，与他人交流和学习。

什么是 github Pages？

GitHub Pages 是 GitHub 提供的一个托管静态网站的服务。它允许用户将自己的代码仓库转化为一个在线可访问的网站，无需复杂的服务器设置或额外的托管费用。通过 GitHub Pages，我们可以轻松地创建个人网站、项目文档、博客或演示页面，并与其他开发者和用户分享自己的作品。这个服务非常方便，不仅可以展示自己的技术能力和项目成果，还可以与其他开发者进行交流和合作。无论是个人开发者还是团队，都可以利用 GitHub Pages 来建立自己的在线存在，展示自己的作品和成果。这对于提升个人或团队的知名度和影响力非常有帮助。总之，GitHub Pages 是一个非常实用的工具，可以帮助开发者更好地展示自己的作品，并与其他开发者和用户进行交流和分享。

使用

要想使用这个牛逼功能，我们首先要在GitHub上创建一个仓库，具体步骤如下图所示：

接下来，我们将使用 create-neat 来创建一个新的项目。请执行以下命令：

bash复制代码npx create-neat mmm

根据提示选择相应的项目即可，无论是选择 Vue 还是 React 都可以。

在成功创建项目后，我们需要进入该项目目录并安装所需的依赖包：

bash复制代码pnpm add gh-pages --save-dev

并且在 package.json 文件中增加一个 homepage 字段，内容如下：

json复制代码"homepage": "http://xun082.github.io/mmm"

其中 xun082 要替换为我的 github 上面的用户名，如下图所示：

而 [仓库名称] 替换为我们刚才创建的仓库名称。

在 package.json 文件的 script 字段中添加新的属性，可以按照以下步骤进行操作：

1. 打开 package.json 文件。
2. 定位到 script 字段。
3. 在 script 字段中添加新的属性，例如 "start": "node index.js"。
4. 保存并关闭 package.json 文件。

这样，你就成功地在 package.json 文件的 script 字段中添加了新的属性。

json复制代码  "scripts": {
    "start": "candy-script start",
    "build": "candy-script build",

    "deploy": "gh-pages -d dist"
  },

完整配置如下所示:

完成配置后我们将代码先提交到仓库中，如下命令所示:

git复制代码git add .

git commit -m "first commit"

git branch -M main

git remote add origin https://github.com/xun082/mmm.git

git push -u origin main

这个时候我们的本地项目已经和远程 GitHub 仓库关联起来了，那么我们现在可以执行以下命令：

bash复制代码pnpm run build

首先，我们需要执行以下命令来对项目进行打包构建。一旦打包完成，将会生成以下文件，请参考下方的图示：

现在我们可以使用gh-pages将项目发布到互联网上了。

bash复制代码pnpm run deploy

使用该命令进行打包并且部署到网上，这个过程可能需要一些时间。在等待期间，你可以在工位上打开手机，玩一会儿王者荣耀。当在终端中看到"published"字段时，这意味着我们的部署成功了。

现在，只需点击我们在 package.json 文件中定义的 homepage 字段中的链接，就可以正常显示了！

总结

利用这种方法，我们可以免费地搭建一个属于自己的网站，无需花费任何费用。如果你对这个方法感兴趣的话，不妨立即尝试一下！

创业项目群，学习操作 18个小项目，添加微信： xkm296 备注：小项目！

本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请发送邮件至 cbqcbq4479@qq.co 举报，一经查实，本站将立刻删除。
如若转载，请注明出处：https://www.ximixuejie.com/205.html

无本博客，零成本博客？

什么是 github Pages？

使用

总结

相关推荐