I have a Jekyll blog at example.com and want the path example.com/doc to point to a static file (a pdf, in particular). Jekyll alias generators seem to work only for individual posts, not static files.
What's the trick?
Step 1. Create a directory 'doc' in your root.
Step 2. Create an index.html in this directory with a meta redirect in the head like this:
<!DOCTYPE html>
<html>
<head>
<title>You are being redirected</title>
<meta http-equiv="refresh" content="0; url=filename.pdf">
</head>
<body>You are being redirected... if not, click here.</body>
</html>
Step 3. Put the filename.pdf file next to your index.html.
alias alpha/beta => omega
Create folder _alpha/beta
update _config.yml
includes_dir: _alpha
collections:
alpha:
collections_dir: _alpha/beta
output: true
permalink: /omega/:name
Related
I have a website like www.site.com, I used languages on it:
https://www.example.com/en/dashboard.html
https://www.example.com/es/dashboard.html
https://www.example.com/fr/dashboard.html
https://www.example.com/de/dashboard.html
And I am using a base href url:
<base href="www.site.com/">
If I call a css file or a js file such as:
<link rel="stylesheet" href="assets/css/bootstrap-4.5.0.min.css">
It give that the file does NOT exists, when I check the source code and click on that file, I follow to the below url:
https://www.example.com/en/assets/css/bootstrap-4.5.0.min.css
However files are under root domain:
/home/site/www/assets/css/bootstrap-4.5.0.min.css
Not under all languages.
So can I call these files to have a url like this, without language code:
https://www.example.com/assets/css/bootstrap-4.5.0.min.css
My project isn't working when I name a folder 'components', if I named any other name('component', 'pasta', 'templates') it works. The route names are fine, this ONLY happens when the folder it's named 'components'.
I'm using lit-element in this project
It works
Doesn't work
Steps to reproduce
npm i lit-element
touch index.html // Create a HTML file in the root folder
mkdir components // Create a folder where JS components will be
touch main.js // Create a component file
cd ..; polymer serve // Go back one directory and run the project
import { LitElement, html } from 'lit-element';
class MyElement extends LitElement {
render() {
return html`<p>template content</p>`;
}
}
customElements.define('my-element', MyElement);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type="module" src="./components/main.js"></script>
<title>lit-element code sample</title>
</head>
<body>
<my-element></my-element>
</body>
</html>
NOTE this snippet code doesn't run in StackOverflow, create the project and reproduce it.
Change the name of the 'components' folder to any name you want, then change the route in the index.html file.
As you can see from the log, polymer serve reserves a namespace starting with components/ for serving reusable components (a legacy of Polymer's old bower_components dependency management). This prevents your components folder from being served correctly. The namespace should be configurable through the --component-url option, although it doesn't seem to work.
You can either
use polyserve directly and change the component url:
$ npm i -g polyserve
$ polyserve --component-url mycustomcomponenturl
use another dev server: open-wc's es-dev-server is a great alternative, also cited by the lit-html docs.
I am using GitHub pages to publish files from a project. These files are Java source code files, which I have been able to add as static files into Jekyll as a collection. I would need to apply a layout to these files for, e.g., code formatting. I am unable to do this.
My static source code files are in a collection defined in _config.yml:
collections_dir: material
collections:
cse-solutions:
output: true
This part of my site works fine: .java-files under material/_cse-solutions appear on the static site into /cse-solutions.
However, I would need to include a title and code formatting. For this I am trying to apply a layout to these static files. My current effort is the following. First, in _config.yml I set
defaults:
- scope:
path: ""
type: "cse-solutions"
values:
layout: java-code
Then I have a file _layouts/java-code.html with contents, for simplicity at this point
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test title </title>
</head>
<body>
<h1> Test code page heading </h1>
{{ content }}
</body>
</html>
However, this layout has no effect on the .java files on the site. To be honest, if the layout were effective, I do not know whether the output would even have .java-suffix. Still, I can not find any corresponding .html-pages on the site either.
Can this be done? If it can, what am I doing wrong?
EDIT: I suspect Jekyll just ignores layout for static files. Using jsonify from Liquid I can actually print the value of this collection, and there I can see that the system has correctly set, for these static files:
”layout”:”java_code”
But there is absolutely no effect in the formatting of these files.
(The underscore, that is, java_code instead of java-code is not an error here, because I noticed that some parts of Jekyll do not like dashes in identifiers, so I changed dashes to underscores everywhere. I think Ruby does not allow dashes in identifiers.)
I think you may be over complicating things a bit. If I understand correctly, you are trying to simply display the actual source code on your page correct? For example you would like your code to look like:
class HelloWorld
{
public static void main(String args[])
{
System.out.println("Hello, World");
}
}
If this is the case, you can simply save the written source code as a markdown file (.md) and let the kramdown mardkown converter handle displaying it correctly. To do this you need to make sure that you have the following in your _config.yml file:
kramdown:
# Use GitHub flavored markdown, including triple backtick fenced code blocks
input: GFM
# Jekyll 3 and GitHub Pages now only support rouge for syntax highlighting
syntax_highlighter: rouge
This will make sure kramdown is enabled and will use rouge for syntax highlighting if you would like.
Then for each page you want, simply create a pagename.md file and add at least the following front matter at the very top of the page:
---
layout: java-code
title: "Here is my source code page"
---
This tells jekyll to use the "java-code" layout you already made and to define the title for the page as whatever you put in the quotes. After the front matter, simply copy your source code into a code block for markdown. It is very simple, all you need to do is have a line with ``` before and after you code. You can optionally have the first line be ```java to tell rouge to highlight for java syntax to make it easier to read.
You can put any markdown text outside of the code block that you would like as well. That means you can have a description of the code, or even break the code into segments with text descriptions before each part.
To put it all together you file should look something like:
---
layout: java-code
title: "Here is my source code page"
---
Here is my simple "Hello, world" program:
```java
class HelloWorld
{
public static void main(String args[])
{
System.out.println("Hello, World");
}
}
```
Check out the docs page for posts on jekyll's website for more info, and if you are unfamiliar with markdown there are tons of guides on writing with it if you do a quick google search (its how stackoverflow answers are formatted!).
I've cloned the PerfectTemplate project and am using it to serve up html as follows…
import PerfectHTTP
import PerfectHTTPServer
var routes = Routes()
routes.add(method: .get, uri: "/test") { request, response in
response.addHeader(.contentType, value: "text/html")
response.setBody(string: """
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test!</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="Welcome">Hello</div>
</body>
</html>
""")
response.completed()
}
routes.add(method: .get,
uri: "/**",
handler: StaticFileHandler(documentRoot: "./webroot", allowResponseFilters: true).handleRequest)
try HTTPServer.launch(name: "localhost",
port: 8181,
routes: routes,
responseFilters: [(PerfectHTTPServer.HTTPFilter.contentCompression(data: [:]), HTTPFilterPriority.high)])
I'm compiling and running with Xcode, and http://localhost:8181/test is returning the html as expected.
The problem is the location of the external css file. As far as I can tell this should be in a folder called webroot, but where should that folder be when running locally?
For reference, I'm coming at this as an iOS dev, so my knowledge of web development and server config is limited.
Update
Per a suggestion on the Perfect Slack group, I added the css file to the project folder (the same folder as Package.swift), and set the Working Directory of the scheme $(PROJECT_DIR) - but I’m getting a 404 trying to load http://localhost:8181/style.css
With help from the Perfect Slack group, I found a solution. The missing piece for me was the webroot folder. I'd assumed this was some kind of alias, but it turns out that you do need to create an actual folder called webroot. So…
Set the Working Directory of the scheme to $(PROJECT_DIR)
In the project folder, create a folder named webroot and add the css file to that folder. It should look like this…
I'm sure all the seasoned web devs are laughing at me right now!
doctype html
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
script(src="/javascripts/jquery-2.1.1.js")
script(src="/javascripts/global.js")
body
block content
Apparently, src="/../public/javascripts/jquery-2.1.1.js" doesn't work, but src="javascripts/jquery-2.1.1.js" works
The file structure is like so:
nodetest
public
javascripts
jquery-2.1.1.js
views
index.jade
Unless Jade actually creates index.html within the public folder? Is this correct?
first jade doesn't actually save an index.html to disk, it generates it on the fly during the request response cycle
second, by default, express is set up to treat public/ as the root directory for static files, so your reference to /javascripts/jquery-2.1.1.js points to public/javascripts/jquery-2.1.1.js
if you tried to load /views/index.jade or /index.jade it would 404 because Express won't find any matching static file
and finally src="/javascripts/jquery-2.1.1.js" (i.e. with a leading slash) should probably be how you reference it, because otherwise it's gonna look for child folders according to your url. (like, if you have js/jquery.js on the page my.domain/parent/child.html, the request would go to my.domain/parent/js/jquery.js