你想有自己的博客或者静态网站吗？

首先 静态网站用来干嘛？

• 1. 个人博客
• 2. 个人作品集
• 3. 企业官网或产品宣传页面
• 4. 文档网站
• 5. Landing Page（产品或活动推广页面）
• 6. 展示类页面（个人资料、简历）
• 7. 静态文档系统
• 8. SEO 优化的展示站

不适合的场景

1. 需要用户交互和实时数据的网站（如电商平台、社交媒体）。
2. 需要频繁更新内容的网站（动态网站更方便）。

其次，本文档适合懂前端开发的人员阅读😳

若非，可以直接滚动到最下面的技术支持，我来助你！

本博客开发和部署流程

使用 vuepress 进行基础项目建立

vuepress 官网open in new window
本博客采用的是 2.0 版本的，文档的话可以去招 1.0 版本，不过我个人喜欢新的东西

使用 一个好看的主题

本博客主题地址open in new window

部署

github pages

1. 设置正确的 base 选项。
   因为 github pages 的部署 总是会有后面的路径拼接，所以在 config 中，需要你为其设置好基础路径
   比如我当前这个url地址上你可以看见会有一个/inksnow-blog的部分，这个是固定存在的一个前缀，其实就是你项目名称

   export default defineUserConfig({
     base: "xxxx",
   });
   
2. 选择你想要使用的 CI 工具。这里我们以 GitHub Actions 为例。
   在根目录下创建 .github/workflows/docs.yml 文件来配置工作流。这里展示一下我的

   
    # Simple workflow for deploying static content to GitHub Pages
   
    name: Deploy static content to Pages
   
    on:
   
    # Runs on pushes targeting the default branch
   
    push:
    branches: ["master"]
   
    # Allows you to run this workflow manually from the Actions tab
   
    workflow_dispatch:
   
    # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
   
    permissions:
    contents: read
    pages: write
    id-token: write
   
    # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
   
    # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
   
    concurrency:
    group: "pages"
    cancel-in-progress: false
   
    jobs:
   
    # Single deploy job since we're just deploying
   
    deploy:
    environment:
    name: github-pages
    url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps: - name: Checkout
    uses: actions/checkout@v4
   
        - name: Setup pnpm
            uses: pnpm/action-setup@v4
            with:
            # 选择要使用的 pnpm 版本
            version: 9
            # 使用 pnpm 安装依赖
            run_install: false
   
        - name: Setup Node.js
            uses: actions/setup-node@v4
            with:
            node-version: "20" # 或者根据项目需求指定其他 Node.js 版本
            cache: pnpm
   
        - name: Install dependencies
            run: pnpm install --no-frozen-lockfile
   
        - name: Build project
            run: npm run build # 执行打包命令
   
        - name: Setup Pages
            uses: actions/configure-pages@v5
   
        - name: Upload artifact
            uses: actions/upload-pages-artifact@v3
            with:
            # 打包后的路径
            path: "./docs/.vuepress/dist"
   
        - name: Deploy to GitHub Pages
            id: deployment
            uses: actions/deploy-pages@v4
   

官方其实有指南open in new window 不仅官方指南，网上搜一搜 很多教程，构建很简单

netlify

首先，这个建议先部署一套github的，再用这个来链接github的储存库。

进入这个链接👉官网地址open in new window

• 注册账号
• 链接你的github中的项目
• 在 Site configuration 中去修改你的打包配置
• 直接开始部署即可，它会检测你分支的更新 自动重新部署

如何同时适配两个部署环境？

• 使用 pnpm i cross-env --save-dev 安装环境控制工具，
• package.json 去新建一个打包命令 例如: "build:netlify": "cross-env NODE_ENV=netlify vuepress build "
• 在base的设置上，做个判断，以区分不同环境

    export default defineUserConfig({
        base: process.env.NODE_ENV=='netlify'?'/': "/你的前缀/",
    });

• 在 netlify 的你的项目中选择 Site configuration 中去配置Build command 为：npm run build:netlify

技术支持

本人文档写的比较差，若需要帮忙、或者直接找人付费帮你搞定一切，可投递需求和联系方式至邮箱: inksnowhailong@gmail.com