Summary:
I have an html page that looks fine locally but when I deploy it to heroku a background image is missing.
What I've tried:
I'm currently using the property background-image: url(bg.jpg);
I've also tried image-url(bg.jpg) and asset-url(bg.jpg) (neither of these work locally).
What I've read:
From what I've read there are a few possibilities
set config.serve_static_assets = true
set config.assets.compile = true
I don't really understand how to set these? I keep seeing "production.rb file" referenced but I have no idea what this is? Can I set these properties from within heroku dashboard?
Currently I just push my code to GitHub and deploy from there. I'm new to Heroku and deployment in general, any help on this topic would be appreciated.
procfile
web: gunicorn app:app
file-structure
procfile
requirements.txt
app.py
templates
|- index.html
|- positive.html
|- negative.html
|- bg.jpg
I've resolved this question. I realize now that because this is a Flask app that it needs to be handled differently.
The following change will correct the error: change the file structure to put the image in a static folder (Flask knows to look for this) and then change the url call.
file-structure
procfile
requirements.txt
app.py
static
|- img
|- bg.jpg
templates
|- index.html
|- positive.html
|- negative.html
|- bg.jpg
and
background-image: url('/static/img/bg.jpg');
I'm not sure why this resolves the problem but it works!
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 have a Jekyll-based and Github-pages-hosted site. I also have a Git Submodule that contains both YAML files and images. I would like to use it within my GitHub pages Jekyll project but I’m not sure how.
Here's example directory structure:
/assets/
/_data/
/MyGitSubmodule/yaml/
/MyGitSubmodule/images/
I’m used to putting YAML files in _data and images in /assets/. Is there a way to configure Jekyll also parse YAML files in another directory? Or copy static files from somewhere in _data during the build step? Or set up symlinks? That work with GitHub Pages?
I've tried:
Changing the data_dir setting to be the same as my /assets/ directory but I don't want to make my data files publicly accessible.
Creating a symbolic link on Windows with mklink /D but I get an error on servingC:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/jekyll-4.2.2/lib/jekyll/utils.rb:141:in initialize': Is a directory # rb_sysopen - C:/Ben/personalsite2/assets/unreal/specifiers (Errno::EISDIR)`. Also ]this page seems to imply that they work on GitHub pages](https://github.com/chetabahana/symlink) but other docs for Jekyll seem to say that they are disabled in “safe mode” and GitHub pages.
Eh in the end I solved this by putting my data_dir inside /assets/ and by by using the exclude setting in config.yml to stop it from serving some of the yml files
Everything I've tried already didn't work for me (several sites and videos on youtube). Please, link me with another useful videos or help me understand this process. I found it much easier to deploy the site to GitHub with gh-pages, but I have problems with deploying to GitLab.
Already tried to push my project to GitLab and then CI/CD > Pipelines, where my project built successfully, then Settings > Pages and still 404 (waited more than 1 day). I have installed the ".gitlab-ci.yml" file (with basic HTML settings).
BTW, should I push the pre-built site or already converted?
Right now it is like this:
- src
- fonts
- html
- images
- js
- sass
index.html
.gitattributes
.gitignore
.gitlab-ci.yml
LICENSE
README.md
EDIT: I found solution for my specific problem. As GitLab Pages is a static hosting, before deploying sass files, you need to compile them first and only after you should deploy.
Here is my gitlab-ci.yml file.
image: alpine:latest
stages:
- compile
- deploy
compile:
stage: compile
image: node:8.15-alpine
script:
- yarn global add node-sass
- node-sass ./src/sass/main.scss ./src/css/styles.css --style compressed
only:
- master
artifacts:
paths:
- ./src/css
pages:
stage: deploy
script:
- mv src/ public
artifacts:
paths:
- public
At stage compile notice how i point to my main.scss file path which could be different for you. Also there is path for compiled file styles.css (you need to use your file name of css styles, that is mentioned in <head> section of your main html file). Check path at the artifacts line as well, so you could properly direct your files. For compilation, as you can see, i'm using Yarn (there is no need to install anything to use it). After compiling my sass file, the next stage is to deploy, which works for me as planned.
Hope it helps you as well!
To successfully host your page on Gitlab you need to move your sources to public directory and archive it. Example .gitlab-ci.yml could be:
image: alpine:latest
pages:
stage: deploy
script:
- mv src/ public
artifacts:
paths:
- public
I have this structure of bundled web app:
/dist
|
|- index.html
|- inline.js
|- main.js
|- polyfills.js
|- favicon.ico
|-assets
|
|-icons
|
|- add.svg
|- arrow-down.svg
|- start.svg
Due to various reasons I want to serve it via file:// protocol instead of hosting http server.
However, Chrome can't acces files that are located in /assets/ folder - all files that are in root (dist) folder work fine.
I found out that I can run chrome "--allow-file-access-from-files", however it's told to be dangerous, as it opens my whole file system to attacks.
Is there any way to use "--allow-file-access-from-files" flag only for specific folder? Something like:
$ chrome --allow-file-access-from-files ./assets/**
that would be a good feature to add on chrome I think
+1 from me
The index.html home page displays fine, however any any link will throw a 404.
The static website has folder with html in it, index link to these html with the correct path, but displays a 404.
When clicking on this link, I got a 404.
however the file is present as you can see here .
I am really banging my head on a simple html pb, which is frustrating.
I ran into this problem myself and finally discovered a simpler solution. The problem is that Jekyll ignores all files that start with _. The simple solution is to add a .nojekyll file to your docs dir.
My docs script looks like this:
"rimraf ./docs && typedoc src/ --out docs --mode modules --module commonjs --target es6 --excludePrivate && touch ./docs/.nojekyll && gh-pages -d docs -t"
touch is an npm module that creates the file and the -t flag on gh-pages is necessary to have that dot file uploaded.
Alright I though I might just answer my own question here.
Github Page doesn't allow several static HTML files.
This is not very clear to be honest on their docs, but the solution is quite simple :
Assuming your local static docs works correctly, just follow these steps :
install jekyll
gem install jekyll bundler
add a file _config.yml
in your docs or on the root of your gh-pages branch with this content:
auto: true
execute jekyll serve
And test if this works ok on the url outputed in your console
add _site in your .gitignore
push and bingo!
If you are like me using typedoc to compile typescript into nice documentation, you will run into trouble.
Because Jekyll automatically exclude from the build any files starting with _, and typedoc generates ONLY that, I wrote a simple yeoman generator that does all the replacement for you.