I'm trying to host my webpages into Github pages but for some reason it seems to only show my Readme file.
GitHub repo: https://github.com/InquisitiveDev2016/InquisitiveDev2016.github.io
Website:
https://inquisitivedev2016.github.io/
GitHub Pages is doing what it is designed to do: hosting the contents of that repository.
The root of the question asker's repository only contained a single file (README.md). So there isn't an easy way to navigate to the other pages, e.g. repo/website/webpage.html.
Consider moving your web content into the root of your repository and renaming your default page to index.md or index.html, depending what type of file it is. (By convention the default page of most websites is called index.html, and this is what GitHub Pages will show by default if it exists.)
Github gives you multiple choices where it takes it sources from. By default its the root of the master branch, which will use the README.md in case there is no index.html.
But you can also switch to the docs/ folder in your repository settings. With that you can put the index.html under the docs/ folder.
See
In my case, I had to choose the branch gh-pages/root in Pages settings on GitHub.
I had a similar situation when deploying a static React app from create-react-app (so index.html was in /public instead of root) with gh-pages npm package.
I had to select a gh-pages as a branch and /docs as a folder at GitHub Project -> Settings -> Pages -> Folder/Branch dropdowns. It wasn't intuitive since I didn't have /docs anywhere in my project files, but I'm glad that it eventually worked!
Create an index.html in the root and insert the line
<meta http-equiv="Refresh" content="2; url=public/index.html">
Or so it worked for me with a Vue CLI project I had this trouble with.
if you want to access to index.html,
try to write
https://your-github-deploy-address/index.html
so just add '/index.html' at the end of the address!
(this is how I solved my case)
The simplest solution to overcome this is put the index.html file in the outermost folder along with the readme.md
Please change the HTML file to index.html. This simple thing had me struggling for 6 hours to find this.
My HTML name before was base.html; this shows the read me file only.
After changing to index.html the file opened without any problems.
The steps to resolve this issue is from best practice is to go the your project folder. You should change what ever you named your root or initial page to index.html as mentioned above. Then open your project in git bash on your system, perform your normal git steps like,
git add
git commit -m " change to index.html"
git push origin master {depending on what you named your root branch}
Then go to settings and there you go (wow wow)
after one or two refresh, your site will be live
For me, the problem was the docs folder was moved to .gitignore automatically. You have to delete docs from .gitignore, commit and push.
Change the GitHub Pages source to gh-pages with folder as /(root)
For me, this solution solves the issue:https://github.com/gitname/react-gh-pages
Open the package.json file, add two properties as below:
Add a homepage property in this format*: https://{username}.github.io/{repo-name}
For a project site, that's the format. For a user site, the format is: https://{username}.github.io. You can read more about the homepage property in the "GitHub Pages" section of the create-react-app documentation.
{
"name": "my-app",
"version": "0.1.0",
+ "homepage": "https://gitname.github.io/react-gh-pages",
"private": true,
Add a predeploy property and a deploy property to the scripts object in :
"scripts": {
+ "predeploy": "npm run build",
+ "deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build",
To summer up, if your repository does not have an Index.html it will show the ReadMe file.
Thus in order to correct it all you need to do is add an index.html or index.md file to your folder and use that as main.
From there all the others will be access through a link on this page. Similarly to a webpage.
Related
I have multiple package.json files in my project in different folders. VSCode reads scripts from all the files and shows them up in the "NPM SCRIPTS" panel. I want to show scripts only from the root package.json file. How to add config to the project to read only the root package.json or maybe set a precise path to it. Is it possible? Thanks for any help
Not exactly sure why this glob works, but this setting (in settings.json) seems to work:
"npm.exclude": "**/folder-operations/**"
where folder-operations would be your root folder.
My git hooks does't get triggered. I pretty sure the reason is, because my package.json file isn't on the same level as my .git. So my .git dir structure looks something like this:
.git/...
.vscode/...
auth/...
core/...
www/package.json
www/scripts/verify-commit-msg.js
www/src/...
As you can see my package.json is nested inside my www/ folder.
Within my `package.json, my gitHooks looks as follow.
"gitHooks": {
"commit-msg": "node scripts/verify-commit-msg.js"
}
Additional Note: It works fine if my package.json is on the same level as my .git
I know 1 solution is to put my www in its own git repo. For now I don't want to do that.
I am using vue cli 3, and I know they are using yorky for the githooks tooling.
I´m starting with Vuepress (https://vuepress.vuejs.org), and i´d followed the docs to integrate it with an existing project (https://vuepress.vuejs.org/guide/getting-started.html#inside-an-existing-project). I used the sugested docs directory.
But now i need to "really" integrate with my project and i need to when my users access the my-project.com/docs, to reach the Vuepress docs
If i make (yarn docs:build), the /dist folder will be generated to be used anywhere as a statics HTML files. I tought in put the /dist/ content in the /static/ files of my project. But the vue-router response to /docs is a 404.
And i will still need to make 2 builds, my project and the docs.
The questions are:
How can i make the vue-router "see" the vuepress build files? Where to put them?
How can i integrate the run build of project to make them both?
I have 2 projects, one with quasar and the other i´m using vue-cli 3.
Thank you all.
How can i make the vue-router "see" the vuepress build files? Where to put them?
You don't, it's basically an external link. A simple <a href="/docs"> should be sufficient.
How can i integrate the run build of project to make them both?
You don't, you add a new task that does them both.
// package.json
{
"scripts": {
"build-project": "node build-project.js"
}
}
from a terminal
# yarn run build-project
I think maybe the point problem is to solve the Vue-Router to make the vue-router don't handle the link when we external link the /docs as like.
Not able to load js files from local where as CDN path working fine in Dojo 2 application. Once included custom JavaScript files using script tag in index.html. But in browser it shows the error 404 file not found.
Please suggest as i need these for my Dojo 2 application.
This is my how i am using script tag to include
script src="assets/js/jquery.js" type="text/javascript"
Currently, the Dojo 2 build does not copy external assets to the build directory, but we are working on a way of specifying such assets in the .dojorc config (index.html is not/will not be scanned for assets). In the meantime, another means of delivering static assets will be required (for example, configuring the assets/ path at the server level).
Assuming you are using the dojo 2 cli you need to move your assets folder into the root of you application, this is in the dojo 2 build docs:
While most assets will be imported by modules in the src/ directory and therefore handled by the main build pipeline, it is often necessary to serve static assets or include assets in the HTML file itself (e.g., the favicon).
Static assets can be added to an assets/ directory at the project root. At build time, these assets are copied as-is without file hashing to output/{mode}/assets, and can be accessed using the absolute /assets/ path. For example, if users need access to a static terms of service document named terms.pdf, that file would added to assets/terms.pdf and accessed via the URL /assets/terms.pdf.
The build also parses src/index.html for CSS, JavaScript, and image assets, hashing them and including them in the output/{mode}/ directory. For example, it is common for applications to display a favicon in the URL bar. If the favicon is named favicon.ico, it can be added to the src/ directory and included in src/index.html with . The build will then hash the file and copy it to output/{mode}/favicon.[hash].ico.
But another option is to add a new npm command "move-assets": "cp -R ./src/assets ./output/dist/assets" to you package config
"scripts": {
"start": "dojo build --mode dev --watch memory --serve",
"build": "dojo build --mode dist && npm run move-assets && npm run move-assets",
"move-assets": "cp -R ./src/assets ./output/dist/assets"
}
This will move your assets into the build output folder ./output/dist
I´m looking into switch from gulp/grunt to only use npm scripts.
But I cant really solve how to get *.js and *.css from a given path and add it to the index.html file.
must I add it thru a "index.js" file or can I do something like...
"scripts": {
"inject": "inject src/app/*.js",
},
and then it will add it in my index.html where I have specified it like...
/* inject:js */
The suggestion by Chris Traveis worked out pretty nice.
So the answer to my problem was solved using https://www.npmjs.com/package/postbuild
There were no answers in the last 3 months on this popular topic, probably because there are wrong assumptions in the question. Distilling your question,
...how to get *.js and *.css from a given path and add it to the index.html file
To be short, do it manually. Use a good npm boilerplate such as npm-build-boilerplate and add the compiled JS and CSS files manually into your HTML.
... must I add it thru a "index.js" file, or <2nd option>
No. Add the files manually. Let me elaborate more.
With npm scripts you construct a pipeline and you know where your uglified JS files and compiled SCSS files are rendered. Yes, I have "main": "index.js", row in my package.json, but there's no "index.js" in my project at all. I get npm scripts to crunch files in various folders, to output them into other folders and I manually add end CSS and JS files into HTML templates (in my case, static Hugo website's templates).
I see one case where "dynamism" in the HTML is needed — when you want to bust cache and add the unique strings to the end-point CSS/JS file names. However, then you might want to consider scripts that count MD5 hash of the files' contents, because if you run the build multiple times and your existing CSS or JS files haven't changed, you want to keep the old file names. Visitors might have cached them (and think about CDN too). In this sense, npm postbuild script mentioned in the comments above is inferior because it just uses "version" counter. Look for alternatives to npm postbuild to bust caches.