开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >专栏 >使用GitHub Pages搭建在线静态网页

使用GitHub Pages搭建在线静态网页

小田测测看

发布于 2026-06-17 18:06:58

发布于 2026-06-17 18:06:58

1410

举报

不购买服务器，搭建一个静态网页，选择这种方式仅仅是因为Github Pages免费，购买服务器当然是最佳选择

项目初始化

nvm use 20
# 创建项目
npm create vite@latest json-viewer -- --template vue
cd json-viewer
npm install element-plus @element-plus/icons-vue

src/main.js 改成：

import Vuefrom'vue'
importAppfrom'./App.vue'

importElementUIfrom'element-ui'
import'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)
Vue.config.productionTip = false

newVue({
render: h =>h(App)
}).$mount('#app')

然后在App.vue 写逻辑

修改vite.config.js

import { defineConfig } from'vite'
import vue from'@vitejs/plugin-vue'

exportdefaultdefineConfig({
base: '/json_view/',  // 重要的是这句
plugins: [vue()],
server: {
    watch: {
      usePolling: true,
      interval: 1000,
      ignored: ['!**/node_modules/**']
    }
  },
})

构建 dist

npm run build

把 dist 内容放到github仓库根目录

开启 GitHub Pages

1. 打开仓库 → Settings
2. 左侧 Pages
3. Source：
- • Branch：main
- • Folder：/ (root)
4. Save

几秒后你会得到一个地址 https://你的用户名.github.io/<repo-name>/

我这里有搭建好的 https://floweroda.github.io/json_view/

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2026-01-23，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自编程拾光微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

评论

登录后参与评论

0 条评论

热度

最新

目录

不购买服务器，搭建一个静态网页，选择这种方式仅仅是因为Github Pages免费，购买服务器当然是最佳选择

项目初始化

构建 dist

开启 GitHub Pages