When I start the browser-sync in the local project folder (just html/css project) using the command:
browser-sync start --server --files "css/*.css"
This starts the website after the following output in the terminal:
[BS] Access URLs:
-------------------------------------
Local: http://localhost:3000
External: http://192.168.1.13:3000
-------------------------------------
UI: http://localhost:3001
UI External: http://192.168.1.13:3001
-------------------------------------
[BS] Serving files from: ./
[BS] Watching files...
When I make changes to the CSS file in this folder nothing happens. When I manually reload the page via command-R the changes occur.
1) What can be causing this ?
EDIT: I have found a partial solution by type following command:
browser-sync start --server --files "*.html"
It now detects changes for index.html. Its not injecting updates from .css files, even when I type following command:
browser-sync start --server --files "*.html CSS/*.css"
My map structure is the following:
project X
+-- CSS
+-- normalize.css
+-- styles.css
+-- IMG
+-- logo.jpg
+-- pages
+-- index.html
2) How can I also make the program listen to changes made in the index.html file ? EDIT: SOLVED
Re #2:
Have you tried adding *.html to the files to be watched?
$ browser-sync start --server --files "css/*.css, *.html"
http://www.browsersync.io/docs/command-line/#files-example
So, I have found the solution for problem 1/2 was the following:
browser-sync start --server --files "*.html css/*.css"
All my folder names needed to be lowercase.
Related
I have a bunch of static files (basically favicons, apple-site-icons, etc) that I want to be at the root of _site when it's built. Currently they're just sitting at the root of my main code folder (along with _posts, _scss, _layouts, etc). It builds fine but it would be nice to move them into a subdirectory so the main directory isn't cluttered up (it's an OCD thing).
Is there any folder where I can put these items so they automatically copy to the root of _site when I build? I know I can write a script to do this and trigger it after the build, and there's probably an extension I could lean on, but I'm looking for a solution that just automatically moves them when I run jekyll build for simplicity.
NBD if I can't do it, just curious because I'm kind of a neat freak.
Thanks!
Jekyll allows you to do exactly that using permalinks.
Permalinks are the output path for your pages, posts, or collections. They allow you to structure the directories of your source code different from the directories in your output.
A simple example extracted from the official page is a case where you have /my-pages/about-me.html with the front matter as follows:
---
permalink: /about/
---
This way you specify the output url. In this example, you could access it in local with localhost:4000/about/
The source option. You can specify this in your _config.yml or as a command line option (https://jekyllrb.com/docs/configuration/options/). How you set this has slightly different requirements/implications.
First, move everything that belongs to the Jekyll site into a folder (e.g. "src").
Then set one of these up (assuming you have a Gemfile):
Command line option with root Gemfile:
Keep Gemfile in the root folder
Run bundle install
Run bundle exec jekyll serve --source src
Command line option with nested Gemfile:
Run BUNDLE_GEMFILE=src/Gemfile bundle install
Run BUNDLE_GEMFILE=src/Gemfile bundle exec jekyll serve --source src
Config file option:
Keep Gemfile and _config.yml in the root folder
Add source: src somewhere in your _config.yml
Run bundle install
Run bundle exec jekyll serve
Each solution here might work better with other external services building your site. There are likely other ways to set this up, but this should get you started.
Everything I've tried already didn't work for me (several sites and videos on youtube). Please, link me with another useful videos or help me understand this process. I found it much easier to deploy the site to GitHub with gh-pages, but I have problems with deploying to GitLab.
Already tried to push my project to GitLab and then CI/CD > Pipelines, where my project built successfully, then Settings > Pages and still 404 (waited more than 1 day). I have installed the ".gitlab-ci.yml" file (with basic HTML settings).
BTW, should I push the pre-built site or already converted?
Right now it is like this:
- src
- fonts
- html
- images
- js
- sass
index.html
.gitattributes
.gitignore
.gitlab-ci.yml
LICENSE
README.md
EDIT: I found solution for my specific problem. As GitLab Pages is a static hosting, before deploying sass files, you need to compile them first and only after you should deploy.
Here is my gitlab-ci.yml file.
image: alpine:latest
stages:
- compile
- deploy
compile:
stage: compile
image: node:8.15-alpine
script:
- yarn global add node-sass
- node-sass ./src/sass/main.scss ./src/css/styles.css --style compressed
only:
- master
artifacts:
paths:
- ./src/css
pages:
stage: deploy
script:
- mv src/ public
artifacts:
paths:
- public
At stage compile notice how i point to my main.scss file path which could be different for you. Also there is path for compiled file styles.css (you need to use your file name of css styles, that is mentioned in <head> section of your main html file). Check path at the artifacts line as well, so you could properly direct your files. For compilation, as you can see, i'm using Yarn (there is no need to install anything to use it). After compiling my sass file, the next stage is to deploy, which works for me as planned.
Hope it helps you as well!
To successfully host your page on Gitlab you need to move your sources to public directory and archive it. Example .gitlab-ci.yml could be:
image: alpine:latest
pages:
stage: deploy
script:
- mv src/ public
artifacts:
paths:
- public
I just installed browser-sync but when I try to start a server I get this error:
terkea#terkea-Lenovo-G50-80:~$ browser-sync start --server --files index.html[Browsersync] Access URLs:
Local: http://localhost:3000
External: http://192.168.1.3:3000
------------------------------------
UI: http://localhost:3001
UI External: http://192.168.1.3:3001
------------------------------------
[Browsersync] Serving files from: ./
[Browsersync] Watching files...
Maybe someone could find what's wrong and help me please?
You probably need to pass an argument to --server which is the directory from which you want to serve the files from. Browser-sync uses your current working directory by default.
So for example, if you're starting browser-sync in the root directory of your project, and your index.html is in folder a/b/c/index.html, then the browser-sync command will be:
browser-sync start --server "a/b/c/" --files "index.html"
You must specify the folder in which your files are located. I use ubuntu 18.04 and it works.
For example, if you want to open all files in directory /home/user/code you must write this command:
browser-sync start --server "/home/user/code/" --files "*.*"
I just used browser-sync for the first time and experienced the same problem. I was expecting it to serve a directory listing like http-server does but that only happens if you add the --directory flag. Otherwise if you want it to open a specific file then specify it with --index.
browser-sync start --server --directory serves a directory listing
browser-sync start --server --index "test.html" serves test.html
I'm using Jekyll 3.1.1 to generate a blog and I recently introduced a Git hook to automatically publish changes pre-push.
After introducing this hook, I have started getting the following error when I run jekyll serve:
Configuration file: /Users/egillespie/Projects/blog.givingjar.org/_config.yml
Source: /Users/egillespie/Projects/blog.givingjar.org
Destination: /Users/egillespie/Projects/blog.givingjar.org/_site
Incremental build: disabled. Enable with --incremental
Generating...
done in 0.223 seconds.
** ERROR: directory is already being watched! **
Directory: /Users/egillespie/Projects/blog.givingjar.org/node_modules/git-scripts/bin/hooks
is already being watched through: /Users/egillespie/Projects/blog.givingjar.org/node_modules/git-scripts/bin/hooks
MORE INFO: https://github.com/guard/listen/wiki/Duplicate-directory-errors
Auto-regeneration: enabled for '/Users/egillespie/Projects/blog.givingjar.org'
Configuration file: /Users/egillespie/Projects/blog.givingjar.org/_config.yml
Server address: http://127.0.0.1:4000/
Server running... press ctrl-c to stop.
What's peculiar is that I am excluding node_modules in _config.yml:
exclude:
- Gemfile
- Gemfile.lock
- LICENSE
- README.md
- package.json
- Gruntfile.js
- node_modules
node_modules is correctly being excluded from building (i.e. there is no node_modules subdirectory in _site).
I'm also excluding node_modules in .gitignore:
# project
node_modules
_site*
.sass-cache
.jekyll-metadata
# general
.DS_Store
Thumbs.db
ehthumbs.db
Based on this GitHub issue and this commit it seems like node_modules should be excluded from the watch, but it's not. I can't decipher from the documentation if there's another way to exclude files from the watch.
What is the proper way for me to exclude a directory from the watch and avoid the error described above?
The value for exclude parameter in _config.yml should be an array i.e.
exclude: ['_site', 'node_modules', ...]
Source: Jekyll Documentation - Configuration
Judging by the paths displayed in your output, you're on macOS. The jekyll-watch gem is responsible for this area (watch/rebuild features), which itself depends on the 'listen' gem. The listen gem itself uses the rb-inotify gem as a dependency, which has several issues with macOS specifically and its filesystem. This results in several bugs in regeneration behaviour that aren't not easy to fix. Background and relevant bugs:
https://github.com/guard/listen/issues/274
https://github.com/guard/listen/pull/273
You can try using the 'polling' method: https://github.com/guard/listen#listen-adapters instead, but it's much slower.
Try this to your _config.yml:
keep_files: [node]
where node is a folder to exclude from the --watch. What this will do is keeping the folder node untouched by jekyll build. Then add all files that you want to keep in the site root but not rendered by Jekyll.
I am trying to use Jekyll together with Compass.
On one command line I'm running jekyll --auto and in another one compass watch.
The SASS files are located in /stylesheets and are compiled into /_site/stylesheets.
Jekyll is configured to ignore /stylesheets.
Compiling the stylesheets works fine in the beginning, but everytime I change something that makes Jekyll regenerate the site, it overwrites the whole /_site folder and /_site/stylesheets is gone. Compass doesn't regenerate it since the source SASS files haven't changed.
Is there another way to use Jekyll together with Compass?
Can I configure Jekyll to not overwrite the complete output folder but just the files that changed?
Im using Jekyll & Compass for my github page. here: https://github.com/ardianzzz/ardianzzz.github.com
Simple,
I just put the generated css folder in the root folder. Jekyll will generate the file inside _site folder.
As you can see in my repository.
Just call the CSS with the following code
<link href = "/css/screen.css" ...
bad english, sorry. :)
The issue is that Jekyll, when run, scraps all the contents of the _site directory. The way I got around this was to use rake for deployment, and then have the following in my rakefile:
task :generate => :clear do
sh 'jekyll'
sh 'compass compile'
end
I then just run:
$ rake generate
Which populates the jekyll directory, and then puts the compass files over.
A neater solution might be to make your compass -watch process (assuming that is what you are running) compile the compass to projectdir/css. When you then run jekyll it will just pull that css directory directly into _site/css and you're done, no problems (see below for dir structure).
projectdir/
css/
stylesheets/
If you put anything in _site/css and then run jekyll after it will be removed, so you either need to run compass after, or put the compass files into the css folder in the root directory, and then jekyll will just copy the files correctly.