I'm not very familiar with node.js, but I've created a website to learn about CSS, HTML, and JS and am now having trouble hosting it. I can run the command npm start just fine and then I see my site and all its pages at localhost:3000. However, when I try to upload the site using Github pages or Netlify I always get 404 errors. I think it's because my index.html file is in my views folder so it doesn't know where to look for the first page. I've tried moving everything out of views but this doesn't work, and I've tried making a "dummy" index.html with the following:
<meta http-equiv="refresh" content="0; url=/views/index.html">
which also doesn't work. I'm at a loss for what to do as I'm super inexperienced with this kind of stuff. How can I get my site hosted?
"npm start" only works locally in your machine because you have NodeJS installed. The browser doesn't know anything about npm, it only interprets JavaScript, HTML, and CSS. If you put your "index.html" in the root of your host, it will be found. I suggest you create a structure like a bellow.
github pages
|
|_ index.html
|_ css/
| |_ styles.css
|_ js/
| |_ scripts.js
Commit your changes to github and access your page in /github.io
Related
I'm a total newbie when it comes to Jekyll, and have encountered a big problem. I'm probably doing something wrong or missing something, but what?
I find it very confusing trying to install the "Agency Jekyll Theme" which is the first theme I'm trying out. Mostly because there are several ways to do it, the commands don't add up and there is a lot of "you can do this" embedded into what you actually have to do to install it.
These are the guides I've been following:
https://jekyllrb.com/docs/step-by-step/01-setup/
https://www.rubydoc.info/gems/jekyll-agency/1.2.0
http://jekyllthemes.org/themes/agency/
Basically, I've tried all the 3 possible ways to install it without success.
I'm running on Windows.
My problem:
jekyll serve (ran in my site folder) creates a _site folder and content in the subfolders css, img and js. Nothing else is created, not index.html, and other files needed directly under _site folder.
In my site root folder, there are only _config.yml and Gemfile, after completing the initial steps.
There seems to be a problem with actually downloading the full theme into my root folder. When I manually download the agency-jekyll-theme-starter-master.zip and extract the entire content in my root site folder, there is index.html, _data folder, etc. However, in the assets folder, there is only an img folder.
As a result, when I open http://localhost:4000/agency-jekyll-theme-starter/ in a browser there is only a directory listing with the folder "assets".
Where do the css folder and its content come from that generates under _site?
My workaround:
I run jekyll build so that the site in its entirety is placed under _site folder. However, with this process, the whole point of using Jekyll is lost because I have to edit the generated HTML files, CSS files, etc. To change simple stuff like renaming the page/navigation "Services" to another word I have to go through the HTML file and replace all occurrences
My successful attempt to reproduce your issue:
I tried this method from http://jekyllthemes.org/themes/agency/
Using the Starter Template
This is the fastest and easiest way to get up and running on GitHub Pages. Simply generate your own repository by clicking here, then replace the sample content with your own and configure for your needs.
The starter template (that is also linked on the page above) allowed me to start a code space and commit the repo content into my new branch.
I could reproduce your problem, there were no styles when running jekyll serve.
The reason for the issue:
The problem is the baseurl in the _config.yml file. It points to a relative path that does not exist in your repository. Your baseurl / path is "", because you run your server from the root folder, most probably both locally and later remotely using GitHub pages.
The solution for the issue:
In the _config.yml file in your repo, change this one line
from
baseurl: "/agency-jekyll-theme-starter" # the subpath of your site, e.g. /blog
to
baseurl: "" # the subpath of your site, e.g. /blog
Check out https://github.com/cadamini/jekyll-agency-test if you like.
I hope this was understandable and helpful and that you can solve your issue with these instructions. Don't hesitate to comment for further clarification.
I'm using create-react-app which is serving its files from the /build folder. Typically Github Pages looks at index.html at the root level, but I'd like to direct it to look at /build for deployment.
I've tried to add "homepage": "/build" inside my package.json configuration, and Github Settings says it's deployed via <username>.github.io. However, the site just shows my README.md file.
Any help is appreciated :)
The problem here is that this is a Web Browser issue, and not a Host issue. When you visit a webpage your browser always looks for the index.html file at the URL so localhost:8080 becomes localhost:8080/index.html.
This means that there are a couple ways to fix this. You could create an index.html file in your root directory and then have that serve up the scripts in the build folder like <script src="build/main.js"></script>
You could also go through the pain and suffering of manually adding /build to the end of the URL. But you don't want users to have to do that, so you could write a script to redirect you there.
Good luck!
I am using Yeoman to create a static website, which created a file structure like:
-app
index.html
-css
style.css
-js
script.js
Gruntfile.js
README.md
bower.json
package.json
I used filezilla to send this to my server (using bluehost) but nothing seems to be displaying? when I try to hit the website. (ex. whatever.com)
Is it because my 'index.html' lives inside the app directory? Should I only host my app diretory so 'index.html' is in the root directory?
I think you are on the right track with location of index.html but not quite. Your file structure should look like:
[document root]
index.html
- css (a directory of the root)
style.css
- js (also a directory of the root same as css)
script.js
Gruntfile.js
README.md
bower.json
package.json
Note in the above structure, there is no -app folder. You can test the above by using your web browser and pointing to http://yoursite.domain/app and see if that displays.
If that does not solve the issue, then you may be uploading to somewhere outside of the document root for your web server in which case you should find out where that is. Best place to ask about that would be on either https://serverfault.com/ or on https://superuser.com/. Good luck.
For creating my college webpage using polymer, I have downloaded polymer starter kit 1.0.2. I have customized those html files to my desired text and it runs well when I do the below.
gulp serve
opening well is chrome through
http://localhost:3000/
The problem is, it doesn't show up when I drop files into my college server. The reason for creating a website so that it can be viewed under my name like www.college.edu/~rajesh. We have public_html folder wherein if we put html/css/js files and that is it will accessible public from above URL.
when I copied the contents of app folder along with bower_component folder
the site doesn't come up whereas it work fine locally (using localhost). Only the title gets loaded however there is NO html body visible.
I am totally new to polymer. could this be done? if yes am I missing something.
You have to run gulp serve:dist which will build/vulcanize your site. Then you need to copy app/dist folder
Just a further clarification not sure if you ran this command, according to the readme file when you want to deploy your site you need to run
gulp
which will Build and optimize the current project, ready for deployment. This includes linting as well as vulcanization, image, script, stylesheet and HTML optimization and minification.
All the files needed will then be located in the 'dist' folder.
Build and Vulcanize polymer starter kit github README.md
I'm pretty sure it's not possible but does anyone know of a configuration that can localize the exported files in Jekyll so that the _site content can run independent of a web host?
I want to use Jekyll to develop a site, and deliver the contents of the _site folder for hosting, but I will not have the hosting information ahead of time. So I would like to be able to run the index.html file in the _site folder directly from the Desktop and have the site work properly. That way I can deliver the files and the site will run using relative paths/links regardless of where the files end up being hosted.
This possible but you need to know where your generated site will be located on the filesystem. This, because of the relative links pointing to resources (js, css, images).
For example a site generated at /home/user/www/_site, index page will be serve in your brower at file:///home/user/www/_site/index.html, so you'll have to set baseurl in _config.yml to baseurl: /home/user/www/_site in order to have you site working.
On windows it can be baseurl: /C:/Users/New/www/_site