Nuxt4 +GitHub Pages布署个人主站 / 网络研习社#92

GitHub Pages是个不错的功能,它是GitHub提供的一个免费的静态网站托管服务,它允许 GitHub 用户创建和托管自己的静态网站,这些网站可以通过特定的 GitHub 仓库进行管理和托管。具体的方法可以按GitHub的介绍来就行,不算复杂。

nuxt.jpg

上次的工具升级到喵星后,也给自己的博客主站做了个单独的页面,感觉也还可以。后续就想着不如同步到GitHub Pages上,也多个入口。

Nuxt4是可以生成静态站点的,简单配置后yarn generate就可以啰!再把打包好的文件上传到GitHub Pages就大功告成啰!

不过有些高兴的太早,GitHub Pages好像无法正常显示内容!网络模式下发现很多文件(js和css文件)找不到!如下图所示:

githubpage2.jpg
出现404错误!

到文档中一通好找,发现Github Pages 构建部署时候,会忽略隐藏文件比如.文件_文件的文件也会忽略,而我们的构建产物,刚好是在_nuxt目录下面,这些都被忽略,导致文件找不到。所以在配置时,不要用下划线作为文件夹开头!

做好Nuxt相关配置,再yarn generate重新打包。

//nuxt.config.ts
export default defineNuxtConfig({
    ...
    app: {
        buildAssetsDir: 'nuxt_assets',
    },
    experimental: {
        payloadExtraction: false
    },
    ssr: false,
    ...
})

重新上传到Github Pages上,就显示正常啰!喜欢写博客的朋友们不妨试试哦。

githubpage3.jpg
https://lemooljiang.github.io

Sort:  

Congratulations @lemooljiang! You have completed the following achievement on the Hive blockchain And have been rewarded with New badge(s)

You distributed more than 52000 upvotes.
Your next target is to reach 53000 upvotes.

You can view your badges on your board and compare yourself to others in the Ranking
If you no longer want to receive notifications, reply to this comment with the word STOP

Check out our last posts:

Our Hive Power Delegations to the September PUM Winners
Feedback from the October Hive Power Up Day
Hive Power Up Month Challenge - September 2025 Winners List