只需10分鐘，構(gòu)建你的 GitHub 個人網(wǎng)站

時間：2023-08-02 20:57:01 | 來源：網(wǎng)站運營

時間：2023-08-02 20:57:01 來源：網(wǎng)站運營

只需10分鐘，構(gòu)建你的 GitHub 個人網(wǎng)站：很多開發(fā)者尤其是前端開發(fā)者都希望有一個自己的網(wǎng)站來展示個人信息、簡歷或者寫一些博客。

也許你會想到自己買云服務(wù)器，然后將開發(fā)的網(wǎng)站放上去，但是服務(wù)器價格不菲而且對于初學(xué)者來說自己部署也比較麻煩。

其實想搭建個人網(wǎng)站有 GitHub 就足夠了。




今天我們就來介紹一下怎么用 Gatsby 來快速搭建個人網(wǎng)站。

Gatsby.js 是一個基于 React 的免費、開源的快速開發(fā)靜態(tài)網(wǎng)站的框架。而且通過配合使用 GraphQL 可以與各種數(shù)據(jù)源集成，比如 markdown 文檔，圖片等等。所有這些資源可以被當做對象通過 GraphQL 請求然后在網(wǎng)站上展示。


本篇中，我們將介紹如何開始使用 Gatsby ,然后構(gòu)建靜態(tài)網(wǎng)站并通過 Github 免費部署，最終生成我們的 GitHub 個人網(wǎng)站。

Gatsby

因為 Gatsby 是基于 React 的所以需要你具有一定的 javascript 和 React 基礎(chǔ)。

然后還需要你的電腦安裝 git 和 nodejs。

有了以上準備工作后，再安裝 Gatsby。

全局安裝 Gatsby 腳手架：

npm install -g gatsby-cli使用Gatsby腳手架生成Gatsby項目：

gatsby new blog以上命令生成了一個名為 blog 的項目目錄，進入此目錄并啟動項目：

cd gh-pages-sitegatsby develop


這樣一個 Gatsby 網(wǎng)站的開發(fā)版本就運行起來了，打開 http://localhost:8000 來查看并調(diào)試。

如果要部署項目可以執(zhí)行：

gatsby build執(zhí)行完之后在根目錄下會生成一個public目錄，這個目錄里包含了網(wǎng)站的所需文件，你可以將其打包上傳到服務(wù)器來進行部署。接下來我們會看到怎么將其部署到 GitHub,生成一個 GitHub 個人網(wǎng)站。

GitHub Pages

在我們部署之前我們先來了解下 GitHub Page 的基本流程。GitHub Pages 是 GitHub 提供的一項服務(wù)，可以讓你直接在 GitHub 存儲庫直接托管靜態(tài)網(wǎng)站。一般作為一個開源倉庫的介紹頁或者個人站。創(chuàng)建一個網(wǎng)站，首先需要你 push 相關(guān)的靜態(tài)文件到 gh-pages 分支。你可以在 GitHub 倉庫的 Settings頁面- GitHub Pages 中激活 GitHub pages. 如果你倉庫的地址是 git@github.com:username/blog.git， 那么你網(wǎng)站的地址就是 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 創(chuàng)建帶有 /blog 前綴的站點的靜態(tài)文件到 public 文件夾，然后使用 gh-pages 插件將 public 文件夾的內(nèi)容推送到 gh-pages 分支。

然后將你本地的項目添加到 GitHub:

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


最后，執(zhí)行 gh-deploy 命令，將網(wǎng)站推送到 GitHub

npm run deploy


這樣文件就推送到 GitHub 倉庫的 gh-pages 分支了。推送后你就可以在 http://username.github.io/blog 上查看到你的個人網(wǎng)站了！

這樣你的個人網(wǎng)站就建好了，至于怎么豐富你的網(wǎng)站內(nèi)容，可以參考 Gatsby 官方文檔。

https://www.gatsbyjs.org/

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