How to add a style.css to React/Laravel app? - html

I'm building a React/Laravel app. However, when I tried to style the layout, I found that I cannot edit in public/css/app.css since every time I run the npm run dev command, the changes I've made disappear from the app.css.
Therefore, I created a style.css but I was confused about whether I should put the style.css into the public folder or resources folder. Moreover, after looking at Laravel docs, this link said that I should add a code to webpack.mix.js. So here's what I wrote
.styles('public/css/style.css', 'public/css/all.css');
adding this to the last part of the whole code:
mix.react('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.styles('public/css/style.css', 'public/css/all.css');
After running npm run dev, I refreshed the page and the page is still not showing the changes from style.css.
Here is my repo: https://github.com/kikidesignnet/hotelreviews and my website which I'm editing: http://immense-beach-76879.herokuapp.com/
What am I missing?

Add the all.css file to your main layout.

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

Error in creating website on GITHUB PAGES

I have made my project with bootstrap, html and css. But the Github pages are only showing the readme file and sending me the error mail. Please help me, this project is important for me
First of all, index.html is missing from your repository.
If you have used only Bootstrap, CSS, and HTML, you probably don't even need npm. You can just upload your files (including those folders for images and CSS) and then go to your Repository Settings and in Github Pages, set the source. If you have an index.html, then <username>.github.io/repo-name will render it automatically after a successful build.
You might find this repository which was made using HTML, CSS, Bootstrap (and Javascript) helpful to refer to.
PS: Don't push node_modules on GitHub. You should ideally add that folder to .gitignore. These modules can be installed by the user who clones your repo using npm commands.

How to keep changes after saving in Jekyll using VS Code

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/

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.

Codepen: Project - CSS not working

Currently, I am trying to use Codepen Project's environment to build a website and later deploy it. I am using a template that I want to start building from. It has its own HTML pages as well as CSS and JS that is linked. However, when I am working in the project environment I cannot seem to get the CSS to apply to the html code (in other words, the live preview keeps showing naked HTML). I have tried uploading the files into the project's root, tried copying them in newly created css files, and tried using them as external sources (href to an external url in the head tag).
It is really to bad because I feel the Project environment can really offer a lot, though I just can't get it to work.
Thanks in advance, and take care!
LINK TO CODEPEN PROJECT:
https://codepen.io/Thumpertje/project/editor/DxxkqM/
<div class="code">
</div>