GitHub Pages - это официальное решение GitHub для этой проблемы.
raw.githubusercontent
заставляет все файлы использовать text/plain
тип MIME, даже если файл является файлом CSS или JavaScript. Таким образом, https://raw.githubusercontent.com/‹user›/‹repo›/‹branch›/‹filepath›
будет не правильный MIME-тип, а обычный текстовый файл, и связывание его с помощью <link href="..."/>
или <script src="..."></script>
не будет работать - CSS не будет применяться / JS не будет работать.
GitHub Pages размещает репо по специальному URL, поэтому все, что вам нужно сделать, это проверить свои файлы и нажать кнопку. Обратите внимание , что в большинстве случаев, GitHub Pages требует от вас совершить специальную отрасль, gh-pages
.
На вашем новом сайте, который, как правило https://‹user›.github.io/‹repo›
, каждый файл, зафиксированный в gh-pages
ветке (самый последний коммит), присутствует по этому URL. Тогда вы можете сделать ссылку на свой файл JS через <script src="https://‹user›.github.io/‹repo›/file.js"></script>
, и это будет правильный тип MIME.
У вас есть файлы сборки?
Лично я рекомендую запустить эту ветку параллельно master
. В gh-pages
ветке вы можете отредактировать свой .gitignore
файл, чтобы включить в него все файлы dist / build, которые вам нужны для вашего сайта (например, если у вас есть какие-либо минифицированные / скомпилированные файлы), при этом они игнорируются в вашей master
ветке. Это полезно, потому что вы обычно не хотите отслеживать изменения в файлах сборки в вашем обычном репо. Каждый раз, когда вы хотите обновить размещенные файлы, просто объедините master
их gh-pages
, пересоберите, зафиксируйте и затем нажмите.
(protip: вы можете объединить и перестроить в одном коммите с этими шагами :)
$ git checkout gh-pages
$ git merge --no-ff --no-commit master # prepare the merge but don’t commit it (as if there were a merge conflict)
$ npm run build # (or whatever your build process is)
$ git add . # stage the newly built files
$ git merge --continue # commit the merge
$ git push origin gh-pages