I am working on the odin project and make my first html project, the first recipe project.
I have now finished it and upload it to my repo on github. If I want to see it with live preview the index.html page is working well. But if I click on a link at the index page it does not working.
Can u check my html file?
Or is it maybe that I have make failure with github workflow. I have changed/finished my coding on MS VisualStudio and then add the following statements in the terminal:
git add .
git commit -m "something"
git push origin main
My Repo:
https://github.com/ztrk-dev/odin-recipes/tree/main/recipes
You are hosting what Github Pages refers to as a Project site, which means the page is being hosted at "username.github.io/repository".
The reason the pages with images aren't loading as expected(if I'm misunderstanding the question let me know) is because they are linked as /images/spaghetti-napoli.jpeg, which is a relative file path for the file spaghetti-napoli.jpeg that is located in a folder "images" located in the root directory. The problem is that the root directory / isn't the base directory of your project site. /{repo-name}/ is (so that you could have many different projects with their own websites if you wanted to).
If you want the repository to be the root of your site, you'd need a User site, which would require a repository named ztrk-dev.github.io to host the projects files. If you'd rather use a project site, you would need to link the images as /{repo-name}/{path-to-file} instead of /{path-to-file}.
That is to say, /images/spaghetti-napoli.jpeg would become
/odin-recipes/images/spaghetti-napoli.jpeg or ../images/spaghetti-napoli.jpeg
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 am using Deploy MkDocs action to deploy my site to github pages. After pushing my changes to my master branch the action successfully runs.
However, when I visit my project page link then my site seems to be broken. Any pointers would be of great help.
My repo structure is the following-->
The document contents are inside the "docs" directory.
When I tried to visit the site using my pages link, I can see something like this(I have checked my site locally and it renders properly on my local machine) -->
Add an index.md to the src folder e.g. When build this will produce needed index.html page. Also try to build with: mkdocs build --clean.
I'm a complete beginner to web development and am trying to deploy my first site via Netlify. Despite my site working fine when being displayed from my local machine, I'm given the following error when navigating to my site's URL:
Page Not FoundLooks like you've followed a broken link or entered a URL that doesn't exist on this site.Back to our site
Since my page is functional on my local machine, I believe the error lies within my Github repo and/or my deploy settings. Here's my repo:
https://github.com/Cotton0419/TestSite
And my deploy settings:
Repository: github.com/Cotton0419/TestSite
Base directory: acme
Build command: Not set
Publish directory: acme/disp
Deploy log visibility: Logs are public
Any help would be greatly appreciated, I can supplement more information if need be.
The Base directory on Netlify is only used by the build environment for a reference to your code base (defaults to root of the repository if not given).
The Publish directory would be relative to the base directory. So in your case disp or acme/disp if using the default.
You are referencing assets in a location that does not exist in your published paths, so they would not exist in your deploy to the CDN.
<link rel="stylesheet" href="../css/style.css">
You should move your assets into your deploy disp folder and edit the correct paths into your code files.
Similar problem I encountered today. I decided to upload an old portfolio I had made a while back. Then for some reason after running the URL on Netlify, nothing happened. The only thing that showed up was a prompt similar to yours -
Page Not Found
Looks like you've followed a broken link or entered a URL that doesn't exist on this site.
Back to our site
After revisiting the HTML and CSS files, I realized that I had set the title for my HTML file to porfolio.html instead of index.html which solved my problem!
For this kind of error please kindly check the HTML filename change it into index.html it worked for me!
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!
So I am using Jekyll Bootstrap, which is also available on GitHub, in order to build my blog (which is currently just full of filler content for development). One thing I noticed is that when running my local development server using the command
$ jekyll --server --auto
I am able to edit my markdown content and have it auto regenerate the local site while I am changing things. As far as I can tell this does not work for my CSS or for my templates. I also noticed that when I run the local server with the --auto flag Jekyll creates a directory called auto which stores what appears to be a static copy of my site's content. Jekyll-bootstrap comes with it's own .gitignore file set up for you which I assumed contained the auto directory. I see no reason to store this auto-regenerated content in the GitHub repository for my site, however, when I made a commit I noticed it added the entire auto directory. I opened up the .gitignore file and this is what it contains:
_site/*
_theme_packages/*
Thumbs.db
.DS_Store
!.gitkeep
.rbenv-version
.rvmrc
I am very new to Jekyll and Jekyll Bootstrap, and a little new to git. I am not sure if there is a reason why they wouldn't have an entry to ignore the auto directory. I was figuring I should add an entry for auto/*. Is there a reason I shouldn't do this? As far as I can tell there is no use for the auto directory for anyone that either downloading the site from the web or from its git repository?
You can put it in your gitignore file. When deploying your site, you'll generally build it into the _site directory and publish it somewhere (your own VPS, GitHub pages, etc).