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.
Related
This semester, I began learning Vue. Our first "assignment" for the Vue phase was to follow along with, and complete, the instruction provided by a YouTube video from Traversy Media. This video was great to follow, evident that I was able to complete its objective with little difficulty. However, I don't feel that I quite understand the relevance of each file within a Vue project, such as index.js, index.html, *.vue.
I've found a few videos which create a component and then utilize that component. However, I feel completely lost when downloading a component, specifically: 'Vue-Accordion' from github to use as my navigation in conjunction with vue-router. The vue-accordion instructions simply state to add specific code, but doesn't say to which file I should add this code.
I've hacked at it by guessing/assuming a file that I figured relevant to the task, such as app.vue, index.js, and index.html... to no avail. Certainly, I think that a better understanding of a Vue Project's file-structure/hierarchy could give me a better feel in knowing exactly what files are relevant to any task-at-hand that I may have.
Alright so schools in session (sorry if I explain too basic stuff at times, just trying to be thorough).
Here's the basic structure for a Vue project using vue init webpack-simple my-project:
src/
assets/
logo.png
App.vue
main.js
.babelrc
.gitignore
index.html
package.json
README.md
webpack.config.js
The src folder contains all the source files of your project.
The src/assets folder contains all your assets, primarily images.
App.vue is the first "view" of your app.
main.js is the main script of your project where you configure and run Vue. This is where you load anything that should exist in the global scope of your app.
.babelrc configures how the babel tool should syntax check your code.
.gitignore tells Git to ignore certain files from committing.
index.html is the page that's sent to the clients browser. This is where we load the main.js file and put any and all meta data you need (unless you use e.g. vue-meta to handle it there instead). Note that <div id="app"> html tag, this is where all your Vue files get mounted to.
package.json is our npm configuration file. When you run e.g. npm install --save component-from-npm-name it's saved here so you can just run npm install later to get all the dependencies of your project.
README.md is a documentation file in the Markdown language format. It's displayed as the frontpage of your project on e.g. Github or Gitlab.
webpack.config.js is a Node.js file that is responsible for running Webpack on your project. Vue can be used without Webpack but I don't recommend it. You can run node webpack.config.js directly to build your project. This file is your build script, you configured this to handle the build process of your project.
So, armed with this information, lets get to your question.
How do you load a component in Vue.js?
Run npm install --save vue-accordion (note that while the source code is hosted on Github, the package is downloaded from here: https://www.npmjs.com/package/vue-accordion)
In your index.js file, which is responsible for loading things to your Vue app in the global context, you do as the Github page tells you and first import {vueAccordion} from 'vue-accordion', then run Vue.component('vue-accordion', vueAccordion) to register it in the global context.
That's all there is to it. index.jsis your entry point for your Vue app, while webpack.config.js is your build script.
There is however an alternative solution to loading components. In the previous variant we loaded it in index.js to load it in the global context, i.e. you can use the component now anywhere in your app, but what if you only want to load it on an as-is-needed basis (you'd wanna do this for performance reasons)?
Well, in your App.vue file you have a <script> tag where you can configure things in just that Vue component (all .vue files are Vue components, even if you call them routes, pages, views or whatever to indicated their purpose). In order to load a component not in the global context, but the component context, you'd do the following in App.vue:
<script>
import Accordion from 'vue-accordion';
export default {
components: {
'vue-accordion': Accordion
}
</script>
Tips...
This is just one setup for a Vue project. A Vue project can be as simple as just loading Vue as a script to your static index.html file, then you can have a much more annoying setup with regular javascript files, but that's dumb and inefficient. So, a proper project has a Node.js file to run Webpack. Depending on how you configure Webpack your project can act quite differently from any other Webpack project.
Read up more on how Webpack works so you can have a project structure that makes sense for you.
Take a look at Nuxt, it's essentially a collection of other projects (primarily Vue and Webpack) that simplifies the making of a powerful Vue project. You can sit and set up your own Vue project and all the tools yourself and get the same result, but Nuxt makes it simpler for you to do.
To install a specific GitHub repository as a node dependency.
Actually, it doesn't matter if it is a dependency for Vue or React
it is related to setting in the package.json dependency from a GitHub source.
You need to modify your package.json file. In the dependencies section, add the package name as the property name and, as a value, the username of the repository in GitHub and the repository directory.
e.g
"dependencies": {
"#zeratulmdq/vue-accordion": "zeratulmdq/vue-accordion"
}
and then to import the component
import VueAccordion "#zeratulmdq/vue-accordion"
It is not related to your desired repository, but just in case the selected repository package.json file does not point to the correct main property, it will not load the component, so you will need to point to the specific component file to import, e.g:
import VueAccordion "#zeratulmdq/vue-accordion/src/index.js"
or
import VueAccordion "#zeratulmdq/vue-accordion/src/App.vue"
Description
Trying out github pages with a project that files are organized like this:
/index.html
/landingpage/css/styles.css
/vendor/bootstrap/css/bootstrap.css
in index.html including the project's specific css file works:
<link href="landingpage/css/styles.css" rel="stylesheet">
but including vendor's css file doesn't:
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.css">
When loading the page, I get a 200 http response to:
GET https://loicjaouen.github.io/landingpage/landingpage/css/styles.css
and a 404 to:
GET https://loicjaouen.github.io/landingpage/vendor/bootstrap/css/bootstrap.css
Question
What's wrong with including a vendor subdir that prevents github pages from serving files inside vendor?
Reference
https://github.com/loicjaouen/landingpage/tree/original-brokenlinks
first attempt
Move subdir vendor inside existing landingpage.
See code at https://github.com/loicjaouen/landingpage/tree/brokenlinks
That worked... but it was not quite satisfactory to guess that only one subdir could be included.
second attempt
Leave subdir vendor at root level and rename it to other.
See code at: https://github.com/loicjaouen/landingpage/tree/non-vendor-subdir
That worked too: apparently including a subdir named vendor is not allowed
I'd like to build a static website based on the styling of a Wordpress template, Inovado. I downloaded the website using HTTrack (in Linux) with the following command:
httrack http://inovado.hellominti.com
The resulting index.html contains several stylesheets such as the following:
<link rel='stylesheet' id='basic-css' href='http://inovado.hellominti.com/wp-content/themes/inovado/framework/css/basic.css?ver=1' type='text/css' media='all' />
These links are 'absolute' links to http://inovado.hellominti.com. However, I'd like to download those files to a local directory, and adjust the index.html file accordingly.
I've seen that httrack has options such as --get_files which seem like they might enable this, but I wasn't able to figure out how from the documentation. Any ideas? (I'd also be interested in implementing this with wget if that's possible).
I found that the recursive option of HTTrack does this: httrack -r http://inovado.hellominti.com.
(Incidentally, however, I found a simpler bootstrap template at http://www.w3schools.com/bootstrap/bootstrap_theme_company.asp).
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">
I've been trying out Sinatra on my local Windows machine. I want to include some local CSS and JS files. This is how the code looks in layout.erb
<script src="jquery.js" type="text/javascript">
</script>
<link rel="stylesheet" href="reset.css" type="text/css" />
All my files are in the same folder as app.rb
This is my app.rb
require 'rubygems'
require 'sinatra'
get '/' do
erb :index
end
For some reason, I cant see these files included in my pages. When I view the source code and click on the file(JS/CSS) I see that - "Sinatra doesn't know this ditty"- error.
What am I doing wrong here?
Move your static files(css/js) into a folder named public. Sinatra looks there with default settings.
If you want to change that behaviour have a look at this: Static Files
By default Sinatra will look for static files in your public folder. You just need to make a folder called public in the same directory as your Ruby file, and place your JS and CSS files there.