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
Related
How to move my index.html file to 'dist' folder after build? Before npm install and npm run build folder 'dist' s not located in my project it appears after first build and after that I'd like to move automatically my index.html file to this location.
I was searching information on the Internet, found only two thing that attatched to my eyes.
One was "html webpack plugin" but it only creates a new empty index.html folder after build
Second, I found some plug in on github that theoretically can move file to choosen directory but I not working
You can just issue a cp command at runtime. Inside your package.json file, in the scripts section, add an additional command. IE
"scripts": {
...
"build": "react-scripts build && cp build/index.html ../dist/index.html",
...
},
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.
I'm new to Jekyll and I am trying to get a custom theme up and running. Here's is what I've done so far:
Created my Jekyll site. CD to the directory I wanted to install it and ran
bundle exec jekyll serve
These files were created and I was able to see the site locally at the default 4000 port.
I then tried following the instructions here for installing your own theme. I entered this in my terminal:
$ jekyll new-theme skull_and_roses
As the instructions indicated it built out a new directory...
It also added a directory in the _site directory, not sure if that is correct:
I then followed these instructions:
But when I go to run it:
bundle exec jekyll serve --watch
I get an error:
The skull_and_roses theme could not be found.
Like I said, this is my first run at Jekyll so any help would be appreciated.
I also use jekyll theme template (It is a nice template with friendly manual) and customize it to set up my own github page recently.
Beside create repo on github use username (username.github.io), What I did on my mac (locally) are:
set up env for using Jekyll, you can reference: https://jekyllrb.com/docs/
$ git clone https://github.com/username/username.github.io.git (assuming you have already create the repo).
$ cd username.github.io
$ git clone <theme github repo>
put all the theme files into the root of your website files (dir we create in step2)
usually the theme template will have Gemfile, if really not, you can try to create Gemfile and type in:
source 'https://rubygems.org'
gem 'github-pages', group: :jekyll_plugins
After you confirm you have Gemfile, Run
$ bundle install
$ bundle exec jekyll serve
Now, you can enter localhost:4000 or 127.0.0.1:4000 to check the theme can run on local serve.
Then you can mainly modify _config.yml file, like title, author, and other from the theme template instructions. You can check it locally(localhost:4000 or 127.0.0.1:4000) whenever you update something and you want to check the result. Usually changing in _config.yml, you need to restart the jekyll serve (using ctrl+c to stop and run $ bundle exec jekyll serve to restart the service to check the modification. You may need to modify more than _config.yml file to meet your own requirement, at least like about.md or add your own posts in _post.
After you finish modification from theme template and make your own github page you like. You can push the local repo to remote repo (master branch of username.github.io). Btw, if you work locally, you can use branch to test features you want to add, checking result locally and then merge to master when you are satisfied with the result.
Finally, you can check: https://username.github.io and enjoy your own github page.
For your question about _site and other things you may want to know, you may also want to check followings:
Creating and Hosting a Personal Site on GitHub
Quick start & tutorials on jekyll
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.
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.