I have followed these steps:
Made a vue project with Nuxt.js (tested and working with npm run dev)
Used Nuxt.js static site generation to generate a static distribution under the dist directory of my master repository (also tested using VSCode's Live server plugin, works fine).
Deployed the dist directory to the gh-pages branch using: gh-pages -d dist
In the Options for my GitHub project, which is the GitHub Page for my user (augusto-moura.github.io/), I changed the Source to gh-pages.
The gh-pages branch seems to hold exactly what it's supposed to, but as I open the page, the scripts aren't loaded and each return a 404 eror.
What am I doing wrong? GitHub seems to not be serving the JS files inside the _nuxt directory.
you need to add .nojekyll file at root dir when publishing to GitHub Pages, otherwise it won't get resource files from _nuxt dir.
As indicated in the How to deploy on GitHub Pages? guide, in this tiny, easy-to-miss note...
Branch gh-pages for project repository OR branch master for user or organization site
In order to use Pages for your user account, you need
push-dir --dir=dist --branch=master
Related
I tried uploading my files to Github, but GitHub says it's too big.
I then uploaded the content of the dist folder after building for production.
This worked just fine, but it's not very useful.
What is the proper way to upload a Vue.js app to GitHub?
What you generate (binary files which can be big) should not be versioned/pushed to GitHub.
It is better to use a local plugin which will, on GitHub side, build, tag and publish a release associated to your project.
For instance: semantic-release/github.
You can combine that with a GitHub Action, which can take that release, and deploy it on a remote server of your choice (provided it is publicly accessible from GitHub): see for example "How to deploy your VueJS using Github Actions (on Firebase Hosting)" from John Kilonzi.
For your existing dist, you should delete it (from Git only, not your disk) and add it to your .gitignore:
cd /path/to/repo
git rm --cached dist
echo dist/>>.gitignore
git add .gitignore
git commit -m "Delete and ignore dist/"
git push
What happens if I add a node module( like if I decide to add an image cropper). How can the other contributers deal with that?
You need to add the declaration of that module in your project, not version the module itself. For instance, using Vue.use.
Also: I host the app on netlify. It builds the site straight from github. But it wont be able to build the site if gihub doesnt have the dist folder...
See "How to deploy your Vue app with Netlify in less than 2 min!" from Jean-Philippe Fong: Netlify itself will build the dist (from your GitHub project sources) and publish it.
You should add a .gitignore file to the root of your directory where you can ignore files and directories.
Most typical ones to ignore are the following:
node_modules
/dist
.env
.vscode
From node_modules\docusaurus\lib\publish-gh-pages.js:
const websiteURL =
GITHUB_HOST === GITHUB_DOMAIN
? `https://${ORGANIZATION_NAME}.github.io/${PROJECT_NAME}` // gh-pages hosted repo
: `https://${GITHUB_HOST}/pages/${ORGANIZATION_NAME}/${PROJECT_NAME}`; // GitHub enterprise hosting.
My question is... why is the documentation being uploaded to a subdirectory? What if I wanted it uploaded to the root directory? How might I do that?
The front page of a docusaurus v1 website is more of a splash page with sections like "feature callouts", etc. Overall, it seems best suited to be a root page as it appears to be for https://hermesengine.dev/ , https://hydra.cc/ and pretty much every other facebook open source project.
Also, the HTML that docusaurus generates has <link rel="stylesheet" href="/css/main.css"/> in it, which works great when you're building your site with npm run start (which results in the files living in web root), but not so much when using publish-gh-pages.js since main.css then lives at /${PROJECT_NAME}/css/main.css.
So how can I do the same - make it so my docusaurus built website gets uploaded to web root instead of a subdirectory?
The repo was that the repo wasn't named project_name.github.io - it was named docs. That this would result in docusaurus doing the build process is evident from the build script BUT apparently github.com itself will default to a subdirectory for github.io unless your repo name is project_name.github.io. This can be seen by scrolling to the bottom of the page that Settings brings up.
My Code
I want to publish to github pages
I use vue-cli version 4.x
When I enter my github page, I can only see my README.md.
github page link
A publishing source for GitHub Pages can be:
the master branch content
the gh-pages branch content
the doc subfolder
The public/ subfolder is never considered for publication.
See Vue.js GitHub Pages for an example of deployment.
Also "GitHub Pages + Vue CLI 3" from Manuel Mejia Jr..
I'm trying to create site by gh-pages after I'm run npm run deploy and it created gh-pages branch and when I'm go through the link that give in the sitting this show.
Could anyone tell me what should I do?
Your image shows an URL https://sovannak22.github.com/mywebsite.
That looks like a project pages
A Project Pages site for a personal account is available at http(s)://<username>.github.io/<projectname>.
Don't forget an URL is case-sensitive.
Considering your GitHub account URL is https://github.com/Sovannak22, you should:
have a repo at https://github.com/Sovannak22/mywebsite (which I don't see)
use the URL https://Sovannak22.github.com/mywebsite.
I just followed this video to generate a app using vueJs cli, and I'd like to deploy the result on the gh-pages.
I generated the dist folder running the yarn generate command, and
followed this guide to deploy that folder.
However, as you can see here, it render the README.md file.
Here is the repository. What would you change to make it work?
I made a mistake thinking the gh-pages branch was rendered. It was the master branch since user and organization must use the master branch for that.
I solved by creating a new branch to use for development, and the master to render the website.
Everything works now.