I created a blog with Jekyll and now I need to deploy it and send it to a person that need to navigate it without a web server. So, I entered jekyll build from terminal and get the compiled project in _site. But now, if I open index.html it doesn't get the assets (CSS). In the head tag tag there's /css/main.css while I need css/main.css (no initial slash). I don't want to change manually the url, so I'm asking if there's a way to deploy a Jakyll project for showing in local without webserver.
This is possible only if you know where, in the file system, it will be deployed.
Examples :
Linux
For a deployment in /home/user/www, go in _config.yml and set baseurl: /home/user/www
Windows
For a deployment in C:/Users/Toto/www, go in _config.yml and set baseurl: /C:/Users/Toto/www
Deployment means copying generated files in the target folder, not copying the _site folder.
Do a jekyll build and send you files with deploy instructions.
Edit:
This answer is for you, not the client.
As you client is certainly running windows, you just set your baseurl: /C:/_site, zip the _site folder and ask the client to unzip in C:/.
The client will just have to click on C:/_site/index.html to start the site in his default browser.
Change the assets directory to relative paths such as: assets/css/.
This will work on a server or locally.
Set a page variable to represent the nesting in your Yaml front matter. Then, append that variable to your assets.
---
layout: default
title: Nested Page
path: ../
---
or
---
layout: default
title: Root level page
path: ""
---
<link rel="stylesheet" href="{{ page.path }}assets/stylesheets/style.css">
Related
I want to publish my Svelte web app to GitHub pages and based my application on the template https://github.com/sveltejs/template. When I run npm run build, public/build/bundle.js is created but no index.html. All the tutorials I found talk about how to deploy Sapper projects, or to use external tools like Vercel and Surge, but is it possible to just build Svelte without any external tools? All I want is a static HTML page that I can copy to GitHub pages.
Edit: See the accepted answer for the general approach, however for non-root-directory-deployment, you still need to make the paths relative. I created a pull request at https://github.com/sveltejs/template/pull/239.
In svelte, index.html is a static file which will import your bundle.js and run it.
index.html is located at /public/index.html while your bundle.js is located at /public/build/bundle.js
in svelte template, index.html imports /build/bundle.js using a script tag to initialize the application.
while deploying, you just need to upload the whole /public folder and everything should be operational.
I run NPM build on the PWA boilerplate I am using.
Folder structure on server is as follows:
my-project ->
static,
index.html,
service-worker
I have then hosted on server and the Manifest and assets are returning a 404.
The project is currently here.
https://evilernie44.github.io/my-project/
Any help is much appreciated.
Changing routes on the manifest and two different servers
I want to get a boiler-plate hosted as a starting point for my PWA
Your script tags point to the wrong path.
Take this tag for example:
<script type=text/javascript src=/static/js/app.98f21a65b373eaa50022.js></script>
The browser resolves it to https://evilernie44.github.io/static/js/app.98f21a65b373eaa50022.js, which does not exist.
The correct path should be ./static/js/app.98f21a65b373eaa50022.js. The extra dot instructs the browser to build the full url relative to the current path.
Alternatively, you can specify an absolute path, such as /my-project/static/js/app.98f21a65b373eaa50022.js which points to the correct location.
In conclusion, any of the following 2 script tags would work:
<script type=text/javascript src=./static/js/app.98f21a65b373eaa50022.js></script>
<script type=text/javascript src=/my-project/static/js/app.98f21a65b373eaa50022.js></script>
By default Vue CLI assumes you are running the application as root, so it will try to load the files from '/'.
When deploying to production, or in a subfolder, you need to set the publicPath in vue.config.js
https://cli.vuejs.org/config/#publicpath
I'm trying to host my jekyll static website at github pages and almost everything is working fine. I tried everything to make my CSS generated file (from SASS) to work. But could not do it.
My website is on this URL: http://pedromarins.github.io/
My github repo is here: https://github.com/pedromarins/pedromarins.github.io/
My _config.yml is setted up as
baseurl: ""
and
url: "http://pedromarins.github.io"
also my sass folder is setted up as
sass:
sass_dir: assets/_sass
style: compressed
I can't see what is wrong. If someone could help and point what is wrong I appreciate!
UPDATE 1 - 18h37 29-April-2017
Installed ghpages gem. Now my Gemfile looks like this:
source "https://rubygems.org"
require 'json'
require 'open-uri'
gem 'jekyll'
gem 'github-pages'
gem "json", "2.0.2"
group :jekyll_plugins do
gem 'jekyll-livereload'
end
Ok, after some hours trying to make your site work I found a solution.
What I figured out was that Jekyll only looks for the css directory at root level, so in order to make your site to work properly you need to add the css directory at root level and place in there your style.sass file.
After that, the Jekyll build process will generate the style.css file in that directory, so you just need to include that file in the head.html partial.
<link rel="stylesheet" href="/css/style.css">
And your site will just work as expected, no css rendering problems at all, you can leave your sass dir as assets/_sass with no problem, that directory is just to tell the css/style.sass file that the sass #imports are found in there.
So you can reference them just like you are doing:
---
---
#import "layout"
#import "components/header"
#import "components/now"
...
Now, another workaround is to have your style.sass file in your assets folder, but not in the css folder, just leave it in the assets folder, and access it from your head.html partial as:
<link rel="stylesheet" href="/assets/style.css">
And it will work too.
Just remember to set the correct path for your other non-css assets like images, icons or fonts.
when I tried to create and publish a static web project in eclipse I got: "Error copying file index.html: No such file or directory"
My environment: SuSE 12.2, Eclipse Indigo Release 2, Apache2 2.2.22,
This is what I did to create the project:
1) Create new Server
Basic, HTTP Server
Publishing Directory: /srv/www/htdocs
Enable publishing to this server: true
2) Create Project
New -> Static Web Project
Project Name: Simplepage
Target Runtime: HTTP Server (from 1)
Default Configuration
Content root: Simplepage
Web content folder name: WebContent
3) Create very simple page
Create new HTML file
Parent folder: Simplepage/WebContent
Name: index.html
Content:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=${encoding}">
<title>Insert title here</title>
</head>
<body>
Test
</body>
</html>
4) Start Project
Right Click on Project Name -> Run as -> Run on Server
Here I got the error message mentioned above.
At this point there is a new folder /srv/www/htdocs/Simplepage created but has no content.
Later I made a test with the following configuration:
Change publishing directory to: "/srv/www/htdocs/XY"
Start Project gives error: "Access forbidden! You don't have permission to access the requested directory..."
At this time there is a new directory created: /srv/www/htdocs/XY/Simplepage containing the file index.html.
The window in eclipse is showing the path http://localhost/Simplepage/. When I change this manually to http://localhost/XY/Simplepage/ the newly created page is shown.
I don't understand this behaviour. Can someone explain this?
You have installed Apache2 server on your home computer, with the publishing directory /srv/www
Note that Apache2 runs on its own user (on my Ubuntu it is www-data). Apache's publishing directory /srv/www is normally owned by Apache's user.
You have also directed HTTP Server of Eclipse to the same directory. Note that this server is different from Apache; it is run by Eclipse inside its belly, and usually on different ports from Apache, to avoid port conflict. I think this server is run on the same user Eclipse runs, i.e., your regular user on your home comp.
I think that the error messages you get, are permission mismatch: Eclipse cannot publish in directories owned by Apache's user.
The solution is not to try to use Apache's directories but rather the default directories of Eclipse.
I have explained this in more detail here: Eclipse Web (http) servers: Debugging and publishing http files in Eclipse.
I do use both Eclipse' HTTP Preview server and Apache2:
Eclipse' HTTP Preview server for files I work on in Eclipse, and
Apache2 to run a localhost copy of my Wordpress site.
When files I work on in Eclipse, are mature, I transfer them manually to Wordpress as posts or pages.
I am trying to automate deployments of a particular project and a bit lost as to who to handle config file as well as user assets.
(Application is based on Zend Framework based btw).
Main application folder is structured as follows:
./app
./config.ini <----- config file
./modules
./controllers
./models
./views
./libs
./public
That config file is where all the configs are stored.
So 'app' folder contains whole bunch of code in PHP and 'public' contains whole bunch of code in JavaScript, HTML/CSS and stuff like that(web accessible basically).
If I follow Capistrano's model, where each package is expanded into it's own folder that is then symlinked to, how do I handle that config.ini file?
What about all the user content that is uploaded into ./public folder?
Thanks!
The Capistrano approach to this is to have a structure like this on your remote server:
releases/
20100901172311/
20101001101232/
[...]
current/ (symlink to current release)
shared/
in the shared directory you include your config file and any user generated content (e.g. shared/files). Then on each deployment, once you've checked out the code you automatically create symlinks from the checkout into your relevant shared directories. E.g.:
releases/20101001101232/public/files -> shared/files
releases/20101001101232/application/configs/config.ini -> shared/config.ini
that way, when a user uploads a file to public/files it is actually being stored in shared/files.