只需10分钟，构建你的 GitHub 个人网站

时间：2023-08-02 20:57:01 | 来源：网站运营

时间：2023-08-02 20:57:01 来源：网站运营

只需10分钟，构建你的 GitHub 个人网站：很多开发者尤其是前端开发者都希望有一个自己的网站来展示个人信息、简历或者写一些博客。

也许你会想到自己买云服务器，然后将开发的网站放上去，但是服务器价格不菲而且对于初学者来说自己部署也比较麻烦。

其实想搭建个人网站有 GitHub 就足够了。




今天我们就来介绍一下怎么用 Gatsby 来快速搭建个人网站。

Gatsby.js 是一个基于 React 的免费、开源的快速开发静态网站的框架。而且通过配合使用 GraphQL 可以与各种数据源集成，比如 markdown 文档，图片等等。所有这些资源可以被当做对象通过 GraphQL 请求然后在网站上展示。


本篇中，我们将介绍如何开始使用 Gatsby ,然后构建静态网站并通过 Github 免费部署，最终生成我们的 GitHub 个人网站。

Gatsby

因为 Gatsby 是基于 React 的所以需要你具有一定的 javascript 和 React 基础。

然后还需要你的电脑安装 git 和 nodejs。

有了以上准备工作后，再安装 Gatsby。

全局安装 Gatsby 脚手架：

npm install -g gatsby-cli使用Gatsby脚手架生成Gatsby项目：

gatsby new blog以上命令生成了一个名为 blog 的项目目录，进入此目录并启动项目：

cd gh-pages-sitegatsby develop


这样一个 Gatsby 网站的开发版本就运行起来了，打开 http://localhost:8000 来查看并调试。

如果要部署项目可以执行：

gatsby build执行完之后在根目录下会生成一个public目录，这个目录里包含了网站的所需文件，你可以将其打包上传到服务器来进行部署。接下来我们会看到怎么将其部署到 GitHub,生成一个 GitHub 个人网站。

GitHub Pages

在我们部署之前我们先来了解下 GitHub Page 的基本流程。GitHub Pages 是 GitHub 提供的一项服务，可以让你直接在 GitHub 存储库直接托管静态网站。一般作为一个开源仓库的介绍页或者个人站。创建一个网站，首先需要你 push 相关的静态文件到 gh-pages 分支。你可以在 GitHub 仓库的 Settings页面- GitHub Pages 中激活 GitHub pages. 如果你仓库的地址是 git@github.com:username/blog.git， 那么你网站的地址就是 http://username.github.io/blog . 还有一点需要注意如果你的 GitHub 账号是免费账号，那么只有公共仓库（public）才能用于GitHub Pages。

通过 Gatsby 部署

在项目目录下安装 gh-pages

npm install gh-pages


配置站点目录,将你仓库名称配置到 gatsby-config.js文件里，像这样

module.exports = { pathPrefix: "/blog",} 然后，在 package.json 文件的 scripts 里配置如下命令：

{ "scripts": { "gh-deploy": "gatsby build --prefix-paths && gh-pages -d public" }}这个命令，首先为每个 url 创建带有 /blog 前缀的站点的静态文件到 public 文件夹，然后使用 gh-pages 插件将 public 文件夹的内容推送到 gh-pages 分支。

然后将你本地的项目添加到 GitHub:

git remote add origin git@github.com:username/blog.git


最后，执行 gh-deploy 命令，将网站推送到 GitHub

npm run deploy


这样文件就推送到 GitHub 仓库的 gh-pages 分支了。推送后你就可以在 http://username.github.io/blog 上查看到你的个人网站了！

这样你的个人网站就建好了，至于怎么丰富你的网站内容，可以参考 Gatsby 官方文档。

https://www.gatsbyjs.org/

示例项目：https://github.com/rumsky/blog