js and css not loading when hosting next application on GitHub pages - jekyll

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.

Related

Is there an easy way to make Jekyll output files to a docs/ directory?

I'm using Jekyll to build a Github pages site, and have run into a sort of silly issue.
Github recommends Jekyll for Github pages, so I sort of assumed it would just work; however, it does not.
Jekyll by default builds all files to the _site/ directory, which is really nice and looks fancy and so on, but is not an option for Github pages.
Github seems to offer only three options for hosting:
Root of master Branch
docs/ Folder of Master Branch
gh-pages Branch
So, pray tell, why can I not build Jekyll to either A. a branch with a custom name or B. a folder named docs/ instead of _site?
Turns out I didn't read enough docs.
The solution is to add a tag to the _config.yaml file in the root of the project.
This line will switch from using _site to docs/ for build output:
destination: docs/
Alternately, you can pass this as an environmental variable like so:
jekyll build --destination docs/

How to prevent CNAME file from getting dropped during Jekyll build process

I'm using Jekyll with Forestry.io and GitHub Pages. Everything seems to be working properly except for when the build process runs and the site is copied to the gh-pages branch. All of the static files (eg. robots.txt and sitemap.xml) get copied, but the CNAME file for my custom domain does not.
If I change the file name to all lowercase (cname) then it gets copied. But GitHub Pages doesn't recognize a cname file.
I don't think anything in the build portion of the Forestry.io settings would cause this issue.
build:
preview_command: bundle exec jekyll build --drafts --unpublished --future -d _site
publish_command: bundle exec jekyll build -d _site
preview_env:
- JEKYLL_ENV=staging
publish_env:
- JEKYLL_ENV=production
preview_output_directory: _site
output_directory: _site
Are you publishing your build to Github Pages? Github Pages can/should contain the (Jekyll) source, not the build. So to be extra clear: Github Pages should contain .md files and not (built) .html files. The CNAME file is designed to be used by Github Pages, so Github Pages is not the culprit. Forestry.io or your build process probably is. Forget about the build process and publish your changes directly to your github pages branch. That should do the trick.

Jekyll Website won't load

I've been trying for a while to get a Jekyll website running on Github Pages, but it doesn't seem to work. I've been getting the error
Your site is having problems building: The symbolic link
/vendor/bundle/ruby/2.3.0/gems/ffi-1.9.18/ext/ffi_c/libffi-x86_64-linux-gnu/include/ffitarget.h
targets a file which does not exist within your site's repository. For
more information, see
https://help.github.com/articles/page-build-failed-symlink-does-not-exist-within-your-site-s-repository/.
I have already tried it with 9 different Jekyll themes, but none of them seem to work, so I'm clearly doing something wrong. Here are the steps that I am taking
1) Create a new repo and put the files from a Jekyll Theme there, OR fork it from another repo (e.g. https://github.com/iwiedenm/jekyll-theme-massively-src)
2) Git pull it into my computer and make sure I'm on the gh-pages branch
3) Run bundle install --path vendor/bundle
4) Make sure it was built with bundle exec jekyll serve
5) Once it looks good, upload it into Github
git add *
git commit -m 'Test'
git push
Then I go to the repo in the browser and I see the error above, and I can't see the website because of that missing "ffitarget.h" file. When I go look for it in that directory, I am able to find it, but Github doesn't seem to be able to find it.
Nick Shu
PS: Feel free to mark this as a duplicate. I have seen other pages, such as this and I tried it, but it didn't work.
Github page will use local gems in vendor. If you commit them, you will have errors each time github pages tries to resolve symbolic links.
From a fresh repository
Add vendor/** in your .gitignore file before you do a git add . *.
The dot in git add . * forces git to stage dotfiles (.gitignore, ...).
From an already existing repository containing gems in a vendor folder
Add vendor/** in your .gitignore file,
Remove vendor/ files from versioning, git rm --cached -r vendor/
You can now stage, commit and push
git add . *
git commit -m 'remove vendor from versioning'
git push origin master`
Notes :
you can publish master branch content, as gh-pages branch is no more mandatory. See documentation.
unless you have special needs like debuging, it's not necessary to download gems for each of your project. You can just do a bundle install.
Ensure the vendor/bundle/ directory has been excluded..
By default, Jekyll excludes that directory and therefore, it would not care about the contents in your vendor directory..
When you fork/clone a repo, there's a possibility that the exclude: list has been customized (therefore overriding the default setting). You can ensure vendor/bundle/ is ignored by Jekyll by adding it to your custom exclude list:
# Exclude list
exclude:
- README.md
- Gemfile
- Gemfile.lock
- node_modules
- gulpfile.js
- package.json
- _site
- src
- vendor
- CNAME
- LICENSE
- Rakefile
- old
- vendor/bundle/
To locally emulate how the site is built on GitHub Pages, you can build using the --safe switch:
bundle exec jekyll serve --safe

Can github-pages work with only a .md, no .html no jekyll, like gist.github?

Gist.github displays .md files with 0 effort on my part.
Can github pages do that too -- no user html, no jekyll ?
https://github.com/blog/2289-publishing-with-github-pages-now-as-easy-as-1-2-3 says
Create a repository (or navigate to an existing repository)
Commit a Markdown file via the web interface, just like you would any other file
Activate GitHub Pages via your repository's settings
And that's it
...
We'll use your README file as the site's index if you don't have an index.md (or index.html)
But this doesn't seem to work, or I've misunderstood.
Has anyone else tried this flow ?
Symptom:
Your GitHub Pages site is currently being built from the /docs folder in the master branch
Your site is published at https://denis-bz.github.io/test-gh-pages/
hangs -- 404, hours later.
Master/docs under https://github.com/denis-bz/test-gh-pages
looks ok, to a git dummy;
the same .md renders fine on
gist.github .
What didn't work:
git --version
# git version 2.2.1
echo "# test-gh-pages `isotime`" > README.md
touch .nojekyll docs/.nojekyll
git init
git add README.md .nojekyll docs/.nojekyll docs/Gish.md
git commit -m "docs/Gish.md `isotime`"
# github.com/new test-gh-pages
git remote add origin https://github.com/denis-bz/test-gh-pages.git
git push -v --set-upstream origin master
master/docs/index.md alone, with no index.html and no .nojekyll, works:
# github.com/new: make a new repo test-gh-pages
mkdir docs
cp -p .../my.md docs/index.md
echo "# test-gh-pages `isotime`" > README.md
git init
git add README.md docs/index.md
git commit -m "docs/index.md `isotime`"
git remote add origin https://github.com/<user>/test-gh-pages.git
git push -v --set-upstream origin master
# github.com/<user>/test-gh-pages settings: GitHub Pages master branch /docs
# (don't forget save)
Your GitHub Pages site is currently being built from the /docs folder in the master branch
Apparently this calls
Jekyll to turn the docs/index.md into .html
for browsers to display (in a hidden cache ? on-the-fly ? don't know).
After 10 minutes you should see
Your site is published at https://<user>.github.io/test-gh-pages/
See also
is-there-a-command-line-utility-for-rendering-github-flavored-markdown
: grip .
Thanks, GitHub support.

Can I change Jekyll's temp directory?

Can I change the directory Jekyll uses for it's temporary building?
I'm using Jekyll on a gh-pages branch and when I switch back to my Ember project on master, it puts new files in /tmp. This causes problems with Jekyll's build, and forces me to delete the dir each time I switch back to gh-pages.
Yes, you can.
You have a few ways of doing this, in your local folder, where _config.yml is located (Jekyll site root directory):
A. Editing _config.yml to have a destination for site generation:
In _config.yml, add the following:
destination: /tmp/jekyll_site/
This will tell jekyll you want temporary sites generated in the /tmp/jekyll_site folder.
B. Passing the destination via terminal
jekyll serve -d /tmp/jekyll_site/
OR jekyll serve -destination /tmp/jekyll_site/
This flag will have Jekyll generate files in the specified folder.
More information on the configuration options and flags used by Jekyll can be found here in the documentation. :)