How to add snowpack gh pages?

[markfirmware]

I do not think the repo name part of the url (gh-pages-svelte) is being processed correctly.

I did

npx create-snowpack app gh-pages --template @snowpack/app-template-svelte
cd gh-pages
rm -rf .git

Then I updated snowpack.config.js to put the output in the docs folder as github expects

buildOptions.out: "../docs"
npm run build

Then I did the expected github commit.

The url to the site is https://markfirmware.github.io/gh-pages-svelte/

repo is https://github.com/markfirmware/gh-pages-svelte

[melissamcewen]

Hi @markfirmware hmm interesting question, I haven't tried deploying to GH pages yet but I'm going to put that on my todo list. In the meantime let us know if you figured out the solution.

[FredKSchott]

Yes, this would be a great guide to have. See @stramel 's post below

[FredKSchott]

+1! If this is not supported on our end, it should be!

[markfirmware]

To move forward, I am using vercel that worked the first time! Will get back to this.

[FredKSchott]

Oh, I think you just need to add baseUrl, to tell the build that your site lives at /gh-pages-svelte/ instead of /

[stramel]

Changes necessary, should be buildOptions.baseUrl set to /gh-pages-svelte/ and the index.html file needs %PUBLIC_URL% in place of the leading / on the referenced files.

@FredKSchott even with those changes it still isn't finding the _dist_/index.js file. https://stramel.github.io/gh-pages-svelte/

Also, I think it would be worth to add <base href="%PUBLIC_URL%" /> to the default index.html files so that setting buildOptions.baseUrl would work out the box.

[stramel]

@markfirmware

So the solution here is:

1. Update snowpack.config.js with buildOptions.baseUrl: '/gh-pages-svelte'
2. Update all file references in public/index.html to be prefixed with %PUBLIC_URL% (ie. %PUBLIC_URL%_dist_/index.js). Alternatively, you can utilize <base href="%PUBLIC_URL%" /> and remove the leading / on all file references.
3. Add an empty .nojekyll file to the docs folder. (This disables Jekyll which ignores all folders with leading _)

Here is the working fork of your original repo:https://github.com/stramel/gh-pages-svelte (https://stramel.github.io/gh-pages-svelte/)

Also, note, you will need to change the /logo.svg path. https://www.snowpack.dev/#import-images-%26-other-assets

[cheersmas]

thanks @markfirmware

dumping the build assets into docs and adding .nojekyll under the same docs directory did the trick.
ofcourse, also changed the gh-pages option to point to docs under Settings.
Strange that it didn't work when I did the same in (root) directory.

[jcuenod]

The .nojekyll file is what I needed (thanks!) but when I run snowpack build, snowpack deletes the .nojekyll file. I thought if I just dumped it into /public it would get built but I suppose since there's no reference to it, it's ignored. Is there a way to tell snowpack to add this file to my build?

[stramel]

@jcuenod I believe you need to set mount.dot to true. This will opt you into moving that file. https://www.snowpack.dev/reference/configuration#mount

[jcuenod]

Thanks! What version was this introduced in? I just tested on 3.3.5 and it didn't work. I retested with 3.8.5 and it worked.

[stramel]

I believe 3.7.0 did but I'm unable to check for sure right now

[markfirmware]

@stramel Thanks so much!

[Kevin-Carlos]

@markfirmware I saw you edited -- I know before you mentioned your app only showing a white screen, did you happen to fix it and figure out what the issue is? I'm having the same problem.

[markfirmware]

I did have a problem, then I decided to make a script to produce a repo, and the script had no problem. I will put that script up in just a few minutes.

[Kevin-Carlos]

That'd be great, thanks!

[markfirmware]

@Kevin-Carlos Take a look at https://github.com/markfirmware/gh-pages-svelte/blob/master/new-snowpack.sh and run it to make sure it works for you. It will take your account name from git config user.name and it also needs the gh cli installed which is used to create the repo in github.

After the script runs go to github browser repo settings and enable master/docs for gh pages and in a minute it should be published.

If it works without errors then there is the matter of what needs to be adjusted for something other than svelte.

[nojaf]

Was anybody able to pull this off?
I'm having the same problem at https://fsprojects.github.io/fantomas-tools/

Yet curl seems to work:

[nojaf]

This was impatience on my side. I was able to deploy to gh-pages now!

[jgrizou]

I made a Repl.it template that showcase how to develop and deploy Snowpack projects on Github page, all directly from Repl.it.

See https://repl.it/@jgrizou/Snowpack-Boilerplate

Read https://github.com/jgrizou/snowpack-boilerplate/blob/master/Readme.md to see how to deploy directly via Repl.it

Associated repository is https://github.com/jgrizou/snowpack-boilerplate which deploys at https://jgrizou.github.io/snowpack-boilerplate/

[Dan503]

My issue is that I need to change the output directory from /build to /docs.

I ended up doing this in package.json:

"scripts": {
    "build": "snowpack build && copyfiles -E -u 1 \"build/**/*\" docs",
}

(Note: it requires npm installing the copyfiles npm package)

This just copies everything in the "build" directory into the "docs" directory after Snowpack has finished building the site assets. It's hacky but it does the job.

Does anyone know how to get Create Snowpack App to output directly into a "docs" folder instead of a build folder?

You still need to do the things mentioned in this comment as well to get it fully working: #1423 (comment)

[hesusruiz]

Just use the buildOptions.out configuration in snowpack.config.js, like:

buildOptions: { out: "docs", }

[stramel]

yep! https://www.snowpack.dev/reference/configuration#buildoptionsout