To keep everything clear and easy to maintain, I have multiple html files (as HTML sections) in a folder like this:
htmls/
- header.html
- section1.html
- section2.html
- footer.html
Is there any way to combine these files into one html file like as index.html with WebPack 5?
I couldn't find any solution to do this.
Related
Which of these files is the right one to insert html on my page built with jekyll?
I have:
404.html
index.html
welcome-to-jekyll.html
It seems I can edit the frontpage via 404.html, however I assumed index.html would be the correct approach.
I just want to edit the frontpage within my jekyll setup and if necessary write a post in the designated section but there are way too many auto-generated html files in my VS code folder.
I'm using Gulp as a task runner.
Here I try to use BEM methodology.
All my BEM blocks are in 'library.blocks'.
In each of my blocks there's an html file that being included into index.html (it's done by using gulp-file-include plugin).
So in button.html I type <img src='img/228.jpg'>.
Then we include this button.html into index.html and now we have index.html with this <img src='img/228.jpg'> line.
All my images after build go to /dist folder and the structure looks like this:
At the beginning I just wanted to output all my images from /src just to /dist/img.
Then I thought about name collisions. What if we have two 228.jpg in two different blocks.
I thought it'll be okay to make structure like this: /dist/img/blockName/228.jpg.
What do we have now? In index.html there's the line <img src='img/228.jpg'>. But paths changed and now it just doesn't work. What should I do to solve this problem?
One issue I can see is that Gulp is converting images to webp, so you should be referencing them in that manner in your source according to your dist output. For example, judging by the second file structure you noted, to access 228.webp from index.html, which is the converted 228.jpg, you would use the following:
<img src="img/button/228.webp">
I want to make a simple little website, but I'm honestly not quite sure about how to structure the files.
To display a html-page under the link
samplesite.com/test
should I rather use:
main/test/index.html
Or:
main/test.html
Regardless the domain, the web browser will always look for the index.html of your project. So the domain.com/index.html is the way to go.
Answering the question based from the title. For html file structure, it is good to have the index.html on your root/project directory this:
Putting other web assets in different directory will help you to have a better file organization, you can also download some design/templating framework like zurb foundation and check the file structure.
The main page (opening page ) should be index.html coz when you upload it on apache /public_html folder by default it looks for index.html (or php in case you use php) so if your website is www.dummy.com ,by default when you go on it it serves index.html and to get test.html you have to use www.dummy.com/test.html
I'm working on Webpack/Gulp enviroment, and I wanna add function to include HTML partials like header and footer inside other page views.
The best solution for this will be like in PHP, include file and it's fine.
I used html-webpack-plugin, html-loader and gulp-file-include but this not working for me or this build one file from this partials and on development mode on local server i can't look to results because this partial before build not working.
Someone maybe have a solution or think for this?
So I've tried looking here:
http://jekyllrb.com/docs/permalinks/
and here:
Show pages under one folder in Jekyll?
But this doesn't seem to resolve my issues.
So here is the situation:
Initially, I had all my Jekyll *.html files living in the /root folder of where I am running Jekyll, this was a bit messy, as there was over 30 *.html files, but when I did this:
jekyll build
jekyll serve
I would get the site propagating to: http://0.0.0.0:4000/
I now moved all the *.html files to a folder called /html (within the project root). When running:
jekyll build
jekyll serve
My site no longer renders at: http://0.0.0.0:4000/
But it renders at: http://0.0.0.0:4000/html/
I would like to remove the /html part of the URL, but as the above 2 links show, there was no previous question related to this.
Can anybody suggest how I can remove the /html part from my URLs?
Okay, so initially your folder structure looked like this, correct?
/_layouts/default.html
/css/whatever.css
/index.html
Now to your question:
Do you want to move the HTML files and nothing else to the html subfolder?
In other words, do you want to do this?
/_layouts/default.html
/css/whatever.css
/html/index.html
If yes, read David Jaqcuel's answer.
If not, continue reading my answer :-)
Or is it just that you don't want all your source files cluttering up your root folder?
If yes, you could move everything into the html subfolder, like this:
/html/_layouts/default.html
/html/css/whatever.css
/html/index.html
Then you need to tell Jekyll that the html folder is the root folder for the site's source files.
To do so, you need to add the following line to the config file (or create the file if it doesn't exist yet):
source: html
Important: the config file needs to be in the root folder of your project, even if you move your source files into a subfolder!!
Then all your source files are in the html subfolder, but the generated site will look like this:
/_layouts/default.html
/css/whatever.css
/index.html
In other words, the URL will still be http://0.0.0.0:4000/.
If you want to see an example, you can look at the source code of my blog:
I'm doing exactly the same there, only that the folder with the source files is called src.
By default, for pages in /html, Jekyll will generate a page like /html/page.html and so on.
I think you cannot add a permalink front matter default for a folder, you'll be obliged to set a permalink for each page you put in /html.
eg : for html/page.hmtl, you'll have to set :
---
permalink: page.html
---
This is the way without plugin. Otherwise, you can do it with a Generator plugin that will take all your pages in /html and change the all the target permalink.