來安裝潮潮的部落格 - Docusaurus

起由

原本的blog, 因為domain忘記續約, 加上換個domain的關係, 想說徹底來換一套新的blog framework.

剛好之前有關注到Facebook團隊有推出一套docusaurus

重頭戲

其實安裝docusaurus不難, 基本上照著官方教學走就可以建置出基本的網站了。

我個人比較喜歡用yarn, 所以安裝步驟都會以yarn為主

• 安裝docusaurus

yarn create docusaurus

[建議] 搭配 Tailwind CSS

個人蠻愛用tailwind, 所以就乾脆整合再一起, 以利接下來的版面優化。

• 安裝tailwind css package

yarn add tailwindcss postcss autoprefixer

• 初始化tailwind, 創建tailwind.config.js

npx tailwindcss init

• 你會獲得一個tailwind.config.js, 複製以下內容

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
  corePlugins: {
    preflight: false,
  }
}

• 把tailwind css 放進去 custom.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Deploy

這邊直接使用vertical

domain