如何使用Gatsby和MDX構建開發人員博客

然後，我提示我設置並部署新項目。我將使用

的所有問題回答默認值：

<span>import <span>React</span> from "react";
</span>
<span>export default function <span>IndexPage</span>() {
</span>  <span>return <span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span>;
</span><span>}
</span>

>在Vercel儀表板上，我可以配置該域，也可以從Vercel購買一個。我個人使用namecheap.com，但這是一種選擇。

netlify

>

> NETLIFY將構建文件並將其部署到生成的URL進行檢查。與Vercel幾乎相同，Netlify將使您在那裡購買一個域並部署到它。

>

>

>名稱：my-gatsby-blog

分支：默認值
構建命令：紗線構建
發布目錄：./public
• 然後單擊“創建靜態站點”。

>可選的蓋茨比插件

更多的蓋茨比插件可供選擇以添加其他功能。如果您想添加更多，我將把這些留給您。例如：

您是否想嵌入YouTube視頻，推文，Strava運行，Coodepens和Codesandbox？查看gatsby-plugin-mdx-embed。

>
• >您是否想以PWA為單位的網站？加入gatsby-plugin-offline。
• 您是否想在您的網站的瀏覽器選項卡中使用Favicon？查看gatsby-plugin-manifest。
>分析
如果您有興趣了解網站的流行程度，則有分析選項。我不久前就停止使用Google Analytics（在自己的項目上使用Google Analytics），現在我更喜歡更多以隱私為中心的替代方案。我推薦的是Fathom Analytics。 （如果您想為您的第一個月訂閱享受10美元的折扣，我有一個會員鏈接。）

>另一種選擇是合理的，我也聽到了關於的好消息。

>要在蓋茨比網站上實現fathom Analytics，我需要在我的網站的頭部添加附加腳本標籤。這意味著什麼？好吧，首先，我需要在我的fathom儀表板上創建網站，然後訪問https://app.usefathom.com/#/settings/sites/sites，滾動到列表的底部，添加我的新網站（ my -gatsby-blog），然後單擊“獲取站點代碼”。然後，我獲得了帶網站代碼的彈出模式。我需要將其添加到Gatsby Project的負責人的腳本中。這是腳本的樣子：

<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>

這是root-wrapper.js的差異：

<span># create the project directory
</span><span>mkdir my-gatsby-blog
</span><span># change into the directory
</span><span>cd my-gatsby-blog
</span><span># initialise a package.json file
</span><span>yarn init -y
</span><span># initialise the git repo
</span><span>git init
</span>

wrap！

就是我的。非常感謝您到最後。 ？

我希望您能從該廣泛的指南中獲得有關從頭開始建立蓋茨比項目的信息！

如果您想伸出手打個招呼，那麼最好的地方是Twitter。

>如何將圖像添加到我的蓋茨比MDX博客文章中？

>在蓋茨比MDX博客文章中添加圖像可以增強視覺吸引力並使您的內容更具吸引力。為此，您需要將圖像文件導入到MDX文件中。首先，將圖像文件放在蓋茨比項目的“ SRC”目錄中。然後，在您的MDX文件中，使用'../ path/to/image.jpg'導入ImageName導入圖像。導入後，您可以使用“ ImageName”作為組件中使用MDX內容中的圖像：。

>如何自定義我的Gatsby MDX博客的佈局？ > Gatsby MDX允許您自定義博客文章的佈局。您可以在“ SRC”目錄中創建一個佈局組件。該組件可以包括標頭，頁腳或側邊欄等元素。創建了佈局組件後，您可以將MDX內容包裹起來。為此，請在您的MDX文件中導入佈局組件，然後將您的內容包裝在此處：您的MDX內容。 。

>我如何添加代碼片段到我的gatsby mdx博客文章？

gatsby mdx支持在您的博客文章中包含代碼片段。要添加代碼段，您可以使用“ PRE”和“代碼”標籤。用這樣的標籤包裝代碼片段：

 <code>您的代碼在此處</code>