I uploaded my project to Github pages and the font doesn't work! I've read other questions about the issue that lead me to think I need to change how I'm pointing the file, but I can't sort it out.
Here's my #font-face:
#font-face {
font-family: headerFont;
src: url(fonts/FreePixel.ttf);
}
Here's my file structure:
Portfolio/
index.html
css/
styles.css
fonts/
FreePixel.ttf
Try with a relative path, meaning starting with ./
src: url(./css/fonts/FreePixel.ttf);
That will check from which root folder GitHub page is considering that relative path.
Of course, that supposes the files are uploaded, and not (as it was the case) in the .gitignore file of the repo.
Related
so I seem to be a bit confused on how to work with images in webpack encore + assets.
I store all JS & CSS like this
/assets/js
/assets/css
...
With encore I can access them later from my /public/build folder - no issues there.
Now I want to store some images (e.g. file upload).
First idea was to store them inside a folder like /assets/images. But with the current settings & using assets I can only access files inside /public/build folder.
So I tried to use to copyFiles to copy everything from /assets/images to /public/build/images.
But this does not automatically copy my files (e.g. file upload to /assets/images/ does not copy it to /public/build - which is in order not accessible in my project). So I would need to run manually encore - which I don't want.
Second idea was to store the uploaded images directly inside /public/build/images but those files would be deleted when I run encore.
Next I disabled the webpack option cleanupOutputBeforeBuild, so images would not be deleted. But without this option the folder will be flooded by new JS & CSS Files everytime I run encore.
What do I need?
A solution to store my images either way in /assets folder & make them available for my project.
or
store the images directly in /public/build folder without encore deleting them nor flooding the folder with JS/CSS by disabling cleanupOutput Option.
Thanks in advance ~Syllz
If u need to use it in JS, just require the file:
// assets/app.js
import logoPath from '../images/logo.png';
let html = `<img src="${logoPath}" alt="ACME logo">`;
When you require an image file, Webpack copies it into your output directory and returns the final, public path to that file.
If u need using it from a templates:
You need to install file-loader to use copyFiles()
yarn add file-loader#^6.0.0 --dev
then enable it in webpack.config.js:
.copyFiles({
from: './assets/images',
//optional target path, relative to the output dir
//to: 'images/[path][name].[ext]',
//if versioning is enabled, add the file hash too
to: 'images/[path][name].[hash:8].[ext]',
//only copy files matching this pattern
//pattern: /\.(png|jpg|jpeg)$/
})
then use it in your twig template:
<img src="{{ asset('build/images/logo.png') }}" alt="ACME logo">
more details in Symfony documentation
You can use the CopyWebpackPlugin to do this. You can read this post for more details.
Solution to my problem:
Store the images into /public/images and not into the build folder - which will be deleted when running encore.
I was trying to run a github page with Jekyll theme,and the website runs fine locally. However, when I try to urn in on htttps://username.github.io, GitHub cannot build the website.
I got the following error message :
Your site is having problems building: Your SCSS file myblog/assets/main.scss has an error on line 1: File to import not found or unreadable: minimaless.
The main.scss :
---
# Only the main Sass file needs front matter (the dashes are enough)
---
#import "minimaless";
It seems to be the path to the .scss file expected by GitHub is different from where the Jekyll theme put it. I checked some posts mentioned that I should put the absolute path of .scss in _config.yml file.
It seems to be the path to the .scss file expected by GitHub is different from where the Jekyll theme put it. I checked some posts link mentioned that I should put the absolute path of .scss in the directory of urlbase, which is /myblog. But I am not familiar with ruby, so I am not sure how should I do it.
The folder structure is like this :
myblog/
- assets/
- main.scss
- _sasss/
- minimaless.scss
- minimaless/
- basic.scss
- layout.scss
- hight-lighting.scss
- _config.yml
This is my GitHub page folder :
https://github.com/Po-Hsuan-Huang/Po-Hsuan-Huang-github.io
The issue could be because your source contents are within a subdirectory myblog. Try moving all the contents to the root of your repository.
It could also be because of the following in your config file:
theme: minimaless
#remote_theme: brettinternet/minimaless
theme: minimaless is not supported on GitHub Pages. Comment it out.
And finally, _site directory should not be checked into version control. Delete it from your repository and then add an entry for it in your .gitignore file.
In my html page I am referencing static assets like:
<script src="/static/assets/js/bundle.js"></script>
and
<link rel="stylesheet" href="/static/assets/css/style.css">
These files are stored in:
/assets/js/bundle.js
/assets/css/style.css
Currently my route looks like this:
app.PathPrefix("/static/").Handler(http.StripPrefix("/static/", http.FileServer(http.Dir("/assets"))))
Currently it is not working and returning a 404 not found error when I look at chrome console.
What am I doing wrong here?
The problem is with your call to http.Dir("/assets") in this line:
app.PathPrefix("/static/").Handler(http.StripPrefix("/static/", http.FileServer(http.Dir("/assets"))))
http.Dir takes the path to the folder either in absolute form or relative to where the go executable is. Using "/assets" tells it that the absolute path to the assets folder is on the root of the file system, where in reality I'm guessing the assets folder is in something like /home/YOUR_USER_FOLDER/code/this_project/assets.
Just change the code to use the absolute path:
app.PathPrefix("/static/").Handler(http.StripPrefix("/static/", http.FileServer(http.Dir("/home/YOUR_USER_FOLDER/code/this_project/assets"))))
If the assets folder is in the same location as the go executable, you can just use "assets" as the file path, but I will recommend using the absolute path to avoid any confusion.
Why does FineUploader's template/default.html look for files in the client folder? When you follow the set up instructions on their website you are left with something that looks like this:
root#UbuntuVM:/usr/local/nginx/html/example.com/wwwroot# ls
0.0.0.0 fine-uploader-gallery.css placeholders
all.fine-uploader.js fine-uploader-gallery.min.css processing.gif
all.fine-uploader.min.js fine-uploader.min.css retry.gif
composer.json fine-uploader-new.css template.html
composer.lock fine-uploader-new.min.css templates
composer.phar iframe.xss.response.js trash.gif
continue.gif LICENSE vendor
edit.gif loading.gif
fine-uploader.css pause.gif
And in the template folder there is a default.html file that looks for client/fine-uploader.js. I followed the instructions - why is the default template not working?
The Fine Uploader HTML templates serve as a starting point for your web app. It is expected that you make appropriate adjustments based on the location of your resources and your desired look and feel.
I have used collections in my Jekyll website for GitHub Pages. I'm trying to get Jekyll to see the Markdown files inside the collection folder, _projects.
Here's a rundown of the file structure:
root
│
├─ _projects
│ │
│ ├─ project_1.md
│ └─ project_2.md
│
└─ /*Rest of the Jekyll folders and files, _posts, _includes, etc.*/
At the moment, I realized that you must put the Markdown files in the root, so Jekyll can be able to see and parse the files to display them when after you clicked a link that points to them via permalinks. But it cannot "see" the Markdown files if the files are not in the root folder, after testing quite a while.
Is there a way to let Jekyll see and parse files inside the subfolder, _projects, just like how it can see files in the root folder? Maybe I need to set something up in the _config.yml, I guess?
Thanks in advance.
Edit : My first answer was completely wrong. I was talking
_config.yml
collections:
project:
output: true
_project/project_1.md
---
layout: project
title: project
---
## Yo!
Project in **strong** yo `inline code`
some code
yolo !
_layouts/project.html
<!DOCTYPE html>
<html>
{% include head.html %}
<body>
{% include header.html %}
<div class="page-content">
<div class="wrapper">
{{ content }}
</div>
</div>
{% include footer.html %}
</body>
</html>
You now have a project/project_1.html page.
No need to use include: parameter in order to Jekyll to see collection folder or subfolder.
exclude: parameter can be used to ignore a subfolder in the collection.
End Edit
Old answer (nothing to do with collection)
Your _project folder is ignored by Jekyll, just like any underscored folder
To force Jekyll to parse files in this folder, in your _config.yml you can add :
include:
- _project
jekyll build and all is good !
The OP tom-mai78101 comments the the article "Jekyll Blog From a Subdirectory" from Hemanth.HM
has confirmed my guesses that subdirectories are only defined by the permalinks in the Markdown files, and not through the folders within the repository.
I quickly wrote a code snippet, and created a few Markdown files shown here, I am now able to create webpages using Markdown files nested within the _posts folder.
In short, there's no need to use collections in the _config.yml, and just use the default _posts.
It would've been better if there is a way to change the default permalink setup in the _config.yml.
The question "Jekyll not generating pages in subfolders" could be relevant, in order to make some pages being generated in a subfolder.
Or you could use a different baseurl. (Jekyll 1.0+)
Or use the _include folder (see "Jekyll paginate blog as subdirectory")
Or, The article "Running Your Jekyll Blog from a Subdirectory" (from Josh Branchaud) seems to address your situation:
Solution 1
Create a directory called blog in your public html directory (that is, in the directory that your domain points to).
Assuming you are using some sort of deployment scheme (GitHub pages or deployment methods), you need to have that deployment scheme tell Jekyll to deploy to the blog directory instead of the directory it is currently using.
(in your case blog would be projects)
Solution 2
Start by creating a directory locally where you have your Jekyll blog setup.
This directory will sit along side _posts, _site, css, etc.
This is only going to hold non-post files such as index.html.
The blog posts will still go in the _posts directory.
Next, we are going to tell Jekyll that we want it to take our blog posts and put them inside a directory called blog when it generates them.
This can be done by adding a permalink setting to the _config.yml file.
Add a line like this to the top of the file:
permalink: /blog/:categories/:year/:month/:day/:title.html.
The default (which you have probably been using) puts posts in a directory structure starting with the category, followed by the date, and finally with the title of the blog post as the name of the html file.
Which, spelled out would be
/:categories/:year/:month/:day/:title.html.
Does that look familiar? Sure does. It is what we have used above, sans the /blog part.
We are essentially emulating the default directory structure and while adding our blog directory at the beginning.
Lastly, you are going to want to add an index.html file to the blog directory that you created.
This way, when a person goes to mydomain.com/blog/ they can see what blog posts you have to offer.
This index page is going to more or less mirror exactly what you had setup originally for listing your blog posts.