Some days ago I came across Nextra, which is a static site generator based on Next.js.
The docs explain how to deploy a site to Vercel and I am wondering if I can deploy the site to GitHub Pages or any other platform that host static HTML sites.
From my understanding yarn build will create a folder that includes html, css and js files which can be uploaded to GitHub pages. Am I on the right track? Respectively can Nextra pages be hosted on GitHub Pages?
I cannot find a build folder that includes the generated website or something similar.
Thanks for every advice in advance.
To generate static files with no need of a Node.js server for hosting you can export your next app after build.
In package.json:
"scripts": {
"export": "next build && next export"
}
Then yarn export and you will get the files in the out/ folder.
With basic Nextra config you will get an error about image optimization:
Error: Image Optimization using Next.js' default loader is not compatible with next export.
To avoid that error you should deactivate Next.js image optimization by providing the images.unoptimized option outside require("nextra")({}).
Like this:
// next.config.js
const withNextra = require("nextra")({
theme: "nextra-theme-docs",
themeConfig: "./theme.config.tsx",
});
module.exports = {
...withNextra(),
images: {
unoptimized: true,
},
};
Here is a working example being deployed to Github Pages.
Related
I have complete all process
Firebase Login
Firebase init
Firebase deploy
now finally i got a link https://testing-37553.firebaseapp.com/
but my website not showing so what should i have to do.
What you are seeing is the default index.html page that is created by the CLI when you create a new project.
You should adapt this index.html page as you whish (i.e. by modifying the HTML/CSS/JS code of this page, in your local project directory) and re-deploy the project with
firebase deploy
or
firebase deploy --only hosting
Go to your firebase.json file and make sure that the 'public' key under "hosting" is set to "build" like below:
"hosting": {
"public": "build"
}
It was likely set to "public" by default when you ran firebase init. In which case it would look like this:
"hosting": {
"public": "public"
}
The problem with the default is that React places all your static assets in the 'build' directory when you run npm run build, so that is where you want to point firebase to.
I faced the similar issue, my application was on react built using create react app. I was trying to deploy via firebase but getting the default page of firebase then i figured out that I havent build my application so firebase was not able to find my application html file and hence it was trying to deploy the default one.
I solved it by running yarn build, then when I do firebase init selected "hosting" option . After this step while selecting folder to deploy rather public I selected "build" and this solved my problem and my application got hosted. Hope this helps!!
For Angular 8.
If the name of your project is "ManyuDictionary".
1)Run firebase login.
2)Run firebase init and choose:
a) hosting
b) What do you want to use as your public directory? dist/ManyuDictionary
c) Configure as a single-page app (rewrite all urls to /index.html)? Yes.
Firebase will now write configuration info to firebase.json and project
information to .firebaserc.
3)Run ng build --prod.This will replace the default index.html in dist/ManyuDictionary.
4)Run firebase deploy.
And here is your website [https://manyudictionary.firebaseapp.com].
For Angular 7+, here is the straight forward solution that works for me as of August-2019
Just delete the index.html file at the root of your /dist folder.
Then, copy all the content inside the directory(named like your project main project folder's name) found in your /dist folder
Lastly, rerun firebase deploy
Enjoyed!
Solution that worked for me as of 9/17/2020
1- Finish the firebase init steps.
2- Add this to your firebase.json file:
//"public": should be, dist + project name on your computer
//"site": should be the app name which you created on your firebase cloud
{
"hosting": {
"public": "dist/your-project-name",
"site": "firebase-project-name",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
3- ng build --prod
4- firebase deploy
Firebase asks wehn you type firebase init hosting.
File dist/your-project/index.html already exists. Overwrite?
Press
NO
And you are good to go!
If you follow firebase Hosting steps, but not solve your problem.Then you can follow this step for solving your problem:
Deploy your project in netlify.
Take the live project link from netlify.
Go to firebase > your project > Hosting > Dashboard.
Click the Add custom domain Button.
Paste the netlify project live link in input box.
Click the Continue button.
That's ok.
I'm trying to learn how to deploy a Stencil web app using a web server like Ngnix but I can't make it work on localhost. I suspect there is no entry point for the minified build.
As an example, I'm using the stencil starter app.
In my stencil.config.ts file, I have opted-in for the "dist" output target.
outputTargets: [
{
type: 'www',
// comment the following line to disable service workers in production
serviceWorker: null,
baseUrl: 'https://myapp.local/',
},
{
type: 'dist'
},
]
For the minified build I am running the command:
npm run build -production
The generated "/dist" folder does not contain an index.html file and this prevents me from being able to serve it using Ngnix.
The contents of the dist folder
I would expect that the generated "/dist" folder would contain an "index.html" file that could be served as an entry point to a web server.
What am I doing wrong?
Is there anything I'm missing?
The dist output target is meant for including in existing pages.
To generate a website you can use the www output target (in the www folder). This will also give you access to website-specific options, like a service worker.
The docs state:
The www output target type is oriented for webapps and websites, hosted from an http server, which can benefit from prerendering and service workers, such as this very site you're reading.
For anyone who comes across this in the future, I found the solution.
I was supposed to use the "/www" folder for deployment as that's the way it's supposed to work for standalone web apps, and it contains an "index.html" file.
Here is the documentation
I have a project in Next.js. I have that upload files and share that in public URL to this project.
With npm run dev first I uploaded files to public folder and it worked fine, but when I change to npm run start and upload files, the files upload to public folder but with URL http://mydomain/fileuploaded.jpg it did not show, is rare but it's there.
I searched on the Internet but I didn't find a solution for this problem.
From Next.js documentation:
Only assets that are in the public directory at build time will be served by Next.js. Files added at runtime won't be available.
You'll have to persist the uploaded files somewhere else if you want to have access to them in the app at run time.
Alternatively, you could setup your own custom server in Next.js, which would give you more control to serve static files/assets.
You can also achieve something similar using API routes instead. See Next.js serving static files that are not included in the build or source code for details.
a bit late but if someone need the same.
If your goal is to upload and get picture from your next server, you can instead of using the Next router, getting the image by yourself by create a route /api/images/[id] where [id] is your file name and you manually with fs send the picture back.
something like:
const file = await fs.readFile(`./uploads/image.png`)
console.log(file)
res.setHeader('Content-Type', 'image/png')
res.send(file)
Try and use nginx or another webserver to serve the public directory. That way it will serve newly added files without having to write extra code to serve files in nextjs.
server {
/images/ {
root /var/www/site/public
}
}
I'm starting my studies in Next.js and managed to develop a relatively simple website, my problems started when I did a next export to make the website available on my client's hosting.
The problem is with the image paths. My settings are these:
File next.config.js
module.exports = ({
basePath: '/sitenext'
}
My image
<Image
src="/assets/images/logo.webp"
alt="Logo"
width={96}
height={116}
/>
The path of the image generated in HTML is this
/_next/image?url=%2Fassets%2Fimages%2Flogo.webp&w=384&q=75
After configuring basePath, works perfectly, only images that have not loaded correctly.
I also tried the root of the host and was also unsuccessful.
Locally everything works perfectly in both dev and start mode.
Thanks a lot for the help
I just installed Jekyll and generated a new site and modified almost nothing of the default configuration.
I can serve it well locally.
But when I push the source code to Github Pages or deploy it on Gitlab with a build script, I have the same result: the CSS doesn't load.
I haven't changed anything in the layout. I thought this would be the kind of feature that should work by default.
The repo:
https://github.com/bmrejen/jekyll_blog
The Github Pages:
https://bmrejen.github.io/jekyll_blog/
It says
"Could not find the original style sheet."
Try to add this in jekyll_blog/_config.yml
baseurl: /PROJECT
url: http://USERNAME.github.io
I saw in your history you deleted the URL & baseurl and insert it wrong.
If you still can't understand how to insert, you can watch this tutorial, it's cover it:
Hosting on Github Pages