This is my first time trying to use Github pages. I am able to to get the index.html to work, but the style will not. I am serving from the master branch docs/ folder.
Everything works fine when I run it on my local host. Any ideas?
File tree
Stylesheet
Tried changing my static and templated folder names to 'docs' and 'css' as I thought Github looks in specific folders for HTML and CSS files. Also looked to make sure my href was pointing to the right place. I'm new to this, so I may have made a mistake.
EDIT: I am using Flask, which may be causing the issue, website is still static. IDK if Flask and static contradictory.
Thanks
Related
I am creating a web using RStudio and HUGO, by means of the Blogdown package.
When serving the site locally in RStudio, it seems to be rendered properly. All the files are created within the folder /public.
However, when I open the file index.html from the /public folder, I get this appearance.
I am employing the theme Mainroad with this base URL:
baseurl = "/"
Any idea why when opening the HTML file it is not rendered properly?
Thanks to the HUGO forum, I post the answer that worked for me, just in case somebody get here.
It is pretty simple, just by adding two lines at the top of the config.toml file:
relativeURLs = true
uglyURLs = true
Open the html file in a text editor and check the exact links given for the stylesheets. More than likely, it is not resolvable by the web-browser because it starts with a / and so looks like an absolute path.
When viewed via the microserver packaged with hugo, that would be seen as relative to the server. But when view via a file url, it is seen as an absolute path.
Blogdown has released an updated version on CRAN that may address this issue. See this link for discussion: https://github.com/rstudio/blogdown/issues/372
All,
I did a bit of research but haven't found an exact thread or resolution to this issue.
I am using express in this webapp, Chrome Version 60.0.3112.113, and Win 10 Version 1703.
I am currently developing a site where I want to use a hamburger svg for mobile navigation. This is how the html sits for the "topbar"
<div id="topbar">
<img src="../images/hamburger.svg" alt="ham">
</div>
And here is the file structure:
https://puu.sh/xxDih/c842297b54.png
According to the structure, I should only need to do ../images/hamburger.svg, but when I do that, it comes up with a 404 error in the waterfall. I have run into this issue multiple times doing any sort of HTML sourcing into parent directories, but in JS files it works fine.
I'm not exactly sure what the issue is.
For the express server，every uri are processed by the express contains resource url and request url.
Request url(api) is refered to your express api config
resource(image, js, css, html...) is relative to your static server's root directory which was defined by using express.static(root_path).
That's what I want to say.
I noticed that images folder, node_modules folder, and pages folder are all in the same directory, and css is under the pages folder.
"../images/hamburger.svg" is the correct relative path from the pages folder, but being (big red flag) the node_modules is at "../node_modules/" I'm thinking that the server is serving from /pages/ folder, the servers root directory. meaning anything above the /pages/ folder will not be shared.
Clearly you do not want to share out ../../../windows/system32/ or the user documents etc. To prevent sharing those the highest directory you can access from the html page through a browser is the server folder being used. I'm thinking /pages/home.html is localhost/home.html and localhost/css/ is your css directory.
Programs running on the server can access files above the served directory, but the browser can not. "/node_modules/" should be outside of the servers root directory.
I realized this is an issue with express itself.
If (in this case) you have your index.html as express.static('./pages'), then it can't see anything above pages and considers pages as the working directory.
Me, coming from React (which stupidly was the first thing I learned even before basic JS), wants to put all the pages in one folder, which I think would make sense.
The workaround I did, which may not be optimal, was by putting index.html as a sibling to pages, css, and images in the src folder. Then in index.html, it has a meta tag as follows: <meta http-equiv="refresh" content="0; url=./pages/home.html" /> to redirect to the home.html page.
Again, this may not be optimal, but for a kinda OCD guy like myself this makes sense.
Update:
What we ended up doing is to have index.html be a static page, and then load the individual pages in an iframe. This website is mainly for information and has no database (yet), so there won't be much to process. Here's the new file structure that works.
http://puu.sh/xy5Dw/4dbc72ec06.png
src is now our working directory (express.static('./src')) and everything is detailed within there.
Once we do include a database, it will at most be 10 values in the server and will be using very basic requests, nothing crasy.
After finishing my website locally using HTML5, SASS (Koala for compiling) and a bit of jQuery, I uploaded it to GitHub and hosted it on git pages. Everything works flawlessly except that my background images are not showing up. Using the 'Inspect element' I found out that deleting one '../' from the URL specified for the img file background-image: URL("../../img/background.jpg"), solves the problem and the background image is shown.
The thing that confuses me is that I uploaded the structure from my PC straight to Github without modifying anything. Plus, I checked the structure of the project in my repo and it doesn't make sense that the background-image shows after deleting one '../' because there are two folders that you have to get out of to reach the image.
This just doesn't make sense. Can anyone explain what is happening?
P.S. Basic representation of my project structure:
index.html
folder: img
folder: sass
research-pages
SASS FILE
Inside this folder is my specific sass file where I type my styling.
You have to go up two folders to reach the img folder where my background.jpg is located.
edit: With your file structure, just one ../ should take you to the sass folder. But on GitHub, perhaps their directory structuring method is more forgiving than the 'correct' way (perhaps ../ means both the parent folder and the parent folder level).
Some other possibilities: maybe things somehow got moved around or arent' uploading the way you think they are during your git add/commit/push, or possibly I'm interpreting your file structure incorrectly, or maybe you're mistaken with what you are seeing (though I tend to believe you - I will test this myself soon). Can you send us a link to your gh-pages repo?
I'm using HexoJS to create a blog. I was able to generate the static files using hexo generate. Even though there are css files and JS files generated, they are not properly linked to the index.html.
So, I have to open each html page and correct each page links given in href and src attributes one by one. I believe that this is not very practical. Can anyone help ?
The localhost is used for preview the website. When we publish our blog, it should be on a server, then the path will be interpreted correctly, we don't need to change any thing. What we saw on http://localhost:4000 will be same when you published your website.
So, we don't have to worry about the broken paths in the public folder.
I am creating a blog on Jekyll for the first time and I am at the point where I'm trying to deploy what I have so far to github pages. When I serve the site and view it locally, it looks fine - so I thought that all I had to do was push all of the files to a gh-pages branch. Now that I have done this, all that is showing is the HTML.
To troubleshoot, I downloaded just the template files and pushed those to a Github page to see if the issue had to do with how I was editing the CSS, but when I did that I got the same results.
I came across an article that was specifically about how to use github pages to store a jekyll site, and it said to remove the slash before the css folder in the linked stylesheets on the HTML if your page isn't styled correctly. After reading that I thought that the slash was for sure the issue, but after removing the slash... I got the same result.
I have been trying for hours and I feel like its probably something very simple(such as the slash).
Here is the repo:
https://github.com/pacalabre/blog-site/tree/gh-pages
Here is the output:
http://pacalabre.github.io/blog-site/
Thank you in advance for any answers!
You need to add/edit:
baseurl: /blog-site
to the config file. Note there is no trailing slash. 'blog-site' is the name of your project, the project name becomes a sub directory that serves your site. Without the baseurl setting, your relative urls are trying to fetch things from http://pacalabre.github.io/ when they are really at http://pacalabre.github.io/blog-site/.
GH is serving your site as a subfolder to the domain and your references are not taking that into account.
Once you add the baseurl setting, you then need to add {{site.baseurl}} in front of your assets like images, css and js.
Also, once you do the baseurl setting, when you serve locally it will not be quite correct, you will need to add the /blog-site to the end of the localhost url for it to work properly.
You also should try using the dev tools inspector in Chrome to help you troubleshoot, it will clearly tell you right now that it cannot load all your js files or images, and it will show where it is trying to load them from.
Look, there's something wrong with your site/repo.
I didn't find your _config.yml at the site root ( gh-pages branch). It should be there.
There's a binary file there (probably Mac's file if I'm not mistaken). It shouldn't be there.
There are both Jekyll's folders (_posts, _drafts, _layouts, etc) and _site folder there. You need to choose. Or you upload the _site content (not the folder itself) or you upload the Jekyll project. Usually you upload just Jekyll folders and GH build the site for you, unless you use some plugins which are not allowed by GitHub. In this case, you upload just the _site content, which is the compiled site (html, CSS, js only).
On the previous answer, you were instructed to add a baseurl to your site configuration. It's the best approach, but if your template uses just url and doesn't even mention baseurl, the best way is adding the project name to the end of the url, not searching for every link to call {{ site.baseurl }} via liquid. So, instead of giving yourself all this trouble, better do like that in your _config.yml:
url: http://username.github.io/projectname
If you indeed go for setting up the baseurl, you can view your site locally via localhost:4000 by adding this flag when serving Jekyll: --baseurl "". So, jekyll serve --watch --baseurl "". This means like "Jekyll, ignore the baseurl set in the config". Got it?
Serving Jekyll with bundler is the right way to do that, specially when deploying to GH Pages. But this is another story, I can add a comment later if you're interested.
Suggestions. Read a little more about how Jekyll works. Also look for .gitignore so you won't upload to GH anything unnecessary (like that binary file).
After that, if your site doesn't build or display correctly, let me know and I'll help you out if you want.
Hope to have helped!