文章目錄

1. Gatsby初試啼聲
2. 利用react-bootstrap打造React風格頁面
3. 了解Gatsby中GraphQL如何運作
4. Gatsby GraphQL讀取JSON
5. 在Gatsby GraphQL中組合出完美資料
6. Gatsby程序化產生頁面
7. 上線到Netlify+啟動Netlify CMS

在這最後一篇文章裡面，我們會把之前最好的個人網頁上線到Netlify。

網頁託管服務的選擇

對於靜態網站來說，現在真的有很多很好的服務可以選擇，支援的程度也有從只支援靜態往佔到提供一站式服務的託管，幾個比較知名的服務例如Github Pages、Netlify、Heroku、surge.sh、Firebase、Amazon S3等。這次我選用Netlify的原因，除了原本的模板裡面就用了Netlify CMS想說就乾脆用Netlify之外，從Github repo發布到Netlify真的是非常簡單的事情，對於支援CD、設定域名、加上https也很人性化，點幾個按鈕之後就可以輕鬆完成。

上線個人頁面

設置Github repo資訊

static/admin/config.yml

backend:
  name: github
  repo: your-username/your-repo-name

這一動作對於啟動Netlify CMS來說很重要。

建立一個新Github repo

1. Repository name：使用在上一部設定的repo名稱。
2. Public/Private：隨意選擇。
3. Initialize this repository with A README：如果是使用本篇教學裡面的github程式碼就不用勾選，已經有README了。
   建立repo後可以按照Github上新repo的指示把程式碼上傳。

   git init
   git commit -m "initial commit"
   git remote add origin https://github.com/XcrossD/gatsby-personal-page.git
   git push -u origin master
   

   repo的git路徑可以在以下圖片中的位置找到
   

發布到Netlify

打開app.netlify.com登入後，選擇New site from Git。

選擇GitHub。

選擇上一步新建立的repo。

不需要調整設定，直接選擇Deploy site。

發布完畢後，就可以打開Netlify提供的連結看到個人頁面囉！

啟動Netlify CMS

1. 首先在Github到Settings > Developer Settings > Oauth Applications，或者是使用這個捷徑。
2. 選擇Register a new application。
3. 隨意填入資訊。注意在Authorization callback URL一定要填https://api.netlify.com/auth/done。
   
4. 打開個人頁面的/admin就可以進入Netlify CMS系統，編輯部落格文章了。
   

加上個人域名（選擇性）

之前我有在namecheap買過域名，所以我就跟他買了一個新的域名，叫做herbertlin.com。關於域名商的選擇，可以自己比較一下。

在Netlify選擇Domain settings後，可以點選Add custom domain加入域名。
這時候他的狀態顯示為警告，說需要更改DNS設定。這時候可以選擇：

• 繼續使用其他的DNS伺服器，按照裡面的指示進行即可。
• 或者是使用Netlify自己的DNS服務，這時候要去nameserver設定的地方加上Netlify DNS伺服器的位置。

設置個人資訊

在上線之前，還有一個地方需要修改，那就是網站的一些Meta設定，還有圖片也需要置換成我們自己的圖片。
gatsby-config.js

module.exports = {
  siteMetadata: {
    // edit below
    title: `Herbert Lin Personal Page`,
    author: `Herbert Lin`,
    description: `The personal page and blog of Herbert Lin, created with Gatsby, styled components, and Netlify CMS.`,
    siteUrl: `https://herbertlin.com/`,
    social: {
      twitter: ``,
      github: `XcrossD`,
      facebook: `herbert.lin`,
      instagram: `gummypearin`,
      linkedin: `herbert-lin-28240446`
    },
  },
  ...
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        // edit below
        // trackingId: `ADD YOUR TRACKING ID HERE`,
      },
    },
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `Gatsby Starter Blog`,
        short_name: `GatsbyJS`,
        start_url: `/`,
        background_color: `#ffffff`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        // edit below
        icon: `content/assets/favicon.png`,
      },
    }
}

1. siteMetadata內的內容替換成你自己的資訊。
2. 如果想要加入Google Analytics，需要自行到Google Analytics申請。追蹤ID會長的像UA-XXXXXXXXX-X。
3. 替換favicon。
   如果沒有圖片，可以到 https://favicon.io/ 用文字產生一個。

結語

簡單用七篇文章介紹Gatsby做出來的靜態網站如何修改，或許不是盡善盡美但是比起一開始的模板要來的像一個真正的個人頁面。有問題都可以隨時透過各種管道聯繫我(有跟著一起做應該就知道在我的個人網站中有放聯繫方式)，也可以參考我製作的repo。

本篇文章的程式碼的實作可以在github repo中找到

參考資源

• https://www.gatsbyjs.org/tutorial/blog-netlify-cms-tutorial/
• https://docs.netlify.com/visitor-access/oauth-provider-tokens/#using-an-authentication-provider
• https://css-tricks.com/using-your-domain-with-a-netlify-hosted-site/