How to keep changes after saving in Jekyll using VS Code - jekyll

I am new to Jekyll and setting up my first blog site. I opened the newly generated Jekyll folder in VS Code and made changes to the index.html file, saved it, and then viewed it on localhost:4000. I made changes to I see the small changes at first, but then a few minutes later the changes I made are gone, and the site looks as it did when I first generated it. I am not sure why this is happening. I have tried searching google and stack overflow for an answer but have not found anything that can tell me why my saved changes are not staying and how I can get them to stay.

The contents of the _site folder are regenerated automatically every time you make changes elsewhere.
Never make changes to contents in _site manually — it's pointless
To customize your site, instead make changes to files outside the _site directory.
Read the entire page at the following link to get a good grasp at customizing your theme's templates: https://jekyllrb.com/docs/themes/

Related

Github pages not recognizing CSS

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

How to add links and change structure of Jekyll website

I'm trying to get a personal website up using Jekyll, and initially it seemed fairly easy. However, every time I make changes to the index.html file in the _site folder, I end up losing them since Jekyll rebuilds that folder every time jekyll serve is run.
I'm using the Academic theme, and I'm trying to add nav-bar links to my projects and the like, but those keep getting reset along with my index.html file. I'm sure this is a fairly easy fix, but could someone point me in the right direction?
Thank You
Okay I got it. You just pull the index.html file out of the _site folder, edit it, and run jekyll build.

Is it possible to add a single custom HTML page to an existing Hugo theme like Academic?

What do you want exactly?
I have a website in Hugo. However I have a peculiar situation.
Scientists and Electrical Engineers and others may have specific needs. For Eg: Having a single page that shows a simulation. Or in my case using webbluetooth and webusb that I have written from scratch in HTML, CSS and JS. Moreover these pages may be generated by custom scripts. So you can have git submodules inside your hugo site that specifically cater to generating these custom, single page html that you just want to add to your website.
So all I want is to have a menu item or sidebar whatever the existing theme supports, but instead of showing the default html, it should show my custom, hard-coded, already ready and prepared html file - which may as well be an index.html file in a folder with all the necessary contents ready and cooked - something like the _site folder that jekyll creates.
What do you mean by custom html?
I mean it doesn't take the formatting of the hugo theme. It has its own formatting, but because its just a single page in the whole website its not fruitful to have its own layout written in Hugo or maybe its just worth the effort to do that cause you already have it working using some other technology.
What have you done so far and what works?
I am actually coming from a Jekyll background where it's as simple as changing the layout frontmatter and making it nil or even something that doesn't exist at all and jekyll does a great job of showing custom HTML in an existing theme. Tried the same with Hugo but that didn't work.
What are you testing on?
hugo-coder and(or) hugo-academic
Any specific requests?
Ideally I would like to have submodules in my hugo site folder where those submodules generate custom html in known folders and then somehow make a corresponding markdown file in Hugo that is responsible for showing the custom html.
I want to avoid writing the whole html in the markdown itself. But if no other solution is possible then I guess I don't have a choice.
Do let me know if its possible and worthwhile to pursue this and any references that might help.
So I don't know if this is the perfect solution but it somehow works for the moment. I will not accept it as its not perfect and I am waiting for some of the more experienced folks to answer.
I got something working by doing the following -
I had a page built using Jekyll. Jekyll builds the site in a folder called _site.
I copied the _site folder into static folder of Hugo and renamed it correspondingly to CustomHTML OR you could use the flag -d <destination folder> or declare it in the _config.yml file : destination: <destination folder>
Since I am testing it on hugo-acdemic theme, for that I added the following to the config.toml file to show it in the menu -
[[menu.main]]
name = "CustomHTML"
url = "CustomHTML/index.html"
weight = 50
hugo serve And it worked.
Cool thing is that I didn't have to bother about CSS and anything else. Hugo rendered the index.html in _site properly.
EDIT
Looks like the Hugo folks also suggest doing the same way.

My github pages is not loading index.html as a default

My problem is simply when I go to username.github.io it takes me to another page in my repo rather than index.html however, when I go to https://username.github.io/index.html it works correctly. I would rather have username.github.io point directly to index.html.
Note: My problem is NOT like the problem here
My problem is also NOT like the problem here as "waiting" doesn't fix it, nor do any of the other solutions given
Edit: It is consistent, rather than going to index.html it takes me to a page where I'm hosting a game I made, which also is in a whole other directory and is not even titled index.html.

Github Pages site not detecting index.html [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I created a GitHub pages repository. For some reason when I name it
https://[username].github.io, it doesn't work, but it works when I name it https://[username].github.io/index.html.
Why?
It got fixed automatically. I just had to wait for a while for the settings to take effect.
Pushing a second commit fixed this for me.
Seeing other answers where changes fix this, my guess is that you need to trigger a few of deployments to get it to work.
Every push will trigger a new deployment. You can track deployments at https://github.com/username/username.github.io/deployments.
If you don't use Jekyll, the workaround is to place a file named .nojekyll in the root directory.
My index.html had the following DOCTYPE setting:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" http://www.w3.org/TR/html4/strict.dtd">
Changing it to:
<!DOCTYPE html>
Fixed the issue for me.
Faced this today (Oct-06-2019)
I double-checked every setting, all of them, didn't fix issue for me unless I changed some content in my index.html file. I also added some files to the repo to make it "alive" but in vain.
So, In my case, I opened up my index.html right in the browser, clicked on edit and added a single word, commit to master branch, refreshed and it took less than 5 seconds and it was up again.
P.S. I tried pretty much all solutions given anywhere nothing else worked for me.
I also encountered the same problem today (05/28/2020). Suppose that you have done everything right (instructions in https://pages.github.com/), you should have a repo named username.github.io and index.html set up.
What worked for me was that I chose a Jekyll theme. First, go to Settings of the repo. In GitHub Pages section, look for Theme Chooser then click on Choose a Theme. It will redirect you to a GitHub page that has multiple themes that you can choose from. Choose a theme that you like then click Select Theme. After doing these steps, I refreshed my username.github.io and the page worked correctly.
This happened to me and as soon as I did another commit the issue resolved itself. I just added a space to the index.html file in my dist folder, committed and pushed that change to my gh-pages branch and BAM! Now I can access username.github.io/repository/index.html by just going to username.github.io/repository.
I had this exact same problem. If you try the link found in the designated repo > Settings > GitHub Pages after an hour after posting all your code, the GitHub page will work.
Similar problem. I had to create random change to my html, go through the git add/commit/push process. That fixed it for me! Now I can access to my page without having to add .html at the end of the url.
If you are not using Jekyll, delete the _config.yml file from the repository. This fixed the issue for me.
You may also try to push the local repository again.
Pretty late to the party but here is how I fixed it for myself today.
Go to settings for your repository: You can find Settings tab in your repo page.
Scroll down to GitHub Pages section on the settings page.
In the panel, you will have a Source info that states : 'Your GitHub Pages site is currently being built from the gh-pages branch'.
However, in my cases, all code was in master branch. So I selected the branch from dropdown as master and in merely a minute, it was published successfully.
I had a similar problem for the private repository. My Git project contained index.html in root but the page did not display under http(s)://<username>.github.io/<projectname> path.
The solution for either way (public repository or not) is in enabling GitHub pages in project repository settings under 'GitHub pages'.
However, be aware that enabling pages under private repository make the .html files public.
I encountered the same issue on deploying automatically a bookdown page from the gh-pages branch with Github Actions:
When I tried to access the url proposed by Github in the GitHub Pages section of the repository settings
https://<username>.github.io/<reponame>/
I got a Error404: Page not found response.
However, manually adding "index.html" at the end of the url displayed the page.
https://<username>.github.io/<reponame>/index.html
Adding manually a CNAME file with the following content to the gh-pages branch solved the issue permanently:
https://<username>.github.io/<reponame>/index.html
It's more a workaround though...
EDIT:
Adding a CMAKE file solved the problem only temporarily as it was removed upon invoking the gh actions workflow.
Either:
i) change gh-actions workflow to create the CMAKE file at the end (still a workaround...)
or how I could solve it in the specific case of using bookdown:
ii) in the YAML header of the index.Rmd file, I added
url: "https://<username>.github.io/<reponame>/"
There is also a more subtle problem which causes this issue.
If you are using image files with huge sizes in the index.html, this problem occurs.
Reducing the size of the images being loaded solved this problem for me.
In Settings>Github Pages, make sure that the branch selected there is the same as the one you are working with. I had the same problem and the branch was master instead of main so I changed it and it is fixed now.