I have googled and searched and cannot find an answer to this. I have my page at github and it just returns a hyperlink with the readme. Here is the current repo: https://github.com/brianmsantos/brianmsantos.github.io.
Create an index.html and add your content there. See https://pages.github.com/
1 create package.json and add
{
"homepage": "https://name.github.io/appname",
…
}
2.Use the terminal and install gh pages using command:
npm install --save gh-pages
3.Add this to your scripts in package.json
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
…
}
make deploy using npm run deploy in commandline
5 in your repository settings set the branch to gh-pages branch and save
Related
When I run npm install, remove or add any package (or do anything that changes the local package.json) and commit to a PR branch, I get the following error in the github actions "run npm ci" build.
npm ERR! `npm ci` can only install packages when your package.json and package-lock.json or npm-shrinkwrap.json are in sync. Please update your lock file with `npm install` before continuing.
npm ERR!
npm ERR! Missing: webpack#5.74.0 from lock file
npm ERR! Missing: #types/eslint-scope#3.7.4 from lock file
Things i've tried:
Deleting node modules & package-lock.json & running npm i - DOESNT WORK
Changing my github main.yml to npm ci --legacy-peer-deps - DOES FIX THIS BUG but causes other weird bugs about paths to other React components withing my project to not be found with a Type error: Cannot find module '../ etc" (they all work fine if the old package-lock is used)
Pasting the old package-lock.json to overwrite my local copy and committing - WORKS? But I can never actually remove or add packages.
Running npm ci locally works perfectly fine.
In summary:
If I create a new branch from main > npm install a new package & push the updated package.json and package-lock.json to the branch > it fails the github actions check on npm ci with the above npm ERR because the package-lock.json does not match.
I'm stumped, any help would be greatly appreciated.
Next.js builds all the static assets in _next folder but Github pages does not need to serve those files. I am 404 for static assets.
Example repo: https://github.com/ajaymathur/ajaymathur.github.io
Master branch is hosted and dev branch is for development.
And I guess github pages is not hosting paths starting with -. How can I get around this issue?
Add a .nojekyll file in the folder that contains the _next folder.
This disables Jekyll processing and lets the _next folder (which contains an underscore) get copied to the final website.
My _next folder is in the root of my repository, so I added a .nojekyll file to the root.
Simply adding a .nojekyll file wasn't enough for me. I had to change the build command to add the file after the export to static HTML/CSS/JS like this
"scripts": {
...
"static": "next build && next export && touch ./out/.nojekyll && echo 'www.mywebsite.com' > ./out/CNAME",
...
},
I am also using gh-pages to copy the files from the out folder to the branch Github Pages will serve, by default the .nojekyll file was not copied over. This can be circumvented by setting the -t option to true
"scripts": {
...
"deploy": "gh-pages -d out -t true"
...
},
After these changes, npm run static && npm run deploy should do what you're looking for.
I'm working on a WP project on my local machine with Vagrant virtualization.
I created a script in my package.json so i can easily merge my branches, push to Gitlab and pull the git repo on my staging environment via NPM or Yarn
I added my staging server's public key to the deployment keys in my gitlab project, tested it and it works.
my package.json content:
{
"name": "axis",
"version": "1.0.0",
"description": "A development environment based on Vagrant, optimized for WP development",
"devDependencies": {
"autoprefixer": "latest",
"node-sass": "latest",
"watch": "latest",
"onchange": "latest",
"postcss-cli": "latest"
},
"scripts": {
"build": "node-sass www/wp-content/themes/axis/sass/screen.scss www/wp-content/themes/axis/stylesheets/screen.css && yarn run autopre",
"autopre": "postcss --use autoprefixer www/wp-content/themes/axis/stylesheets/*.css -d www/wp-content/themes/axis/stylesheets/",
"watch": "yarn run watch:css",
"watch:css" : "onchange 'www/wp-content/themes/axis/sass/**/*' -- yarn run build",
"gitmerge": "git checkout staging && git merge dev && git checkout dev && git push --all origin && ssh ***#***.nl \" cd www/axis.nl && echo 'it works till here' && git pull origin staging;\""
}
}
When I run the script i get the following error:
Permission denied (publickey).
fatal: Could not read from remote repository.
And here follows the weird part:
When I repeat the command step by step I don't get the error and it successfully pulls the repo.
If I Google the error I get thousands of hits but not for this specific situation.
anyone with a similar situation?
So, I have a library haste-mapper (link to Github - I would like some opinions on it). It uses gulp, babel-core and a few other npm packages to build itself so as to have valid JavaScript instead of Flow into the build/ directory. I added that as a postinstall hook script in package.json:
"postinstall": "gulp build"
It works, the script starts running but it does not meet the required dependencies in the host package. I have gulp and babel-core as devDependencies and it seems not to install them. Adding them to dependencies seems semantically wrong. I tried adding them to peerDependencies, but instead of installing what's missing, it just complains about it.
How should I go about this?
P.S. Here is the package.json
If you want to use something in a postinstall hook, it needs to be a dependency.
However, you're doing it wrong. You shouldn't be transpiling your code after the install. Instead, you should transpile your code before you publish the package.
To do that, you will need to rename your script to prepublish so that it is run when you run npm publish. List gulp, babel, etc. as devDependencies. Add an .npmignore file in the root of your project, containing:
/src/
The .npmignore file works just like a .gitignore. You don't want your src/ directory included in the published package, only build/. Make sure .npmignore is committed to git. If you don't have an .npmignore, npm will use the .gitignore file. This isn't what you want, since build/ is ignored for version control, but should be included in the npm package.
When you run npm publish, npm will run your prepublish hook before bundling your package for the registry. Then when someone npm installs your package, they will get the build/ folder, but not src/. Just what you want!
I started to leave a comment on RyanZim's answer because his technique is correct. However, I wanted to give a slightly different approach. Our company maintains a lot of open source projects and this is how we would advise you.
Keep developing your project like you normally would. Your .gitignore file should be ignoring your dist directory (/build in your case).
When you are ready to deploy, you want to build your code, bump your version number inside package.json, tag the changes, and push the built code to both github and npm.
The main idea is that we want to keep a copy of our built code in github along with a "tag" for that version. This allows us to see exactly what was pushed to npm for any particular version. The built code is not part of the master branch but exists only under a tag (which is sort of like a branch). When a user reports a bug and he's using version x.x.x, you can checkout that exact version and start debugging. When you fix the bug, you release a new "patch" and your user will get the changes the next time he runs npm install or npm update.
We have created a set of npm scripts to do most of this for us. Here is what we use (this goes in your package.json):
"scripts": {
"build": "node build.js",
"preversion": "npm run build",
"version": "git commit -am \"Update dist for release\" && git checkout -b release && git add -f dist/",
"postversion": "git push --tags && git checkout master && git branch -D release && git push",
"release:pre": "npm version prerelease && npm publish",
"release:patch": "npm version patch && npm publish",
"release:minor": "npm version minor && npm publish",
"release:major": "npm version major && npm publish"
}
I know that may look confusing so let me explain. Whenever we are ready to release new code, we run one of the release: commands. For example, when we run npm run release:minor, here is the list of commands which are run in order. I have annotated it so you can see what happens:
node build.js ## run the build code - you will want to run gulp instead
npm version minor ## bumps the version number in package.json and creates a new git tag
git commit -am "Update dist for release" ## commit the package.json change to git (with new version number) - we will push it at the end
git checkout -b release ## create a temporary "release" branch
git add -f dist/ ## force add our dist/ directory - you will want to add your build/ directory instead
npm publish ## push the code to npm
git push --tags ## push the built code and tags to github
git checkout master ## go back to the master branch
git branch -D release ## delete the temporary "release" branch
git push ## push the updated package.json to github
If you have any questions, please ask. You might want to do things in a slightly different order as your situation is a little different. Please feel free to ask questions. This code works really well on dozens of projects - we release new code multiple times a day.
I am using the gem "jekyll-assets" on my site and it fails when pushing to github pages. I have read that a way around this is to build the site locally, which builds just fine, and then push it to github pages. The examples of people doing this, however, are using a project repository and they are pushing the site to a "gh-pages" branch. I am doing this site for myself and the setup for this suggests using the master branch under the repo .github.io. How do I push a local jekyl build to a site with this setup?
You need to push only the content of the _site folder. Nothing else, nor the folder itself.
If you are setting up a project site, push the content to the gh-pages branch. If it's your user website, the repo must be named username.github.io and your site root needs to be the master branch.
Let me know how it goes! :)
Hope to have helped!
Here a windows batch file that pushes generated files back to github. Name it site_publish.bat and put it into the root of your project.
#echo off
cd /d "%~dp0"
rmdir _site /s /q
call jekyll build
git --git-dir=.git --work-tree=_site add --all
git --git-dir=.git --work-tree=_site commit -m "autogen: update site"
git --git-dir=.git --work-tree=_site push
You may want to try jgd command line, which automates all the steps suggested by other answers, in one simple call:
$ jgd
The site will be packaged and then deployed to the gh-pages branch of your repo, provided you have all permissions configured. More about it in this blog post of mine: Deploy Jekyll to GitHub Pages